/* nav.css — single-source navigation styles for moltrust.ch
 *
 * Status: LIVE. Linked from 96 pages via ?v=2.
 *
 * Base: the majority inline variant (29 of 105 nav-bearing pages, media-aware
 * normalised hash cac847369ad1, representative blog/a2a-v03-conformance.html),
 * 51 rules — 48 top-level, 3 mobile.
 *
 * Hardened against the canonicalisation diff: three functional properties that
 * the majority variant lacks are merged in, because losing them breaks
 * behaviour rather than looks —
 *   .mobile-menu       overflow-y:auto   long mobile menus scroll   (47 pages)
 *   .nav-dropdown-menu z-index:200       dropdown stacking          (28 pages)
 *   .nav               max-width:100%    horizontal overflow guard  (4 pages)
 * Purely cosmetic per-page deviations are deliberately dropped; see the PR
 * body for the accepted-loss list.
 *
 * Every page-level token carries a fallback read from the defining majority,
 * so the file also renders on pages whose :root lacks it (--orange-hover is
 * undefined on 12 of 105 pages).
 *
 * NEVER normalise these three pages onto this file — each runs its own nav
 * design and would break:
 *   trouvart/index.html   separate design system (mono, .62rem, own tokens)
 *   vcone.html            64px bar, own hamburger geometry, z-index 1000
 *   hackathon.html        56px bar; also has a truncated CSS declaration
 *                         (color: v) that swallows later rules — fix first
 *
 * Rollout scope, open question (not decided here):
 *   publications/integrity.html   live 200, deep-linked from /publications/ -> in scope
 *   integrity.html                302 to /moltguard.html#track-record, dead page
 *                                 still linked from /publications/ -> decide
 *                                 whether to retire or restore before rollout
 */

/* ── base ─────────────────────────────────────────────────────────── */
.theme-toggle { background:none;border:none;cursor:pointer;padding:6px;color:var(--slate-500, #64748B);display:flex;align-items:center;border-radius:6px;transition:color .2s,background .2s; }
.theme-toggle:hover { color:var(--orange, #E85D26);background:var(--slate-100, #F1F5F9); }
.theme-toggle svg { width:20px;height:20px; }
.theme-toggle .icon-sun { display:none; }
.theme-toggle .icon-moon { display:block; }
.nav { position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--slate-200, #E2E8F0);padding:0 2rem;height:60px;display:flex;align-items:center;gap: 0; max-width:100%; }
.nav-left { display:flex;align-items:center;gap:.6rem;text-decoration:none; }
.nav-left .logo-text { font-weight:700;font-size:1.15rem;color:var(--navy, #0F172A); }
.nav-left .logo-text span { color:var(--orange, #E85D26); }
.nav-links { display:flex;gap:1.6rem;list-style:none; }
.nav-links a { color:var(--slate-600, #475569);text-decoration:none;font-size:.82rem;font-weight:500; }
.nav-links a:hover,.nav-links a.active { color:var(--orange, #E85D26); }
.nav-dropdown { position:relative; }
.nav-dropdown>a::after { content:' \25BE';font-size:.7em; }
.nav-dropdown-menu { position:absolute;top:100%;left:-.5rem;min-width:200px;background:white;border:1px solid var(--slate-200, #E2E8F0);border-radius:8px;padding:.5rem 0;box-shadow:0 8px 24px rgba(15,23,42,.1);opacity:0;visibility:hidden;transform:translateY(4px);transition:all .2s; z-index:200; }
.nav-dropdown:hover .nav-dropdown-menu { opacity:1;visibility:visible;transform:translateY(0); }
.nav-dropdown-menu a { display:block;padding:.5rem 1rem;font-size:.82rem;color:var(--slate-600, #475569)!important; }
.nav-dropdown-menu a:hover { background:var(--slate-50, #F8FAFC);color:var(--orange, #E85D26)!important; }
.nav-dropdown-menu .dd-sub { font-size:.7rem!important;color:var(--slate-400, #94A3B8)!important;margin-top:-.1rem;display:block; }
.nav-cta { background:var(--orange, #E85D26);color:white;padding:.45rem 1.1rem;border-radius:6px;text-decoration:none;font-weight:600;font-size:.82rem; }
.nav-cta:hover { background:var(--orange-hover, #D14E1B); }
.nav-hamburger { display:none;cursor:pointer;background:none;border:none;width:28px;height:22px;position:relative;z-index:300; }
.nav-hamburger span { display:block;width:100%;height:2px;background:var(--navy, #0F172A);position:absolute;left:0;transition:all .3s; }
.nav-hamburger span:nth-child(1) { top:0; }
.nav-hamburger span:nth-child(2) { top:10px; }
.nav-hamburger span:nth-child(3) { top:20px; }
.nav-hamburger.open span:nth-child(1) { top:10px;transform:rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { top:10px;transform:rotate(-45deg); }
.mobile-menu { display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);z-index:99;padding:2rem;flex-direction:column;gap:.5rem; overflow-y:auto; }
.mobile-menu.open { display:flex; }
.mobile-menu a { display:block;padding:.8rem 0;font-size:1rem;font-weight:500;color:var(--navy, #0F172A);text-decoration:none;border-bottom:1px solid var(--slate-100, #F1F5F9); }
.mobile-menu a:hover { color:var(--orange, #E85D26); }
.mobile-menu .mobile-sub { padding-left:1rem;font-size:.9rem;color:var(--slate-500, #64748B); }
.nav-left { margin-right: auto; }
.mt-utility-cluster { display: inline-flex; gap: 2px; align-items: center; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(128,128,128,.2); }
.mt-utility-cluster .theme-toggle { padding: 4px; }
.mt-utility-cluster .theme-toggle svg { width: 16px; height: 16px; }
nav.nav .mt-utility-cluster { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 2px !important; margin-left: 20px !important; padding-left: 20px !important; border-left: 1px solid rgba(128,128,128,.2); }
nav.nav .nav-left { margin-right: auto !important; }
nav.nav .nav-cta { margin-left: 16px !important; }

/* ── dark theme ───────────────────────────────────────────────────── */
[data-theme="dark"] .nav { background:rgba(15,23,42,0.92)!important;border-bottom-color:#334155!important; }
[data-theme="dark"] .mobile-menu { background:rgba(15,23,42,0.98)!important; }
[data-theme="dark"] .nav-cta { color:#fff!important; }
[data-theme="dark"] .nav-dropdown-menu { background:#1E293B!important;border-color:#334155!important; }
[data-theme="dark"] .nav-hamburger span { background:var(--navy, #0F172A)!important; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

/* Dark-mode dropdown hover. The light rule uses var(--slate-50), which the dark
   token block redefines to #1E293B — identical to the menu background, so the
   hover surface disappears. --slate-200 (#334155 in dark) restores it. --orange
   on #334155 reaches only 2.97:1, under the 4.5:1 AA threshold for the 0.82rem
   item text, so dark mode uses the lightened orange the site already applies to
   annotation-bar links: #F8A97D, 5.41:1 on #334155.

   The surface is hardcoded, not var(--slate-200, #334155): the fallback only
   applies where the token is UNDEFINED. Pages that define --slate-200 in their
   light :root but not in their dark block keep the light #E2E8F0 in dark mode,
   which is exactly the surface this rule exists to avoid. Same notation as the
   other dark nav rules above (#1E293B/#334155 hardcoded). */
[data-theme="dark"] {
  --orange-hover-dark: #F8A97D;
}
[data-theme="dark"] .nav-dropdown-menu a:hover {
  background: #334155;
  color: var(--orange-hover-dark, #F8A97D) !important;
}

/* ── mobile ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display:none; }
  .nav-hamburger { display:block; }
  .mt-utility-cluster { border-left: none; padding-left: 0; margin-left: 0; }
}