/**
 * Mega menu: the dropdown of a top-level item with the CSS class "mega-menu"
 * shows its children as columns on desktop and as labelled groups in the GP
 * Premium slide-out menu. Menu structure and PHP: mega-menu.php / .md.
 *
 * Structure (WordPress menu, rendered by GP):
 *   li.mega-menu.menu-item-has-children > a + ul.sub-menu
 *     li.mega-menu-column > (span.mega-menu-title | a) + ul.sub-menu
 *       li > a                                         the column's links
 *
 * Desktop: GP's dropdown keeps its show/hide (hover, .sfHover for keyboard);
 * the columns sit side by side and the third level stays open inside them
 * instead of flying out. Slide-out: the top item opens as usual, the
 * columns' links are always visible under their titles.
 *
 * Tuning: --mega-menu-gap (40px), --mega-menu-padding (24px 28px),
 *         --mega-menu-column-width (200px), --mega-menu-link-size (14px),
 *         --mega-menu-title-clr (the header text color)
 */

:root {
    --mega-menu-gap: 40px;
    --mega-menu-padding: 24px 28px;
    --mega-menu-column-width: 200px;
    --mega-menu-link-size: 14px;
}

/* The column titles keep GP's dropdown arrow for menu.js; it is not shown. */
.mega-menu-column > :is(.mega-menu-title, a) .dropdown-menu-toggle {
    display: none;
}

/* ---------- Desktop dropdown ---------- */
:is(#site-navigation, #sticky-navigation):not(.toggled) .mega-menu > .sub-menu {
    display: flex;
    column-gap: var(--mega-menu-gap);
    width: max-content;
    max-width: calc(100vw - 2 * var(--mobile-side-padding));
    padding: var(--mega-menu-padding);
    background-color: var(--submenu-bg-clr);
}

:is(#site-navigation, #sticky-navigation):not(.toggled) .mega-menu > .sub-menu > li {
    width: auto;
    min-width: var(--mega-menu-column-width);
}

/* Beats the theme's sub-menu link rule (#site-navigation .main-nav ul li .sub-menu li a). */
:is(#site-navigation, #sticky-navigation) .main-nav .mega-menu > .sub-menu > .mega-menu-column > :is(.mega-menu-title, a) {
    display: block;
    margin-bottom: 6px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-clr);
    background: none;
    color: var(--mega-menu-title-clr, var(--header-font-clr));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* The third level stays open inside its column (GP would fly it out to the side). */
:is(#site-navigation, #sticky-navigation):not(.toggled) .mega-menu > .sub-menu > li > .sub-menu {
    position: static;
    top: auto;
    left: auto;
    float: none;
    width: auto;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: none;
    transition: none;
}

:is(#site-navigation, #sticky-navigation) .main-nav .mega-menu > .sub-menu > li > .sub-menu li a {
    padding: 8px 0;
    background: none;
    font-size: var(--mega-menu-link-size);
    white-space: nowrap;
}

/* ---------- Slide-out menu ---------- */
#generate-slideout-menu .sub-menu .mega-menu-column > :is(.mega-menu-title, a) {
    display: block;
    padding: 18px var(--slideout-padding-x) 4px calc(var(--slideout-padding-x) + 16px);
    color: var(--slideout-link-clr);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* slideout-menu.css styles the arrows with the panel's id, so hide them with it too. */
#generate-slideout-menu .mega-menu-column > :is(.mega-menu-title, a) .dropdown-menu-toggle {
    display: none;
}

/* Always open under the title. Beats slideout-menu.css's collapsed sub-menu
   and GP's hidden state (height 0, no pointer events), which the panel
   lifts only from an opened sub-menu. */
#generate-slideout-menu.main-navigation .main-nav .mega-menu > .sub-menu > li > .sub-menu {
    height: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    background: none;
}