/* site-fixes.css -- accessibility and Lighthouse fixes, layered after styles.css
   (which ships byte-identical from the live deploy and is never edited). Every
   rule here exists to close a specific audit finding; see the comment on each.
   Loaded on all nine pages via BaseLayout.astro, right after styles.css. */

/* ---------------------------------------------------------------------------
   link-in-text-block: links inside running prose distinguished by color alone
   (styles.css sets a{text-decoration:none} globally). Underline every link
   that sits inside a paragraph of body copy -- the exact case the audit
   checks -- without touching nav links, footer links, the brand mark or the
   CTA buttons, none of which are "in text" and none of which the audit (or
   this rule) touches. Colour and hover behaviour are unchanged; the
   underline inherits currentColor automatically. */
main p a,
main li a,
main td a,
main figcaption a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Not "in text": table-of-contents links, nav, footer, buttons and CTAs
   stay un-underlined even though some (toc <li><a>) match the broad
   selector above on element type alone. */
main .toc a,
main .btn,
main .nav-cta,
main .back {
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   aria-prohibited-attr / agent-accessibility-tree: fixed in markup
   (BaseLayout.astro moved the accessible name from the <label> -- which has
   no ARIA role and so cannot take aria-label -- onto the checkbox itself).
   What styles.css never provided is a way to reach that checkbox: it is
   `display:none` at every breakpoint, which drops it from the tab order
   entirely, so the menu had no keyboard path at all below the 640px
   breakpoint where it is the only way to reach the nav links. This makes it
   present and focusable (the standard "visually hidden" pattern: still
   there for layout/AT purposes, invisible on screen) exactly where the
   checkbox hack is actually in use, and gives it a visible focus ring on
   the hamburger icon so a keyboard user can see where focus is before
   pressing Space to open the menu. Desktop is untouched: the toggle plays
   no role there and stays out of the tab order. */
@media (max-width: 640px) {
  .nav-toggle-input {
    /* styles.css sets .nav-toggle-input{display:none} unconditionally
       (outside any media query), which removes the element from the
       accessibility tree and the tab order entirely -- the
       visually-hidden technique below never had a chance to apply
       because `display` was never being set by it. Overriding display
       back to a rendered value (block) here, inside the one breakpoint
       where the checkbox hack is actually used, restores it to the tab
       order; the position/clip rules still keep it visually hidden. */
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav-toggle-input:focus-visible ~ .nav-toggle {
    outline: 2px solid var(--dv-amber);
    outline-offset: 3px;
    border-radius: 6px;
  }
}

/* ---------------------------------------------------------------------------
   cumulative-layout-shift: styles.css already sets .brand img{height:38px;
   width:auto}, and the <img> carries width="1096" height="1334", which
   should be enough for the browser to reserve the right box from the
   HTML attributes alone -- but an explicit aspect-ratio removes any doubt
   for this specific element, which Lighthouse's shift-attribution pointed
   at on two of the four flagged pages. It is a no-op visually (same
   computed box as today) and a belt-and-suspenders fix, not the primary
   one -- see the font-display change in BaseLayout.astro for that. */
.brand img {
  aspect-ratio: 1096 / 1334;
}