/* ============================================================
   base.css: WDS Site Framework
   BYTE-IDENTICAL ON EVERY SITE. Do not edit per client.

   SCOPE: structure and accessibility only.

   This file deliberately carries no design opinions. It does not
   set type scales, link colors, button fills, or decorative
   borders and backgrounds. Those live in the starter site.css,
   which every client owns and may replace outright.

   The rule: if removing a declaration would break layout,
   keyboard access, or an assistive technology, it belongs here.
   If removing it would only change how the site looks, it does
   not.
   ============================================================ */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Token wiring only. Sizes, weights, and leading are client-owned. */
body {
  font-family: var(--font-body);
  color: var(--brand-ink);
  background: var(--brand-surface);
}

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

/* ── Accessibility baseline ───────────────────────────────────
   Everything below is load-bearing for WCAG 2.1 AA. Appearance
   here is functional, not decorative. Override with care.
   ─────────────────────────────────────────────────────────── */

/* 2.4.7 Focus Visible. Never remove. Recolor via --brand-primary
   or an outline-color override in site.css. */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 2.4.1 Bypass Blocks. Colors are set here rather than left to
   site.css: a skip link that is unreadable on focus is a failure,
   so it must not depend on a client remembering to style it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-sm) var(--space-md);
  background: var(--brand-ink);
  color: var(--brand-surface);
  font-weight: 600;
  text-decoration: underline;
}
.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* Screen-reader-only text that remains focusable */
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* 2.3.3 Animation from Interactions */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Headings inherit the display face and resist widows. Sizes,
   leading, and spacing are client-owned. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-wrap: balance;
}

/* ── Layout ───────────────────────────────────────────────── */
.wrap {
  width: min(100% - (var(--space-md) * 2), var(--max-width));
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--brand-surface-alt); }

/* ── Header and navigation: structure only ────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-height);
}

.site-header__brand { display: inline-flex; align-items: center; }

.site-nav__list {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
}

.site-nav__link {
  display: inline-block;
  padding: var(--space-xs) 0;
}

/* Toggle: hidden on desktop, shown at narrow widths.
   min-height enforces the 44px touch target (2.5.5). */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .site-nav.is-open { display: block; }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-sm);
  }
  .site-nav__link {
    display: block;
    padding: var(--space-sm) 0;
    min-height: 44px;
  }
  .site-header__inner { flex-wrap: wrap; }
}

/* ── Buttons: interaction surface only ────────────────────────
   Fill, border, radius, and type are client-owned. Only the
   touch target and pointer affordance are enforced here. */
.btn {
  display: inline-block;
  cursor: pointer;
  min-height: 44px;
}

/* ── Forms ────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-md); }

.field label { display: block; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--brand-ink);
  background: var(--brand-surface);
  min-height: 44px;
}

.field textarea { min-height: 8rem; resize: vertical; }

.field__hint { display: block; }

/* 3.3.1 Error Identification: errors must not rely on color
   alone, and invalid fields must be distinguishable. */
.field__error {
  display: block;
  color: var(--brand-error);
  font-weight: 600;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--brand-error);
  border-width: 2px;
}

.required-marker { color: var(--brand-error); }

.form-status { border: 2px solid; }
.form-status--ok    { border-color: var(--brand-success); color: var(--brand-success); }
.form-status--error { border-color: var(--brand-error);   color: var(--brand-error); }

/* Honeypot: hidden from sight and from assistive tech */
.hp-field { position: absolute; left: -9999px; }

/* ── Footer: structure only ───────────────────────────────── */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: space-between;
}

.site-footer__list { list-style: none; margin: 0; }

/* Multi-column footer navigation. Columns wrap rather than squeeze. */
.site-footer__nav--columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.site-footer__col { flex: 1 1 10rem; }

/* The build credit link inherits the footer's own text colour rather
   than falling through to the site's global link colour. On a dark
   footer that fallback is usually unreadable, and a client migrating
   an existing design has no reason to know the class exists. This is
   failure-prevention, not styling: override it freely in site.css. */
.site-footer__credit a { color: inherit; }

/* Copyright and build credit share one row, wrapping only when the
   viewport cannot hold both. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  align-items: baseline;
  /* This is a <p>, so a measure limit on paragraphs would otherwise
     squeeze the row and force the credit onto a second line. */
  max-width: none;
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer__nav, .nav-toggle, .skip-link { display: none; }
  body { color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}