/* ==========================================================================
   AcceGuru - front-end focus outline styles

   Loaded only by the focus outline fix. The skip-link fix ships its own
   stylesheet (acceguru-skip-link.css), so switching one fix off never leaves
   the other one styling the site.
   ========================================================================== */

/* Focus Outlines - WCAG 2.4.7 (Focus Visible, AA) / 2.4.13 (Focus Appearance, AAA)
   Restores visible focus indicators that themes often suppress with
   `outline: none` or override with low-contrast colours.

   Specificity strategy:
   Block themes (Twenty Twenty-Five, etc.) generate focus rules from
   theme.json that look like `:root :where(a):focus-visible` - that is
   specificity (0,2,0). Plain `a:focus-visible` is only (0,1,1) and loses
   even with !important. We add `:not([hidden])` to bump our selectors to
   (0,2,1), which beats the theme rule. `:not([hidden])` is semantically
   correct - there is no point styling focus on hidden elements - and
   matches every visible interactive element.

   Sub-property strategy:
   Themes commonly override `outline-color` alone via theme.json. Setting
   the shorthand `outline:` is not enough because a later, more specific
   `outline-color: ...` will win. We declare each sub-property
   individually with !important so each one is independently protected.

   Two-colour indicator (W3C technique C40):
   No single colour clears 3:1 on every background. #005fcc reaches 5.98:1
   on white but only about 2.7:1 on a dark grey page, so the box-shadow adds
   a white band in the 3px gap the outline offset leaves open. One of the two
   edges always contrasts with the page. On a white page the band paints white
   over white, so the site looks exactly as it did before. */

a:focus-visible:not([hidden]),
button:focus-visible:not([hidden]),
input:focus-visible:not([hidden]),
select:focus-visible:not([hidden]),
textarea:focus-visible:not([hidden]),
details:focus-visible:not([hidden]),
summary:focus-visible:not([hidden]),
[tabindex]:focus-visible:not([hidden]),
[contenteditable="true"]:focus-visible:not([hidden]) {
	outline-color:  #005fcc !important;
	outline-style:  solid   !important;
	outline-width:  3px     !important;
	outline-offset: 3px     !important;
	box-shadow: 0 0 0 3px #fff !important;
}

/* No :focus fallback on purpose. A `:focus:not(:focus-visible)` rule matches
   exactly a mouse click in every current browser, so it drew this outline
   around menu links on click - changing the look of the site for everyone.
   It never helped old browsers either: one that does not understand
   :focus-visible treats the whole selector as invalid and drops it. */

/* No dark-scheme override on purpose. `prefers-color-scheme` reports the
   visitor's computer setting, which says nothing about the colour of this
   site: a light page served to a visitor in dark mode used to get a pale
   #66aaff ring at 2.4:1. The two-colour indicator above covers dark and
   light pages alike, for every visitor. */