/* ============================================================
   LAYOUT · MOBILE MENU  (#burger toggle + #mobmenu overlay)
   Toggled by js/ui/mobile-menu.js via body.menu
   ============================================================ */

/* Burger button — hidden on desktop, shown below 900px.

   THE COLOUR LIVES ON THE BUTTON, NEVER ON THE BARS.
   js/ui/nav-blend.js re-tints this button as the page scrolls from the dark
   header onto the white sections, by writing an inline `color` here. The
   three bars are drawn with background:currentColor so they follow it.

   `color:#fff` used to sit on the span instead, which re-declared the colour
   and made currentColor resolve to white no matter what nav-blend wrote — so
   the bars stayed white and disappeared against the white nav. A <button>
   does not inherit colour (the UA sets `color: buttontext`), which is why the
   resting white has to be declared here explicitly rather than left to
   inherit from body. Do not put a colour back on the span. */
#burger{
  display:none;width:44px;height:44px;border:1px solid var(--onblue);border-radius:8px;
  background:transparent;cursor:pointer;place-items:center;flex:0 0 auto;
  color:#fff;
}
#burger span{display:block;width:18px;height:1.6px;background:currentColor;
  position:relative;transition:transform .3s var(--ease),opacity .2s}
#burger span::before,#burger span::after{content:'';position:absolute;left:0;width:18px;
  height:1.6px;background:currentColor;transition:transform .3s var(--ease)}
#burger span::before{top:-6px}
#burger span::after{top:6px}

/* animate burger -> X when open */
body.menu #burger span{transform:rotate(45deg)}
body.menu #burger span::before{transform:translateY(6px) rotate(-90deg)}
body.menu #burger span::after{opacity:0}

/* fullscreen menu panel */
#mobmenu{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 clamp(24px,8vw,60px);
  transform:translateY(-100%);transition:transform .55s var(--ease);visibility:hidden;
}
body.menu #mobmenu{transform:none;visibility:visible}
#mobmenu a{font-family:Archivo;font-weight:700;font-size:clamp(28px,8vw,44px);
  letter-spacing:-.03em;color:#fff;text-decoration:none;padding:12px 0;
  border-bottom:1px solid #16205a}
#mobmenu a:active{color:var(--b300)}
#mobmenu .mcta{margin-top:26px;border:0;background:#fff;color:var(--navy);
  border-radius:100px;font-family:Inter;font-size:16px;font-weight:600;
  text-align:center;padding:18px}

/* language switcher inside the mobile menu (the header one is hidden < 900px) */
#mobmenu .mlang{display:flex;align-items:center;gap:14px;margin-top:28px;border:0;padding:0}
#mobmenu .mlang a{font-family:'Geist Mono',monospace;font-size:13px;letter-spacing:.16em;
  color:var(--b300);border:1px solid var(--onblue);border-radius:5px;
  padding:11px 20px;text-decoration:none;font-weight:500}
#mobmenu .mlang a.on{background:#fff;border-color:#fff;color:var(--navy);font-weight:700}

@media(max-width:900px){
  #burger{display:grid}
}