/* Phone menu for the v2 mockups, built by ../js/nav-menu.js from each page's own nav.
   Below 880px the pages hide their nav links; this adds a menu button beside the mode toggle that
   opens a full-screen panel with the same links and the Request Consultation button.
   The button reuses the page's .toggle look. The panel carries the page's .dark class, so it uses
   the event-mode tokens and stays dark in light mode too. */

/* menu button: only at the widths where the nav links are hidden */
.toggle.menu-btn{display:none;}
@media(max-width:880px){.toggle.menu-btn{display:flex;}}
.menu-bars,.menu-bars::before,.menu-bars::after{display:block;width:15px;height:1.5px;border-radius:1px;background:currentColor;}
.menu-bars{position:relative;}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;}
.menu-bars::before{top:-5px;}
.menu-bars::after{top:5px;}
/* under 360px the logo, both round buttons and the CTA can't share one line; the CTA is in the panel */
@media(max-width:359px){nav.bar .navtools .cta{display:none;}}

/* the panel: top and side padding match nav.bar, so the close button sits on the bar's line */
.mmenu{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;
  padding:20px 32px 32px;
  background:var(--bg);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  animation:mmenu-in .25s ease both;
}
.mmenu[hidden]{display:none;}
.mmenu .mmenu-x{align-self:flex-end;flex:none;position:relative;}
.mmenu .mmenu-x::before,.mmenu .mmenu-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;border-radius:1px;background:currentColor;transform:rotate(45deg);}
.mmenu .mmenu-x::after{transform:rotate(-45deg);}
.mmenu-links{display:flex;flex-direction:column;gap:4px;margin:auto 0;padding:32px 0;}
.mmenu-links a{
  font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.1;letter-spacing:-0.02em;
  font-size:clamp(2rem,9vw,2.75rem);
  color:var(--ink);text-decoration:none;padding:6px 0;
}
.mmenu-links a.active{color:var(--steel-bright);}
.mmenu a:focus-visible,.mmenu button:focus-visible{outline:2px solid var(--steel-bright);outline-offset:4px;}
.mmenu .mmenu-cta{flex:none;display:block;text-align:center;padding:16px 22px;font-size:.8rem;letter-spacing:.06em;}
@media(max-width:560px){.mmenu{padding:14px 16px 24px;}}
@keyframes mmenu-in{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){.mmenu{animation:none;}}