/* SchoolCMS – Menu (template-parts/menu/)
   Innermedia base styling, ported from the Rikkyo build (2026-09-17): a
   full-screen black panel behind the nav's menu button. The same
   three-level tree renders two ways – desktop lays the levels out as
   columns (the Bootstrap 12-column split Rikkyo's design snaps to:
   col-3 / col-5 / col-4, separated by hairline rules), each opened by
   clicking its parent; mobile stacks them as panes that slide in from
   the right with a back control. Behaviour in menu.js alongside. The
   nav bar itself stays above the panel – template-parts/nav/. Restyle
   per site from Figma. */

/* Locking the scroll removes the scrollbar, which widens the viewport and
   would shift the page mid-transition. Its width is given back as a
   border rather than padding, so the freed strip carries the panel's
   ground: left to the page background it flashes white against the
   panel as it fades in. --sbw is measured in menu.js, which also holds
   the lock until that fade is over so the scrollbar doesn't come back
   over the panel either. */
body.menu-open {
    overflow:     hidden;
    border-right: var(--sbw, 0px) solid var(--color-black);
}

/* Inside the nav's own stacking context – above the page, below the bar
   (template-parts/nav/nav.css raises .mainHeader over it) */
.menuPanel {
    position:   fixed;
    inset:      0;
    z-index:    1;
    background: var(--color-black);
    opacity:    0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);

    &.is-open {
        opacity:    1;
        visibility: visible;
    }

    /* The panel spans the width the hidden scrollbar frees, so its
       columns absorb that width to stay where they were. Held off the
       body's class, not .is-open: that drops the moment the close
       begins, re-centring the columns while they are still on screen. */
    body.menu-open & {
        padding-right: var(--sbw, 0px);
    }

    /* 100px clears the 80px bar above; the phone panes scroll inside */
    .menuInner {
        display:     block;
        align-items: center;
        width:       100%;
        max-width:   var(--container-width);
        height:      100%;
        margin:      0 auto;
        padding:     100px 5% var(--space-3xl);
        overflow-y:  auto;
    }

    /* Positioning context for the revealed levels: its own centre line
       is the panel's, so every level centres on the same axis */
    .menuNav {
        position: relative;
        width:    100%;
    }

    ul {
        margin:     0;
        padding:    0;
        list-style: none;
    }

    .menuNav > ul {
        width: 100%;
    }

    /* Only the words are the link – the row stays full width, since the
       revealed column hangs off the <li> */
    a,
    .backItem {
        display:         block;
        width:           fit-content;
        border:          none;
        background:      none;
        padding:         0;
        text-align:      left;
        text-decoration: none;
        color:           var(--color-white);
        transition:      color var(--transition-base);
    }

    a:hover,
    li.open > a,
    li.current-menu-item > a {
        color: var(--color-orange);
    }

    /* Per-tier type – the row pitch is the token's line-height, there is
       no padding (tokens.css: the -menu styles). Level 1 */
    .menuNav > ul > li > a {
        font: var(--text-20ob-menu);
    }

    /* Level 2 */
    .menuNav > ul ul > li > a {
        font: var(--text-20or-menu);
    }

    /* Level 3 */
    .menuNav > ul ul ul > li > a {
        font: var(--text-16or);
    }

    /* The back control is mobile-only – desktop's columns coexist, so
       there is nothing to go back from. The parent's own link stays at
       every breakpoint: a parent's words only toggle its level, so the
       injected row is how the page itself is reached. */
    .menuBack {
        display:       block;
        margin-bottom: var(--space-md);
    }

    .backItem {
        font:   var(--text-16or-button);
        color:  var(--color-cream);
        cursor: pointer;
    }

    /* Indicator on every item with children – levels open on click at
       both breakpoints, so the chevron is what says there is more to
       open. Points to where the level appears (the right); it does not
       turn on open. Sized for the 20px tiers (Rikkyo sizes it in em,
       which the base does not use – px per tier instead); the desktop
       level-1 type steps it up below. */
    .chevron {
        display:       inline-block;
        width:         7px;
        height:        7px;
        margin-left:   10px;
        border-right:  2px solid currentColor;
        border-bottom: 2px solid currentColor;
        /* off the baseline onto the cap-height centre, where the text
           reads as centred */
        transform:     translateY(-2px) rotate(-45deg);
    }

    /* Each level becomes a pane over the one before it. z-index
       lifts the pane over the tier below's chevrons – their
       transform makes them paint above an unlayered fixed pane */
    ul.sub-menu {
        position:       fixed;
        inset:          0;
        z-index:        1;
        width:          auto;
        padding:        100px 5% var(--space-3xl);
        transform:      translateX(100%);
        opacity:        1;
        visibility:     hidden;
        pointer-events: none;
        background:     var(--color-black);
        overflow-y:     auto;
        transition:     transform var(--transition-base), visibility var(--transition-base);

        /* The hairline between columns – a fixed rule longer than the
           list beside it, centred on the same axis. The stacked panes
           have no columns to divide, so it is only drawn once the
           levels sit side by side. */
        &::before {
            content:    none;
            position:   absolute;
            left:       0;
            top:        50%;
            transform:  translateY(-50%);
            width:      1px;
            height:     55vh;
            background: color-mix(in srgb, var(--color-white) 25%, transparent);
        }
    }

    /* `inherit`, NOT `visible`: the walker marks the current page's branch
       .open on load, and an open pane that says `visible` outright stays a
       hit target while the panel around it is opacity 0 / visibility hidden
       – an invisible, full-screen (fixed, inset 0) sheet over the page that
       swallowed every click on the base staging's posts (found 2026-09-22,
       testing the Back link). Inheriting, the pane is visible exactly when
       the panel is, and follows its transition. */
    li.open > ul.sub-menu {
        opacity:        1;
        visibility:     inherit;
        pointer-events: auto;
        transform:      translateX(0);
    }

    @media (min-width: 992px) {

        .menuInner {
            display:    flex;
            padding:    0 var(--space-md) 0 var(--space-xl);
            overflow-y: visible;
        }

        /* The wide layout steps the levels back up: the 30px style on
           the top level, level 2 the same at every width, the taller
           menu body pitch on the third */
        .menuNav > ul > li > a {
            font: var(--text-30ob);

            .chevron {
                width:       10px;
                height:      10px;
                margin-left: 15px;
                transform:   translateY(-4px) rotate(-45deg);
            }
        }

        .menuNav > ul ul ul > li > a {
            font: var(--text-16or-menu);
        }

        .menuNav > ul {
            width: 25%;
        }

        /* The panes go back to being columns: each level is positioned
           inside .menuNav, centred on the panel's axis, with the
           hairline drawn between them again. The swap runs on the fast
           token – a column answering a click, not a hover. */
        ul.sub-menu {
            position:   absolute;
            inset:      auto;
            top:        50%;
            z-index:    auto;
            width:      auto;
            padding:    0 0 0 var(--space-3xl);
            transform:  translateY(-50%);
            opacity:    0;
            background: none;
            overflow-y: visible;
            transition: opacity var(--transition-fast), visibility var(--transition-fast);

            &::before {
                content: '';
            }
        }

        /* the open level is centred, not slid in – said again here
           because the pane's translate outranks the rule above */
        li.open > ul.sub-menu {
            transform: translateY(-50%);
        }

        /* Level 2 sits on the grid against .menuNav. Level 3 cannot – its
           containing block is the level-2 list, being positioned itself –
           so its share of the grid is expressed against that box: flush to
           its right edge (25% + 41.6667% = the 8-column line) and 80% of it
           wide (33.3333% of .menuNav). */
        .menuNav > ul > li > ul.sub-menu {
            left:  25%;
            width: 41.6667%;
        }

        .menuNav > ul > li > ul > li > ul.sub-menu {
            left:  100%;
            width: 80%;
        }

        .menuBack {
            display:       none;
            margin-bottom: 0;
        }

        /* hidden with its row, so the type falls back to what the button
           reset gives it – Bootstrap reboot's inherits over the UA's
           weight – and the colour to the shared link colour */
        .backItem {
            font-family: inherit;
            font-size:   inherit;
            font-weight: 400;
            line-height: inherit;
            color:       var(--color-white);
        }
    }
}