/* base.css — reset, font-faces, root elements, accessibility */

/* ── Font faces — self-hosted woff2, Latin subset ───────────────── */
/* Preloads declared in inc/enqueue.php. Licence files in assets/fonts/. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: var(--sp-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
table { border-collapse: collapse; }

/* ── Type scale ──────────────────────────────────────────────────── */
h1 {
  font-family: var(--sp-font-display);
  font-size: var(--sp-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h2 {
  font-family: var(--sp-font-display);
  font-size: var(--sp-h2);
  line-height: 1.06;
  font-weight: 700;
}
h3 {
  font-family: var(--sp-font-body);
  font-size: var(--sp-h3);
  font-weight: 500;
  line-height: 1.3;
}
h4, h5, h6 {
  font-family: var(--sp-font-body);
  font-weight: 600;
  line-height: 1.35;
}

/* ── Accessibility ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -120%;
  left: 1rem;
  background: var(--sp-ink);
  color: var(--sp-surface);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.1s;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--sp-blue);
  outline-offset: 3px;
}

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

/* ── Scroll reveal base ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--sp-ease-lg), transform var(--sp-ease-lg);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* Pillar block stagger (300 ms apart) */
@media (prefers-reduced-motion: no-preference) {
  .pillar-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--sp-ease-lg), transform var(--sp-ease-lg), padding-left 0.3s ease;
  }
  .pillar-block.is-visible { opacity: 1; transform: none; }
  .pillar-block:nth-child(1) { transition-delay: 0ms; }
  .pillar-block:nth-child(2) { transition-delay: 300ms; }
  .pillar-block:nth-child(3) { transition-delay: 600ms; }
  .pillar-block:nth-child(4) { transition-delay: 900ms; }
}

/* Static fallback — everything visible, no motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}