/* Dropdown landscape layout update
   - Desktop: normal dropdown height for 10 or fewer items.
   - Desktop: if more than 10 items, split into landscape columns of 10 items each.
   - Mobile/tablet: dropdown content becomes scrollable after roughly 10 items.
   This file is intentionally separate so it can be adjusted without touching main CSS.
*/

:root {
  --dropdown-items-per-column: 10;
  --dropdown-item-height: 44px;
  --dropdown-column-width: 235px;
  --dropdown-column-gap: 8px;
}

@media (min-width: 1001px) {
  /* Default state: for menus with 10 or fewer items, keep the dropdown only as tall as its content. */
  header .menu .nav-dropdown-menu {
    width: max-content;
    min-width: var(--dropdown-column-width);
    max-width: min(94vw, 980px);
    max-height: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  header .menu .nav-dropdown-menu a {
    min-height: var(--dropdown-item-height);
    display: flex !important;
    align-items: center;
    white-space: nowrap;
  }

  /* Only dropdowns with more than 10 items use the landscape 10-per-column layout. */
  header .menu .nav-dropdown-menu.dropdown-over-10 {
    display: grid !important;
    grid-template-rows: repeat(var(--dropdown-items-per-column), minmax(var(--dropdown-item-height), auto));
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--dropdown-column-width), max-content);
    column-gap: var(--dropdown-column-gap);
    row-gap: 2px;
    width: max-content;
    overflow-x: auto !important;
    overflow-y: visible !important;
    align-items: start;
  }

  header .menu .nav-dropdown:last-child .nav-dropdown-menu,
  header .menu .nav-dropdown:nth-last-child(2) .nav-dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}

@media (max-width: 1000px) {
  header .mobile-drop-menu {
    overflow-x: hidden;
    padding-right: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Mobile should only become scrollable when there are more than 10 items. */
  header .mobile-drop-menu.dropdown-over-10 {
    max-height: calc(var(--dropdown-item-height) * var(--dropdown-items-per-column));
    overflow-y: auto;
  }

  header .mobile-drop-menu:not(.dropdown-over-10) {
    max-height: none;
    overflow-y: visible;
  }

  header .mobile-drop-menu a {
    min-height: var(--dropdown-item-height);
    display: flex !important;
    align-items: center;
  }
}

/* Mobile hamburger turns into a clear X close button when the menu is open. */
@media (max-width: 1000px) {
  header .mobile-toggle {
   
    display: flex !important;
    align-items: center;
   
    border-radius: 12px;
    transition: background .2s ease, transform .2s ease;
  }

  header .mobile-toggle.is-open {
    background: rgba(255,255,255,.14);
  }

  header .mobile-toggle i {
    line-height: 1;
    font-size: 1rem;
  }

  header .mobile-toggle.is-open i {
    font-size: 1.22rem;
  }
}