/**
 * Block style variations.
 *
 * Registered in inc/blocks.php. Loaded on the front end AND in the editor, so a
 * merchant sees the same thing while building as a shopper sees afterwards --
 * an editor that renders a variation differently is worse than not offering it.
 *
 * Every value is a token, so these repaint with the merchant's palette like the
 * rest of the theme (golden rule 1).
 */

/* ── core/group: Card ────────────────────────────────────────────────────*/
.wp-block-group.is-style-haat-card {
	padding: 1.5rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
}

/* ── core/image: Rounded ─────────────────────────────────────────────────*/
.wp-block-image.is-style-haat-rounded img {
	border-radius: var( --haat-radius-lg );
}

/*
 * ── core/button: Quiet outline ──────────────────────────────────────────
 *
 * The same reasoning as the product card's action button (golden rule 14): a
 * page with several calls to action should have ONE that carries the accent.
 * This is the variation for the others.
 */
.wp-block-button.is-style-haat-quiet .wp-block-button__link {
	color: var( --haat-foreground );
	background: transparent;
	border: 1px solid var( --haat-border );
}

.wp-block-button.is-style-haat-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-haat-quiet .wp-block-button__link:focus {
	color: var( --haat-primary );
	background: transparent;
	border-color: var( --haat-primary );
}

/* ── core/quote: Review ──────────────────────────────────────────────────*/
.wp-block-quote.is-style-haat-review {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-inline-start: 3px solid var( --haat-primary );
	border-radius: var( --haat-radius-md );
	font-style: normal;
}

.wp-block-quote.is-style-haat-review cite {
	display: block;
	margin-top: 0.75rem;
	font-size: var( --haat-text-sm );
	font-style: normal;
	color: var( --haat-muted-foreground );
}