/* P4.4.18: native details/summary mobile navigation. The browser owns the
   toggle, so touch navigation remains available before or without JavaScript. */
.mobile-navigation{
  display:none;
}

@media (max-width:980px){
  .masthead{
    position:relative;
    z-index:100;
    overflow:visible;
  }
  .masthead::after{pointer-events:none}
  .masthead-inner{
    position:relative;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:10px !important;
    overflow:visible;
    isolation:isolate;
  }
  .desktop-nav{display:none !important}
  .masthead-actions{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end;
  }
  .mobile-navigation{
    display:block;
    position:static;
    grid-column:3;
    grid-row:1;
    align-self:center;
    justify-self:end;
    z-index:1100;
    pointer-events:auto !important;
  }
  .mobile-menu-toggle{
    display:grid;
    width:44px;
    height:44px;
    margin:0;
    padding:0;
    place-items:center;
    border:1px solid #213851;
    border-radius:7px;
    background:#09182A;
    color:#CBD7E2;
    cursor:pointer;
    position:relative;
    z-index:1102;
    appearance:none;
    -webkit-appearance:none;
    pointer-events:auto !important;
    touch-action:manipulation;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:rgba(98,197,255,.22);
    list-style:none;
  }
  .mobile-menu-toggle::-webkit-details-marker{display:none}
  .mobile-menu-toggle svg{
    width:19px;
    height:19px;
    pointer-events:none;
  }
  .mobile-menu-toggle .menu-close-icon{display:none}
  .mobile-navigation[open] .mobile-menu-toggle{
    color:#fff;
    border-color:#62C5FF;
    background:#0B2741;
  }
  .mobile-navigation[open] .menu-open-icon{display:none}
  .mobile-navigation[open] .menu-close-icon{display:block}
  .mobile-menu-toggle:focus-visible{
    outline:3px solid #62C5FF;
    outline-offset:3px;
    box-shadow:0 0 0 2px #07182E;
  }
  .mobile-navigation:not([open]) .mobile-navigation-links{display:none !important}
  .mobile-navigation-links{
    position:absolute;
    top:100%;
    right:14px;
    left:14px;
    z-index:1101;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:10px;
    overflow:visible;
    max-height:70vh;
    max-height:calc(100dvh - 130px);
    overflow-y:auto;
    border:1px solid #1B3B58;
    border-top:2px solid #1988E8;
    border-radius:0 0 8px 8px;
    background:linear-gradient(180deg,#06172A 0%,#03101F 100%);
    box-shadow:0 20px 40px rgba(0,7,18,.55);
    pointer-events:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-navigation-links a{
    display:flex;
    position:relative;
    align-items:center;
    min-height:48px;
    width:100%;
    padding:0 16px;
    border-bottom:1px solid rgba(126,164,194,.15);
    color:#B7C8D8;
    background:transparent;
    
    
    letter-spacing:0.035em;
    text-decoration:none;
    cursor:pointer;
    z-index:1;
    pointer-events:auto !important;
    touch-action:manipulation;
    -webkit-touch-callout:default;
    -webkit-tap-highlight-color:rgba(98,197,255,.22);font-size:13px;font-weight:700;}
  .mobile-navigation-links a:last-child{border-bottom:0}
  .mobile-navigation-links a.active{
    color:#fff;
    background:rgba(25,136,232,.18);
  }
  .mobile-navigation-links a.active::after{
    content:"";
    position:absolute;
    top:8px;
    bottom:8px;
    left:0;
    width:3px;
    background:#62C5FF;
  }
}

@media (max-width:620px){
  .brand img{width:clamp(145px,46vw,205px) !important}
  .mobile-navigation-links{right:10px;left:10px}
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu-toggle{transition:none !important}
.mobile-navigation-links a{transition:none !important}
}