/**
 * Barndoor v12 accessibility fixes (WCAG 2.2 AA review, 2026-10-16). Loaded last, after v12-states.css.
 * Findings + re-scan: god/work/redesign/ada (bash run.sh && python3 report.py results/<run>).
 * Colours are the nearest passing values to the brand tokens; each rule names the ratio it fixes.
 */

/* PPC "Without:" column: inline sage #8BB89A on cream was 2.06:1. Text forest-2, ⊘ icon darker sage (3:1+) */
.brxe-mmfbep p[style*="8bb89a"] { color: var(--color-forest-2) !important; }
.brxe-mmfbep span[style*="8bb89a"] { color: #5E8A6C !important; }

/* blog pagination current page: clay on cream 2.64:1 -> darker clay 4.7:1 */
body .page-numbers.current { color: #B4511B !important; }

/* footer HubSpot field (#38614F): ink placeholder 2.2-2.6:1 and it is the only label -> mint, and typed text too.
   ACSS light-form hover/focus turned the field white under mint text (1.23:1): keep it dark in every state
   (rest/hover/focus/filled, mint 5.7:1); hover/focus show a sage border instead. */
#brx-footer .hs-form .hs-input,
#brx-footer .hs-form .hs-input:is(:hover, :focus) { background-color: #38614F !important; color: var(--color-mint) !important; }
#brx-footer .hs-form .hs-input:is(:hover, :focus) { border-color: var(--color-sage) !important; }
#brx-footer .hs-form .hs-input::placeholder { color: var(--color-mint) !important; opacity: 1 !important; }

/* light Bricks forms (my-account login/register): placeholder ink 24% 1.68:1, field vs page 1.1:1 with no border; ink-2 border 5.6:1 */
.brxe-form.form--light :is(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select) { border: 1px solid var(--color-ink-2) !important; }
.brxe-form.form--light :is(input, textarea)::placeholder { color: var(--color-ink-2) !important; opacity: 1 !important; }

/* blog search: placeholder #9E9E9E 2.68:1, border #DDDEDF 1.25:1 (ink-3 was 2.84 against the page, so ink-2) */
.brxe-filter-search input { border-color: var(--color-ink-2) !important; }
.brxe-filter-search input::placeholder { color: var(--color-ink-2) !important; opacity: 1 !important; }

/* visually hidden checkbox/radio inputs (blog filters, Bricks form options) got focus with nothing to see: ring the label */
label:has(> input:is(.brx-a11y-hidden, [type="checkbox"], [type="radio"]):focus-visible),
.brxe-form input:is([type="checkbox"], [type="radio"]):focus-visible + label {
	outline: 2px solid var(--v12-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* skip link: shows over the grey announcement bar or a light page. Paper ring with forest on both sides
   (the button fill inside, a forest halo outside): 12.6:1 next to the ring wherever the link sits */
.skip-link:focus-visible { outline-color: var(--color-paper) !important; box-shadow: 0 0 0 7px var(--color-forest) !important; }

/* HubSpot primary Submit on a cream card inside a dark band: forest ring with a paper halo outside it,
   so the ring never meets the dark band directly (12:1 against paper either side) */
.hs-form .hs-button.btn--primary:focus-visible { outline: 2px solid var(--color-forest) !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px var(--color-paper) !important; }

/* Wistia players (home product tour, customers featured video): focus moves into the player's own controls with
   no ring on the frame (ADA round 3, 2026-10-21). The player forces outline:none on itself, so ring its wrapper;
   the home wrapper clips overflow, so the ring sits inset. */
:has(> wistia-player):focus-within { outline: 2px solid var(--v12-ring); outline-offset: -3px; }
.brxe-code:has(> iframe.wistia_embed):focus-within { outline: 2px solid var(--v12-ring); outline-offset: 3px; border-radius: 4px; }