/* ============================================================
   nav-mega.css — MEGAMENU NAV (prototype)

   Loaded ONLY by public/index.html. Every rule is scoped to
   `.nav--mega`, so the 109 pages still running the legacy
   `.submenu` nav in site.css are completely unaffected.

   Rules honored (docs/CLAUDE.md):
   - Inter only. No third typeface.
   - Amber = punctuation. Exactly one mark in the panel (the
     rail dot); the wordmark dot is the other. Two per view.
   - Warm orange stays CTA-only — the nav already spends the
     page's one CTA on "Book the working session", so nothing
     inside the panel is warm. Secondary actions use --primary.
   ============================================================ */

/* ---------- bar ---------- */
.nav--mega .nav-inner{position:relative}
.nav--mega .nav-links{gap:.15rem}
.nav--mega .nav-item{position:relative;display:flex;align-items:center}

.nav--mega .nav-item > a{
  display:inline-flex;align-items:center;height:38px;padding:0 .55rem;
  border-radius:var(--radius-button);color:var(--ink);
  font-weight:500;font-size:14.5px;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease)
}
.nav--mega .nav-item > a:hover{background:var(--grey-100);color:var(--primary)}
.nav--mega .nav-item > a.current,
.nav--mega .nav-item > a.current-section{color:var(--primary);font-weight:600}

/* Disclosure is a real <button> so tap + keyboard work, while the
   parent stays a navigable link to its own overview page. This is
   the fix for the hover-only submenus: a touch device with a wide
   viewport (iPad landscape) currently gets no way to open them. */
.nav--mega .mega-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:38px;margin-left:-.3rem;padding:0;
  background:none;border:0;cursor:pointer;color:var(--canvas-muted);
  border-radius:var(--radius-button)
}
.nav--mega .mega-toggle svg{display:block;transition:transform .2s var(--ease)}
.nav--mega .mega-toggle:hover{color:var(--primary)}
.nav--mega .nav-item[data-open="true"] .mega-toggle svg{transform:rotate(180deg)}
.nav--mega .mega-toggle:focus-visible,
.nav--mega .nav-links a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ---------- panel ---------- */
.nav--mega .mega{
  position:absolute;top:calc(100% + 10px);left:-.55rem;z-index:60;
  background:#fff;border:1px solid var(--canvas-border);
  border-radius:var(--radius);
  box-shadow:0 28px 60px -30px rgba(15,27,61,.5);
  padding:1.35rem;display:none
}
/* invisible bridge so the pointer can travel from bar to panel */
.nav--mega .mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav--mega .nav-item[data-open="true"] > .mega{display:block}

@media (hover:hover) and (pointer:fine){
  .nav--mega .nav-item.has-menu:hover > .mega,
  .nav--mega .nav-item.has-menu:focus-within > .mega{display:block}
}

.nav--mega .mega-grid{display:grid;gap:1.6rem}
.nav--mega .mega--services .mega-grid{grid-template-columns:236px 236px 224px}
.nav--mega .mega--ai .mega-grid{grid-template-columns:252px 276px}
.nav--mega .mega--work .mega-grid{grid-template-columns:286px 210px}
.nav--mega .mega--list{padding:.55rem;min-width:270px}

/* column heading — no amber dot; the eyebrow's dot is reserved */
.nav--mega .mega-h{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--canvas-muted);margin:0 0 .55rem;padding:0 .6rem
}

/* ---------- links ---------- */
.nav--mega .mega-link{
  display:block;padding:.5rem .6rem;border-radius:.5rem;
  color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.3;
  transition:background .15s var(--ease),color .15s var(--ease)
}
.nav--mega .mega-link:hover{background:var(--grey-50);color:var(--primary)}
.nav--mega .mega-link .d{
  display:block;margin-top:.15rem;
  font-size:12.5px;font-weight:400;line-height:1.4;color:var(--canvas-muted)
}
.nav--mega .mega-link .m{
  display:inline-block;margin-right:.4rem;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--primary)
}
.nav--mega .mega-link.current{background:var(--grey-50);color:var(--primary)}

.nav--mega .mega-all{
  display:inline-flex;align-items:center;gap:.3rem;
  margin-top:.35rem;padding:.4rem .6rem;
  font-size:13px;font-weight:600;color:var(--primary)
}
.nav--mega .mega-all:hover{color:var(--ink)}

/* ---------- rail (the one amber mark in the panel) ---------- */
.nav--mega .mega-rail{background:var(--accent);border-radius:.75rem;padding:1rem 1.05rem}
.nav--mega .mega-rail .mega-h{
  padding:0;display:inline-flex;align-items:center;gap:.5rem;color:var(--ink)
}
.nav--mega .mega-rail .mega-h::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:0 0 auto
}
.nav--mega .mega-rail p{
  margin:0 0 .75rem;font-size:12.5px;line-height:1.5;color:var(--canvas-muted)
}
.nav--mega .mega-rail a{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:13px;font-weight:600;color:var(--primary)
}
.nav--mega .mega-rail a:hover{color:var(--ink)}

/* ============================================================
   Mobile / tablet — accordion, not a wall of links.
   Matches site.css's 1120px nav breakpoint. Once this ships to
   all pages the bar is narrow enough to drop that to ~1024px.
   ============================================================ */
@media(max-width:1120px){
  /* The panel is absolutely positioned inside a sticky header, so anything
     taller than the viewport is unreachable — page scroll does not move it.
     Cap it to the space under the bar and let the panel scroll itself.
     dvh handles collapsing mobile browser chrome; vh is the fallback. */
  .nav--mega .nav-links{
    padding:.25rem 1.5rem 1.25rem;
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:var(--canvas-border) transparent
  }
  .nav--mega .nav-links::-webkit-scrollbar{width:6px}
  .nav--mega .nav-links::-webkit-scrollbar-thumb{background:var(--canvas-border);border-radius:9999px}
  .nav--mega .nav-links::-webkit-scrollbar-track{background:transparent}
  .nav--mega .nav-item{display:block}
  .nav--mega .nav-item > a{
    height:auto;width:100%;padding:.8rem 0;border-radius:0;
    border-top:1px solid var(--canvas-border)
  }
  .nav--mega .nav-item > a:hover{background:transparent}
  .nav--mega .nav-links li:first-child > a{border-top:0}

  .nav--mega .mega-toggle{position:absolute;top:0;right:0;width:48px;height:49px;margin:0}

  .nav--mega .mega{
    position:static;display:none;padding:0 0 .7rem;
    background:transparent;border:0;box-shadow:none;border-radius:0
  }
  .nav--mega .mega::before{display:none}
  .nav--mega .nav-item[data-open="true"] > .mega{display:block}

  .nav--mega .mega-grid{grid-template-columns:1fr !important;gap:1rem}
  .nav--mega .mega-h{padding:0}
  .nav--mega .mega-link{
    padding:.5rem 0 .5rem .9rem;border-left:2px solid var(--canvas-border);border-radius:0
  }
  .nav--mega .mega-link:hover{background:transparent}
  .nav--mega .mega-all{padding:.45rem 0 .45rem .9rem}
  .nav--mega .mega-rail{padding:.9rem 1rem}
}