/*
 * Only what theme.json cannot express.
 * Tokens, type and colour all live in theme.json — do not duplicate them here.
 */

/* --- Skip link ------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.skip-link:focus { left: 0; }

/* --- Focus states ----------------------------------------------------
 * The Figma file defines no focus state on any card or nav link. These are
 * authored here because WCAG 2.2 AA requires a visible focus indicator and
 * there is nothing in the design to reproduce.
 * ------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-text);
	outline-offset: 3px;
	border-radius: 2px;
}

.di-card:focus-within {
	outline: 2px solid var(--wp--preset--color--accent-text);
	outline-offset: 4px;
}

/* --- Work cards ------------------------------------------------------ */
.di-card { position: relative; transition: color 120ms ease; }
.di-card:hover .wp-block-post-title a { color: var(--wp--preset--color--accent-text); }
.di-card::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 12px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
}
.di-card:hover::after, .di-card:focus-within::after { transform: scaleX(1); }

/* --- Header ---------------------------------------------------------- */
.di-header { min-height: 78px; }
.di-nav a { text-decoration: none; }
.di-nav a:hover { color: var(--wp--preset--color--ink); }

/* --- Measure --------------------------------------------------------- */
.di-hero > p.has-lede-font-size,
.di-spec p { max-width: 760px; }

/* --- Gutters at small widths ----------------------------------------- */
@media (max-width: 834px) {
	:root { --wp--preset--spacing--120: 40px; }
}
@media (max-width: 480px) {
	:root { --wp--preset--spacing--120: 20px; }
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}