/* ============================================================================
   Zonex static pages — shared stylesheet (Phase 49B1-B, 49B1-C)
   ============================================================================

   Serves the 10 hand-written pages under `public/`: /privacy, /support, and the
   eight SEO landing pages. Before this file each page carried its own inline
   <style> block; the eight SEO blocks were byte-identical and /support and
   /privacy were near-identical variants, so every contrast or focus fix had to
   be applied ten times and drifted immediately.

   TOKEN SOURCE OF TRUTH: `src/index.css`.
   The values below are a deliberate mirror of the app's tokens, including the
   Phase 49A contrast decisions (light --text-secondary at 0.75 alpha, and
   --accent-text #965c00 replacing #c67a00, which was only ~3.4:1 and failed
   AA). When a token changes in src/index.css it must be changed here too;
   `src/utils/staticPages.test.ts` pins the shared subset so a drift fails.

   These pages deliberately have no build step, no framework, and no runtime
   dependency.

   COLOUR-SCHEME RESOLUTION (Phase 49B1-C). Three states, decided by the inline
   pre-paint script in every page's <head> (canonical source:
   scripts/static-theme-resolver.js), which reads the same `zonex_v1:theme` value
   the app does:

     html.light   explicit light — wins even when the OS is dark
     html.dark    explicit dark  — wins even when the OS is light
     no marker    follow the OS  — script absent, disabled, or bailed out

   Dark is the base, so it is also where an unsupported prefers-color-scheme and a
   missing matchMedia both land — the same fallback as getSystemAppearance().

   The prefers-color-scheme rule is guarded with :not() on BOTH markers, so it is
   structurally incapable of overriding an explicit choice: it does not merely lose
   the cascade, it never matches. That guard is the reason the light tokens are
   written twice, and `src/utils/staticPages.test.ts` asserts the two light blocks
   are token-for-token identical so the copies cannot drift apart.
   ========================================================================== */

/* --- Tokens: dark (base + explicit marker) ------------------------------- */
:root,
html.dark {
  color-scheme: dark;
  --bg-primary: #000000;
  --card: #1c1c1e;
  --separator: rgba(84, 84, 88, 0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(235, 235, 245, 0.6);
  --accent: #ff9f0a;
  --accent-text: #ff9f0a;
  --link: #ff9f0a;
  --button-text: #000000;
  /* Keyboard focus. The ring is a geometry change (a band that was not there
     before), not a colour swap, so it never depends on hue alone. --focus-halo
     fills the outline-offset gap so the ring reads on any surface. */
  --focus-ring: #7ab8ff;
  --focus-halo: rgba(0, 0, 0, 0.9);
}

/* --- Tokens: light (explicit marker) -------------------------------------
   Wins over the OS in both directions, because the fallback block below cannot
   match while a marker is present. */
html.light {
  color-scheme: light;
  --bg-primary: #f2f2f7;
  --card: #ffffff;
  --separator: rgba(60, 60, 67, 0.22);
  --text-primary: #000000;
  /* 0.75, not 0.6 — at 0.6 this was ~3.5:1 on --card and failed AA for the
     13–15px copy it carries here. Mirrors src/index.css. */
  --text-secondary: rgba(60, 60, 67, 0.75);
  /* --accent stays vibrant for fills; --accent-text is the AA-safe variant
     used for text and links. */
  --accent: #ff9f0a;
  --accent-text: #965c00;
  --link: #965c00;
  --button-text: #000000;
  --focus-ring: #0b57d0;
  --focus-halo: rgba(255, 255, 255, 0.95);
}

/* --- Tokens: light (no-marker OS fallback) -------------------------------
   The no-JavaScript path. Values must stay identical to html.light above; the
   :not() guards are what make an explicit stored theme unbeatable here. */
@media (prefers-color-scheme: light) {
  html:not(.light):not(.dark) {
    color-scheme: light;
    --bg-primary: #f2f2f7;
    --card: #ffffff;
    --separator: rgba(60, 60, 67, 0.22);
    --text-primary: #000000;
    --text-secondary: rgba(60, 60, 67, 0.75);
    --accent: #ff9f0a;
    --accent-text: #965c00;
    --link: #965c00;
    --button-text: #000000;
    --focus-ring: #0b57d0;
    --focus-halo: rgba(255, 255, 255, 0.95);
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    system-ui,
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* --- Layout -------------------------------------------------------------
   <header> and <footer> now sit outside <main> so they expose real banner and
   contentinfo landmarks. The reading column therefore has to be applied to all
   three rather than to <main> alone, which is what keeps the visual identical
   to the pre-49B1-B inline layout. */
header,
main,
footer {
  max-width: 680px;
  margin: 0 auto;
  padding-left: clamp(16px, 5vw, 32px);
  padding-right: clamp(16px, 5vw, 32px);
}

header {
  padding-top: clamp(24px, 6vw, 56px);
  margin-bottom: 32px;
}

footer {
  padding-bottom: 80px;
}

/* --- Typography -------------------------------------------------------- */
h1 {
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  font-weight: 700;
}

h2 {
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h3 {
  font-size: 15px;
  margin: 14px 0 4px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h3:first-of-type {
  margin-top: 0;
}

p {
  margin: 0 0 10px;
  font-size: 15px;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

li {
  font-size: 15px;
  margin-bottom: 5px;
}

li:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

/* Sub-headline under the h1. `.tagline` on the SEO pages, `.lede` on /support,
   `.updated` (smaller) on /privacy. */
.tagline,
.lede {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
}

.updated {
  color: var(--text-secondary);
  font-size: 13px;
}

.muted {
  color: var(--text-secondary);
  font-size: 13px;
}

/* --- Cards ------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

/* --- Links ------------------------------------------------------------- */
a {
  color: var(--link);
  text-decoration: none;
}

/* Ordinary prose links keep their underline affordance on hover and focus, and
   deliberately get no padding — WCAG 2.2 SC 2.5.8 exempts targets inline in a
   sentence, and padding them would break the line box. */
a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* --- Button-like links ------------------------------------------------- */
.cta-wrap {
  margin: 24px 0 8px;
}

.cta {
  display: inline-block;
  padding: 12px 22px;
  background: var(--accent);
  color: #0a0a0a;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}

.mailto-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--button-text);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 4px;
}

/* Button-likes are filled surfaces, so an underline would read as damage. They
   opt out of the underline treatment only — the focus ring below still applies,
   which is what they previously lacked: before 49B1-B these rules also matched
   :focus-visible and left the ring as the sole (UA-default) affordance. */
.cta:hover,
.cta:focus-visible,
.mailto-btn:hover,
.mailto-btn:focus-visible,
.skip-link:hover,
.skip-link:focus-visible {
  text-decoration: none;
}

.cta:hover {
  opacity: 0.9;
}

.mailto-btn:hover {
  opacity: 0.92;
}

/* --- Skip link ---------------------------------------------------------
   Absolutely positioned and moved off-screen rather than display:none, so it
   stays focusable. Because it is out of flow, revealing it on focus cannot
   shift the page. */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  background: var(--card);
  color: var(--text-primary);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
  top: 8px;
  z-index: 10;
}

/* <main> carries tabindex="-1" so the skip link can move focus programmatically
   (Safari will not otherwise). It must never render a ring of its own. */
main:focus {
  outline: none;
}

/* --- Footer navigation -------------------------------------------------
   Was a single <p> of `·`-separated links: ~20px tall targets with no spacing,
   below the 24×24 floor of SC 2.5.8, and the separators were read aloud. Now a
   wrapping flex list. Sized to clear 24×24 — deliberately not 44×44, which is
   the touch-control convention and would bloat an ordinary web footer. */
footer nav {
  margin-top: 32px;
  font-size: 13px;
  color: var(--text-secondary);
}

footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

footer nav li {
  font-size: 13px;
  margin-bottom: 0;
}

footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
}

/* --- Keyboard focus ----------------------------------------------------
   Mirrors src/index.css. `outline` is drawn outside the box model, so a focused
   element keeps its dimensions and nothing reflows. The base rule clears the UA
   ring for POINTER interaction only; :focus-visible puts a stronger one back
   for keyboard users. */
a[href]:focus,
button:focus,
summary:focus,
[tabindex]:not([tabindex='-1']):focus {
  outline: none;
}

a[href]:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}

/* No :focus-visible support (pre-15.4 Safari/iOS): restore a plain :focus ring
   rather than leaving those users with no focus indicator at all. */
@supports not selector(:focus-visible) {
  a[href]:focus,
  button:focus,
  summary:focus,
  [tabindex]:not([tabindex='-1']):focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-halo);
  }
}

/* --- /support spacing variant ------------------------------------------
   /support's inline block differed from the shared baseline in four values.
   Scoped here so the page looks exactly as it did before the extraction. */
.page-support header {
  margin-bottom: 24px;
}

.page-support h2 {
  margin: 0 0 10px;
}

.page-support main ul {
  margin: 6px 0 0;
}

.page-support main li {
  margin-bottom: 6px;
}