/* ============================================================
 * Mobile chrome — editorial header (.ngs-mnav) + drawer (.ngs-mdrawer)
 * + footer (.ngs-mfoot). Shown site-wide at <=880px via CSS swap; the
 * desktop .site-nav / .site-footer take over above. Ported from the
 * "NgsAdvisory Mobile (Editorial)" draft, device-frame + language
 * switcher removed, fully class-scoped to avoid collisions with the
 * desktop chrome.
 *
 * Also defines the shared .m-btn primitive used by the drawer CTA and
 * by the homepage editorial sections (mobile-home.css), so it is the
 * single source for both. Always loaded.
 * ============================================================ */

/* Hidden on desktop; the swap below reveals them. */
.ngs-mnav,
.ngs-mdrawer,
.ngs-mfoot { display: none; }

@media (max-width: 880px) {

    /* ---- the swap: desktop chrome out, editorial mobile chrome in ---- */
    .site-nav,
    .site-footer { display: none; }

    /* ===== HEADER ===== */
    .ngs-mnav {
        --pad-x: 20px;
        display: flex;
        position: sticky;
        top: 0;
        z-index: 100;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 var(--pad-x);
        background: rgba(247, 248, 250, 0.85);
        -webkit-backdrop-filter: saturate(1.1) blur(10px);
        backdrop-filter: saturate(1.1) blur(10px);
        border-bottom: 1px solid transparent;
        transition: background .25s ease, border-color .25s ease;
    }
    .ngs-mnav.scrolled {
        background: rgba(247, 248, 250, 0.92);
        border-bottom-color: var(--line, #C9D0DA);
    }
    .ngs-mnav__brand {
        font-family: var(--serif, Georgia, serif);
        font-size: 25px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.01em;
        color: var(--ink, #0B1220);
    }
    .ngs-mnav__brand em { font-style: normal; color: var(--blue-deep, #1E4E7E); }
    .ngs-mnav__brand sup {
        font-size: 0.42em;
        font-weight: 500;
        vertical-align: super;
        margin-left: 1px;
        letter-spacing: 0;
        color: var(--muted, #6B7689);
    }

    /* hamburger */
    .ngs-burger {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--line, #C9D0DA);
        border-radius: 999px;
        color: var(--ink, #0B1220);
        transition: border-color .18s ease, background .18s ease;
    }
    .ngs-burger:hover { border-color: var(--ink, #0B1220); }
    .ngs-burger .bars { position: relative; display: block; width: 17px; height: 11px; }
    .ngs-burger .bars span {
        position: absolute;
        left: 0; right: 0;
        height: 1.5px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .26s ease, opacity .2s ease;
    }
    .ngs-burger .bars span:nth-child(1) { top: 0; }
    .ngs-burger .bars span:nth-child(2) { top: 5px; }
    .ngs-burger .bars span:nth-child(3) { top: 10px; }
    body.ngs-menu-open .ngs-burger .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    body.ngs-menu-open .ngs-burger .bars span:nth-child(2) { opacity: 0; }
    body.ngs-menu-open .ngs-burger .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

    /* ===== DRAWER ===== */
    .ngs-mdrawer {
        display: block;
        position: fixed;
        top: 56px;
        left: 0; right: 0;
        z-index: 99;
        background: rgba(247, 248, 250, 0.97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line, #C9D0DA);
        box-shadow: 0 22px 44px -22px rgba(11, 18, 32, 0.3);
        max-height: 0;
        overflow: hidden;
        transition: max-height .32s cubic-bezier(.2, .7, .2, 1);
    }
    body.ngs-menu-open .ngs-mdrawer { max-height: 84vh; overflow-y: auto; }
    .ngs-mdrawer__inner {
        display: flex;
        flex-direction: column;
        padding: 8px 20px 22px;
        max-width: 620px;
        margin: 0 auto;
        width: 100%;
    }
    .ngs-mdrawer .m-link {
        font-size: 17px;
        font-weight: 500;
        color: var(--ink-2, #1B2536);
        padding: 15px 2px;
        border-bottom: 1px solid var(--line-2, #D9DEE6);
    }
    .ngs-mdrawer .m-group { padding: 13px 2px 9px; border-bottom: 1px solid var(--line-2, #D9DEE6); }
    .ngs-mdrawer .m-group__label {
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 10.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--muted, #6B7689);
        margin-bottom: 4px;
    }
    .ngs-mdrawer .m-sub { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; }
    .ngs-mdrawer .m-sub b { font-size: 15.5px; font-weight: 500; color: var(--ink-2, #1B2536); }
    .ngs-mdrawer .m-sub span { font-size: 12.5px; color: var(--muted, #6B7689); }
    .ngs-mdrawer .m-cta { margin-top: 18px; }

    /* ===== SHARED BUTTON PRIMITIVE (drawer + homepage sections) ===== */
    .m-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 14px 22px;
        border-radius: 999px;
        font-size: 14.5px;
        font-weight: 500;
        letter-spacing: .01em;
        border: 1px solid transparent;
        text-decoration: none;
        transition: transform .16s ease, background .18s ease, border-color .18s ease;
    }
    .m-btn svg { width: 14px; height: 14px; }
    .m-btn--primary { background: var(--ink, #0B1220); color: var(--paper, #F7F8FA); }
    .m-btn--primary:active { transform: translateY(1px); }
    .m-btn--ghost { background: transparent; color: var(--ink, #0B1220); border-color: var(--line, #C9D0DA); }
    .m-btn--block { width: 100%; }

    /* ===== FOOTER ===== */
    .ngs-mfoot {
        display: block;
        padding: 44px 20px calc(40px + env(safe-area-inset-bottom));
        background: var(--bg-2, #E4E8ED);
        border-top: 1px solid var(--line, #C9D0DA);
        font-family: var(--sans, "Inter", sans-serif);
    }
    .ngs-mfoot a { color: inherit; text-decoration: none; }
    .ngs-mfoot .m-foot__top { padding-bottom: 8px; }
    .ngs-mfoot .m-foot__display {
        font-family: var(--display, "Playfair Display", "Newsreader", Georgia, serif);
        font-size: clamp(60px, 16.5vw, 72px);
        font-weight: 400;
        line-height: .98;
        letter-spacing: -0.025em;
        color: var(--ink, #0B1220);
        white-space: nowrap;
    }
    .ngs-mfoot .m-foot__display em { font-style: italic; color: var(--blue-deep, #1E4E7E); }
    .ngs-mfoot .m-foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; padding: 28px 0; }
    .ngs-mfoot .m-foot__col--legal { grid-column: 1 / -1; margin-top: 10px; }
    .ngs-mfoot .m-foot__col h4 {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 10.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--muted, #6B7689);
        font-weight: 500;
        margin: 0 0 13px;
    }
    .ngs-mfoot .m-foot__col h4::after { content: ""; flex: 1; height: 1px; background: var(--line, #C9D0DA); }
    .ngs-mfoot .m-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
    .ngs-mfoot .m-foot__col--legal ul { grid-template-columns: 1fr 1fr; gap: 11px 16px; }
    .ngs-mfoot .m-foot__col a { color: var(--ink-2, #1B2536); transition: color .15s ease; }
    .ngs-mfoot .m-foot__col a:hover,
    .ngs-mfoot .m-foot__col a:active { color: var(--blue, #2B6CB0); }
    .ngs-mfoot .m-foot__bottom { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; border-top: 1px solid var(--line, #C9D0DA); }
    .ngs-mfoot .m-foot__copy { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #6B7689); }
    .ngs-mfoot .m-foot__legal { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2, #8A94A6); }

    /* When the admin bar is present (logged-in), nudge the fixed/sticky
       chrome down so it isn't hidden behind the 46px mobile admin bar. */
    body.admin-bar .ngs-mnav { top: 46px; }
    body.admin-bar .ngs-mdrawer { top: 102px; }
}

@media (prefers-reduced-motion: reduce) {
    .ngs-mnav,
    .ngs-mdrawer,
    .ngs-burger .bars span,
    .m-btn { transition: none; }
}