/* =========================================================
   FINAL MOBILE NAV FIX
   Only controls the site header/mobile menu.
   ========================================================= */

@media (max-width:900px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .site-header{
    width:100%;
    max-width:100vw;
  }

  .site-header .nav{
    position:relative !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-left:16px !important;
    padding-right:16px !important;
    gap:10px !important;
  }

  .site-header .brand{
    min-width:0 !important;
    max-width:calc(100% - 58px) !important;
  }

  .site-header .brand-name{
    min-width:0 !important;
  }

  .site-header .brand-name strong,
  .site-header .brand-name b{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .site-header .menu-btn{
    display:flex !important;
    width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid #dce6f5 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#103fc2 !important;
    font-size:27px !important;
    line-height:1 !important;
    cursor:pointer !important;
    box-shadow:0 5px 14px rgba(20,55,120,.08) !important;
  }

  .site-header .nav-links{
    display:none !important;
    position:absolute !important;
    z-index:100000 !important;
    top:calc(100% + 8px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - 90px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    padding:10px !important;
    margin:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:3px !important;
    border:1px solid #dbe5f4 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 18px 40px rgba(16,44,119,.18) !important;
  }

  .site-header .nav-links.open{
    display:flex !important;
  }

  .site-header .nav-links a,
  .site-header .nav-links .nav-pill,
  .site-header .nav-links .nav-pill.green{
    display:flex !important;
    width:100% !important;
    min-height:44px !important;
    box-sizing:border-box !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:10px 13px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:9px !important;
    white-space:normal !important;
    font-size:14px !important;
    line-height:1.25 !important;
  }

  .site-header .nav-links a:hover{
    background:#f2f7ff !important;
  }

  .site-header .nav-links .active{
    background:#edf4ff !important;
    color:#0b4dc9 !important;
  }

  .site-header .nav-links .nav-pill{
    margin-top:4px !important;
    justify-content:center !important;
  }

  .site-header .nav-links .nav-pill.green{
    justify-content:center !important;
  }

  /* The page stays visible; menu overlays only a small dropdown. */
  main,
  .hero,
  section,
  footer{
    max-width:100%;
    overflow-x:hidden;
  }
}

@media (max-width:480px){
  .site-header .nav{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .site-header .brand-logo{
    width:44px !important;
    height:44px !important;
    font-size:27px !important;
  }

  .site-header .brand-name{
    margin-left:7px !important;
  }

  .site-header .brand-name strong{
    font-size:17px !important;
  }

  .site-header .brand-name b{
    font-size:14px !important;
  }

  .site-header .menu-btn{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }

  .site-header .nav-links{
    left:8px !important;
    right:8px !important;
    top:calc(100% + 6px) !important;
    max-height:calc(100vh - 82px) !important;
    padding:8px !important;
  }
}

/* Reliable mobile menu button hit area */
@media (max-width:900px){
  .site-header .menu-btn{
    position:relative !important;
    z-index:100002 !important;
    pointer-events:auto !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }
  .site-header .nav{
    position:relative !important;
    z-index:100001 !important;
  }
  .site-header .nav-links{
    z-index:100003 !important;
  }
}