/* 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. */
.site-header{
  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;}

/* 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;}
.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){
  .nav-stats{display:none;}
  .brand-suffix{display:none;}            /* mobile brand = just "Archive Genocide" */
  .nav-quick{display:flex;}
  .nav-toggle{display:flex;}
  /* About link + Downloads CTA live as quick buttons on mobile, so drop their drawer duplicates */
  .site-nav a.m-hide, .nav-cta .cta.m-hide{display:none;}
  /* 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;}
  .nav-quick{gap:6px;}
  .nav-quick .qbtn{padding:6px 9px;font-size:.74rem;}
}