/* Shared responsive top-nav — collapse a tagged link group into a hamburger
   at ≤900px (phones + iPad portrait); full menu at ≥901px (iPad landscape +
   desktop). Opt in per page with no page-specific CSS:

     <nav data-mnav> … <div class="mnav-group"> links </div> … </nav>

   The burger button is injected by navmobile.js. Keep things that should stay
   on the bar at all sizes (logo, theme toggle, avatar) OUTSIDE .mnav-group. */

.mnav-burger{display:none;width:42px;height:42px;flex:none;align-items:center;justify-content:center;background:none;border:0;color:inherit;cursor:pointer;padding:0;margin-left:2px}
.mnav-burger i{position:relative;display:block;width:20px;height:14px}
.mnav-burger i b{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s,top .2s}
.mnav-burger i b:nth-child(1){top:0}
.mnav-burger i b:nth-child(2){top:6px}
.mnav-burger i b:nth-child(3){top:12px}
.mnav-burger[aria-expanded="true"] i b:nth-child(1){top:6px;transform:rotate(45deg)}
.mnav-burger[aria-expanded="true"] i b:nth-child(2){opacity:0}
.mnav-burger[aria-expanded="true"] i b:nth-child(3){top:6px;transform:rotate(-45deg)}

@media(max-width:900px){
  nav[data-mnav]{position:relative}
  .mnav-burger{display:flex}
  nav[data-mnav] .mnav-group{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-bg,var(--dark,#111214));
    border-bottom:1px solid var(--line,#2a2d33);
    box-shadow:0 14px 30px rgba(0,0,0,.30);
    padding:6px 0;display:none;z-index:80;
  }
  nav[data-mnav].mnav-open .mnav-group{display:flex}
  /* each entry becomes a full-width row */
  nav[data-mnav] .mnav-group>*{width:100%;padding:14px 20px;border-top:1px solid var(--line,#2a2d33);justify-content:flex-start}
  nav[data-mnav] .mnav-group>*:first-child{border-top:0}
}