/* A button controls an ordinary nav. Without JS, the mobile links remain visible. */
.site-header { position:relative; }
.site-header .mobile-menu { display:none; }
.site-header .mobile-menu-toggle[hidden],
.site-header .mobile-nav[hidden] { display:none!important; }
.site-header .mobile-nav[hidden] { visibility:hidden!important; pointer-events:none!important; }

@media (max-width:1080px) {
  .site-header { flex-wrap:wrap; }
  .site-header .desktop-nav { display:none; }
  .site-header .mobile-menu { display:block; flex:1 0 100%; padding-bottom:14px; }
  .site-header .mobile-menu[data-ready] { flex:0 0 auto; margin-left:auto; padding-bottom:0; }
  .site-header .mobile-menu-toggle {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-width:100px; min-height:46px; padding:10px 16px;
    border:1px solid var(--deep); border-radius:999px; background:white;
    color:var(--deep); font-family:inherit; font-size:14px; font-weight:700; line-height:1.4;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .site-header .mobile-menu-toggle:hover,
  .site-header .mobile-menu-toggle[aria-expanded="true"] { background:var(--pale); }
  .site-header .mobile-menu-toggle:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
  .mobile-menu-toggle svg { pointer-events:none; }
  .mobile-menu-toggle[aria-expanded="false"] .close-icon,
  .mobile-menu-toggle[aria-expanded="true"] .menu-icon { display:none; }
  .site-header .mobile-menu .mobile-nav {
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    width:100%; overflow-y:auto; padding:12px; margin:0;
    background:white; border:1px solid var(--line); border-radius:18px;
  }
  .site-header .mobile-menu[data-ready] .mobile-nav {
    position:absolute; top:calc(100% - 4px); right:0; z-index:50;
    width:min(340px,calc(100vw - 36px)); max-height:calc(100dvh - 104px);
    box-shadow:0 12px 32px #123f2320;
  }
  .site-header .mobile-menu .mobile-nav:not([hidden]) {
    visibility:visible; opacity:1; pointer-events:auto;
  }
  .site-header .mobile-menu .mobile-nav > a {
    display:flex; align-items:center; min-height:48px; padding:12px 16px;
    border-radius:10px; color:var(--deep); font-size:15px; font-weight:700;
    line-height:1.5; text-decoration:none;
  }
  .site-header .mobile-menu .mobile-nav > a:hover { background:var(--pale); }
  .site-header .mobile-menu .mobile-nav > a:focus-visible { outline-offset:-3px; }
  .site-header .mobile-menu .mobile-nav > .button {
    margin-top:6px; background:var(--deep); color:white; white-space:normal;
  }
  .site-header .mobile-menu .mobile-nav > .button:hover { background:var(--dark); }
}