/* Site-wide keyboard focus indicator (WCAG 2.4.7 Focus Visible, 1.4.11
   Non-text Contrast).

   Bootstrap's own focus rings are a pale, semi-transparent glow
   (rgba(13, 110, 253, .25) -- about 1.4:1 against white), well under the
   3:1 a focus indicator needs. This replaces them with a two-tone ring
   (WCAG technique C40): a 2px outline in the site's own blue, 2px clear
   of the control, with a white ring filling the gap. The blue carries the
   contrast on light backgrounds (5.6:1 on white), the white on dark ones,
   so the ring stays visible whatever it sits on.

   Same specificity as Bootstrap's rules and loaded after them, so it wins
   for Bootstrap's components; components with their own deliberate focus
   design (the search pills' focus-within border, the table editor's cell
   ring) keep theirs. The colour is fixed, not tied to the admin-editable
   brand colours, so a brand change can never make focus invisible. */
:root {
  --site-focus-ring-color: #0067b8;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.btn-close:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible {
  outline: 2px solid var(--site-focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* An accordion button spans its card edge to edge; drawing the ring
   inside keeps it from being clipped by the card. */
.accordion-button:focus-visible {
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px #fff;
}

/* Keep a focused control clear of the sticky navbar, a pinned sticky bar
   and the cookie banner (WCAG 2.4.11 Focus Not Obscured, technique C43).
   When focus moves to something off screen, the browser scrolls it into
   view inside this padding instead of flush against the viewport edge,
   where those bars would cover it. static/shared/js/scroll_clearance.js
   measures the bars and sets both variables; the fallback is roughly the
   navbar's height, for a page without JavaScript. Explicit scrollTo()
   calls are not affected; scrollIntoView() and #anchor jumps are, so a
   jump target's own scroll-margin-top only needs room for anything
   beyond the navbar and pinned bars. */
html {
  scroll-padding-top: var(--scroll-clear-top, 5.25rem);
  scroll-padding-bottom: var(--scroll-clear-bottom, 0px);
}

/* Forced colours (Windows High Contrast): the system repaints backgrounds
   and drops box-shadows, so a focus cue drawn only as a box-shadow ring or
   a border colour (the search pills, the article form's fields, the rich-
   text editors, all of which hide the native outline) disappears. In that
   mode every focused control gets a Highlight outline. !important beats
   those components' own outline: 0, and applies only in this mode. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}