/**
 * Global keyboard focus indicator.
 *
 * WCAG 2.2 SC 2.4.7 Focus Visible (Level A). The theme's utilities include
 * .outline-none (compiles to outline-style:none) and several inputs clear their
 * own outline without replacing it, most visibly the footer newsletter field,
 * so keyboard focus on those controls was invisible. Tailwind Preflight adds no
 * global focus ring, so nothing else covered them.
 *
 * Hand-written and served as-is rather than compiled into dist/main.css, the
 * same way card-align.css is: dist/ is not rebuilt here. Enqueued after the
 * cckc-tailwind handle so it loads after the compiled CSS; the
 * element:focus-visible selectors below also out-specify the .outline-none
 * utility (0,1,1 vs 0,1,0), so the ring wins on controls that cleared it.
 *
 * Scoped to :focus-visible so the ring shows for keyboard and other non-pointer
 * input only, leaving mouse interaction visually unchanged. The double ring
 * (sienna outline plus a cream inner ring via box-shadow) keeps the indicator
 * above 3:1 against both the light page backgrounds and the navy footer.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid #b85c38;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #faf8f5;
	border-radius: 2px;
}

/**
 * Minimum touch-target size for carousel pagination dots.
 *
 * WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA). The hero and
 * featured-events dots render as 10px pills (Tailwind h-2.5 w-2.5), which axe
 * reports at 10x10 against the 24x24 minimum, with insufficient spacing to
 * their neighbours. Padding grows each button's hit box to 24px in both axes,
 * while background-clip:content-box keeps the painted pill at its original
 * size, so the visible design is unchanged. box-sizing:content-box makes the
 * total 24px (10px content + 7px padding each side). The dot containers drop
 * their flex gap because the transparent padding now supplies the visual
 * spacing (about 14px edge to edge, close to the previous gap-4). Enqueued
 * after cckc-tailwind, so gap:0 out-orders the .gap-4 utility at equal
 * specificity.
 */
[data-hero-dot],
[data-fe-dot] {
	box-sizing: content-box;
	padding: 7px;
	background-clip: content-box;
}

[data-hero-dots],
[data-fe-dots] {
	gap: 0;
}

/**
 * Eyebrow / kicker label contrast on light sections.
 *
 * WCAG 2.2 SC 1.4.3 Contrast (Minimum) (Level AA). The small uppercase eyebrow
 * labels render in sienna (text-secondary, #b85c38), which measures about
 * 4.23:1 on the cream and white section backgrounds (#f7f7f5 / #ffffff), just
 * under the 4.5:1 minimum for this ~13px text. Per the approved design call the
 * sienna itself is kept and these labels switch to navy (var(--color-primary),
 * #192a4a), which is 9.1:1 on cream. Navy on white is higher still.
 *
 * Scoped to eyebrow paragraphs inside light sections (.bg-cream, .bg-white, and
 * the transparent .cckc-block-heading) so eyebrows that sit on navy sections
 * (.bg-primary heroes) are left as-is: navy on navy would be invisible, and
 * that case needs its own color decision. The selector out-specifies the
 * Tailwind .text-secondary utility (0,3,1 vs 0,1,0) and loads after
 * cckc-tailwind, so it wins.
 */
.bg-cream p.text-secondary.uppercase,
.bg-white p.text-secondary.uppercase,
.cckc-block-heading p.text-secondary.uppercase {
	color: var(--color-primary);
}

/**
 * Inline text-link contrast on light sections.
 *
 * WCAG 2.2 SC 1.4.3 Contrast (Minimum) (Level AA). The small "view all" and
 * "read more" text links (text-secondary, #b85c38, ~14px semibold) that sit on
 * the cream/white listing sections (featured-events, news, events-carousel and
 * the like) measure about 4.23:1, just under the 4.5:1 minimum. Per the same
 * approved design call as the eyebrows the sienna brand color is kept and these
 * links switch to navy (var(--color-primary), #192a4a), 9.1:1 on cream.
 *
 * Scoped to anchor elements carrying the text-secondary utility inside light
 * sections (.bg-cream, .bg-white, .cckc-block-heading) so sienna links on navy
 * sections are left alone. Matches the literal text-secondary class only, not
 * the hover:text-secondary state used on breadcrumbs. The selector
 * out-specifies the Tailwind .text-secondary utility (0,2,1 vs 0,1,0) and loads
 * after cckc-tailwind, so it wins.
 */
.bg-cream a.text-secondary,
.bg-white a.text-secondary,
.cckc-block-heading a.text-secondary {
	color: var(--color-primary);
}