/* ============================================================
   RadioGrub — nav.css
   Mobile nav drawer + hamburger.
   ============================================================ */

/* ---- mobile nav ---- */
.navToggle{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line3); background:var(--surface2);
  color:var(--text); align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  justify-self:end; grid-column:3; transition:background var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.navToggle:hover{ background:var(--surface3); border-color:var(--accentLine); }
.navToggle:active{ transform:scale(.96); }
.navToggle svg{ width:22px; height:22px; }

.mnav{ position:fixed; inset:0; z-index:300; visibility:hidden; }
.mnav.on{ visibility:visible; }
.mnavScrim{
  position:absolute; inset:0; background:rgba(0,0,0,.92);
  opacity:0; transition:opacity .22s ease;
}
.mnav.on .mnavScrim{ opacity:1; }
.mnavPanel{
  position:absolute; top:0; right:0; height:100%; width:min(330px, 88vw);
  background:var(--surface); box-shadow:-12px 0 44px rgba(0,0,0,.28);
  padding:16px; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mnav.on .mnavPanel{ transform:none; }
.mnavHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mnavTitle{ font-weight:980; font-size:15px; letter-spacing:-.2px; }
.mnavClose{
  width:40px; height:40px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface2); font-size:20px; line-height:1; cursor:pointer; color:var(--text);
}
.mnavLink{
  display:flex; align-items:center; gap:12px;
  padding:14px 12px; border-radius:12px; text-decoration:none;
  color:var(--text); font-weight:900; font-size:16px;
}
.mnavLink:hover, .mnavLink:active{ background:var(--surface2); }
.mnavLink.cur{ background:var(--accentSoft); color:var(--accentText); }
.mnavDiv{ height:1px; background:var(--line2); margin:10px 2px; }
.mnavCtas{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.mnavCtas .btn{ width:100%; justify-content:center; }

/* ---- THE HAMBURGER TAKES OVER BEFORE THE LINKS ARE SQUEEZED ----
   It used to hand over at 980px, which is *after* the point where the links
   had already run over the login buttons — measured at 158px of spill at
   981px, the last width before the swap. 1120px is before that starts. */
@media (max-width: 1120px){
  .navToggle{ display:flex; }
  .navActions{ display:none; }
  .navLinks{ display:none; }
  .nav{ grid-template-columns: auto 1fr auto; }
}