/*
 * Baseline only.
 *
 * Design tokens live in theme.json. Components are Phase 2. Nothing here may
 * anticipate the visual system; these rules exist so that an unstyled build is
 * accessible and does not overflow, per FCT_WEB_SPEC.md sections 12 and 14.
 */

/* MO01: no horizontal document overflow at any test width. */
html {
	overflow-x: hidden;
}

/*
 * A visible, high-contrast focus ring is an accessibility baseline (B04), not a
 * design decision. Phase 2 may restyle it; it may not remove it.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--charcoal, currentColor);
	outline-offset: 2px;
}

/*
 * Section 13: under reduced motion, show the complete end state immediately.
 * Declared at baseline so no later component can forget it.
 */
@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;
	}
}

/*
 * Text for assistive technology only (e.g. the language switcher's full
 * language name). The standard WordPress pattern, defined here because block
 * themes do not load it on the front end.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* A focusable one (the skip link) shows on focus: core's focus style resets clip-path, not the legacy clip above
   (Phase 6C, WCAG 2.4.7 — the focused skip link was invisible). */
.screen-reader-text:focus {
	clip: auto;
}

/*
 * Paper texture (FCT_WEB_SPEC.md §7, VISUAL_ACCEPTANCE.md RY01, RY05).
 *
 * A neutral grain tile multiplied onto Warm White: the page colour stays the
 * token, the grain only darkens, never tints. Strength equals a Charcoal
 * overlay of 0.032 opacity (spec 0.025–0.04), built and verified by
 * qa/tools/build-texture.mjs. As a background it sits behind all content and
 * takes no pointer events. Surfaces that set their own background (cards, the
 * footer) are untextured, which is what makes a Warm White card read lighter
 * than the page, as in R3 and R6.
 */
body {
	background-color: var(--wp--preset--color--warm-white);
	background-image: url("../images/paper-grain.webp?v=5d473e08f0a3");
	background-size: 256px 256px;
	background-blend-mode: multiply;
}

/*
 * T05: headings break into even lines instead of stranding a single word, and
 * long Dutch compounds hyphenate at syllable boundaries rather than break
 * mid-syllable when a word is wider than the column.
 */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}