/* ═══════════════════════════════════════════════════════════════════════════
   guides.css — shared styling for the standalone guide pages
   ═══════════════════════════════════════════════════════════════════════════

   These pages are hand-written static HTML, served straight from /public. No
   React, no bundle, no hydration. That is the whole point: an answer-engine
   crawler that runs no JavaScript still gets the complete article, and the
   page paints in one round trip.

   Tokens are copied from gold.css rather than imported because these pages
   load no app CSS at all. That duplication is deliberate and small, but it
   does mean a palette change in gold.css needs mirroring here. The token
   names are kept identical so a diff between the two files is readable.

   Type scale is NOT copied wholesale. gold.css sizes h1 for a hero
   (clamp up to 7rem); an article headline at that size would be absurd. The
   families, colours, spacing rhythm and easing all match; the scale is set
   for reading.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --g-bg:        #05080f;
  --g-surface-1: #080d18;
  --g-surface-2: #0c1322;
  --g-surface-3: #111a2c;

  --g-text:   #eef3fb;
  --g-text-2: #93a4c0;
  --g-text-3: #5c6d8a;

  --g-accent:      #38bdf8;
  --g-accent-soft: rgba(56, 189, 248, 0.12);
  --g-accent-line: rgba(56, 189, 248, 0.30);

  --g-line:        rgba(148, 180, 220, 0.10);
  --g-line-strong: rgba(148, 180, 220, 0.20);

  --g-display: 'Space Grotesk', system-ui, sans-serif;
  --g-body:    'Space Grotesk', system-ui, sans-serif;
  --g-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --g-r-sm: 2px;
  --g-r-md: 4px;
  --g-ease: cubic-bezier(0.16, 1, 0.30, 1);

  /* Measure. 68ch is the upper end of comfortable for body text; these are
     long-form pages and the line length is what makes them readable. */
  --g-measure: 68ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--g-bg);
  color: var(--g-text-2);
  font-family: var(--g-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.g-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.25rem, 5vw, 3rem);
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--g-line);
}

.g-header a { text-decoration: none; }

.g-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--g-text);
  font-family: var(--g-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.g-wordmark img { width: 26px; height: 26px; }

/* "Back to site" affordance on the wordmark. A logo that links home is a
   convention, not a signpost: on a standalone guide, reached cold from a
   search result, nothing tells the reader the main site exists. The arrow and
   label say it outright. Hidden below 640px, where the wordmark alone has to
   carry it. */
.g-home-hint {
  color: var(--g-text-3);
  font-family: var(--g-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s var(--g-ease);
}

.g-wordmark:hover .g-home-hint { color: var(--g-accent); }

@media (max-width: 640px) {
  .g-home-hint { display: none; }
}

/* ── Guides dropdown ─────────────────────────────────────────────────────
   CSS-only, no JavaScript. Every guide link is a plain <a href> present in
   the HTML at all times, so crawlers follow all six regardless of hover
   state. A JS-built menu would hide them from exactly the answer-engine
   crawlers these pages exist for.

   Opens on :hover and on :focus-within, so it is keyboard reachable. */

.g-dropdown { position: relative; }

.g-dropdown > .g-navlink::after {
  content: ' ▾';
  color: var(--g-text-3);
}

.g-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 268px;
  padding: 0.5rem;
  background: var(--g-surface-2);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--g-r-md);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--g-ease), transform 0.2s var(--g-ease),
              visibility 0s linear 0.2s;
  z-index: 20;
}

.g-dropdown:hover .g-dropdown-menu,
.g-dropdown:focus-within .g-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Bridges the gap between trigger and menu so the menu does not close while
   the pointer travels to it. */
.g-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 0.75rem;
}

.g-dropdown-menu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--g-r-sm);
  color: var(--g-text-2);
  font-family: var(--g-body);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background 0.2s var(--g-ease), color 0.2s var(--g-ease);
}

.g-dropdown-menu a:hover,
.g-dropdown-menu a:focus-visible {
  background: var(--g-surface-3);
  color: var(--g-text);
}

.g-dropdown-menu a.current {
  color: var(--g-accent);
  background: var(--g-accent-soft);
}

@media (max-width: 640px) {
  .g-dropdown-menu {
    position: fixed;
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }
}

.g-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  font-family: var(--g-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.g-nav a {
  color: var(--g-text-3);
  transition: color 0.25s var(--g-ease);
}

.g-nav a:hover { color: var(--g-text); }

.g-nav a.current { color: var(--g-accent); }

.g-login {
  padding: 0.5rem 1rem;
  border: 1px solid var(--g-line-strong);
  border-radius: var(--g-r-sm);
  color: var(--g-text) !important;
}

.g-login:hover { border-color: var(--g-accent-line); }

/* ── Article ────────────────────────────────────────────────────────────── */

.g-article {
  max-width: var(--g-measure);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

.g-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--g-text-3);
  font-family: var(--g-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.g-article h1 {
  margin: 0 0 1.5rem;
  color: var(--g-text);
  font-family: var(--g-display);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.g-standfirst {
  margin: 0 0 3rem;
  color: var(--g-text-2);
  font-size: 1.2rem;
  line-height: 1.6;
}

.g-article h2 {
  margin: 3.5rem 0 1.1rem;
  color: var(--g-text);
  font-family: var(--g-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.g-article h3 {
  margin: 2.25rem 0 0.75rem;
  color: var(--g-text);
  font-family: var(--g-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.g-article p { margin: 0 0 1.35rem; }

.g-article strong { color: var(--g-text); font-weight: 600; }

.g-article a {
  color: var(--g-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--g-accent-line);
  transition: border-color 0.25s var(--g-ease);
}

.g-article a:hover { border-bottom-color: var(--g-accent); }

.g-article ul { margin: 0 0 1.35rem; padding-left: 1.15rem; }
.g-article li { margin-bottom: 0.6rem; }
.g-article li::marker { color: var(--g-accent); }

/* ── Callout ────────────────────────────────────────────────────────────── */

.g-callout {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--g-surface-2);
  border: 1px solid var(--g-line);
  border-left: 2px solid var(--g-accent);
  border-radius: var(--g-r-md);
}

.g-callout p:last-child { margin-bottom: 0; }

/* ── Table ──────────────────────────────────────────────────────────────── */

.g-table-wrap { margin: 2.5rem 0; overflow-x: auto; }

.g-article table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.g-article th,
.g-article td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--g-line);
  vertical-align: top;
}

.g-article th {
  color: var(--g-text);
  font-family: var(--g-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.g-article tbody tr:hover { background: var(--g-surface-1); }

/* ── CTA ────────────────────────────────────────────────────────────────── */

.g-cta-band {
  margin: 4rem 0 0;
  padding: 2.5rem 2rem;
  background: var(--g-surface-1);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  text-align: center;
}

.g-cta-band h2 { margin: 0 0 0.75rem; font-size: 1.6rem; }
.g-cta-band p  { margin: 0 auto 1.75rem; max-width: 46ch; }

/* Selector is `.g-article a.g-btn`, not a bare `.g-btn`, and that matters.
   The CTA button sits inside .g-article, so the inline-link rule above
   (`.g-article a`, specificity 0-2-0) outranks a bare `.g-btn` (0-1-0) and
   paints the label in --g-accent: the exact colour of the button's own
   background, leaving an apparently empty blue rectangle. Matching the
   parent's specificity is the fix. `border-bottom: none` is here for the same
   reason, since inline links carry an underline this one must not inherit. */
.g-article a.g-btn,
.g-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: var(--g-accent);
  border: none;
  border-bottom: none;
  border-radius: var(--g-r-sm);
  color: #04121c;
  font-family: var(--g-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s var(--g-ease), box-shadow 0.25s var(--g-ease);
}

.g-article a.g-btn:hover,
.g-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
  border-bottom-color: transparent;
}

/* ── Related ────────────────────────────────────────────────────────────── */

.g-related {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--g-line);
}

.g-related h2 { margin: 0 0 1.25rem; font-size: 1.1rem; }

.g-related ul { list-style: none; margin: 0; padding: 0; }
.g-related li { margin-bottom: 0.85rem; }

.g-related a {
  color: var(--g-text);
  border-bottom: none;
  font-weight: 500;
}

.g-related a:hover { color: var(--g-accent); }

.g-related span {
  display: block;
  color: var(--g-text-3);
  font-size: 0.9rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.g-footer {
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem);
  border-top: 1px solid var(--g-line);
  color: var(--g-text-3);
  font-family: var(--g-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.g-footer a { color: var(--g-text-3); text-decoration: none; }
.g-footer a:hover { color: var(--g-text); }

/* ── Accessibility ──────────────────────────────────────────────────────── */

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