/* ==========================================================================
   Make My Theme — mega-menu.css

   The Products mega menu. Its own sheet rather than more of header.css:
   header.css is already ~870 lines and is edited constantly for the nav item
   set, and this is one self-contained surface.

   Elevation is rung 2 (--shadow-2). §6.1's "content pages carry no elevation"
   does not apply — this is application chrome sitting over the page, and the
   rung 2 vocabulary is exactly "popover / toolbar".

   The §14.1 hover underline is NOT touched here. header.css lines 358–389
   already implement it correctly and the trigger keeps its plain menu-link
   markup, so nothing in this file keys off .mm-nav__list > li > a.
   ========================================================================== */

/* ── Panel shell ───────────────────────────────────────────────────────────── */

/* Full-width, below the 88px header strip. <header> is position: sticky, which
   already makes it the containing block — it needs no position: relative of its
   own, and adding one would break the stick. */
.mm-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    z-index: var(--z-raised);
    text-align: left;
}

/* The panel ships with the `hidden` attribute; the descendant display rules
   below would otherwise out-specify the UA's [hidden] { display: none }. */
.mm-mega[hidden] {
    display: none;
}

/* .mm-header carries --z-header (200) and therefore opens its own stacking
   context: every z-index inside it, including the panel's, is scoped to that
   context and cannot reach past the mobile nav drawer (--z-drawer, 400) the
   panel is opened from below 900px. So the whole header lifts for as long as
   the panel is open — mega-menu.js stamps the class — and drops back after.
   Raising .mm-mega alone would do nothing. */
.mm-header.mm-mega-is-open {
    z-index: var(--z-modal);
}

.mm-mega__inner {
    padding-block: var(--sp-12);
}


/* ── Range grid ────────────────────────────────────────────────────────────── */

.mm-mega__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-10) var(--sp-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-mega__range {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}


/* ── Range header row ──────────────────────────────────────────────────────── */

.mm-mega__range-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--rule);
}

/* The range's own accent, passed in as --mm-range-accent from the brand
   registry (Core_Brand_Accents). A square, not a disc: it is the same mark the
   footer manifest and the range cards use. */
.mm-mega__dot {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--mm-range-accent, var(--accent));
}

.mm-mega__range-name {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-display);
    color: var(--ink);
    text-decoration: none;
}

.mm-mega__range-name:hover {
    color: var(--ink-soft);
}

/* Counts are numbers that change in place, so they are Num (§4.1). Mono is
   already evenly spaced — tracking it breaks the column (§4.3). */
.mm-mega__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-mono);
    color: var(--ink-muted);
    white-space: nowrap;
}


/* ── Group rows ────────────────────────────────────────────────────────────── */

.mm-mega__groups {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-mega__group {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-14);
    color: var(--ink-soft);
    text-decoration: none;
}

.mm-mega__group:hover {
    color: var(--ink);
}

/* A range with nothing configured states what it makes instead of a count. */
.mm-mega__tagline {
    margin: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    color: var(--ink-muted);
}

/* Label role — 11px, 600, uppercase, --tracking-label. */
.mm-mega__more {
    margin-top: var(--sp-1);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
}

.mm-mega__more:hover {
    color: var(--ink);
}


/* ── One range: the sub-brand sites ────────────────────────────────────────── */

/* A sub-brand's panel holds a single cell (it advertises its own range only).
   Left in the 4-up grid that cell would occupy a quarter of the panel with
   three empty columns beside it, so it spans the full width and its groups
   take the columns over instead. */
.mm-mega[data-ranges="single"] .mm-mega__grid {
    grid-template-columns: 1fr;
}

.mm-mega[data-ranges="single"] .mm-mega__groups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3) var(--sp-6);
}


/* ── Pebble footer strip ───────────────────────────────────────────────────── */

.mm-mega__foot {
    background: var(--paper-soft);
    border-top: 1px solid var(--rule);
}

.mm-mega__foot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding-block: var(--sp-5);
}

.mm-mega__foot-text {
    font-size: var(--fs-14);
    color: var(--ink-soft);
}

.mm-mega__foot-link {
    font-size: var(--fs-14);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: var(--sp-1);
}

.mm-mega__foot-link:hover {
    color: var(--ink-soft);
    border-bottom-color: var(--ink-soft);
}


/* ── Mobile chrome — hidden until the panel goes full-screen ───────────────── */

.mm-mega__bar,
.mm-mega__drill {
    display: none;
}


/* ── 900–1199px: two columns ───────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .mm-mega__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mm-mega[data-ranges="single"] .mm-mega__grid {
        grid-template-columns: 1fr;
    }

    .mm-mega[data-ranges="single"] .mm-mega__groups {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ── <900px: full-screen panel, ranges first, drill into one ───────────────── */

@media (max-width: 899px) {

    /* Over the mobile nav drawer it is opened from, so it needs the tier above
       --z-drawer. It is still a disclosure, not a dialog — no modal semantics,
       no focus trap: Escape closes it and returns focus to Products. */
    .mm-mega {
        position: fixed;
        inset: 0;
        top: 0;
        border-top: 0;
        box-shadow: none;
        z-index: var(--z-modal);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
    }

    .mm-mega__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        min-height: var(--h-btn-lg);
        padding-inline: var(--container-pad);
        border-bottom: 1px solid var(--rule);
        position: sticky;
        top: 0;
        background: var(--paper);
    }

    .mm-mega__back,
    .mm-mega__close {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: var(--h-control);
        min-width: var(--h-control);
        padding: 0;
        background: none;
        border: 0;
        font: inherit;
        font-size: var(--fs-14);
        color: var(--ink);
        cursor: pointer;
    }

    .mm-mega__close {
        justify-content: flex-end;
    }

    .mm-mega__bar-title {
        font-size: var(--fs-11);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--ink-muted);
        margin-right: auto;
    }

    /* Screen 1 shows the range list; screen 2 shows one range's groups. */
    .mm-mega[data-view="ranges"] .mm-mega__back {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__bar-title {
        display: none;
    }

    .mm-mega__inner {
        flex: 1;
        padding-block: 0;
    }

    .mm-mega__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mm-mega__range {
        gap: 0;
    }

    /* 52px: the 44px touch floor plus breathing room. */
    .mm-mega__range-head {
        min-height: var(--h-btn-lg);
        padding-block: var(--sp-2);
    }

    .mm-mega__range-name {
        flex: 1;
    }

    /* Two actions per row, deliberately: the name goes to the range, the arrow
       drills into its groups. One row doing both would make the count the only
       hint that the groups exist. */
    .mm-mega__drill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--h-control);
        min-height: var(--h-control);
        margin-right: calc(var(--sp-3) * -1);
        padding: 0;
        background: none;
        border: 0;
        font: inherit;
        color: var(--ink-muted);
        cursor: pointer;
    }

    .mm-mega[data-view="ranges"] .mm-mega__groups,
    .mm-mega[data-view="ranges"] .mm-mega__tagline,
    .mm-mega[data-view="ranges"] .mm-mega__more {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__range:not(.is-active) {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__range-head {
        border-bottom: 0;
        padding-top: var(--sp-4);
    }

    .mm-mega[data-view="range"] .mm-mega__drill {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__groups {
        gap: 0;
    }

    .mm-mega[data-view="range"] .mm-mega__group {
        min-height: var(--h-btn-lg);
        align-items: center;
        padding-block: var(--sp-2);
        border-bottom: 1px solid var(--rule);
        font-size: var(--fs-16);
    }

    .mm-mega[data-view="range"] .mm-mega__group-name {
        flex: 1;
    }

    .mm-mega[data-view="range"] .mm-mega__more,
    .mm-mega[data-view="range"] .mm-mega__tagline {
        padding-block: var(--sp-4);
    }

    .mm-mega__foot-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
    }

    /* One range means there is nothing to choose between, so the two-level
       drill-down collapses: the groups are the first screen. Placed last in the
       block deliberately — it has the same specificity as the [data-view]
       rules above and needs to win on order. */
    .mm-mega[data-ranges="single"] .mm-mega__drill {
        display: none;
    }

    .mm-mega[data-ranges="single"] .mm-mega__range-head {
        border-bottom: 0;
    }

    .mm-mega[data-ranges="single"] .mm-mega__groups {
        display: flex;
        gap: 0;
    }

    .mm-mega[data-ranges="single"] .mm-mega__group {
        min-height: var(--h-btn-lg);
        align-items: center;
        padding-block: var(--sp-2);
        border-bottom: 1px solid var(--rule);
        font-size: var(--fs-16);
    }

    .mm-mega[data-ranges="single"] .mm-mega__group-name {
        flex: 1;
    }

    .mm-mega[data-ranges="single"] .mm-mega__tagline {
        display: block;
        padding-block: var(--sp-4);
    }

    .mm-mega[data-ranges="single"] .mm-mega__more {
        display: block;
        padding-block: var(--sp-4);
    }
}