/*
 * components/buttons.css — core/button style variations.
 *
 * The variations are NAMED in functions.php (register_block_style) and their
 * colours come from theme.json (styles.elements.button and
 * styles.blocks.core/button.variations). Only what theme.json cannot express
 * belongs here: border colours on variations, padding removal, the hover
 * animation, and sizing modifiers.
 *
 * Figma spec — Button variant set, node 3005:1083. Shared across all variants:
 * padding 16px 32px, radius 6px, 14px/20px bold uppercase, 8px icon gap.
 * Those live in theme.json. The per-variant colours are:
 *
 *   Primary    #0074c8  → hover #0063ab   white text
 *   Secondary  #6b7280  → hover #374151   white text
 *   Outline    transparent, 1px #6b7280 border, #222 text
 *              → hover fills #374151, text goes white
 *   Link       no fill, no padding, #0074c8 text
 *
 * Disabled is opacity 0.5 for all four.
 */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;

	/*
	 * position/overflow/z-index exist for the ::after wipe below: the veil is
	 * absolutely positioned against this box, clipped to the 6px radius, and
	 * sits behind the label at z-index -1.
	 */
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition:
		background-color var( --fcs-transition ),
		color var( --fcs-transition ),
		border-color var( --fcs-transition );
}

/*
 * The wipe.
 *
 * Adapted from an earlier GoldenComm build. Two changes from that original:
 *
 * 1. The veil colour is a custom property, not a hardcoded rgba(0,0,0,0.15).
 *    Flat black muddies the #0074c8 primary fill and does nothing at all on
 *    the transparent Outline and Link variants, which have no ground for it
 *    to darken. Each variant sets its own --fcs-button-wipe below.
 * 2. border-radius: inherit, so the veil respects the button's 6px corners
 *    instead of squaring them off mid-animation.
 */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var( --fcs-button-wipe, rgb( 0 0 0 / 15% ) );
	transform: scaleX( 0 );
	transform-origin: right;
	transition: transform var( --fcs-sweep-button );
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	transform: scaleX( 1 );
	transform-origin: left;
}

/* Primary — a white veil lifts the blue rather than dirtying it. */
.wp-block-button.is-style-primary > .wp-block-button__link,
.wp-block-button:not( [class*="is-style-"] ) > .wp-block-button__link {
	--fcs-button-wipe: rgb( 255 255 255 / 18% );
}

/* Secondary — grey ground, so darken. */
.wp-block-button.is-style-secondary > .wp-block-button__link {
	--fcs-button-wipe: rgb( 0 0 0 / 20% );
}

/*
 * Outline — transparent fill, grey border, dark text. theme.json has no border
 * colour field for button variations, so the whole variation lives here.
 * On hover it fills solid #374151 and the text flips to white.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	--fcs-button-wipe: var( --wp--preset--color--button-secondary-hover );

	background-color: transparent;
	color: var( --wp--preset--color--foreground );
	border: 1px solid var( --wp--preset--color--button-secondary );
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: var( --wp--preset--color--on-primary );
	border-color: var( --wp--preset--color--button-secondary-hover );
}

/*
 * Link — the "Discover more" treatment on cards. No fill, no padding, no
 * radius; reads as a link but keeps the button's uppercase 14px bold type.
 * The wipe would have nothing to cover, so it gets an underline instead,
 * matching the link idiom in components/links.css.
 */
.wp-block-button.is-style-link > .wp-block-button__link {
	background-color: transparent;
	color: var( --wp--preset--color--link );
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.wp-block-button.is-style-link > .wp-block-button__link::after {
	inset: auto 0 calc( var( --fcs-underline-gap ) * -1 ) 0;
	height: var( --fcs-underline-size );
	background: currentcolor;
	border-radius: 0;
	transition: transform var( --fcs-sweep-link );
}

.wp-block-button.is-style-link > .wp-block-button__link:hover,
.wp-block-button.is-style-link > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var( --wp--preset--color--link );
}

/* On a dark photographic background (hero), outline buttons go white. */
.fcs-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var( --wp--preset--color--background );
	border-color: var( --wp--preset--color--background );
}

.fcs-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.fcs-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: var( --wp--preset--color--foreground );
	border-color: var( --wp--preset--color--background );
}

.fcs-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	--fcs-button-wipe: var( --wp--preset--color--background );
}

/* Disabled — Figma renders every variant at 50%. */
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-disabled > .wp-block-button__link {
	opacity: 0.5;
	pointer-events: none;
}

/*
 * Full-width buttons on Small.
 *
 * Figma stacks the action buttons full-width on mobile. Two patterns were each
 * carrying their own copy of this rule, and both set only `width: 100%` — which
 * stretches the box but leaves the LABEL at the start, because the base rule
 * above is `display: inline-flex` with no justification. The result was a
 * full-width button with its text hard against the left padding.
 *
 * So the rule lives here once, for every pattern, and centres as well as
 * stretches. Adding a pattern needs no CSS: any .wp-block-buttons goes
 * full-width on Small.
 *
 * WHY is-style-link IS EXCLUDED
 * -----------------------------
 * "Discover more" on a card is a link, not a button — no fill, no padding, no
 * box to stretch. Making it 100% wide would pull its underline the full width
 * of the card and centre text that the design left-aligns.
 *
 * WHY max-width
 * -------------
 * CLAUDE.md makes min-width the primary mechanism, and it is. But "full width
 * on Small only" has an upper bound, and min-width cannot express one without
 * restating the default at 768. Same exception the two pattern files already
 * documented; this consolidates them rather than adding a third.
 */
@media ( max-width: 767px ) {
	.wp-block-buttons > .wp-block-button:not( .is-style-link ),
	.wp-block-buttons > .wp-block-button:not( .is-style-link ) > .wp-block-button__link {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button:not( .is-style-link ) > .wp-block-button__link {
		justify-content: center;
		text-align: center;
	}
}

/* Size modifiers, applied as an extra class on the button block. */
.wp-block-button.fcs-button--small > .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-button.fcs-button--full > .wp-block-button__link {
	justify-content: center;
	width: 100%;
}