/* Desktop only, so the mobile (hamburger) menu keeps working */
@media (min-width: 992px) {

  /* Anchor the dropdown to the navbar, not the menu item */
  .horizontal-menu .bottom-navbar .page-navigation > .nav-item.mega-menu {
    position: static;
  }
  .horizontal-menu .bottom-navbar .container {
    position: relative;
  }

  /* Full width, starts at the left, scrolls when too tall */
  .horizontal-menu .bottom-navbar .page-navigation > .nav-item.mega-menu > .submenu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* One long list that splits itself into columns */
.mega-menu .submenu ul.auto-columns {
  columns: 220px;
  column-gap: 1.5rem;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mega-menu .submenu ul.auto-columns > li {
  break-inside: avoid;
}
.mega-menu .submenu .menu-columns {
  display: flex;
  flex-wrap: wrap;
  margin-right: -2rem;          /* cancels the right margin of the last column */
}
.mega-menu .submenu .menu-col {
  flex: 1 1 230px;              /* grow, shrink, minimum 230px wide */
  margin-right: 2rem;
  margin-bottom: 1rem;
}
.mega-menu .submenu .menu-group {
  margin-bottom: 1rem;
}
.mega-menu .submenu .menu-group > ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mega-menu .submenu .category-heading {
  font-weight: 600;
  margin-bottom: .25rem;
}
@media (min-width: 992px) {
  .horizontal-menu .bottom-navbar .page-navigation > .nav-item.mega-menu.compact > .submenu {
    right: auto !important;   /* stop stretching to the right edge */
    width: auto !important;   /* shrink to fit the columns */
    max-width: 100%;
  }
}
.mega-menu.compact .submenu .menu-columns {
  flex-wrap: nowrap;         /* keep the columns side by side */
}
.mega-menu.compact .submenu .menu-col {
  flex: 0 0 350px;
  width: 350px;              /* tells the panel how wide each column is */
}