/* ============================================================================
   BUTTONS, LINKS & CTAs

   Three variants, and that is the whole system:

     .btn .btnPrimary    filled red      the one real call to action
     .btn .btnSecondary  filled neutral  the companion action
     .btn .btnGhost      outlined        the quiet third option

   There is deliberately no "on dark" or "inverse" variant. A container that is
   always dark (the CTA bands, the footer, the red hero) declares
   `color-scheme: dark`, and every one of these resolves to its dark recipe on
   its own. See the scoped-themes note in 02-tokens.css.
   ============================================================================ */

@layer components {

/* Every link carries the whole underline recipe and draws no line. Switching an
   underline on is then one longhand, anywhere on the site:

     text-decoration-line: underline;

   WARNING — never use the `text-decoration` shorthand for that.
   text-decoration-color and text-decoration-thickness are both part of the
   shorthand, so `text-decoration: underline` silently resets them to their
   initial values and you get a 1px hairline in the ink colour. The offset and
   skip-ink are *not* in the shorthand, so you keep those two and lose the other
   two — a half-applied band, which is harder to spot than no band at all.

   The hover affordance is the band deepening, not the ink changing colour. That
   is a deliberate swap: these links used to go red on hover, and red ink on a
   red wash measures 3.9:1 in light and 3.6:1 in dark — under the floor in both
   schemes, at every wash strength worth drawing. On this treatment the ink has
   to hold still. */
a {
	color: inherit;
	fill: inherit;

	text-decoration-line: none;
	text-decoration-color: var(--link-highlight);
	text-decoration-thickness: var(--link-underline-thickness);
	text-underline-offset: var(--link-underline-offset);
	text-decoration-skip-ink: none;
	transition: text-decoration-color 0.25s ease;

	&:hover { text-decoration-color: var(--link-highlight-hover); }
}

/* A link in running copy is marked by default. */
p a:not(.btn) { text-decoration-line: underline; }

button {
	cursor: pointer;
}

/* Base. Scoped to .btn only — styling every bare <button> meant the /work
   filter bar had to spend six declarations undoing this before it could style
   anything of its own. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);

	/* The full-width cut, not the narrow one, at 500 rather than 700, and
	   tracked wide. Narrow + bold + tight tracking read as a compressed stamp;
	   the same label in the regular cut with air around every letter reads as
	   a control. The trailing letter-space is added back to the right padding
	   so the label still sits optically centred. */
	font-family: var(--font);
	font-size: var(--step-0);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	line-height: 1;

	padding: var(--space-s) var(--space-m);
	padding-inline-end: calc(var(--space-m) - 0.15em);
	/* Squared, not pilled. A fully-rounded control against Gotham Bold and
	   hairline rules is two design languages in one frame; --radius-xs is the
	   same corner the focus ring already draws in 03-base. */
	border-radius: var(--radius-xs);
	border: 1px solid transparent;
	cursor: pointer;

	text-align: center;
	transition: transform 0.25s ease, background-color 0.25s ease,
	            color 0.25s ease, border-color 0.25s ease;

	/* default to the primary recipe so a bare .btn is never unstyled */
	background: var(--btn-primary-bg);
	/* border-color: var(--btn-primary-border); */
	color: var(--btn-primary-fg);
	fill: var(--btn-primary-fg);

	& svg {
		width: 14px;
		height: auto;
		flex-shrink: 0;
		transition: transform 0.25s ease;
	}

	&:hover { transform: translateY(-2px); }
	&:hover svg { transform: translateX(3px); }
	&:active { transform: translateY(0) scale(0.99); }

	&:hover {
		background: var(--btn-primary-bg-hover);
	}
}

/* Filled red. Hover darkens in light mode and lightens in dark — the two modes
   mirror each other rather than both getting darker. */
.btnPrimary {
	background: var(--btn-primary-bg);
	/* border-color: var(--btn-primary-border); */
	color: var(--btn-primary-fg);
	fill: var(--btn-primary-fg);

	&:hover {
		background: var(--btn-primary-bg-hover);
		/* border-color: var(--btn-primary-bg-hover); */
	}
}

/* Filled neutral: off-white on light surfaces, near-black on dark ones. The
   border is one step further along the ramp — without it the fill sits at
   1.2:1 against the surface and the control has no readable bounds. */
.btnSecondary {
	background: var(--btn-secondary-bg);
	/* straight to the semantic token so it follows the surface — see the note
	   in 02-tokens.css */
	/* border-color: var(--color-border-control); */
	color: var(--btn-secondary-fg);
	fill: var(--btn-secondary-fg);

	&:hover {
		background: var(--btn-secondary-bg-hover);
		/* border-color: var(--color-border-control); */
	}
}

/* Outlined. Border comes from --color-border-control-strong — ghost has no
   fill of its own, so its border is the whole control and needs to read as a
   deliberate outline (dark in light mode, white in dark mode), not just clear
   the 3:1 floor an input border is built for. Referenced directly rather than
   through a --btn-* token for the same reason the secondary border is: see the
   NOTE in 02-tokens.css on var()-inside-custom-property. */
.btnGhost {
	background: transparent;
	border-color: var(--color-border-control-strong);
	color: var(--color-text-1);
	fill: var(--color-text-1);

	&:hover {
		background: var(--btn-ghost-bg-hover);
		border-color: var(--color-border-control-strong);
	}
}

.btnSmall {
	padding: var(--space-xs) var(--space-s);
	padding-inline-end: calc(var(--space-s) - 0.15em);
	font-size: var(--step--1);
}

.btnRow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: 2em;
}
/* .btnRow.centered went with the centred CTA band — every button row on the
   site is now left-aligned, on the same margin as everything above it. Left
   here as a comment rather than a rule so the next page to want a centred row
   has to make that decision on purpose. */

.textLink {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-narrow);
	font-size: var(--step-0);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-action-text);
	fill: var(--color-action-text);

	& svg {
		width: 13px;
		height: auto;
		transition: transform 0.25s ease;
	}
	&:hover svg { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.btn, .btn svg, .textLink svg { transition: none; }
	.btn:hover { transform: none; }
	.btn:hover svg, .textLink:hover svg { transform: none; }
}

} /* @layer components */