/* Keyboard focus indicator.

   The theme stylesheet switches the focus outline off for everything
   (`*:focus`, and `a:focus,button:focus` with `!important`), so nothing is
   visible when tabbing through the page — WCAG 2.4.7. These rules put one
   back. They have to be `!important` to beat the theme's `!important`, and
   this file has to load after style.css.

   The indicator is a red ring with a white halo inside it: the red reads
   against the light sections, the white reads against the dark ones, so a
   single indicator covers the whole page. `:focus-visible` keeps it to
   keyboard navigation — mouse and touch visitors see no change.

   Not covered on purpose: `main[tabindex="-1"]`, the skip link's target,
   which should not draw a ring around the whole page when it is focused
   programmatically; and the Cognito contact form, which is in a third-party
   frame we cannot style. */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
video:focus-visible {
	outline: 3px solid #c8102e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}