/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Foyl Learn — Canonical platform nav
   One source of truth for the top nav on every
   foyl-learn page EXCEPT Pattern B tool pages
   (tools use #topbar for tool functionality).

   Linked at the END of <head> (after each page's
   inline <style>) so these rules win same-specificity
   conflicts against older per-page nav CSS. Projector
   mode overrides still win — projector.css targets
   html[data-theme="projector"] nav (higher specificity).

   Position is declared with :where() (zero specificity)
   so the home page's fixed nav keeps its own positioning.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:where(nav){position:sticky;top:0;z-index:120}
nav{
  height:56px;flex-shrink:0;
  background:rgba(2,4,3,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:0;padding:0 40px;
}

.nav-logo{display:flex;align-items:center;text-decoration:none;gap:0;flex-shrink:0}
.nav-logo img{height:18px;width:auto}
.nav-sep{width:1px;height:18px;background:var(--border2);margin:0 12px;flex-shrink:0}
.nav-product{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3)}

/* overflow must stay visible — the Extended Learning dropdown is
   absolutely positioned inside; overflow-x:auto would clip it
   (this also overrides older inline CSS on concepts pages) */
.nav-links{display:flex;gap:2px;margin-left:24px;flex:1;min-width:0;overflow:visible}
.nav-link{font-family:var(--font);font-size:12.5px;font-weight:300;color:var(--tx3);text-decoration:none;
  padding:5px 11px;border-radius:5px;transition:color .12s,background .12s;white-space:nowrap}
.nav-link:hover{color:var(--tx2);background:var(--surf)}
.nav-link.here{color:var(--tx);background:var(--surf)}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-back{font-family:var(--font);font-size:12px;font-weight:300;color:var(--tx3);text-decoration:none;
  padding:5px 10px;border-radius:5px;transition:color .15s,background .15s;white-space:nowrap}
.nav-back:hover{color:var(--tx2);background:var(--surf)}

/* ── Extended Learning dropdown ── */
.nav-more{position:relative}
.nav-more-btn{font-family:var(--font);font-size:12.5px;color:var(--tx3);padding:5px 11px;border-radius:5px;
  transition:color .12s,background .12s;font-weight:300;cursor:pointer;display:flex;align-items:center;gap:5px;
  user-select:none;white-space:nowrap}
.nav-more-btn:hover,.nav-more.open .nav-more-btn{color:var(--tx2);background:var(--surf)}
.nav-more-caret{font-size:8px;opacity:.5;transition:transform .15s}
.nav-more.open .nav-more-caret{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:9px;
  padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s,transform .15s;z-index:500}
.nav-more.open .nav-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
.nd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  text-decoration:none;color:var(--tx3);font-size:12.5px;transition:color .1s,background .1s}
.nd-item:hover{background:var(--surf);color:var(--tx2)}
.nd-item.here{color:var(--tx);background:var(--surf)}
.nd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.nd-sep{height:1px;background:var(--border);margin:4px 0}
.nd-ext{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--tx4)}

@media(max-width:760px){
  nav{padding:0 16px}
  .nav-product{display:none}
  .nav-sep{display:none}
  .nav-links{margin-left:12px;gap:0}
  .nav-link,.nav-more-btn{font-size:11.5px;padding:5px 7px}
  .nav-back{display:none}
}
