/* =============================================================
   Base

   Document-level defaults only: box model, page background and
   body type, inline link colour, and the visually-hidden utility.
   Nothing component-specific belongs here.

   Structure only. Every value is a token from tokens.css — no
   hard-coded hex, spacing or type values in here (see CLAUDE.md).

   Load order: 2nd, after tokens.css. See the stylesheet block in
   _includes/layouts/base.njk for the full order and why it matters.
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Programmatic focus targets — the consent banner's title, and <main> once
   the banner hands focus back to the page. Not controls, and not reachable
   with Tab, so no ring: the next Tab moves on to something that has one. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Content available to screen readers but not painted. clip-path replaced
   the deprecated `clip` on 2 Sep 2026 (stylelint 17 flags it via
   property-no-deprecated). inset(50%) on a 1px box clips it to nothing,
   which is the standard modern equivalent; clip-path has been supported
   everywhere since ~2016 and this site has no legacy-browser target.
   Do NOT swap either of these for display:none or visibility:hidden —
   both remove the element from the accessibility tree, which is the
   opposite of what this class is for. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* Cross-fade between pages instead of a hard cut. Both pages opt in
   with this same rule, which is why it lives in a stylesheet every page
   loads. The browser's default root cross-fade, nothing custom: a
   brochure site gains nothing from slides or morphs, and every custom
   animation is one more thing to keep honest under reduced motion.
   Browsers without cross-document view transitions navigate exactly as
   before, and visitors who ask for reduced motion keep the instant cut. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Inline text links (not nav, footer or .button, which set their own
   colour more specifically). Keeps the underline — colour alone isn't
   a sufficient link indicator (WCAG 1.4.1). */
a {
  color: var(--color-brand-strong);
}

/* Equal specificity (0,1,1) to `.site-footer a` in layout.css, which
   deliberately wins for footer links on hover. That only holds while
   this file loads BEFORE layout.css — see base.njk. */
a:hover,
a:focus-visible {
  color: var(--color-brand);
}