/* SchoolCMS – Nav (template-parts/nav/)
   Innermedia base styling, ported from the Rikkyo build (2026-09-17):
   an 80px black bar – logo left, the CTA button (Theme Settings →
   Header), the search reveal and the menu button right, at every
   breakpoint. Navigation itself lives behind the menu button in the
   menu component (template-parts/menu/menu.css); nav.js owns the
   search reveal. The bar stays above the open panel, the menu button
   becoming its close control. Restyle per site from Figma.

   DEPARTURE from Rikkyo (Claude, 2026-09-17): Rikkyo's bar is
   position: fixed with the banner running up behind it, and sits
   transparent over the home banner until scrolled. Both hang off
   Rikkyo's banner design – its docked logo the bar's logo swaps with,
   its 80px of head clearance – which the base banner does not draw, so
   the base bar stays sticky and in flow, solid on every page, and no
   template needs an offset for it. A site whose design draws the
   transparent home state takes it from the Rikkyo build. One
   consequence: being inside the body's box, the bar's width is already
   held steady by body.menu-open's border-right (menu.css), so only the
   fixed panel takes the --sbw padding – the bar must not, or its
   actions shift left by a scrollbar as the menu opens. */

.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: var(--color-black);
    color:      var(--color-white);

    /* Stacked over the menu panel, which shares the header's stacking
       context (template-parts/menu/menu.css) */
    .mainHeader {
        position:        relative;
        z-index:         2;
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             var(--space-md);
        height:          80px;
        padding:         0 16px;

        @media (min-width: 768px) {
            padding: 0 40px;
        }
    }

    .site-logo {
        display:         block;
        flex-shrink:     0;
        line-height:     0;
        text-decoration: none;

        img {
            max-height: 48px;
            width:      auto;

            @media (min-width: 992px) {
                max-height: 56px;
            }
        }

        /* the site name stands in until a logo is set in the Customiser */
        .site-title {
            display: inline-block;
            font:    var(--text-20ob);
            color:   var(--color-white);
        }
    }

    /* margin-left keeps the actions on the right even when they are the
       only visible child (the open mobile panel hides the logo) */
    .headerActions {
        display:     flex;
        align-items: center;
        gap:         var(--space-md);
        margin-left: auto;

        @media (min-width: 576px) {
            gap: var(--space-lg);
        }
    }

    /* The CTA is the theme's outline button (css/base/buttons.css) – a
       white rule on the black bar, filling orange on hover */
    .headerButton {
        /* the phone bar is logo + menu button alone – the CTA joins it
           from 576px up, at the inline-block css/base/buttons.css gives it */
        display: none;

        @media (min-width: 576px) {
            display: inline-block;
        }
    }

    .headerSearch {
        /* the mobile bar is logo + menu button alone – search renders as
           a bar at the open menu panel's foot instead, and the bar's own
           reveal returns from 992px up */
        display:     none;
        align-items: center;

        @media (min-width: 992px) {
            display: flex;
        }
    }

    .headerSearchForm {
        width:      0;
        overflow:   hidden;
        transition: width var(--transition-base);

        input {
            width:         100%;
            background:    transparent;
            border:        none;
            border-bottom: 1px solid var(--color-cream);
            color:         var(--color-white);
            font:          var(--text-16or-button);
            padding:       2px 8px;

            &::placeholder {
                color:   var(--color-cream);
                opacity: 0.7;
            }
            &:focus {
                outline: none;
            }
        }
    }

    .headerSearch.open .headerSearchForm {
        width: 140px;

        @media (min-width: 576px) {
            width: 220px;
        }
    }

    .searchToggle {
        display:     flex;
        align-items: center;
        gap:         var(--space-sm);
        background:  none;
        border:      none;
        padding:     0 0 0 var(--space-sm);
        font-size:   21px;
        line-height: 1;
        color:       var(--color-white);
        cursor:      pointer;
    }

    /* Only the open menu panel labels the search – in the bar it is the
       icon alone */
    .searchLabel {
        display: none;
        font:    var(--text-16or-button);
        color:   var(--color-cream);
    }

    /* ── Menu button – three lines folding to a cross (menu.js adds
       .is-active alongside the panel state). Shown at every breakpoint:
       the desktop nav is behind it too. Rikkyo draws its crest here; the
       base keeps the plain lines for a site to restyle. ── */
    .mobileToggle {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             5px;
        width:           44px;
        height:          44px;
        padding:         0;
        border:          none;
        background:      none;
        cursor:          pointer;

        span {
            width:      24px;
            height:     2px;
            background: var(--color-white);
            transition: transform var(--transition-base), opacity var(--transition-base);
        }

        &.is-active {
            span:first-child {
                transform: translateY(7px) rotate(45deg);
            }
            span:nth-child(2) {
                opacity: 0;
            }
            span:last-child {
                transform: translateY(-7px) rotate(-45deg);
            }
        }
    }
}

/* ── Menu open, mobile ────────────────────────────────────
   The panel is the whole screen there, so the bar keeps only the close
   cross and the search spans the foot of the panel as an open bar –
   no icon reveal to discover, the input line is just there. Each piece
   returns to its bar state from 992px up.
   :has(.is-open), not body.menu-open alone: menu.js holds that class
   through the close fade for the scrollbar lock, and these pieces must
   leave with the panel's fade, not after the lock releases. */
body.menu-open:has(.menuPanel.is-open) .site-header {
    .site-logo {
        display: none;

        @media (min-width: 992px) {
            display: block;
        }
    }

    .headerButton {
        display: none;

        @media (min-width: 992px) {
            display: inline-block;
        }
    }

    .headerSearch {
        display:  flex;
        position: fixed;
        left:     5%;
        right:    5%;
        bottom:   30px;

        @media (min-width: 992px) {
            position: static;
            left:     auto;
            right:    auto;
            bottom:   auto;
        }
    }

    .headerSearchForm {
        flex:  1;
        width: auto;

        @media (min-width: 992px) {
            flex:  0 1 auto;
            width: 0;
        }
    }

    /* Restoring width: 0 above outweighs the bar's own .headerSearch.open
       reveal (this block's selector is the more specific of the two), so
       the revealed width is restated here for 992px up */
    .headerSearch.open .headerSearchForm {
        @media (min-width: 992px) {
            width: 220px;
        }
    }

    .searchLabel {
        display: block;

        @media (min-width: 992px) {
            display: none;
        }
    }
}

/* ── Admin bar offset for the sticky header ────────────────
   .admin-bar is only on <body> when the bar renders; 783px is
   WordPress's own admin-bar breakpoint, not the layout grid. */
.admin-bar {
    .site-header {
        top: 46px;
    }

    @media (min-width: 783px) {
        .site-header {
            top: 32px;
        }
    }
}