/**
 * Reset and element defaults.
 * Ported verbatim from .docs/mockup/css/base.css (6 Aug 2026).
 * Additions below the marker are theme-only and noted individually.
 */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--off-white);
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--deep-ocean);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
 * THEME-ONLY ADDITIONS — not in the mockup.
 * The mockup is a static page with no login, no skip link and no plain-page
 * template. These are the WordPress surfaces it never had to account for.
 * ======================================================================== */

/* Skip link — WCAG 2.4.1. Visually hidden until focused. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-2xs) var(--space-s);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--deep-ocean);
  color: var(--off-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Plain page template — legal and long-form content, block editor on. */
.page-plain {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
}

.page-plain-head {
  margin-bottom: var(--space-l);
}

.page-plain-head h1 {
  font-size: var(--text-h1);
  font-weight: 800;
}

.page-plain-body {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.page-plain-body h2 { font-size: var(--text-h2); margin-top: var(--space-m); }
.page-plain-body h3 { font-size: var(--text-h3); margin-top: var(--space-s); }
.page-plain-body ul,
.page-plain-body ol { padding-left: var(--space-m); }
.page-plain-body ul { list-style: disc; }
.page-plain-body ol { list-style: decimal; }
.page-plain-body li { margin-bottom: var(--space-3xs); }

.page-plain-body a {
  color: var(--deep-ocean);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-plain-body a:hover { color: var(--terracotta); }

/* Focus visibility, globally. The mockup sets this per component; anything it
   missed still needs to be reachable by keyboard. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* Honour a reduced-motion preference across every animation the theme runs. */
@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;
    scroll-behavior: auto !important;
  }
}