/* Mobil-hamburger + off-canvas meny (delt på tvers av alle sider).
   Desktop-nav bruker sidenes egne .nav-* -regler (som konsumerer theme.css-tokens).
   Denne fila legger til hamburger (≤840px) + selve panelet, i petrol+korall. */

.nav-burger{display:none;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;color:var(--ink);padding:8px 6px;min-height:44px}
.nav-burger__box{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:22px;height:16px}
.nav-burger__box span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}
.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (max-width:840px){
  .nav-burger{display:inline-flex}
  /* Ikke plass til både CTA-pill og hamburger på mobil — «Bestill time»
     ligger prominent i menypanelet + i heroen, så skjul topbar-CTA her. */
  .top .nav-cta{display:none}
}
@media (max-width:400px){ .top .brand{font-size:20px} }

.mnav-overlay{position:fixed;inset:0;background:oklch(24% 0.018 170 / .42);z-index:var(--z-overlay,1000);
  opacity:0;transition:opacity .25s ease}
.mnav-overlay.is-open{opacity:1}
.mnav-overlay[hidden]{display:none}

.mnav{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-panel,1001);width:min(88vw,360px);
  background:var(--bg);box-shadow:-12px 0 40px oklch(24% 0.018 170 / .22);
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  font-family:var(--font-body,'Schibsted Grotesk',sans-serif)}
.mnav.is-open{transform:translateX(0)}
.mnav[hidden]{display:none}
.mnav__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mnav__title{font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.mnav__close{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;
  color:var(--ink);min-width:44px;min-height:44px}
.mnav__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mnav__nav{display:flex;flex-direction:column}
.mnav__group{font-family:var(--font-head);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:16px 0 4px}
.mnav__group:first-child{margin-top:6px}
.mnav__nav a{text-decoration:none;color:var(--ink);font-size:16px;font-weight:500;padding:11px 2px;
  }
.mnav__nav a:hover{color:var(--accent)}
.mnav__nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mnav__cta{margin-top:22px;text-align:center;background:var(--coral);color:var(--ink);
  text-decoration:none;padding:14px 18px;border-radius:12px;font-size:15px;font-weight:600}
.mnav__cta:hover{background:oklch(76% 0.15 40)}
.mnav__cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .mnav,.mnav-overlay{transition:none}
}
