/* Mobile-only hamburger navigation. Desktop navigation is intentionally unchanged. */
.mobile-nav-toggle { display:none; }
@media (max-width:700px) {
  .site-header { position:relative !important; z-index:5000 !important; overflow:visible !important; }
  .site-header .header-row { position:relative !important; }
  .site-header .mobile-nav-toggle {
    display:flex !important; flex:0 0 42px; width:42px; height:42px; padding:10px 9px;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    border:0; border-radius:10px; background:#10111b; color:#fff; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.16); order:4; z-index:5003;
  }
  .site-header .mobile-nav-toggle span { display:block; width:22px; height:2px; flex:0 0 2px; border-radius:2px; background:#fff; transition:transform .18s ease,opacity .18s ease; }
  body.mobile-nav-open .site-header .mobile-nav-toggle span:first-child { transform:translateY(7px) rotate(45deg); }
  body.mobile-nav-open .site-header .mobile-nav-toggle span:nth-child(2) { opacity:0; }
  body.mobile-nav-open .site-header .mobile-nav-toggle span:last-child { transform:translateY(-7px) rotate(-45deg); }
  .site-header nav.primary-nav {
    display:none !important; position:fixed !important; top:var(--mobile-nav-top, 100px) !important;
    left:12px !important; right:12px !important; width:auto !important; max-width:none !important;
    max-height:calc(100dvh - var(--mobile-nav-top, 100px) - 14px) !important;
    overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain;
    flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important;
    gap:3px !important; padding:10px !important; margin:0 !important; box-sizing:border-box !important;
    white-space:normal !important; background:#fff !important; color:#25264b !important;
    border:1px solid #e4e6f2 !important; border-radius:14px !important;
    box-shadow:0 16px 42px rgba(20,24,70,.24) !important; z-index:5002 !important;
  }
  body.mobile-nav-open .site-header nav.primary-nav { display:flex !important; }
  .site-header nav.primary-nav > a,
  .site-header nav.primary-nav > .nav-item,
  .site-header nav.primary-nav .nav-item > .nav-main-link {
    display:flex !important; position:relative !important; flex:0 0 auto !important; width:100% !important;
    min-width:0 !important; min-height:43px !important; align-items:center !important; justify-content:space-between !important;
    box-sizing:border-box !important; padding:10px 12px !important; margin:0 !important;
    border-radius:9px !important; color:#25264b !important; background:transparent !important;
    font-size:14px !important; line-height:1.5 !important; text-align:right !important; white-space:normal !important;
  }
  .site-header nav.primary-nav > .nav-item { flex-direction:column !important; align-items:stretch !important; }
  .site-header nav.primary-nav > a:hover,
  .site-header nav.primary-nav .nav-item > .nav-main-link:hover,
  .site-header nav.primary-nav .nav-item.submenu-open > .nav-main-link { background:#f0f1ff !important; }
  .site-header nav.primary-nav .nav-submenu,
  .site-header nav.primary-nav .nav-item:hover > .nav-submenu,
  .site-header nav.primary-nav .nav-item:focus-within > .nav-submenu {
    display:none !important; position:static !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important;
    width:100% !important; max-width:100% !important; max-height:none !important; overflow:visible !important;
    margin:0 0 6px !important; padding:4px 8px 8px 8px !important; box-sizing:border-box !important;
    border:0 !important; border-radius:8px !important; box-shadow:none !important; background:#f7f7ff !important;
  }
  .site-header nav.primary-nav .nav-item.submenu-open > .nav-submenu { display:block !important; }
  .site-header nav.primary-nav .nav-submenu a { display:block !important; padding:10px 12px !important; color:#303252 !important; font-size:13px !important; white-space:normal !important; }
}

/* Hotfix: prevent legacy navigation rules from stretching the mobile menu into a blue panel. */
@media (max-width:700px) {
  .site-header > .container.header-row {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"logo actions" "search search" "toggle toggle" !important;
    align-items:center !important;
    gap:8px !important;
    width:calc(100% - 24px) !important;
    margin-inline:auto !important;
    padding:8px 0 !important;
  }
  .site-header .header-row > .logo { grid-area:logo !important; }
  .site-header .header-row > .header-actions { grid-area:actions !important; }
  .site-header .header-row > .search { grid-area:search !important; }
  .site-header .header-row > .mobile-nav-toggle {
    grid-area:toggle !important;
    justify-self:start !important;
    align-self:center !important;
    order:initial !important;
    position:relative !important;
    margin:0 !important;
  }
  html body .site-header .header-row > nav#primary-navigation {
    display:none !important;
    position:fixed !important;
    top:var(--mobile-nav-top,115px) !important;
    left:12px !important;
    right:12px !important;
    bottom:auto !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - var(--mobile-nav-top,115px) - 12px) !important;
    margin:0 !important;
    padding:10px !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:3px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#fff !important;
    color:#25264b !important;
    border:1px solid #e4e6f2 !important;
    border-radius:14px !important;
    box-shadow:0 16px 42px rgba(20,24,70,.24) !important;
    z-index:999999 !important;
    white-space:normal !important;
    transform:none !important;
  }
  html body.mobile-nav-open .site-header .header-row > nav#primary-navigation {
    display:flex !important;
  }
  html body .site-header .header-row > nav#primary-navigation > a,
  html body .site-header .header-row > nav#primary-navigation > .nav-item,
  html body .site-header .header-row > nav#primary-navigation > .nav-item > .nav-main-link {
    display:flex !important;
    position:relative !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 12px !important;
    align-items:center !important;
    justify-content:space-between !important;
    color:#25264b !important;
    background:transparent !important;
    border:0 !important;
    border-radius:8px !important;
    font-size:14px !important;
    line-height:1.5 !important;
    text-align:right !important;
    white-space:normal !important;
    box-shadow:none !important;
    transform:none !important;
  }
  html body .site-header .header-row > nav#primary-navigation > .nav-item { flex-direction:column !important; align-items:stretch !important; }
  html body .site-header .header-row > nav#primary-navigation .nav-submenu,
  html body .site-header .header-row > nav#primary-navigation .nav-item:hover > .nav-submenu,
  html body .site-header .header-row > nav#primary-navigation .nav-item:focus-within > .nav-submenu {
    display:none !important;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 0 6px !important;
    padding:4px 8px !important;
    overflow:visible !important;
    background:#f7f7ff !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:none !important;
    transform:none !important;
  }
  html body .site-header .header-row > nav#primary-navigation .nav-item.submenu-open > .nav-submenu { display:block !important; }
  html body .site-header .header-row > nav#primary-navigation .nav-submenu a { display:block !important; min-height:0 !important; padding:10px 12px !important; color:#303252 !important; background:transparent !important; font-size:13px !important; }
}