/* ==========================================================================
   RESET
   Minimal and opinionated. Normalises the things that actually bite, and
   leaves the rest to the browser.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:focus-within { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* Stop long SKUs and unbroken codes forcing horizontal page scroll. */
p, li, h1, h2, h3, h4, h5, h6, dd, dt, td, th {
  overflow-wrap: break-word;
}

/* Lists used for navigation carry no list semantics visually. */
:where(ul, ol)[class] {
  list-style: none;
  padding: 0;
}

/* A visible focus ring is not optional. Never remove this.

   Two rings, not one. The blue outline reaches 6.4:1 on a white ground
   but only 2.95:1 on Suresafe Black, so on the hero, the footer, the
   specialist block and the archive CTA it would be effectively invisible
   — and those are exactly the places a keyboard user is trying to reach
   a button. The white halo sits outside it: invisible on a light ground
   where the blue already works, and 19:1 on a dark one where it does not.

   WCAG 2.2 adds 2.4.13 Focus Appearance, which wants a ring at least
   2px thick around the whole control. Both rings satisfy it. */
:focus-visible {
  outline: 2px solid var(--ssp-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ssp-surface);
}

/* An in-page target must not land underneath anything sticky
   (WCAG 2.2, 2.4.11 Focus Not Obscured). */
:target,
[id] { scroll-margin-block-start: var(--ss-space-m); }

:where(table) { border-collapse: collapse; }

:where(button) { cursor: pointer; background: none; border: 0; padding: 0; }