/* ============================================================
   Multi-column drop-down panels (main nav, desktop only)

   A top-level menu item with many sub-items (e.g. Gallery) gets
   its panel laid out in 2 to 4 columns. The count comes from the
   item's "Drop-down columns" setting in Admin > Menu (Auto = 12
   items per column). templates/header.php adds the classes
   .submenu--cols and .submenu--cols-N to the panel.

   Items flow DOWN each column, then across, so a numbered list
   stays in reading order. Loaded after site.css, and kept in its
   own file so it never has to be merged into site.css edits.

   Mobile (900px and below) is deliberately untouched: inside the
   hamburger panel every drop-down stays a single-column accordion.
   ============================================================ */

@media (min-width: 901px) {

  /* Reveal as a block, not flex: CSS columns only apply to block
     containers. Specificity is one class higher than the generic
     reveal rule in site.css, so this wins whatever the order. */
  .main-nav .has-children:hover > .submenu.submenu--cols,
  .main-nav .has-children:focus-within > .submenu.submenu--cols,
  .main-nav .has-children.is-open > .submenu.submenu--cols {
    display: block;
  }

  /* A wide panel opens rightwards from its parent's left edge. The
     generic panel is pinned to the parent's right edge, which would
     push a wide panel off the left of the screen. If it would run
     off the right instead, the script in header.php nudges it left
     just far enough to stay on screen. */
  .main-nav .submenu.submenu--cols {
    left: 0;
    right: auto;
    column-gap: 0;
    column-rule: 1px solid rgba(255, 255, 255, 0.06);
    max-width: calc(100vw - 2rem);
  }

  .main-nav .submenu--cols-2 { columns: 2; width: 560px; }
  .main-nav .submenu--cols-3 { columns: 3; width: 840px; }
  .main-nav .submenu--cols-4 { columns: 4; width: 1100px; }

  /* Keep each item whole within its column. */
  .main-nav .submenu.submenu--cols > li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Long labels wrap within the column rather than overlapping the
     next one. */
  .main-nav .submenu.submenu--cols a {
    white-space: normal;
    line-height: 1.35;
  }
}