/* Secondary/Outline button interactive states — Figma node 33727:411.
   Base + Primary button states are set in theme.json (elements.button, blocks.core/button.variations.outline);
   theme.json cannot express pseudo-class overrides on a block style variation, so those live here.
   theme.json also has no `transition` support, so the state-change animation lives here too — covers
   both Primary and Outline since both are .wp-block-button__link. */
.wp-block-button__link {
	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}
}

/* Full-width buttons on mobile. The width is set on core's .wp-block-button wrapper too, since it
   is inline-block and the link's 100% would otherwise resolve against a shrink-wrapped box. The
   filter pills are .wp-block-button__link as well and must stay inline or their slider collapses. */
@media (max-width: 781px) {
	.wp-block-button {
		width: 100%;
	}

	.wp-block-button__link {
		/* Flex, not block, so the 44px floor below centres the label instead of stranding it at the
		   top of a taller box. The trailing-arrow ::after stays in flow as a second flex item, which
		   is where it already sat as an inline box. */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
		/* Touch target floor. Buttons measured 40-42px, under the 44px minimum (issue #288). */
		min-height: 44px;
	}

	/* Stacked buttons sit 12px apart; core's blockGap default was leaving 24px (issue #288). The
	   pill row is a .wp-block-buttons too and keeps its own rhythm -- it is a horizontal scroller,
	   not a stack. */
	.wp-block-buttons:not(.bpd-pill-row) {
		gap: var(--wp--preset--spacing--300);
	}

	/* A button group sits 24px below the content it follows. The gap was whatever blockGap the
	   surrounding group happened to carry -- measured 28, 32, 44 and 48 across the site, with only
	   9 of 24 groups actually at 24 (issue #289). Every offender inherits it as a plain margin-top
	   in a flow-layout parent, so overriding the margin is exact: no flex gap is involved anywhere,
	   and nothing double-spaces.

	   :not(:first-child) because a group that opens its container has no preceding content to space
	   away from, and blockGap would never have applied there either. The pill row is excluded for
	   the same reason as above -- it is a scroller, not a call to action.

	   Scoped to the layouts that space with MARGINS. Measured across seven pages: constrained
	   parents hold every offender (24, 28, 32, 44 and 48 all appear), flow parents are already 24,
	   and grid parents space with row-gap -- adding a margin there stacked on top of the gap and
	   measured 48px on Who we are and Challenges we solve. */
	.is-layout-constrained > .wp-block-buttons:not(.bpd-pill-row):not(:first-child),
	.is-layout-flow > .wp-block-buttons:not(.bpd-pill-row):not(:first-child) {
		margin-top: var(--wp--preset--spacing--600);
	}

	.bpd-pill-row .wp-block-button,
	.bpd-pill-row .wp-block-button__link {
		display: inline-block;
		width: auto;
	}
}

/* "Has arrow" block style — trailing arrow (geometry from assets/icons Right Arrow.svg) drawn via mask so it inherits the
   label color in every button state. Registered in functions.php. The mask geometry is the shared --bpd-arrow-icon
   custom property (defined once in header-footer.css, sitewide-loaded) so this 384x384 data-URI isn't repeated here. */
.wp-block-button.is-style-arrow > .wp-block-button__link::after,
.wp-block-button.is-style-outline-arrow > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: var(--wp--preset--spacing--200);
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: var(--bpd-arrow-icon) no-repeat center / contain;
	mask: var(--bpd-arrow-icon) no-repeat center / contain;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-arrow > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--blue-700);
	border-color: var(--wp--preset--color--blue-700);
	color: var(--wp--preset--color--neutral-100);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active,
.wp-block-button.is-style-outline-arrow > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--blue-800);
	border-color: var(--wp--preset--color--blue-800);
	color: var(--wp--preset--color--neutral-100);
}

.wp-block-button.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-outline-arrow > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--surface-invert-secondary);
	border-color: var(--wp--preset--color--green-700);
	border-width: var(--wp--custom--border--md);
	color: var(--wp--preset--color--neutral-100);
	outline: none;
}