/* Quiet desktop dividers improve category scanning without adding text glyphs. */
@media (min-width: 981px) {
  .site-header,
  .site-nav,
  #site-menu,
  #site-menu > .nav-item {
    overflow: visible;
  }

  #site-menu {
    display: flex;
    align-items: center;
    gap: 0;
  }

  #site-menu > * {
    flex: 0 0 auto;
  }

  #site-menu > a,
  #site-menu > .nav-item > .nav-trigger {
    white-space: nowrap;
  }

  #site-menu > * + * {
    margin-left: clamp(9px, 0.9vw, 13px);
    padding-left: clamp(9px, 0.9vw, 13px);
    background-image: linear-gradient(
      to bottom,
      transparent calc(50% - 7px),
      rgba(20, 56, 43, 0.22) calc(50% - 7px),
      rgba(20, 56, 43, 0.22) calc(50% + 7px),
      transparent calc(50% + 7px)
    );
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1px 100%;
  }

  /* Keep top-level dividers from constraining dropdown content. */
  #site-menu > .nav-item,
  #site-menu > .nav-item > .mega-menu {
    overflow: visible;
  }

  #site-menu .mega-menu {
    white-space: normal;
    z-index: 1000;
  }
}
/* Keep desktop mega menus anchored to the full navigation rail. */
@media (min-width: 901px) {
  .site-header,
  .site-nav,
  #site-menu {
    overflow: visible !important;
  }

  .site-nav {
    position: relative !important;
  }

  #site-menu,
  #site-menu > .nav-item.has-mega {
    position: static !important;
  }

  #site-menu > .nav-item.has-mega > .mega-menu,
  #site-menu > .nav-item.has-mega > .mega-panel,
  #site-menu > .nav-item.has-mega > [role="menu"] {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(900px, calc(100vw - 64px)) !important;
    min-width: min(760px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    white-space: normal !important;
    overflow: visible !important;
    z-index: 2000 !important;
  }
}
/* Final mega-menu geometry: the desktop nav is still shown in compact windows. */
@media (min-width: 641px) {
  .site-header {
    position: relative !important;
    overflow: visible !important;
    z-index: 1000 !important;
  }

  .site-header .site-nav,
  .site-header #site-menu,
  .site-header #site-menu > .nav-item.has-mega {
    position: static !important;
    overflow: visible !important;
  }

  .site-header #site-menu > .nav-item.has-mega > .mega-menu,
  .site-header #site-menu > .nav-item.has-mega > .mega-panel,
  .site-header #site-menu > .nav-item.has-mega > .dropdown-menu,
  .site-header #site-menu > .nav-item.has-mega > [role="menu"] {
    position: absolute !important;
    top: 100% !important;
    left: clamp(16px, 3vw, 40px) !important;
    right: clamp(16px, 3vw, 40px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - 116px) !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 2200 !important;
  }

  .site-header #site-menu > .nav-item.has-mega > .mega-menu *,
  .site-header #site-menu > .nav-item.has-mega > .mega-panel *,
  .site-header #site-menu > .nav-item.has-mega > .dropdown-menu *,
  .site-header #site-menu > .nav-item.has-mega > [role="menu"] * {
    min-width: 0;
    box-sizing: border-box;
  }
}
/* Compact navigation: switch to the existing menu button before the desktop
   links become too narrow. The opened menu and its submenus stay inside the
   viewport instead of inheriting a single nav item's width. */
@media (max-width: 900px) {
  .site-header {
    position: relative !important;
    overflow: visible !important;
    z-index: 1000 !important;
  }

  .site-header .site-nav {
    position: static !important;
    overflow: visible !important;
  }

  .site-header #site-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 96px) !important;
    margin: 0 !important;
    padding: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fbfaf5 !important;
    border: 1px solid rgba(31, 48, 38, 0.14) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 18px 40px rgba(21, 35, 27, 0.16) !important;
    z-index: 2200 !important;
  }

  .site-header #site-menu.is-open,
  .site-header #site-menu.open,
  .site-header #site-menu.active,
  .site-header #site-menu.show,
  .site-header #site-menu[aria-hidden="false"],
  body.menu-open .site-header #site-menu,
  body.nav-open .site-header #site-menu {
    display: flex !important;
  }

  .site-header [aria-controls="site-menu"],
  .site-header .menu-toggle,
  .site-header .nav-toggle,
  .site-header .site-menu-toggle,
  .site-header .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .site-header #site-menu > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .site-header #site-menu > *::before,
  .site-header #site-menu > *::after {
    display: none !important;
  }

  .site-header #site-menu .nav-link,
  .site-header #site-menu .nav-trigger {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(31, 48, 38, 0.1) !important;
  }

  .site-header #site-menu > .nav-item.has-mega > .mega-menu,
  .site-header #site-menu > .nav-item.has-mega > .mega-panel,
  .site-header #site-menu > .nav-item.has-mega > .dropdown-menu,
  .site-header #site-menu > .nav-item.has-mega > [role="menu"] {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 8px 14px !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}