/* Shared site navigation — self-contained. Desktop: brand + links + CTA buttons in a row.
   Mobile: brand + quick buttons (About, Downloads) + hamburger; the rest collapses into a drawer. */
/* CLS fix: nav.js injects the <header> into the empty #site-nav div AFTER first paint.
   Reserve the header's height on BOTH the placeholder and the header itself (same value)
   so the injection fills already-reserved space instead of pushing the page down.
   63px safely exceeds the natural desktop height (~62.4px) and the mobile height (~54px),
   so header==placeholder at every breakpoint = zero layout shift. */
#site-nav{min-height:63px;}
.site-header{
  min-height:63px;
  background:#111;border-bottom:2px solid #c0392b;
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  padding:11px 24px;position:sticky;top:0;z-index:900;
  font-family:'Inter',system-ui,Segoe UI,sans-serif;
}
.nav-brand-wrap{display:flex;align-items:baseline;gap:11px;margin-right:auto;min-width:0;}
.site-header .brand{color:#f5f5f5;font-weight:700;font-size:1.05rem;text-decoration:none;white-space:nowrap;}
.site-header .brand span{color:#e74c3c;}
.site-header .brand .brand-suffix{color:#f5f5f5;}
.nav-stats{color:#9a9a9a;font-size:.76rem;white-space:nowrap;}
.nav-stats:empty{display:none;} /* only index fills it (app.js) — no stray gap on other pages */

/* the menu wrapper — inline row on desktop */
.nav-menu{display:flex;align-items:center;gap:16px;}

/* plain links */
.site-nav{display:flex;align-items:center;gap:4px;}
.site-nav a{color:#b8b8b8;text-decoration:none;font-size:.88rem;font-weight:500;padding:7px 11px;border-radius:6px;transition:background .15s,color .15s;white-space:nowrap;}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.07);}
.site-nav a.active{color:#fff;background:rgba(255,255,255,.12);}

/* prominent CTA buttons */
.nav-cta{display:flex;align-items:center;gap:8px;}
.nav-cta .cta{text-decoration:none;color:#fff;font-size:.85rem;font-weight:600;padding:8px 16px;border-radius:7px;white-space:nowrap;transition:filter .15s;}
.nav-cta .cta:hover{filter:brightness(1.13);}
.cta-red{background:#c0392b;}
.cta-grey{background:#4a4d52;border:1px solid #5c6066;}
.cta-green{background:#27ae60;}
.cta-ig{background:linear-gradient(45deg,#e09433,#dc2743,#bc1888);}
.nav-cta .cta.active{outline:2px solid rgba(255,255,255,.55);outline-offset:1px;}

/* mobile-only quick buttons (hidden on desktop) */
.nav-quick{display:none;align-items:center;gap:7px;}
.nav-quick .qbtn{text-decoration:none;color:#fff;font-size:.78rem;font-weight:600;padding:7px 11px;border-radius:6px;white-space:nowrap;transition:filter .15s;}
.nav-quick .qbtn:hover{filter:brightness(1.13);}
.nav-quick .qbtn-grey{background:#4a4d52;border:1px solid #5c6066;}
.nav-quick .qbtn-red{background:#c0392b;}
.nav-quick .qbtn.active{outline:2px solid rgba(255,255,255,.55);outline-offset:1px;}

/* hamburger (mobile only) */
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;background:none;border:0;padding:8px;}
.nav-toggle span{display:block;width:24px;height:3px;background:#fff;border-radius:2px;}

@media (max-width:880px){
  /* Mobile redesign 2026-08-11: ONE-row header — brand stacks over the live counter
     (previously hidden on mobile); About/Downloads leave the top bar and live in the
     drawer instead (their .m-hide drawer duplicates are shown again). */
  .brand-suffix{display:none;}            /* mobile brand = just "Archive Genocide" */
  .nav-brand-wrap{flex-direction:column;align-items:flex-start;gap:1px;}
  .nav-stats{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:.64rem;letter-spacing:.02em;line-height:1.3;}
  .nav-quick{display:none;}
  .nav-toggle{display:flex;}
  /* the rest of the menu collapses into one clean full-width drawer under the header */
  .nav-menu{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:10px;}
  .nav-menu.open{display:flex;}
  .site-nav{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #2a2a2a;}
  .site-nav a{padding:14px 4px;border-bottom:1px solid #1f1f1f;border-radius:0;font-size:1rem;}
  .nav-cta{flex-direction:column;align-items:stretch;gap:9px;margin-top:14px;}
  .nav-cta .cta{width:100%;justify-content:center;text-align:center;padding:13px;font-size:.92rem;}
}
@media (max-width:470px){
  .site-header{padding:10px 12px;gap:7px 8px;}
  .site-header .brand{font-size:.98rem;}
}

/* Language switcher — always-visible globe dropdown (added 2026-07 for i18n) */
.nav-lang{position:relative;margin-left:12px;}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:var(--nav-surface2,#1f1f1f);
  border:1px solid var(--nav-border,#2a2a2a);color:#cfcfcf;border-radius:20px;
  padding:6px 11px;font:inherit;font-size:.8rem;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s;}
.lang-btn:hover{color:#fff;border-color:#444;}
.lang-btn .lang-globe{font-size:.95rem;}
.lang-btn .lang-cur{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;}
.lang-btn .lang-caret{font-size:.65rem;opacity:.7;transition:transform .15s;}
.nav-lang.open .lang-btn{border-color:#c0392b;color:#fff;}
.nav-lang.open .lang-btn .lang-caret{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:172px;z-index:1200;
  background:#161616;border:1px solid #2a2a2a;border-radius:10px;padding:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);display:none;flex-direction:column;gap:1px;
  max-height:70vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.nav-lang.open .lang-menu{display:flex;}
.lang-menu .lang-opt{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;
  color:#cfcfcf;text-decoration:none;font-size:.86rem;white-space:nowrap;}
.lang-menu .lang-opt:hover{background:#1f1f1f;color:#fff;}
.lang-menu .lang-opt.active{background:#c0392b;color:#fff;}
.lang-menu .lang-code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;
  min-width:22px;opacity:.85;letter-spacing:.03em;}
.lang-menu .lang-name{flex:1;}
/* RTL: dropdown opens from the left edge, globe stays on the correct side */
[dir="rtl"] .nav-lang{margin-left:0;margin-right:12px;}
[dir="rtl"] .lang-menu{right:auto;left:0;}
@media (max-width:880px){
  /* keep the globe button on the visible top bar, before the hamburger */
  .nav-lang{margin-inline-start:auto;margin-inline-end:8px;}
  .lang-btn{padding:7px 12px;font-size:.82rem;}
  .lang-menu{min-width:190px;max-height:calc(100vh - 120px);overflow-y:auto;}
  .lang-menu .lang-opt{padding:11px 13px;font-size:.92rem;}
}