/**
 * Site-wide overrides that aren't scoped to one component/template.
 * Loaded on every page, right after style.css.
 */

/* WCAG 2.4.7 Focus Visible fix (revised 2026-08-19) — restores the browser's own
   native default focus ring for the shared search-input component (header
   .kb-search-input-wrapper, sidebar-filter .kb-filter-search-wrap) instead of a
   custom-drawn one. Verified live by tabbing through the page and reading
   getComputedStyle: every other unstyled control on the site (the Select2
   school-district dropdown, plain links) shows Chrome's own `outline: auto` —
   a thin ring whose color it adapts per-element for contrast — because Kadence's
   CSS never touches those elements' outline at all. This replaces the original
   fix's fixed 3px navy inset ring (see docs/a11y-audit.md's Remediation Progress
   Log) so the search inputs match that same native look instead of standing out
   as a bespoke style.
   Kadence's CSS DOES strip the outline directly off the <input> itself
   (`input:focus{outline:0}` in kadence/assets/css/global.min.css, and
   `.kb-query-basic-style .kadence-filter-wrap input[type=search]:focus{outline:0}`
   in kadence-blocks-pro's style-blocks-query.css), so simply reverting the input's
   own outline isn't enough — and it wouldn't be visible anyway: both wrappers
   (`.kb-search-input-wrapper` in header.css, `.kb-filter-search-wrap` in
   query-cards.css) set `overflow: hidden` to clip their absolutely-positioned
   icon/button into the wrapper's own rounded corners, which also clips any ring
   drawn on the input (a descendant) — confirmed live. This is the same clipping
   bug the original fix routed around for the sidebar instance with a negative
   offset, except it turns out to affect the header instance's wrapper too.
   The fix instead puts the ring on the WRAPPER via :focus-within: an element's
   own outline is never clipped by its own overflow:hidden (only descendants'
   overflow is clipped), so drawing it on the wrapper itself sidesteps the
   clipping entirely without touching the overflow value both wrappers still
   need for their icon-clipping. No !important needed on either rule below:
   neither vendor stylesheet sets any outline/focus rule on these wrapper
   elements, only on the inputs inside them. */
.kb-search-input-wrapper:focus-within,
.kb-filter-search-wrap:focus-within {
	outline: -webkit-focus-ring-color auto 1px;
}

/* WCAG 2.4.7 Focus Visible fix (revised 2026-08-19, second revision same day) —
   Kadence Blocks Pro's "Advanced Info Box" block link
   (a.kt-blocks-info-box-link-wrap, used for the "Tutorials by Topic" cards on
   Test Resources for Parents and Legal Guardians) ships with no focus treatment
   at all: outline and box-shadow both compute to none.
   Same clipping problem as the search-input fix above, and same solution: the
   link's own box sits flush against its ancestor .wp-block-kadence-column's
   left/right edges, and that column has `overflow: hidden` with rounded
   corners, so a ring drawn on the link itself (a descendant) gets clipped
   regardless of color. Moving the ring to the column sidesteps this the same
   way it did for the search wrappers, since an element's own overflow:hidden
   never clips its own outline.
   IMPORTANT: this must check `a.kt-blocks-info-box-link-wrap:focus-visible`
   inside :has(), NOT `:focus-within` on a bare `:has(.kt-blocks-info-box-link-wrap)`.
   The first version used that broader form and broke on the "Other Resources"
   cards on this same page: Kadence renders this class on a plain <span> there
   (not a real link — the actual focusable target is a separate nested
   wp-block-kadence-singlebtn "Tutorials →" button), so :focus-within fired
   on EVERY ancestor column containing that span anywhere inside it — both the
   individual card's own column AND the outer column wrapping the whole
   two-card row — producing two visibly nested, awkward rings plus the
   button's own separate native ring. Requiring the `a` tag excludes the
   <span> variant (unfocusable, no href), and checking :focus-visible on that
   specific anchor (rather than :focus-within on the column) means the ring
   only fires when THAT anchor itself is the focus target, not when some
   unrelated focusable descendant happens to also live inside the same
   column. Confirmed via DOM inspection that the 5-card grid's columns each
   have exactly one matching column ancestor, so this stays a single ring
   there. No !important or custom offset needed: neither vendor stylesheet
   sets any outline/focus rule on the column element itself. */
.wp-block-kadence-column:has(a.kt-blocks-info-box-link-wrap:focus-visible) {
	outline: -webkit-focus-ring-color auto 1px;
}