/* ARES V26 mobile shell repair.
   A backdrop-filter on the sticky header can turn fixed descendants into
   header-contained elements on mobile Chromium/WebKit. That caused the menu
   surface to end after the first navigation rows while the page remained
   visible beneath the backdrop. */

@media (max-width: 68rem) {
  .ares-v4-shell-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
    filter: none !important;
    perspective: none !important;
    transform: none !important;
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-primary-nav {
    position: fixed !important;
    top: var(--ares-v4-header-height, 64px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 720 !important;
    display: block !important;
    width: 100% !important;
    height: calc(100dvh - var(--ares-v4-header-height, 64px)) !important;
    min-height: calc(100vh - var(--ares-v4-header-height, 64px)) !important;
    max-height: none !important;
    padding: 0.8rem 1rem calc(5rem + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    color: var(--ares-color-text);
    background: #07101f !important;
    border-top: 0.5px solid var(--ares-color-gold-border);
    box-shadow: none !important;
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-primary-nav::after {
    display: block;
    height: 1px;
    content: '';
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-nav-link,
  .ares-v4-shell-header.is-mobile-open .ares-v4-menu-button {
    min-height: 3rem !important;
    margin: 0 0 0.35rem !important;
    padding: 0.78rem 0.85rem !important;
    color: var(--ares-color-text-muted);
    background: var(--ares-color-surface-1);
    border: 0.5px solid var(--ares-border-subtle);
    border-radius: var(--ares-radius-panel);
    font-size: 0.66rem !important;
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-nav-link[aria-current='page'],
  .ares-v4-shell-header.is-mobile-open .ares-v4-nav-menu.is-active > .ares-v4-menu-button,
  .ares-v4-shell-header.is-mobile-open .ares-v4-nav-menu.is-open > .ares-v4-menu-button {
    color: var(--ares-color-gold-bright);
    background: var(--ares-color-gold-soft);
    border-color: var(--ares-color-gold-border);
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-menu-panel {
    width: 100% !important;
    margin: 0 0 0.7rem !important;
    padding: 0.7rem !important;
    overflow: visible !important;
    background: var(--ares-color-surface-2) !important;
    border: 0.5px solid var(--ares-color-gold-border) !important;
  }

  .ares-v4-backdrop {
    z-index: 690 !important;
    background: rgba(1, 6, 15, 0.82) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.ares-shell-v4-open,
  html.ares-shell-v4-open body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
}

@media (max-width: 42rem) {
  :root {
    --ares-v4-header-height: 64px;
  }

  .ares-v4-shell-header {
    min-height: var(--ares-v4-header-height) !important;
    padding: 0.45rem 0.75rem !important;
  }

  .ares-v4-brand {
    gap: 0.55rem;
  }

  .ares-v4-brand img {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  .ares-v4-menu-toggle {
    width: 3rem !important;
    min-width: 3rem !important;
    height: 2.7rem !important;
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-primary-nav {
    padding-inline: 0.75rem !important;
  }

  .ares-v4-shell-header.is-mobile-open .ares-v4-menu-groups {
    grid-template-columns: 1fr !important;
  }
}