/* The signed-out navigation on phones. From 768px up the bar is as it always was (logo, links, log in, get
   started). Below it the bar is the logo and a hamburger, and the links live in a drawer that slides down
   from under the bar, with a dark overlay behind it. The bar stays on top of both, so the logo and the
   hamburger are never covered, and it sticks to the top of the screen so the hamburger is always there.
   Behaviour is in /js/landingNav.js. Only the signed-out layout renders any of this. */

:root {
    --mnav-scrim: rgba(12, 10, 8, .55);
    --mnav-ease: cubic-bezier(.2, .8, .2, 1);
    --mnav-time: .25s;
}

.sp-hamburger,
.sp-mnav,
.sp-mnav-overlay { display: none; }

.sp-hamburger svg,
.sp-mnav-close svg,
.sp-mnav-cta svg { display: block; }

@media (max-width: 767.98px) {
    /* The site hides sideways overflow on html and body, which makes body a scroll container of its own and
       stops a sticky bar from sticking. "clip" hides the same overflow without that. (A browser too old to know
       it keeps the old behaviour: the bar then scrolls away with the page, and the menu still works.) */
    html.sp-has-landing-nav body { overflow: visible; overflow-x: clip; }

    .navbar.sp-landing-navbar {
        position: sticky;
        top: 0;
        z-index: 1100;
        height: 64px;
        min-height: 64px;
        padding: 0 16px;
        flex-wrap: nowrap;
        gap: 12px;
    }

    /* the bar is the logo and the hamburger, nothing else */
    .sp-landing-navbar .nav-pill-strip,
    .sp-landing-navbar .sp-nav-actions { display: none !important; }

    .sp-hamburger {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-card);
        color: var(--fg);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background var(--mnav-time) ease, border-color var(--mnav-time) ease;
    }

    .sp-hamburger:hover,
    .sp-hamburger:focus-visible { background: var(--bg-subtle); }

    .sp-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    .sp-hamburger[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

    .sp-ham-shut { display: none; }

    .sp-hamburger[aria-expanded="true"] .sp-ham-open { display: none; }

    .sp-hamburger[aria-expanded="true"] .sp-ham-shut { display: block; }

    /* ── overlay ── */
    .sp-mnav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: var(--mnav-scrim);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--mnav-time) ease, visibility 0s linear var(--mnav-time);
    }

    .sp-mnav-overlay.is-open {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    /* ── drawer ── */
    .sp-mnav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--sp-nav-h, 64px);
        left: 0;
        right: 0;
        z-index: 1060;
        max-height: calc(100vh - var(--sp-nav-h, 64px));
        max-height: calc(100dvh - var(--sp-nav-h, 64px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform var(--mnav-time) var(--mnav-ease), visibility 0s linear var(--mnav-time);
    }

    .sp-mnav.is-open {
        transform: translateY(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .sp-mnav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        padding: 12px 16px 6px 22px;
    }

    .sp-mnav-title {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--fg-muted);
    }

    .sp-mnav-close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-card);
        color: var(--fg);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sp-mnav-close:hover,
    .sp-mnav-close:focus-visible { background: var(--bg-subtle); }

    .sp-mnav-close:focus-visible,
    .sp-mnav-link:focus-visible,
    .sp-mnav-login:focus-visible,
    .sp-mnav-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

    .sp-mnav-links { display: flex; flex-direction: column; flex: none; }

    .sp-mnav-link {
        display: block;
        padding: 12px 22px;
        border-top: 1px solid var(--border);
        color: var(--fg);
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s ease, color .15s ease;
    }

    .sp-mnav-link:first-child { border-top: 0; }

    .sp-mnav-link:hover,
    .sp-mnav-link:active { background: var(--bg-subtle); color: var(--fg); text-decoration: none; }

    .sp-mnav-link[aria-current="page"] {
        color: var(--accent);
        background: var(--accent-light);
        box-shadow: inset 3px 0 0 var(--accent);
    }

    .sp-mnav-battle { color: var(--accent); }

    /* pinned to the bottom of the drawer: the links scroll if the screen is short, the buttons never leave */
    .sp-mnav-foot {
        display: grid;
        gap: 10px;
        flex: none;
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: 14px 22px max(18px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--bg-card);
    }

    .sp-mnav-login,
    .sp-mnav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 18px;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .sp-mnav-login { border: 1px solid var(--border-strong); color: var(--fg); background: var(--bg-card); }

    .sp-mnav-login:hover { background: var(--bg-subtle); color: var(--fg); text-decoration: none; }

    .sp-mnav-cta { background: var(--accent); color: var(--on-accent); }

    .sp-mnav-cta:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }

    /* while the menu is open the page behind it does not scroll, and nothing floats over it */
    html.sp-mnav-lock,
    html.sp-mnav-lock body { overflow: hidden; }

    html.sp-mnav-lock .tg-fab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --mnav-time: .01s; }
}