/* ═══════════════════════════════════════════════════════════════════
   Syntopi.com — Shared Top-Nav CSS
   Canonical source for .top-nav / .nav-item / .nav-items structure.

   Status: INCREMENTAL MIGRATION (design-audit-fixes 2026-04-22)
   Each page currently has this CSS duplicated inline in its <style>
   block. The <link> tags reference this file, but the inline <style>
   (which appears later in the document) still wins via source order.
   To complete migration: remove the duplicate nav rules from each
   template's inline <style> one file at a time and verify rendering.

   Relative-path guide for <link href="…/_css/nav.css">:
     tools/editor/ideas/*.html      → ../_css/nav.css
     tools/editor/authors/*.html    → ../_css/nav.css
     tools/editor/index.html        → _css/nav.css
     tools/editor/about.html        → _css/nav.css
     tools/propaidia/*.html         → ../editor/_css/nav.css
     tools/phase2_prototype/*.html  → ../editor/_css/nav.css
     index.html (root)              → tools/editor/_css/nav.css
   ═══════════════════════════════════════════════════════════════════ */

/* Depends on palette tokens from palette.css (loaded before this file):
   --color-cobalt, --color-emerald, --color-gold, --color-teal,
   --color-indigo-black, --info-text, --text, --text-secondary,
   --text-tertiary, --border, --font-serif */

.top-nav {
  display: flex; align-items: center;
  gap: 6px 24px; flex-wrap: wrap;
  /* Tom 2026-04-29 (iOS edge-to-edge fix): the iOS shell uses
     `.ignoresSafeArea()` so the WebView extends to the device top.
     Without this padding the logo + nav links collide with the
     status bar (time, signal, battery). `viewport-fit=cover` in the
     <meta> exposes env(safe-area-inset-top) — typically 0 on Mobile
     Safari + desktop, ~44–50pt on a notched iPhone. We ADD the
     existing 14px gutter on top so the chrome stays below the
     status bar with breathing room. */
  padding: calc(14px + env(safe-area-inset-top)) 0 10px;
  margin-bottom: 20px;
  border-bottom: 0.5px solid var(--border);
}
.top-nav .top-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  margin-right: auto;
  transition: color 0.15s;
}
.top-nav .top-logo:hover { color: var(--info-text); }
/* P0-3 / 2026-04-26 audit: explicit keyboard focus indicator. Browsers'
   defaults vary; pinning the same 2px ring used by .nav-item / .cta keeps
   the focus pattern consistent across every surface that uses this nav. */
.top-nav .top-logo:focus-visible {
  outline: 2px solid var(--info-text);
  outline-offset: 4px;
  border-radius: 4px;
}
.top-nav .top-logo .brand {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
}
.top-nav .top-logo img { width: 40px; height: 40px; }

.nav-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
}
/* 2026-04-26 (Tom restructure): the secondary plain-text nav row
   (.nav-items-sort: Ideas / Authors / About / Inquiry / Further reading)
   was removed entirely. Top-level is now Index / Galaxy / Seminar pills
   plus the search + hamburger icon buttons. The "Authors / About /
   Further Reading / Inquiry" entries moved into the hamburger drawer.
   .nav-items-sort rules kept for backwards compat with any unmigrated
   surface that still uses the old shape, but they're a no-op here. */
.nav-items-ctas {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 8px;
}

.nav-item {
  display: inline-flex; align-items: center;
  padding: 10px 2px;
  font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  min-height: 36px;
  background: transparent;
  cursor: pointer; border-top: none; border-left: none; border-right: none;
}
.nav-item.active {
  color: var(--text);
  border-bottom-color: var(--nav-color, var(--info-text));
}
@media (hover: hover) {
  .nav-item:hover {
    color: var(--text);
    border-bottom-color: var(--nav-color, var(--info-text));
  }
}
.nav-item[data-color="cobalt"]  { --nav-color: var(--color-cobalt); }
.nav-item[data-color="emerald"] { --nav-color: var(--color-emerald); }
.nav-item[data-color="gold"]    { --nav-color: var(--color-gold); }
.nav-item[data-color="bronze"]  { --nav-color: var(--color-bronze); }
.nav-item[data-color="teal"]    { --nav-color: var(--color-teal); }
.nav-item[data-color="indigo"]  { --nav-color: #2838A8; }
@media (prefers-color-scheme: dark) {
  .nav-item[data-color="indigo"] { --nav-color: var(--color-indigo-black); }
}
.nav-item:focus-visible {
  outline: 2px solid var(--nav-color, var(--cta-color, var(--info-text)));
  outline-offset: 2px; border-radius: 2px;
}

.nav-item.nav-cta {
  /* 2026-04-26: pills tightened to match the landing-page aesthetic
     Tom prefers (smaller padding, transparent base, hover-fill).
     Was 8/14 + 16%-tinted background; now 6/12 + transparent. */
  padding: 6px 12px;
  background: transparent;
  color: var(--cta-text, var(--cta-color));
  border: 0.5px solid color-mix(in srgb, var(--cta-color) 45%, transparent);
  border-radius: 999px;
  min-height: 32px;
  border-bottom: 0.5px solid color-mix(in srgb, var(--cta-color) 45%, transparent);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
}
.nav-item.nav-cta:hover {
  background: color-mix(in srgb, var(--cta-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--cta-color) 65%, transparent);
  border-bottom-color: color-mix(in srgb, var(--cta-color) 65%, transparent);
  color: var(--cta-text, var(--cta-color));
}
.nav-item.nav-cta.active {
  background: color-mix(in srgb, var(--cta-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--cta-color) 70%, transparent);
}

/* CTA color tokens — driven by Adler-family aliases so the pill flips
   to display-variant cobalt/emerald/gold on dark and text-safe variants
   on light without per-rule mode forks (palette.css handles the swap). */
.nav-item.nav-cta[data-cta="seminar"] { --cta-color: var(--family-life);   --cta-text: var(--family-life); }
.nav-item.nav-cta[data-cta="galaxy"]  { --cta-color: var(--family-ethics); --cta-text: var(--family-ethics); }
.nav-item.nav-cta[data-cta="index"]   { --cta-color: var(--family-logic);  --cta-text: var(--family-logic); }
.nav-item.nav-cta[data-cta="lectures"]{ --cta-color: var(--family-ethics); --cta-text: var(--family-ethics); }
/* My Library pill — neutral surface so it reads as account chrome,
   not a primary CTA. Cobalt accent on hover for the link inside. */
.nav-item.nav-cta[data-cta="library"] {
  --cta-color: var(--text-secondary);
  --cta-text: var(--text);
  font-weight: 500;
}
.nav-item.nav-cta[data-cta="library"]:hover {
  color: var(--info-text);
}

/* ── Universal auth gating for nav items (My Library pill etc.).
   Mirrors the pattern that lived inline on root index.html: anonymous
   visitors don't see [data-auth="signed-in"]; signed-in users don't see
   [data-auth="anon"]. Auth probe lives in nav-search.js so any page
   that loads this stylesheet + the script gets correct gating. ── */
[data-auth="signed-in"] { display: none; }
html.auth-signed-in [data-auth="signed-in"] { display: revert; }
html.auth-signed-in [data-auth="anon"]      { display: none; }

/* ── Universal nav search icon + drawer (2026-04-26).
   Magnifying-glass button in the right side of the nav. Click opens
   .nav-search-drawer below the nav, which hosts a .syntopi-search
   widget instance. Cmd/Ctrl+K toggles. Esc closes + returns focus.
   Per-page `/` filters keep their own bindings. ── */
.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 32px; padding: 0;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-search-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--info-text) 8%, transparent);
}
@media (hover: hover) {
  .nav-search-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--info-text) 8%, transparent);
  }
}
.nav-search-btn:focus-visible {
  outline: 2px solid var(--info-text);
  outline-offset: 2px;
}
.nav-search-btn svg {
  display: block;
  width: 16px; height: 16px;
}

.nav-search-drawer {
  display: none;
  margin: 6px 0 12px;
  padding: 12px 14px;
  /* Tom 2026-04-30: drawer backgrounds were inheriting the landing
     page's translucent --surface override (rgba 0.6) and rendering
     unreadable against the nebula. Hardcode opaque cream / dark navy
     here so the drawer is legible regardless of which page imports
     this stylesheet, and add a backdrop-filter as belt-and-suspenders
     for older Safari without backdrop-filter support. */
  background: #ffffff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
  .nav-search-drawer { background: #1f1e1c; }
}
.nav-search-drawer.open {
  display: block;
  animation: nav-search-drawer-in 0.18s ease-out;
}
@keyframes nav-search-drawer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-search-drawer.open { animation: none; }
}
/* ── Universal nav hamburger icon + drawer (2026-04-26 / Tom restructure).
   Top-level: Index / Galaxy / Seminar pills + search icon + hamburger.
   Hamburger expands a vertical list of secondary nav items (Home /
   About / Authors / My Library / Further Reading / Inquiry). Same
   open/close pattern as the search drawer. ── */
.nav-hamburger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 32px; padding: 0;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-hamburger-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--info-text) 8%, transparent);
}
@media (hover: hover) {
  .nav-hamburger-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--info-text) 8%, transparent);
  }
}
.nav-hamburger-btn:focus-visible {
  outline: 2px solid var(--info-text);
  outline-offset: 2px;
}
.nav-hamburger-btn svg { display: block; width: 18px; height: 18px; }

.nav-hamburger-drawer {
  display: none;
  margin: 6px 0 12px;
  padding: 8px 0;
  /* Tom 2026-04-30: same opaque-background fix as .nav-search-drawer
     above — landing page overrides --surface to rgba(...,0.6) which
     made hamburger items unreadable against the nebula. */
  background: #ffffff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
  .nav-hamburger-drawer { background: #1f1e1c; }
}
.nav-hamburger-drawer.open {
  display: block;
  animation: nav-search-drawer-in 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-hamburger-drawer.open { animation: none; }
}
.nav-hamburger-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
/* Explicit <li> reset — Tom 2026-04-26 round-9 saw uneven gaps between
   drawer items. Root cause was the auth-gated <li> carrying both a
   "My Library" and a "Log In" anchor with a whitespace text node
   between them; even when one was display:none, the inline whitespace
   added a line-height-tall gap to that <li>. Markup is now split to
   one anchor per <li> with auth gating on the <li>. This reset keeps
   the rhythm uniform regardless of any user-agent default. */
.nav-hamburger-list > li { margin: 0; padding: 0; }
/* 2026-04-26 (Tom: spacing tight, harsh-cobalt hover).
   - 14px vertical padding gives 47-50px tap target on desktop,
     comfortably above the 44px guideline on mobile too.
   - Hover/focus use only a soft background tint — the border-left is
     reserved for the current-page indicator so the two states read
     differently. Tom's note: "hover state should be more subtle (no
     border, just background tint)".
   - Current-page indicator (aria-current="page") keeps the border-left
     marker but in a 60%-tinted cobalt + an 8%-tint background. Not
     pure cobalt — it sits on the page chrome, not the foreground. */
.nav-hamburger-link {
  display: block;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px; font-weight: 400;
  line-height: 1.3;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
/* Tom 2026-04-27 round-22: hover should read as brand-tinted, not
   neutral. Was 5%-tint info bg + neutral text color, which barely
   differentiated from the resting state. Now: cobalt text +
   14%-tint cobalt background — same `--info-text` token as the
   active-page indicator, just at a higher opacity step so hover
   is recognizably brand-colored. WCAG: cobalt-text on cream is
   7.5:1 (AAA), cobalt-display on dark navy is 7.1:1 (AAA). */
.nav-hamburger-link:focus-visible {
  color: var(--info-text);
  background: color-mix(in srgb, var(--info-text) 14%, transparent);
  outline: none;
}
@media (hover: hover) {
  .nav-hamburger-link:hover {
    color: var(--info-text);
    background: color-mix(in srgb, var(--info-text) 14%, transparent);
    outline: none;
  }
}
.nav-hamburger-link[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--info-text) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--info-text) 60%, transparent);
}
.nav-hamburger-link[aria-current="page"]:focus-visible {
  background: color-mix(in srgb, var(--info-text) 12%, transparent);
}
@media (hover: hover) {
  .nav-hamburger-link[aria-current="page"]:hover {
    background: color-mix(in srgb, var(--info-text) 12%, transparent);
  }
}

@media (max-width: 760px) {
  .nav-search-btn,
  .nav-hamburger-btn { width: 44px; height: 44px; }
  .nav-search-drawer,
  .nav-hamburger-drawer { padding: 10px 0; }
  /* On small viewports the drawer becomes a full-height side panel
     anchored to the top so all secondary items reach a thumb without
     a stretched single column. */
  .nav-hamburger-drawer.open {
    position: fixed;
    top: 56px; left: 0; right: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    margin: 0;
    border-radius: 0;
    border-left: 0; border-right: 0;
    z-index: 60;
  }
  .nav-hamburger-link { padding: 16px 20px; font-size: 16px; line-height: 1.35; }
}

@media (max-width: 760px) {
  /* Mobile: same safe-area treatment as the desktop rule above; the
     `padding-top` calc keeps the existing 12px gutter and adds the
     iOS status-bar inset on top. */
  .top-nav { gap: 4px 10px; padding: calc(12px + env(safe-area-inset-top)) 0 8px; }
  .top-nav .top-logo { margin-right: auto; }
  .top-nav .top-logo .brand { display: none; }
  .nav-items-ctas {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .nav-item.nav-cta {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 11.5px;
  }
}

/* Tom 2026-04-27 round-24 P1: body-scroll-lock when a full-screen
   drawer/overlay is open. JS toggles `body.no-scroll` on open/close
   in nav-search.js (hamburger + search drawers) and in the Galaxy
   passages overlay handler. Without it, mobile flick-scrolls inside
   the drawer leak through to the page underneath via momentum. */
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}