
/* --- Hamburger / Drawer (white on black bar) --- */
.header { position: relative; }
.h-inner{ display:flex; align-items:center; justify-content:space-between; }
.hamburger{ display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; background:transparent; border:0; cursor:pointer; color:#fff; }
.hamburger span{ display:block; height:3px; width:100%; background:#fff; transition:transform .25s ease, opacity .25s ease; }
.drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px);
  opacity:0; transition:opacity .25s ease; z-index: 9998; }
.drawer{ position:fixed; top:0; right:0; height:100vh; width:min(86vw,320px); background:#111827; color:#fff;
  box-shadow:-6px 0 24px rgba(0,0,0,.35); transform:translateX(100%); transition:transform .28s ease; z-index: 9999; padding:20px 18px; }
.drawer-nav ul{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.drawer-nav a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#e5e7eb; }
.drawer-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.drawer.open{ transform:translateX(0); }
.drawer-overlay.show{ opacity:1; }
.hamburger.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
/* Hide old horizontal nav on all screens for calm header */
.nav{ display:none !important; }
@media (pointer:fine) {
  .hamburger:hover{ opacity:.9; }
}
