/* ------------------------------------------------------------------
   Shared site header — used by index.html, works.html, prompts.html,
   case-askalbert.html and 404.html. Single source of truth.

   All custom properties are namespaced --nv-* so this file can drop into
   any page without colliding with that page's own token set (the sub-pages
   use --soft/--mag, index uses --ink-soft/--orange).

   Theming: the toggle sets html[data-theme]. Pages keep working on OS
   preference alone if JS never runs.
   ------------------------------------------------------------------ */

:root{
  --nv-ink:#171020;
  --nv-ink-soft:#57505F;
  --nv-ink-faint:#908699;
  --nv-bg:rgba(255,255,255,.86);
  --nv-bg-warm:#F8F5F1;
  --nv-card:#FFFFFF;
  --nv-line:#ECE7E1;
  --nv-mag:#D126BF;
  --nv-mag-deep:#A81C99;
  --nv-btn-bg:#171020;
  --nv-btn-fg:#FFFFFF;
  --nv-shadow:0 1px 3px rgba(23,16,32,.04),0 16px 40px -16px rgba(23,16,32,.12);
  --nv-shadow-lift:0 8px 16px rgba(23,16,32,.06),0 34px 64px -20px rgba(209,38,191,.25);
  --nv-max:1200px;
  --nv-h:74px;
}

/* OS dark preference — unless the visitor has explicitly chosen light */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nv-ink:#EDE8F2;
    --nv-ink-soft:#B4AAC0;
    --nv-ink-faint:#8A8177;
    --nv-bg:rgba(19,17,16,.82);
    --nv-bg-warm:#1A1714;
    --nv-card:#201C18;
    --nv-line:#2C2620;
    --nv-btn-bg:#EDE8F2;
    --nv-btn-fg:#171020;
    --nv-shadow:0 1px 3px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.5);
    --nv-shadow-lift:0 8px 16px rgba(0,0,0,.4),0 34px 64px -20px rgba(209,38,191,.3);
  }
}
/* Explicit toggle always wins */
:root[data-theme="dark"]{
  --nv-ink:#EDE8F2;
  --nv-ink-soft:#B4AAC0;
  --nv-ink-faint:#8A8177;
  --nv-bg:rgba(19,17,16,.82);
  --nv-bg-warm:#1A1714;
  --nv-card:#201C18;
  --nv-line:#2C2620;
  --nv-btn-bg:#EDE8F2;
  --nv-btn-fg:#171020;
  --nv-shadow:0 1px 3px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.5);
  --nv-shadow-lift:0 8px 16px rgba(0,0,0,.4),0 34px 64px -20px rgba(209,38,191,.3);
}

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--nv-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--nv-line);
  transition:background .35s,border-color .35s;
}
.site-nav.at-top{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme="dark"] .site-nav.at-top{background:rgba(19,17,16,.25)}

.site-nav .nav-inner{
  max-width:var(--nv-max);margin:0 auto;padding:0 28px;height:var(--nv-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.site-nav .logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.site-nav .logo img{height:30px;width:auto;display:block;filter:brightness(0);opacity:.92;image-rendering:-webkit-optimize-contrast}
:root[data-theme="dark"] .site-nav .logo img{filter:brightness(0) invert(1);opacity:1}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-nav .logo img{filter:brightness(0) invert(1);opacity:1}
}

.site-nav .nav-links{display:flex;gap:30px;align-items:center}
.site-nav .nav-links > a:not(.btn){
  font-size:13.5px;font-weight:600;color:var(--nv-ink-soft);text-decoration:none;
  transition:color .2s;position:relative;
}
.site-nav .nav-links > a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--nv-mag);transition:right .25s;
}
.site-nav .nav-links > a:not(.btn):hover{color:var(--nv-ink)}
.site-nav .nav-links > a:not(.btn):hover::after{right:0}

.site-nav .btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--nv-btn-bg);color:var(--nv-btn-fg);font-weight:600;font-size:14px;
  padding:16px 30px;border-radius:100px;border:1px solid var(--nv-btn-bg);
  transition:transform .2s,background .25s,box-shadow .25s,border-color .25s;
  cursor:pointer;white-space:nowrap;
}
.site-nav .btn:hover{background:var(--nv-mag);border-color:var(--nv-mag);transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(209,38,191,.55)}
.site-nav .btn.orange{background:var(--nv-mag);border-color:var(--nv-mag);color:#fff;box-shadow:0 10px 26px -10px rgba(209,38,191,.55)}
.site-nav .btn.orange:hover{background:var(--nv-mag-deep);border-color:var(--nv-mag-deep)}
.site-nav .btn.sm{padding:11px 20px;font-size:13px}

.site-nav .kbd-hint{
  display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;color:var(--nv-ink-faint);border:1px solid var(--nv-line);border-radius:8px;
  padding:5px 9px;cursor:pointer;transition:all .2s;background:var(--nv-card);
}
.site-nav .kbd-hint:hover{border-color:var(--nv-mag);color:var(--nv-mag)}
@media(max-width:1120px){.site-nav .kbd-hint{display:none}}

.site-nav .theme-toggle{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--nv-line);background:var(--nv-card);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:var(--nv-shadow);transition:transform .2s,border-color .2s;flex-shrink:0;
}
.site-nav .theme-toggle:hover{transform:translateY(-2px);border-color:var(--nv-mag)}

.site-nav .nav-burger{
  display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--nv-line);
  background:var(--nv-card);cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;box-shadow:var(--nv-shadow);
}
.site-nav .nav-burger i{width:18px;height:2px;background:var(--nv-ink);border-radius:2px;transition:transform .25s,opacity .25s;display:block}
.site-nav .nav-burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-nav .nav-burger.open i:nth-child(2){opacity:0}
.site-nav .nav-burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-mobile-menu{
  position:fixed;top:var(--nv-h);left:12px;right:12px;z-index:99;background:var(--nv-card);
  border:1px solid var(--nv-line);border-radius:22px;box-shadow:var(--nv-shadow-lift);
  padding:14px;display:none;flex-direction:column;
  opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none;
}
.site-mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.site-mobile-menu a{padding:14px 16px;border-radius:14px;font-weight:700;font-size:15px;color:var(--nv-ink);text-decoration:none}
.site-mobile-menu a:active,.site-mobile-menu a:hover{background:var(--nv-bg-warm);color:var(--nv-mag)}
.site-mobile-menu .mm-cta{margin-top:8px;background:var(--nv-mag);color:#fff;text-align:center}
.site-mobile-menu .mm-cta:hover{background:var(--nv-mag-deep);color:#fff}

/* Clearance under the fixed bar, for pages that do not already set their own
   top padding. NOTE: `body.has-site-nav` is specificity 0-1-1 and will beat a
   page's own `body{padding:...}` (0-0-1) regardless of source order — so only
   add this class to pages that need it. */
body.has-site-nav{padding-top:var(--nv-h)}

@media(max-width:900px){
  .site-nav .nav-inner{padding:0 14px;height:66px;gap:10px}
  .site-nav .nav-links{gap:10px;flex-shrink:0}
  .site-nav .nav-links > a:not(.btn){display:none}
  .site-nav .nav-links .btn.sm{padding:10px 16px;font-size:12.5px}
  .site-nav .nav-cta-full{display:none}
  .site-nav .nav-burger{display:flex}
  .site-mobile-menu{display:flex;top:66px}
  :root{--nv-h:66px}
  /* The wordmark is ~6.8:1, so a fixed height blows the row apart on a
     narrow phone and pushes the burger off-screen. Let it shrink instead. */
  .site-nav .logo{min-width:0;flex-shrink:1;overflow:hidden}
  .site-nav .logo img{height:auto;width:auto;max-height:26px;max-width:100%}
}
@media(max-width:560px){
  .site-nav .theme-toggle{display:none}   /* burger menu is the mobile surface */
  .site-nav .logo img{max-height:24px}
}

@media(prefers-reduced-motion:reduce){
  .site-nav,.site-nav *,.site-mobile-menu{transition:none!important}
}