/* ==========================================================================
   a11y.css — site-wide accessibility baseline
   Loaded by every page. Covers:
     1. "Skip to main content" link          (WCAG 2.4.1 Bypass Blocks)
     2. A visible keyboard focus ring        (WCAG 2.4.7 Focus Visible)
     3. Minimum 24x24 tap targets            (WCAG 2.5.8 Target Size)
     4. Honouring "reduce motion"            (WCAG 2.3.3 Animation from Interactions)
     5. A screen-reader-only utility class
   ========================================================================== */

/* 1. Skip link -------------------------------------------------------------
   Off-screen until focused, then drops into the top-left corner. Lets keyboard
   and screen-reader users jump straight past repeated navigation. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #ffffff;
  color: #0c3a22;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0 0 10px 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #0c3a22;
  outline-offset: -3px;
}

/* Target of the skip link shouldn't show a focus ring when jumped to. */
[id="main"]:focus { outline: none; }

/* 2. Focus ring ------------------------------------------------------------
   A high-contrast double ring works on both light and dark backgrounds.
   :focus-visible only fires for keyboard use, so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(12, 58, 34, .95);
  border-radius: 4px;
}

/* On light backgrounds, invert the ring so it stays visible. */
@media (prefers-color-scheme: light) {
  .a11y-light a:focus-visible,
  .a11y-light button:focus-visible,
  .a11y-light input:focus-visible,
  .a11y-light select:focus-visible,
  .a11y-light textarea:focus-visible {
    outline-color: #0c3a22;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
  }
}

/* 3. Tap targets -----------------------------------------------------------
   Pads small inline links and icon buttons out to the 24x24 minimum without
   changing the text size or the visual layout. */
.a11y-target,
.home,
.back,
.back-link,
.home-link {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}

/* 4. Reduced motion --------------------------------------------------------
   Respects the operating-system "reduce motion" setting. Looping animations
   can cause real nausea for people with vestibular disorders. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5. Screen-reader-only text ----------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Standalone links -- ones that sit alone in a list item, a contact line, or a
   footer rather than inside a sentence -- still need a 24x24 target. Links
   inside a sentence are exempt under WCAG 2.5.8's "inline" exception. */
li > a:only-child,
p.meta > a,
footer a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}

/* A link wrapping only an image collapses to the text line-height when inline,
   which under-reports its real clickable area. */
a:has(> img:only-child) { display: inline-block; }