/*
=========================================================================
Keyboard focus ring — WCAG 2.4.7 Focus Visible
Loaded LAST, after custom.css and focus-offset.css.

The theme switches the focus indicator off outright — style.css has
`a:focus, .btn:focus { outline: none; }` — and nothing anywhere puts one
back, so tabbing the page moves focus invisibly. (The six selectors the
scanner flagged in bootstrap.min.css are harmless here: there is no
carousel, no range input and no tabindex attribute on either page.)

Everything below is :focus-visible only, so the ring appears when
somebody is navigating by keyboard and never on a mouse click or a tap —
the site looks unchanged to everyone else. Campaign red on the light
sections, white on the navy nav and contact tiles where red would not
read, navy on the red buttons for the same reason. The var() fallbacks
keep this working if custom.css is ever removed.
=========================================================================
*/

/* 1. The ring. Same specificity as the theme's `outline: none` rules,
      loaded later, so it wins. */
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(--red, #c8102e);
	outline-offset: 3px;
}

/* 2. Red buttons — a red ring on red reads as nothing. */
.btn:focus-visible,
.dtbtn:focus-visible {
	outline: 3px solid var(--navy, #12294d);
	outline-offset: 3px;
}

/* 3. Navy surfaces — the sticky nav bar, the mobile menu and its
      hamburger (which floats over the hero image), and the three navy
      contact tiles. White, including the nav's red Donate button. */
.roxien_nav_area a:focus-visible,
.mean-container .mean-nav a:focus-visible,
.mean-container a.meanmenu-reveal:focus-visible,
.roxien_address_area a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}