/* ==========================================================================
   Spectrum IT Hub — accessibility layer
   --------------------------------------------------------------------------
   The site shipped with no :focus styling of any kind, which makes it
   effectively unusable by keyboard: tabbing through moves an invisible
   cursor. Browsers do supply a default focus ring, but the inline styles
   here (borders, backgrounds, transforms) frequently obscure it.

   `:focus-visible` is used rather than `:focus`, so the ring appears for
   keyboard users without putting an outline on every mouse click.

   Loaded after the page's own <style> block; !important is needed for the
   same reason as everywhere else in this project — inline styles.
   ========================================================================== */

:focus-visible {
  outline: 2px solid #E8B547 !important;
  outline-offset: 3px !important;
  border-radius: 0 !important;          /* the site is square-cornered by design */
}

/* On the light bands the gold ring is low-contrast; darken it there. */
[style*="background: #F7F6F3"] :focus-visible,
[style*="background: #FAF8F3"] :focus-visible,
[style*="background: rgb(247, 246, 243)"] :focus-visible {
  outline-color: #8A6A1F !important;
}

/* Form controls get the ring plus a border shift, since the outline can sit
   very close to an input's own 1px border. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  /* Flush, deliberately. At 1px the outline sat just outside the field's own
     border with a sliver of background between them, which read as two
     parallel gold lines. At 0 it reads as one crisp 2px edge. */
  outline-offset: 0 !important;
  border-color: #E8B547 !important;
}

/* Skip link: first tab stop on every page, visually hidden until focused.
   Injected by a11y.js so it does not have to be added to 13 templates. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #D32027;
  color: #fff;
  padding: 14px 22px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Respect reduced motion for the one transition this file could imply. */
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none !important; }
}

/* --- Native control theming ----------------------------------------------
   WHY THIS EXISTS AND WHAT IT CANNOT DO

   A <select>'s closed box is ours to style. The open option list is NOT: it is
   drawn by the operating system, and CSS reaches almost none of it. What does
   reach it is `color-scheme` — it tells the browser which way to render every
   native widget, so without it a dark page on a light-mode Mac opens a white
   popup with black text, which is exactly what was happening here.

   Declared on :root because this site is dark throughout apart from a few
   light bands, and it also gets the scrollbars, the text-selection handles and
   any date picker rendering dark to match. The light bands carry no native
   controls, so nothing there is affected.

   The admin panel sets its own, the other way up — it is a light interface. */
:root {
  color-scheme: dark;
}