/* ---- Site design tokens and base styles ----
 *
 * Ported verbatim from Work/Website1/app/globals.css lines 179-208. The values
 * are the single source of truth documented in Plan/09-color-system.md; change
 * a colour there and here together.
 *
 * One deliberate difference from the Next.js original: --font-geist.
 * Next.js set that custom property through next/font/google, which downloads
 * Geist at build time and emits an inline @font-face block. WordPress has no
 * equivalent, and calling Google Fonts at render time would both break the
 * `font-src 'self'` CSP in inc/security.php and put a third-party request in
 * front of Dutch visitors (a GDPR question the client has not been asked).
 *
 * So the font is self-hosted. The four woff2 files are in assets/fonts/ and the
 * @font-face block below picks them up. font-display: swap keeps text visible
 * while they load, and the stack falls through to the system sans-serif if a
 * file is ever missing. See docs/porting-map.md, "Fonts".
 */

/* Self-hosted Geist: Regular, Medium, SemiBold and Bold, from
 * https://github.com/vercel/geist-font/releases. */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #13221c;
  --ink-muted: #4d5f56;
  --green: #62a51f;
  --green-deep: #367e12;
  --green-soft: #f3f7ee;
  --paper: #ffffff;
  --mist: #f7f9f4;
  --line: #dce5d7;
  --forest: #2f6b1f;
  --lime: #8aaf2b;
  --blue: #2768bc;
  --orange: #ef7e18;
  --radius: 1rem;
  --font-geist: 'Geist';
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-geist), Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #9bd347; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Screen-reader-only utility. The Next.js build had no skip link because the
 * header was the first focusable element on every route; WordPress themes are
 * expected to ship one, and header.php now renders it. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link:focus {
  background: var(--paper);
  clip-path: none;
  color: var(--green-deep);
  height: auto;
  left: 1rem;
  padding: .75rem 1.25rem;
  top: 1rem;
  width: auto;
  z-index: 100;
}