/* RAYO Menu 1: keep all ten main entries on one row at 1024px. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #menu_categories .navbar-nav > .nav-item > .nav-link-wrapper > .nav-link,
  #menu_categories .navbar-nav > .nav-item > .nav-link {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Keep the dropdown inside the navigation container on laptops. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #menu_categories #menu_navbar > .navbar-nav > .nav-item > .navbar-subnav {
    left: 0 !important;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* RAYO 2026-10-28: balance whole category groups without overflowing grid rows.
   Native menu merge wrappers may outnumber the available grid tracks.
   Preserve their DOM order but allow column breaks between category groups. */
@media (min-width: 1024px) {
  header #menu_categories.wide .navbar-subnav {
    column-width: 19rem;
    column-count: 5;
    column-gap: 1rem;
    column-fill: balance;
  }

  header #menu_categories.wide .navbar-nav > .nav-item:hover > .navbar-subnav,
  header #menu_categories.wide .navbar-nav > .nav-item.--hover > .navbar-subnav,
  header #menu_categories.wide .navbar-subnav.active,
  header #menu_categories.wide .navbar-subnav.--hover {
    display: block;
  }

  header #menu_categories.wide .navbar-subnav .nav-merge {
    break-inside: auto;
  }

  header #menu_categories.wide .navbar-subnav .nav-item:not(.nav-merge) {
    break-inside: avoid-column;
    page-break-inside: avoid;
  }

  header #menu_categories.wide .navbar-subnav > .nav-item.--all {
    column-span: all;
  }
}

/* RAYO 2026-10-28: keep the growing parts and off-road groups readable. */
@media (min-width: 1024px) {
  header #menu_categories.wide .navbar-nav > .nav-item:has(> .nav-link-wrapper > a[href$="-1943.html"]) > .navbar-subnav {
    column-count: 4;
    column-width: 22rem;
  }
  header #menu_categories.wide .navbar-nav > .nav-item:has(> .nav-link-wrapper > a[href$="-1990.html"]) > .navbar-subnav {
    column-count: 3;
    column-width: 24rem;
  }
  header #menu_categories.wide .navbar-subnav .nav-link.--l2 {
    break-after: avoid-column;
  }
}