/* ══════════════════════════════════════════════════════════════════
   UNIVERSE FLOW — Nov 2026 responsive sizing + vertical flow.

   Layout only. Loaded last (after site-nav.css), so it adjusts sizing
   and spacing without editing styles.css or site-nav.css. No markup,
   wording, colors, links or JavaScript change.

   What it does:
   • The homepage stops fitting everything into one screen. The hero
     text, the Universe (orb + 4 planets + lines), Build Your Skills and
     the footer line now sit one after another, and kids scroll down to
     the courses. Scrolling still happens inside #universe-map, exactly
     as before (the zones still open on top of it).
   • The Universe box gets its own fluid height (based on width, never
     on 100vh), so it breathes on laptops instead of being squeezed.
   • The orb, rings and planets scale smoothly with clamp().
   • The header menu collapses into the existing ☰ menu below 1280px.

   Constraint kept on purpose: app.js draws the connecting lines from
   fixed coordinates in a 1440×900 SVG that stretches to the Universe
   box, and swaps to the phone "diamond" lines at ≤640px. So:
   – above 640px the orb stays at top:42% and the planets keep their
     percentage positions, which keeps every line attached;
   – the phone diamond still starts at exactly ≤640px.
══════════════════════════════════════════════════════════════════ */


/* ─── HEADER BACKGROUND: readable while the page scrolls ─────────
   Same dark Universe color the header already used (8,6,18), now
   dark enough that planet labels and course cards scrolling beneath
   never compete with the menu. A soft shadow fades the edge so it
   still reads as part of the sky, not a separate bar. Background
   only — size, spacing and menu behavior are unchanged. */
.rgk-header {
  background: linear-gradient(180deg, rgba(8,6,18,0.97) 0%, rgba(8,6,18,0.93) 100%);
  box-shadow: 0 10px 28px rgba(8,6,18,0.55);
}

/* ─── HEADER NAV: collapse earlier, never squeeze ───────────────── */

/* 641–1279px: use the existing ☰ button + full-screen menu.
   (≤640px already does this in styles.css; 641–1120px in site-nav.css.) */
@media (min-width: 641px) and (max-width: 1279px) {
  .rgk-nav { display: none; }
  .mobile-menu-btn { display: flex; }
}

/* 1280–1499px: full menu on one line with comfortable spacing.
   Decorative icons stay hidden here so labels never compress. */
@media (min-width: 1280px) and (max-width: 1499px) {
  .rgk-nav { gap: 10px; }
  .rgk-nav a { padding: 6px 11px; white-space: nowrap; }
  .rgk-nav .nav-icon { display: none; }
}

/* ≥1500px: the original full menu with icons (styles.css defaults). */
@media (min-width: 1500px) {
  .rgk-nav a { white-space: nowrap; }
}


/* ─── TABLET / LAPTOP / DESKTOP (≥641px) ────────────────────────── */
@media (min-width: 641px) {

  #universe-map {
    /* Universe box height: grows with width, capped both ways.
       768 → 620 · 1024 → 620 · 1280 → 717 · 1366 → 765 · ≥1608 → 900 */
    --uf-zone-h: clamp(620px, 56vw, 900px);
    /* Central orb: 768/1024 → 160 · 1366 → 190 · ≥1637 → 220 */
    --uf-orb: clamp(160px, calc(11vw + 40px), 220px);
    /* Planet orbs: 768 → 56 · 1024 → 59 · 1366 → 67 · ≥1834 → 78 */
    --uf-tool: clamp(56px, calc(2.4vw + 34px), 78px);
  }

  /* Hero text — in normal flow at the top, clear of the fixed header */
  .hero-text {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(92px, calc(4vw + 60px), 128px) 24px 0;
    box-sizing: border-box;
  }
  .hero-headline { font-size: clamp(1.8rem, calc(1.6vw + 1.2rem), 3rem); }

  /* The Universe — its own fluid-height box, centered, below the hero.
     The top ~13% of the box is empty sky (the planets start at 20%),
     so it tucks up under the hero text by that amount. */
  .constellation-zone {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 1600px;
    height: var(--uf-zone-h);
    margin: calc(var(--uf-zone-h) * -0.13) auto 0;
  }

  /* Orb + rings scale together (same ring ratios as before) */
  .orb-container { top: 42%; left: 50%; }
  .central-orb  { width: var(--uf-orb); height: var(--uf-orb); }
  .orb-ring-1   { width: calc(var(--uf-orb) * 1.32); height: calc(var(--uf-orb) * 1.32); }
  .orb-ring-2   { width: calc(var(--uf-orb) * 1.79); height: calc(var(--uf-orb) * 1.79); }
  .orb-ring-3   { width: calc(var(--uf-orb) * 2.42); height: calc(var(--uf-orb) * 2.42); }

  /* Planets scale; labels stay readable */
  .tool-orb      { width: var(--uf-tool); height: var(--uf-tool); }
  .tool-orb-wrap { width: calc(var(--uf-tool) + 8px); height: calc(var(--uf-tool) + 8px); }
  .tool-glyph    { font-size: calc(var(--uf-tool) * 0.36); }
  .tool-label    { font-size: clamp(0.74rem, calc(0.2vw + 0.62rem), 0.86rem); }
  .tool-support  { font-size: clamp(0.74rem, calc(0.15vw + 0.66rem), 0.82rem); }

  /* Build Your Skills — in normal flow, below the Universe.
     The bottom ~16% of the Universe box is empty sky, so the section
     starts a little inside it; the planets always end well above. */
  .build-skills {
    position: relative;
    top: auto; bottom: auto; left: auto;
    transform: none;
    width: 92%;
    max-width: 1100px;
    margin: calc(var(--uf-zone-h) * -0.16) auto 0;
    padding: 0 0 clamp(28px, 4vw, 56px);
    box-sizing: border-box;
  }
  .build-eyebrow { font-size: clamp(0.72rem, calc(0.2vw + 0.6rem), 0.82rem); }
  .build-support { font-size: clamp(0.85rem, calc(0.2vw + 0.72rem), 0.95rem); margin-bottom: clamp(16px, 2vw, 24px); }
  .learning-paths { gap: clamp(12px, 1.6vw, 20px); }

  /* Footer line — in flow at the very bottom */
  .footer-strap {
    position: relative;
    top: auto; bottom: auto; left: auto;
    transform: none;
    text-align: center;
    padding: 0 20px 28px;
  }

  /* Vignette — stays with the viewport while the page scrolls
     (same treatment phones already use) */
  .vignette { position: fixed; }
}

/* Tablet (641–1024px): styles.css nudged the orb to top:38% and the
   planets to 6% from the edges. Keep the 6% edges (more room around the
   orb) but put the orb back at 42%, where the lines start. */
@media (min-width: 641px) and (max-width: 1024px) {
  .orb-container { top: 42%; }
}


/* ─── PHONES (≤640px) — same diamond, more room, nothing clipped ── */
@media (max-width: 640px) {
  .constellation-zone {
    height: clamp(360px, 100vw, 400px);
    max-width: 440px;
    margin: 16px auto 8px;
  }

  /* Planets: never closer than 56–58px to the box edge, so no label is
     cut off on small phones. Where this nudges a planet a few px off
     the 12%/88% line end, the line still ends under the planet. */
  .tool-mirror { top:  max(12%, 56px); }
  .tool-memory { top:  min(88%, calc(100% - 56px)); }
  .tool-daily  { left: max(12%, 58px); }
  .tool-nova   { left: min(88%, calc(100% - 58px)); }

  /* Central orb eases down slightly on the smallest phones so the side
     planets have room (360 → 126 · ≥423 → 148, the previous size) */
  .central-orb { width: clamp(120px, 35vw, 148px); height: clamp(120px, 35vw, 148px); }
  .orb-ring-1  { width: clamp(154px, 45vw, 190px); height: clamp(154px, 45vw, 190px); }
  .orb-ring-2  { width: clamp(201px, 59vw, 248px); height: clamp(201px, 59vw, 248px); }
  .orb-ring-3  { width: clamp(259px, 76vw, 320px); height: clamp(259px, 76vw, 320px); }

  /* Readable labels (were 0.6rem) */
  .tool-label-block { max-width: 104px; }
  .tool-label { font-size: 0.68rem; letter-spacing: 0.08em; }

  .build-skills { padding-top: 28px; }
}