/*
 * Main menu: a top-level item's drop-down in 2 or 3 columns (Admin → Menus → "Dropdown columns"; class
 * menu-columns-N on .mega-menu-dropdown, set only for N > 1). Desktop only; phones keep the single list of
 * MenusWidget.css. Colors, fonts, hover and spacing stay those of MenusWidget.css: only the layout changes.
 * The sub-items fill a column top to bottom, then the next one (CSS columns keep the document order, so the
 * Tab order follows the visual order). The theme's MenusWidget.js already moves an opened drop-down to the left
 * when it would leave the window on the right; the max-width keeps it inside the window on the left too.
 */
@media (width>=769px) {
    .menu-widget .mega-menu-dropdown.menu-columns {
        max-width: calc(100vw - 32px)
    }

    .menu-widget .mega-menu-dropdown.menu-columns .menu-child-box {
        float: none;
        width: auto;
        margin-right: 0
    }

    /* Only the list of simple sub-items (its list is the box's first child; a group heading box starts with h6). */
    .menu-widget .mega-menu-dropdown.menu-columns .menu-child-box>.menu-sub-child-unordered-list:first-child {
        column-gap: var(--spacing-large);
        margin: 0
    }

    .menu-widget .mega-menu-dropdown.menu-columns-2 .menu-child-box>.menu-sub-child-unordered-list:first-child {
        column-count: 2
    }

    .menu-widget .mega-menu-dropdown.menu-columns-3 .menu-child-box>.menu-sub-child-unordered-list:first-child {
        column-count: 3
    }

    /* Full names, never split inside a word, never an item split across two columns. */
    .menu-widget .mega-menu-dropdown.menu-columns .menu-child-box>.menu-sub-child-unordered-list:first-child>.menu-sub-child-list {
        break-inside: avoid;
        max-width: none;
        overflow: visible;
        word-break: keep-all;
        overflow-wrap: normal
    }
}