/* ═══════════════════════════════════════════════════════════════
   Base — reset and element defaults
   Adapted from the design system's base/reset.css, with the green
   heading colours re-mapped to the client's palette.
   ═══════════════════════════════════════════════════════════════ */

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

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

  /* Every "get in touch" CTA on the site lands on contact.php#enquiry,
     and a jump-cut from the middle of one page to the middle of
     another loses people. The reduced-motion override in tokens.css
     already forces this back to auto, so nobody is made ill by it.

     scroll-padding gives the target a little air. The header is not
     sticky, so there is nothing to clear beyond that. */
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--tracking-normal);
  color: var(--bbb-ink);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-weight: var(--weight-semibold);
}

p { margin: 0; }

/* Body copy avoids typographic orphans. Headings set their own. */
p, li, dd { text-wrap: pretty; }

a {
  color: var(--bbb-red-deep);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

img { height: auto; }

button {
  font-family: var(--font-primary);
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

input, select, textarea {
  font-family: var(--font-primary);
  font-size: 16px;  /* 16px stops iOS Safari zooming on focus */
  color: var(--bbb-ink);
}

ul, ol { list-style: none; margin: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

/* Fieldsets group the form's four steps semantically. The browser
   default border and legend inset are pure decoration here. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* Every figure on the site aligns in columns. */
.tabular, .stat__figure, .stock-tile__units, .stepper__value,
.availability__group, .group-tile, .eligibility-strip__figure {
  font-variant-numeric: tabular-nums;
}

/* ── Focus ───────────────────────────────────────────────────── */
/* Visible for keyboards, absent for mouse users. */
:focus-visible {
  outline: 2px solid var(--bbb-red-deep);
  outline-offset: 2px;
  border-radius: var(--radius-flag);
}

:focus:not(:focus-visible) { outline: none; }

/* On indigo bands the red ring is invisible — use white. */
.band--indigo :focus-visible,
.site-footer :focus-visible,
.topbar :focus-visible {
  outline-color: #FFFFFF;
}

/* ── Accessibility utilities ─────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--bbb-red-deep);
  color: #fff;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  border-radius: 0 0 var(--radius-input) 0;
}

.skip-link:focus {
  left: 0;
  text-decoration: none;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .topbar, .site-nav, .mobile-bar, .site-footer nav,
  .btn, .accordion__toggle { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }

  /* A printed page cannot be clicked — spell the destination out. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}