/* ==========================================================================
   nothanumber public site - shared design system
   --------------------------------------------------------------------------
   ONE stylesheet, linked by every page. Before this existed, each page inlined
   its own copy of the tokens and base styles, so they drifted apart. Now the
   tokens and reusable components live here once, and pages only add their own
   page-specific decoration on top.

   Token values are the canonical brand palette (packages/shared BRAND_COLORS
   and docs/brand-guidelines.md). If a brand colour changes, change it there
   first, then here.
   ========================================================================== */

/* ---- Self-hosted font (no third-party CDN - UK GDPR/PECR) ---------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2");
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand / accent (emerald) */
  --accent: #059669;      /* primary green - buttons, primary actions */
  --accent-h: #047857;    /* button hover */
  --accent-l: #34d399;    /* links on dark */
  --green: #10b981;       /* pressed / success / "notha" wordmark */
  --section-header: #065f46;

  /* Backgrounds (dark) */
  --bg: #0f172a;          /* page background */
  --bg2: #1e293b;         /* cards, inputs, panels */
  --bg3: #0d1424;         /* deepest sections */
  --near-black: #0a0a0a;  /* theme-color / splash */

  /* Border */
  --border: #334155;

  /* Text */
  --text: #f1f5f9;        /* headings, body */
  --text-2: #94a3b8;      /* subtitles, muted body */
  --text-3: #64748b;      /* captions, footnotes, placeholders */

  /* Status */
  --red: #ef4444;
  --red-bg: #450a0a;
  --warning: #fbbf24;

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 72px;

  /* Radius / layout */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --container: 1120px;

  /* Focus ring (accessibility) */
  --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.55);

  --transition: 160ms ease;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0 0 var(--sp-md); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--sp-md); }

a { color: var(--accent-l); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; }

/* ---- Accessibility utilities -------------------------------------------- */
/* Visible keyboard focus everywhere (was near-absent before). */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Skip link - lets keyboard/screen-reader users jump past the nav. */
.skip-link {
  position: absolute;
  left: var(--sp-md);
  top: -60px;
  z-index: 100;
  background: var(--green);
  color: var(--near-black);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-md); text-decoration: none; }

/* Screen-reader-only text (visible label without visual clutter). */
.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;
}

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

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

.section { padding-block: var(--sp-3xl); }
.section--tight { padding-block: var(--sp-2xl); }

/* ---- Wordmark (two-tone, all surfaces) ----------------------------------- */
.lw-notha { color: var(--green); }
.lw-number { color: var(--text); }
/* The wordmark only ever sits on dark backgrounds (see brand-guidelines.md). */

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font: inherit;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-h); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--accent-l); text-decoration: none; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-lg);
}

/* ---- Coming-soon pill ---------------------------------------------------- */
.coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-l);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.coming-soon-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}

/* ---- Accessible form fields (waitlist etc.) ------------------------------ */
.field { display: grid; gap: var(--sp-xs); }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--text-2); }
.field input {
  font: inherit;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
}
.field input::placeholder { color: var(--text-3); }
.field input:focus-visible { border-color: var(--accent-l); box-shadow: var(--focus-ring); }
.form-status { font-size: 0.9rem; color: var(--accent-l); min-height: 1.4em; }
.form-status[data-state="error"] { color: var(--red); }

/* ---- FAQ accordion (native <details> - accessible by default) ------------ */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  margin-bottom: var(--sp-sm);
}
.faq-item > summary {
  cursor: pointer;
  padding: var(--sp-md) var(--sp-lg);
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  align-items: center;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--accent-l); font-size: 1.4rem; line-height: 1; }
.faq-item[open] > summary::after { content: "\2212"; } /* minus */
.faq-item > summary:focus-visible { box-shadow: var(--focus-ring); }
.faq-answer { padding: 0 var(--sp-lg) var(--sp-md); color: var(--text-2); }

/* ---- Global nav ---------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: var(--sp-sm);
}
.nav-logo { display: inline-flex; align-items: center; gap: var(--sp-sm); font-weight: 700; color: var(--text); }
.nav-logo:hover { text-decoration: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  list-style: none;
}
.nav-links a { color: var(--text-2); font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-cta {
  color: var(--text) !important;
  background: var(--accent);
  padding: 8px 16px;
  border-radius: var(--radius);
}
.nav-cta:hover { background: var(--accent-h); text-decoration: none; }

.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: var(--sp-sm); }

/* ---- Global footer ------------------------------------------------------- */
.site-footer {
  background: var(--bg3);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-2xl);
  color: var(--text-3);
  font-size: 0.9rem;
}
.site-footer .container { display: grid; gap: var(--sp-lg); }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--sp-2xl); justify-content: space-between; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); margin-bottom: var(--sp-sm); }
.footer-col a { display: block; color: var(--text-3); padding: 3px 0; }
.footer-col a:hover { color: var(--text); text-decoration: none; }
.footer-legal { border-top: 1px solid var(--border); padding-top: var(--sp-md); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
  .nav-links {
    position: absolute;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-sm) var(--sp-lg) var(--sp-lg);
    display: none;
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links a { padding: var(--sp-md) 0; }
  .nav-toggle { display: inline-flex; }
  .footer-cols { gap: var(--sp-lg); }
  .section { padding-block: var(--sp-2xl); }
}

/* ---- Long-form content: guides / articles -------------------------------- */
.prose { max-width: 720px; margin-inline: auto; }
.prose > * + * { margin-top: var(--sp-md); }
.prose h2 { margin-top: var(--sp-2xl); font-size: clamp(1.35rem, 3vw, 1.9rem); }
.prose h3 { margin-top: var(--sp-xl); }
.prose p, .prose li { color: var(--text); }
.prose ul, .prose ol { padding-left: var(--sp-lg); }
.prose li + li { margin-top: var(--sp-xs); }
.lead { font-size: 1.15rem; color: var(--text-2); }
/* The answer-first opening block AI/search quotes first. */
.answer-first {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg);
  font-size: 1.1rem;
}

/* Breadcrumbs (nested pages) */
.breadcrumbs { font-size: 0.85rem; color: var(--text-3); margin-bottom: var(--sp-md); }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs span[aria-current] { color: var(--text-3); }

/* Guides hub cards */
.guide-grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.guide-card { display: block; height: 100%; }
.guide-card:hover { border-color: var(--accent-l); text-decoration: none; }
.guide-card h3 { margin: 0 0 var(--sp-xs); color: var(--text); }
.guide-card p { margin: 0; color: var(--text-2); font-size: 0.95rem; }