/* ============================================================
 * BIOTA · PRIMITIVE · Buttons
 * Base shape (radius, padding, weight) comes from theme.json's button
 * element style. Here we add: a full-width stacked action layout, and
 * the colour variants used across sections. Apply a variant class on the
 * wp:button block (its wrapper is .wp-block-button).
 * ============================================================ */

/* Vertical, full-width action stack. */
.wp-block-buttons.biota-actions--stacked {
	display: flex;
	flex-direction: column;
	gap: 10px; /* stacked buttons read as a pair (now that WP's block-gap is beaten) */
}
.biota-actions--stacked .wp-block-button,
.biota-actions--stacked .wp-block-button__link {
	width: 100%;
}
/* Desktop: lay actions side by side at their natural pill width.
 * Mobile keeps them stacked full-width (easier to tap). */
@media (min-width: 601px) {
	.wp-block-buttons.biota-actions--stacked {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.biota-actions--stacked .wp-block-button,
	.biota-actions--stacked .wp-block-button__link {
		width: auto;
	}
}

/* Single full-width button. */
.biota-btn--block,
.biota-btn--block .wp-block-button__link {
	width: 100%;
}

/* Fixed label size (16px). Our global fluid typography would otherwise shrink
 * button text to ~14px on phones; pin it so labels stay consistent. The header's
 * .biota-btn--sm keeps its smaller size via higher specificity. */
.wp-block-button__link.wp-element-button {
	font-size: var(--wp--preset--font-size--body-lg);
}

/* --- One box for every action button ---------------------
 * The hero pair reads well, so it is the reference: theme.json's base button
 * (32px radius, 20/32 padding, 16px/500). The other bands had each drifted to
 * their own size — 44, 48, 50, 52 and 59px tall, across three corner radii —
 * so nothing lined up between sections.
 *
 * Their colour, icons and borders are untouched; only the box is shared. The
 * explicit min-height with border-box is what makes a bordered button exactly
 * as tall as a filled one, instead of the 2px taller it would otherwise be. */
.wp-block-button.biota-btn--fill-light > .wp-block-button__link,
.wp-block-button.biota-btn--ghost-light > .wp-block-button__link,
.wp-block-button.biota-btn--fill-primary > .wp-block-button__link,
.wp-block-button.biota-btn--outline > .wp-block-button__link,
.wp-block-button.biota-storebtn > .wp-block-button__link,
.wp-block-button.biota-help__cta > .wp-block-button__link {
	box-sizing: border-box;
	min-height: 61px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Transparent rather than none: a filled button then has the same box as a
	 * bordered one, so the two sit at identical heights side by side. Variants
	 * that draw a real border override the colour below. */
	border: 1px solid transparent;
}

/* --- Hover / focus ---------------------------------------
 * The parent theme (promotion-lite) sets a global button :hover using palette
 * slugs our child theme.json doesn't define (blue-700 / white), so its hover
 * background resolves to nothing → the button goes transparent. Re-assert each
 * button's own colours on hover and add a subtle darken for feedback. */
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	filter: brightness(0.93);
}
.biota-btn--fill-light .wp-block-button__link:hover,
.biota-btn--fill-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
}
.biota-btn--ghost-light .wp-block-button__link:hover,
.biota-btn--ghost-light .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--base);
}
.biota-btn--ghost-primary .wp-block-button__link:hover,
.biota-btn--ghost-primary .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}
.biota-btn--whatsapp-primary .wp-block-button__link:hover,
.biota-btn--whatsapp-primary .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--base);
}
.biota-btn--whatsapp-muted .wp-block-button__link:hover,
.biota-btn--whatsapp-muted .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text-strong);
	filter: brightness(0.97);
}

/* Filled, white surface + navy ink (on dark/photographic backgrounds). */
.wp-block-button.biota-btn--fill-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text); /* Figma: near-black ink (#1A1A1A), not navy. */
	border-color: transparent;
}

/* Ghost "frosted glass" (on dark/photographic backgrounds): a faint white
 * fill + soft white border + backdrop blur (Figma spec). */
.wp-block-button.biota-btn--ghost-light .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(255, 255, 255, 0.32);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Filled action blue (on light backgrounds). Named --fill-primary for its role
   as the page's primary action, not for the navy it used to be. */
.wp-block-button.biota-btn--fill-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

/* Ghost navy (on light backgrounds). */
.wp-block-button.biota-btn--ghost-primary .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
}

/* Outline (white surface + subtle grey border + navy ink, on light backgrounds).
   Colour only — the box comes from theme.json's base button, same as the hero. */
.wp-block-button.biota-btn--outline .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 1px solid #d5d9e0; /* Mischka (Figma) */
}
.biota-btn--outline .wp-block-button__link:hover,
.biota-btn--outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--surface-light);
	color: var(--wp--preset--color--primary);
}

/* WhatsApp — primary (green fill). */
.wp-block-button.biota-btn--whatsapp-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--base);
	border: none;
}

/* WhatsApp — muted (white pill, grey border/text, green glyph). For secondary
 * placement next to a stronger CTA. Colour + icon treatment only; size comes
 * from --block / context, like the other button variants. */
.wp-block-button.biota-btn--whatsapp-muted .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text-strong);
	border: 1px solid var(--wp--preset--color--control-border);
	border-radius: 999px;
}
.biota-btn--whatsapp-muted .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 3C9 3 3.5 8.5 3.5 15.5c0 2.2.6 4.3 1.7 6.2L3 29l7.5-2c1.8 1 3.9 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm0 22.8c-1.9 0-3.7-.5-5.3-1.5l-.4-.2-4.4 1.2 1.2-4.3-.3-.4a10.3 10.3 0 0 1-1.6-5.6C5.2 9.6 10 4.8 16 4.8s10.8 4.8 10.8 10.7S22 25.8 16 25.8zm6-8c-.3-.2-1.9-1-2.2-1-.3-.1-.5-.2-.7.1s-.8 1-1 1.2-.4.2-.7 0a8.8 8.8 0 0 1-2.6-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.5l-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4a3.6 3.6 0 0 0-1.1 2.7c0 1.6 1.2 3.2 1.3 3.4.2.2 2.3 3.6 5.7 5 3.4 1.3 3.4.9 4 .8.6 0 1.9-.8 2.1-1.5.3-.8.3-1.4.2-1.5l-.6-.3z'/%3E%3C/svg%3E");
}

/* Centered single action (e.g. a "compare all" link under a rail). */
.biota-actions--center {
	display: flex;
	justify-content: center;
}

/* Small button (e.g. a header CTA). */
.wp-block-button.biota-btn--sm .wp-block-button__link {
	font-size: var(--wp--preset--font-size--body);
	padding: 10px 22px;
}