/* =====================================================================
   [CORE] base.css — accessibility scaffolding + the semantic-token contract.
   ---------------------------------------------------------------------
   This is the WCAG 2.2 AA floor every theme in the line stands on: a skip
   link, a real focus ring, a screen-reader utility, and balanced headings.

   The trick that lets core style these without knowing a skin's palette is
   the --cl-* SEMANTIC TOKENS below. Core never references --wp--preset--
   --color--teal (that's a Quillwork word); it references --cl-focus-ring,
   and each skin.css BINDS that token to whatever colour clears contrast in
   its own palette. The fallbacks here are neutral and AA-safe, so the floor
   holds even before a skin binds anything.

   `colophon sync` owns this file. Skins bind the tokens; they don't edit here.
   ===================================================================== */
@layer base {

	:root {
		/* The contract. A skin overrides each of these in skin.css with a value
		   drawn from its own theme.json palette. Names are stable across the line
		   (like --wp--preset--*), so they're never re-prefixed by the CLI. */
		--cl-focus-ring:         #1a1a1a; /* focus outline on light grounds — skin sets ≥3:1 on its bg  */
		--cl-focus-ring-inverse: #ffffff; /* focus outline on dark bands (footer, ink sections)         */
		--cl-skip-bg:            #1a1a1a; /* skip-link background                                        */
		--cl-skip-fg:            #ffffff; /* skip-link text — must clear 4.5:1 on --cl-skip-bg           */
	}

	/* Skip link — WCAG 2.4.1 (Bypass Blocks). Off-screen until focused, then it
	   lands at the inline-start edge (top-left in LTR, top-right in RTL). Targets
	   #main-content, which every template carries. Logical offsets so the focused
	   position follows reading direction. */
	.skip-link {
		position: absolute;
		inset-inline-start: -9999px;
		top: 0;
		z-index: 10000;
		padding: 0.75rem 1.25rem;
		background: var(--cl-skip-bg);
		color: var(--cl-skip-fg);
		font-size: 1rem;
		text-decoration: none;
	}
	.skip-link:focus {
		inset-inline-start: 0.75rem;
		top: 0.75rem;
	}

	/* Visible focus — WCAG 2.4.7. Never removed without a replacement; this IS
	   the replacement, applied uniformly to everything focusable. */
	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
		outline: 2px solid var(--cl-focus-ring);
		outline-offset: 2px;
	}

	/* WordPress-conventional screen-reader utility. Named .screen-reader-text so
	   it matches core and other themes — one less surprise for the next dev. */
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
		word-wrap: normal !important;
	}
	.screen-reader-text:focus {
		position: fixed;
		top: 0.75rem;
		inset-inline-start: 0.75rem;
		width: auto;
		height: auto;
		clip: auto;
		padding: 0.75rem 1.25rem;
		background: var(--cl-skip-bg);
		color: var(--cl-skip-fg);
		z-index: 100000;
	}

	/* Typographic balance — even headline ragging, no orphaned last words in
	   body copy. Progressive enhancement; ignored where unsupported. */
	:where(h1, h2, h3, .wp-block-heading) { text-wrap: balance; }
	:where(p) { text-wrap: pretty; }
}