/* =============================================================
   Base — JSHW

   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;
}

/* 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);
}

/* 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);
}