/*
 * foundation-a11y.css — component family "ad/foundation-a11y" v1.0.0 (Wave 0, 2026-08-22).
 *
 * Shared accessibility primitives for the article component system: focus visibility, an
 * aria-live announcement region, reduced-motion handling, and a visually-hidden utility scoped
 * to this namespace (the theme already has .ad-visually-hidden in two component files,
 * deliberately duplicated per that convention -- this is the FOUNDATION namespace's own copy so
 * ad/foundation-* never depends on an unrelated component file's load order).
 *
 * Motion grammar (integration contract): "reduced-motion shows the final comprehensible state;
 * static fallback still teaches." This file is where that rule is enforced structurally, once,
 * rather than re-implemented per interactive component.
 *
 * Namespacing rule: every selector starts with `.ad-fnd-` or targets `[data-ad-fnd-*]`. Zero bare
 * element selectors.
 */

.ad-fnd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible, focusable skip-link pattern for any component that needs one (e.g. a diagnostic tool
   with several interactive regions). Hidden by .ad-fnd-visually-hidden until focused. */
.ad-fnd-skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.5rem 1rem;
	clip: auto;
	overflow: visible;
	white-space: normal;
	background: var(--wp--preset--color--ink, #0b1220);
	color: #fff;
	z-index: 999;
}

/* Focus visibility -- every interactive element inside a foundation component gets a consistent,
   sufficiently-contrasted ring instead of the browser default being silently suppressed
   somewhere upstream. Applied via the namespaced attribute selector, never a bare :focus. */
[data-ad-fnd-focusable]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2563eb);
	outline-offset: 2px;
	border-radius: 4px;
}

/* aria-live announcement region -- a component that updates state (e.g. "prioritization
   re-sorting as assumptions change") announces the change here instead of relying on a screen
   reader to notice a silent DOM mutation. Visually hidden by default; the component's JS sets
   textContent, never innerHTML, on this node. */
[data-ad-fnd-live] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* --- Motion grammar enforcement --- */

/* Default: a component may animate (autoplay-once-when-visible, per the motion grammar). */
[data-ad-fnd-motion="teaches"] {
	animation-duration: var(--ad-fnd-motion-duration, 600ms);
}

/* Reduced motion: show the FINAL state immediately, never a mid-animation frame. A component
   implements this by giving its end-state its own class/attribute that this rule switches to
   directly -- the JS is expected to branch on prefers-reduced-motion and skip the animation
   entirely, this CSS is the fallback if it doesn't. */
@media (prefers-reduced-motion: reduce) {
	[data-ad-fnd-motion="teaches"] {
		animation: none !important;
		transition: none !important;
	}
}