/* Accessibility — skip link, screen-reader text, focus visibility, reduced motion.
   Enqueued sitewide (like header-footer.css) since every page can be the target.
   Also added to add_editor_style via functions.php's parity list so the editor canvas
   matches, though the skip link itself is frontend-only. */

/* ------------------------------------------------------------------ skip link
   First focusable element on every page (output via wp_body_open in functions.php).
   Visually hidden until focused, then pinned top-left. Uses theme tokens so it
   stays on-brand and meets contrast (text-default on surface-canvas + green outline).
   Meets WCAG 2.4.1 Bypass Blocks. */
.skip-link {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--600);
	background-color: var(--wp--preset--color--surface-canvas);
	color: var(--wp--preset--color--text-default);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-md);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md);
	z-index: 100000;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: absolute;
	top: var(--wp--preset--spacing--200);
	left: var(--wp--preset--spacing--200);
	height: auto;
	width: auto;
	overflow: visible;
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ screen-reader text
   Core's own .screen-reader-text is not guaranteed in a block theme (no
   classic stylesheet), so provide the standard WordPress a11y helper.
   Mirrors WordPress core's implementation: clipped, 1px, but not display:none
   so it stays in the accessibility tree and becomes visible on focus. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--400);
	background-color: var(--wp--preset--color--surface-canvas);
	color: var(--wp--preset--color--text-default);
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
	z-index: 100000;
	top: var(--wp--preset--spacing--200);
	left: var(--wp--preset--spacing--200);
}

/* ------------------------------------------------------------------ focus visibility
   WCAG 2.4.7 Focus Visible & 2.4.11 Focus Appearance.
   theme.json already defines :focus-visible for links/buttons with a border+padding
   treatment, but that shifts layout (adds 4px padding). Provide a robust outline-based
   fallback for any element that receives focus via keyboard, with sufficient contrast
   (green-700 #68a324 3.06:1 on white, 4.83:1 on navy) and a 2px minimum.
   :focus (not :focus-visible) is deliberately not styled to avoid the mouse-click ring;
   only the keyboard path shows the indicator. The 2px outline + 2px offset matches the
   existing token-based ring used elsewhere (people-filter, vertical-tab-panel) so the
   theme stays visually consistent. */

:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Links that use header-footer's image-reset (logo/social) already have their own focus
   outline there — keep that override (higher specificity) so we don't double-draw. */

/* Ensure summary (filter dropdown) shows focus ring — details/summary is often missed. */
.bpd-filter-select > summary:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Pagination pills and load-more buttons need consistent focus. */
.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-next:focus-visible,
.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-previous:focus-visible,
.bpd-people-filter__az-link:focus-visible,
.bpd-people-filter__select:focus-visible,
.bpd-people-filter__card-trigger:focus-visible,
.bpd-vtp__tab:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Problem-details CSS :target tabs — ensure tab links have visible focus even though
   active state is border-bottom. */
.bpd-problem-tabs__list a:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Action card stretched link: focus lands on <a> but ring is drawn on card (.bpd-action-card:focus-within)
   already styled in action-card.css — ensure fallback here matches. */
.bpd-action-card:focus-within {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--text-active);
	outline-offset: 2px;
}

/* Header nav L1 links: ensure underline + focus ring are both visible. Core nav already
   handles focus-within for dropdown, but add explicit focus-visible for keyboard tabbing. */
.site-header__nav .wp-block-navigation-item__content:focus-visible,
.site-header__search .wp-block-search__input:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Footer social icons: extend header-footer's image-link focus to handle :focus-visible. */
.site-footer__social a:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Podcast transcript toggle button */
.bpd-podcast-transcript-toggle:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Timeline grab cursor should not suppress focus outline for keyboard users scrolling it */
.bpd-timeline:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* Anchor links scroll rather than jump. Sitewide because in-page anchors are: the Challenges We
   Solve tab rows (whose panels are picked by :target, so the hash change is load-bearing), the skip
   link, and any anchor an editor adds. Targets that need to clear the header set their own
   scroll-margin-top. The reduce block below already forces this back to auto. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------------ reduced motion
   CLAUDE.md mandates every animation lives inside prefers-reduced-motion: no-preference
   or is killed in reduce. Some earlier stylesheets missed the guard for their
   transition/animation declarations — kill them here as a safety net, without
   duplicating per-file guards already present. This is additive, not a replacement
   for per-file @media reduce blocks, but ensures any stray transition is still
   disabled for users who asked for less motion. */

@media (prefers-reduced-motion: reduce) {
	/* Per-component reduce guards already exist (timeline, vertical-tab-panel,
	   people-filter, etc.). This safety net only ensures stray transitions that
	   missed a guard don't animate — it does not use !important on
	   transition-duration so existing `transition: none` rules (e.g. timeline's
	   300ms→none check) keep their 0s computed value and their tests pass. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}

/* But allow the skip-link to remain focus-visible without motion concerns — no animation. */