/*
 * Buttons and links (VISUAL_ACCEPTANCE.md B01–B06, FCT_WEB_SPEC.md §10).
 *
 * Three pill variants, flat as in the reference (no shadow, no gloss):
 *   primary  Learning Gold, dark text        core button default, .fct-button
 *   outline  teal text and outline           .is-style-outline, .fct-button--outline
 *   dark     Deep Forest Teal, light text    .is-style-dark, .fct-button--dark
 *
 * The same rules serve the core Button block and server-rendered links such as
 * the header contact button, so both are one component.
 *
 * Size from the reference: the pill is ≈2.7× the calibrated lock-up text tall
 * (≈50 px) with wide side padding (qa/reference-map.md §8). The arrow is a
 * masked pseudo-element without text, so it is never announced (B05). Hover
 * changes colour and moves only the arrow, 2 px: never the layout (§10).
 */

:root {
	--fct-button-height: 52px;
	--fct-button-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12.5M10.5 4.5 16 10l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wp-block-button__link,
.fct-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: var(--fct-button-height);
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: 28px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-align: start;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/*
 * Long labels wrap inside the pill instead of clipping (B02). Long Dutch
 * compounds hyphenate at syllable boundaries rather than break mid-syllable
 * (T05); break-word only steps in when no hyphenation point exists.
 */
.wp-block-button__link,
.fct-button {
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

.wp-block-button__link::after,
.fct-button::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--fct-button-arrow) center / contain no-repeat;
	mask: var(--fct-button-arrow) center / contain no-repeat;
	transition: transform 180ms ease;
}

.wp-block-button__link:hover::after,
.fct-button:hover::after {
	transform: translateX(2px);
}

.wp-block-button__link:active,
.fct-button:active {
	transform: translateY(1px);
}

/* Primary. */
.wp-block-button__link:hover,
.fct-button:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 86%, var(--wp--preset--color--forest));
	color: var(--wp--preset--color--charcoal);
}

/* Outline (secondary). */
.wp-block-button.is-style-outline > .wp-block-button__link,
.fct-button--outline {
	border-color: var(--wp--preset--color--forest);
	background-color: transparent;
	color: var(--wp--preset--color--forest);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.fct-button--outline:hover {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--forest);
}

/* Dark. */
.wp-block-button.is-style-dark > .wp-block-button__link,
.fct-button--dark {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--warm-white);
}

.wp-block-button.is-style-dark > .wp-block-button__link:hover,
.fct-button--dark:hover {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--warm-white);
}

/* Focus: a clear ring outside the pill, never clipped by the button itself (B04). */
.wp-block-button__link:focus-visible,
.fct-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--forest);
	outline-offset: 3px;
}

/* On dark fields the ring turns light. */
:where(.has-forest-background-color, .fct-footer) :is(.wp-block-button__link, .fct-button):focus-visible {
	outline-color: var(--wp--preset--color--warm-white);
}

/* ------------------------------------------------------------------------- */
/* Text links                                                                */
/* ------------------------------------------------------------------------- */

/*
 * Body links stay underlined, so they are never recognisable by colour alone
 * (B05). Hover thickens the line and turns it Gold; the text colour itself
 * stays Forest, which keeps the contrast.
 */
:where(.wp-block-post-content, .entry-content, .fct-prose) a:where(:not(.wp-block-button__link, .fct-button)) {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 150ms ease;
}

:where(.wp-block-post-content, .entry-content, .fct-prose) a:where(:not(.wp-block-button__link, .fct-button)):hover {
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 3px;
}

/*
 * Arrow link: the quiet "Lees case →" of R3 and R6. Plain text with a trailing
 * arrow; used where a button would compete with the primary action (B03).
 */
.fct-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--charcoal);
	font-weight: 500;
	text-decoration: none;
}

.fct-arrow-link::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--fct-button-arrow) center / contain no-repeat;
	mask: var(--fct-button-arrow) center / contain no-repeat;
	transition: transform 180ms ease;
}

a.fct-arrow-link:hover,
:hover > .fct-arrow-link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

a.fct-arrow-link:hover::after,
:hover > .fct-arrow-link::after {
	transform: translateX(2px);
}