/**
 * Accessibility foundations shared across every page/pattern.
 */

/*
 * Visible focus states everywhere, including inside patterns.
 *
 * Contrast note (Revision 7 audit): this is the ONE sitewide rule whose
 * background can't be predicted in advance — a focused element can be
 * sitting on cream, off-white, stone, or a brand-deep dark surface (nav,
 * footer, mobile drawer, hero, CTA band) depending on where the user
 * tabs to. Checked against the 3:1 non-text/UI-component threshold (this
 * is a focus indicator, not text) on every one of those:
 *
 *   cream `#F5EEDC`        old 4.08:1 / new plain accent 5.00:1 — PASS
 *   off-white `#FCFBF7`    old 4.56:1 / new plain accent 5.59:1 — PASS
 *   stone/border `#D8D2C5` old 3.14:1 / new plain accent 3.84:1 — PASS
 *   brand-deep `#1B1480`   old 3.05:1 / new plain accent 2.49:1 — FAIL
 *
 * The plain `--gillani-color-accent` (the approved `#6B6558` warm-grey)
 * regresses below 3:1 specifically on the brand-deep case, so this rule
 * uses the new `--gillani-color-accent-on-dark` (`#7A7469`) companion
 * token instead, which clears 3:1 on ALL FOUR backgrounds (brand-deep
 * 3.11:1, stone 3.08:1, cream 4.01:1, off-white 4.48:1) — see tokens.css's
 * Revision 7 note for the full reasoning behind this token.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gillani-color-accent-on-dark);
	outline-offset: 2px;
}

/* Keep tap targets usable on mobile. */
.wp-block-button__link,
.gillani-faq-accordion summary {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Respect reduced-motion preferences site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Screen-reader-only utility, for use by header/nav markup as needed. */
.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;
	width: 1px;
	word-wrap: normal !important;
}