/* Desktop mega menu, compact layout for sparse menus (classes set by js/menu.js).
   Desktop only: the mobile hamburger menu is untouched. */
@media (min-width: 768px) {
  header .mega-menu-scroll-wrapper.mm-compact-wrap {
    width: auto !important;
    min-width: 0;
    right: auto;
  }
  header .mega-menu.mm-compact {
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    display: grid;
    grid-auto-flow: column dense;
    /* one row per stacked single link, plus a spare row that absorbs a tall group */
    grid-template-rows: repeat(var(--mm-rows, 1), auto) 1fr;
    grid-auto-columns: max-content;
    -webkit-column-gap: 48px;
    column-gap: 48px;
    padding-right: 2.5rem !important;
  }
  header .mega-menu.mm-compact > li.mm-group {
    grid-row: 1 / -1;
    width: auto !important;
    min-width: 170px;
  }
  header .mega-menu.mm-compact > li.mm-group > ul {
    -webkit-column-count: var(--mm-split, 1);
    -moz-column-count: var(--mm-split, 1);
    column-count: var(--mm-split, 1);
    -webkit-column-gap: 32px;
    column-gap: 32px;
  }
  header .mega-menu.mm-compact > li.mm-group > ul > li {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }
  header .mega-menu.mm-compact > li.mm-leaf {
    width: auto !important;
    min-width: 170px;
  }
}

/* The theme adds a ">" to menu headings up to 991px, meant for the phone
   hamburger menu. Between 768 and 991px the desktop dropdown shows instead,
   so the arrows are hidden there; below 768px they stay as they are. */
@media (min-width: 768px) and (max-width: 991.98px) {
  header a.nav-link.font-weight-bold:after {
    content: none;
  }
}