/* =========================================================
   NEDA eCAMPUS — THE FOCUS RING
   Loaded on EVERY page. One colour, one rule.

   THE RULE (decided 2026-08-23, universal across Neda)

     Anything that takes keyboard focus is ringed in Cherry Red #D7263D:
     3px solid, 3px outside the element. Buttons, menu items, the logo,
     the language switcher, submenu arrows, links in running text, form
     controls, the skip link - everything.

   WHY THIS FILE EXISTS

   Before it, a keyboard user tabbing through one page met three rings:
   cyan on the header, footer and account pages (our own sheets), grey on
   the theme's buttons (`theme.json` sets `.wp-element-button:focus` to
   text-gray), and the browser's own black/blue `outline: auto` on every
   element no sheet had named - the logo, the language switcher, the
   submenu toggles. The front page and the FAQ were already cherry. Six
   stylesheets each answered the question on their own; this file answers
   it once, and the others now agree with it rather than compete.

   CONTRAST

     cherry on white            4.96:1
     cherry on black            4.23:1
     cherry on the cyan tint    #ECF9F8  4.6:1
     cherry on the lime tint    #F1F3D6  4.4:1

   All clear WCAG 2.2's 3:1 minimum for focus indicators (1.4.11, 2.4.11
   at AA). The ring is drawn at 3px OUTSIDE the element, so on a filled
   button it sits on the page surface, not on the lime or cherry fill -
   a cherry ring on a cherry button would vanish, and a 3px offset is
   what keeps it off the fill.

   HOW THE SPECIFICITY WAS CHOSEN, and why it must not drift

   `:root body :focus-visible` is (0,2,1). That is chosen to sit ABOVE:

     - the theme's `.wp-element-button:focus`              (0,1,1)
     - WordPress's `:where(...) .wp-block-search__input:focus
       { outline: none }`                                   (0,1,1)
     - core's `.wp-block-navigation__responsive-close:focus
       { outline: none }`                                   (0,2,0)

   and BELOW our own component rings, which are all (0,3,x) or higher
   and are now cherry themselves. Two of them - the rounded text inputs
   on the account and contact pages - deliberately draw their ring as a
   box-shadow with `outline: none`, because an outline on a 10px corner
   squares off in some engines. They out-rank this file on specificity,
   as they must; do not add `!important` here, or every rounded input
   grows a second, square ring on top of its round one.

   The OFFSET is set separately at (0,0,0) so that a component which
   needs a different offset - the front-page cards draw theirs 3px
   INSIDE the photograph, the FAQ summary uses 2px - wins on any
   specificity at all. Only the colour, width and style are universal.

   `:focus-visible`, not `:focus`. A mouse click on a button must not
   draw the ring; a Tab must always draw it. Every modern engine agrees
   on that heuristic, and the theme's own `:focus` rule is the reason the
   grey ring appeared on click.
   ========================================================= */

:root body :focus-visible {
	outline: 3px solid #D7263D;
}

:where(:focus-visible) {
	outline-offset: 3px;
}

/*
 * Forced-colours mode (Windows High Contrast) replaces every colour with
 * the user's own, and a `solid` outline survives that where `auto` does
 * not. Nothing to do here beyond not fighting it: no `forced-color-adjust:
 * none`, so the ring takes the system Highlight colour as it should.
 */

/*
 * THIRD-PARTY CONTROLS THAT BRING THEIR OWN RING
 *
 * The Open Accessibility plugin's floating toggle draws a blue glow on
 * `:focus` (`0 0 0 3px rgba(0,123,255,.5)`, at (0,2,0), with
 * `outline: none`). The rule above already out-ranks the `outline: none`,
 * so the cherry ring appears - but the blue halo stayed underneath it, and
 * blue is not a Neda colour. Keep the button's resting drop shadow, drop
 * the halo. (0,3,1), which clears the plugin's (0,2,0) on any load order.
 *
 * Add further entries here, one per plugin, rather than reaching for
 * !important on the universal rule.
 */
:root body .open-accessibility-toggle-button:focus-visible {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}