/* ============================================================
   Reflective — the nav's Learn menu and the mobile menu.
   One sheet for every page with the marketing nav: the static pages
   load it from <!-- marketing:nav-assets --> (stamp-marketing-chrome),
   Learn through resources/css/learn.css and the Public Library through
   resources/css/library.css. Behavior: marketing-site/js/nav-menu.js.

   Every link is a real <a> in the HTML. Without JS the Learn megamenu
   opens on hover and keyboard focus; with JS (html.nav-js) its button owns
   the open state and aria-expanded. The mobile menu needs JS: without it
   the small-screen nav stays hidden, as it always has. The megamenu panel
   itself: nav-mega.css and nav-mega-layout.css.
   ============================================================ */

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-menu-toggle,
.nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    border-radius: 6px;
}

.nav-menu-toggle {
    width: 22px;
    height: 22px;
}

.nav-menu-toggle:hover,
.nav-burger:hover {
    color: var(--text);
}

.nav-menu-toggle svg,
.nav-burger svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-menu-toggle svg {
    transition: transform 0.15s ease;
}

.nav-menu-toggle[aria-expanded='true'] svg {
    transform: rotate(180deg);
}

.nav-burger {
    display: none;
    width: 40px;
    height: 40px;
}

.nav-burger .nav-burger-close,
.nav-burger[aria-expanded='true'] .nav-burger-open {
    display: none;
}

.nav-burger[aria-expanded='true'] .nav-burger-close {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu-toggle svg {
        transition: none;
    }
}

/* The release swap (nav-menu.js) and empty megamenu slots use the hidden
   attribute; the nav's own display rules must never show them. */
.nav [hidden] {
    display: none !important;
}

/* Labels never wrap; narrow desktops (961–1139px) tighten the gaps so the
   six links, the logo and the actions fit one line. */
.nav-links > a,
.nav-item > a {
    white-space: nowrap;
}

@media (min-width: 961px) and (max-width: 1139px) {
    .nav-inner {
        gap: 20px;
    }

    .nav-links {
        gap: 18px;
    }
}

/* Mobile: the Main links open as a panel under the bar; Learn's sections
   are an accordion behind the same chevron button (nav-mega-layout.css). */
@media (max-width: 960px) {
    .nav-js .nav-burger {
        display: inline-flex;
        margin-inline-start: 2px;
    }

    /* The panel spans the bar and takes the page gutter from .wrap, so its
       links line up with the logo on every layout. */
    .nav.menu-open .nav-inner {
        position: relative;
    }

    .nav.menu-open .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        inset-inline: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding-block: 4px 16px;
        padding-inline: inherit;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
    }

    .nav.menu-open .nav-links > a,
    .nav.menu-open .nav-item > a {
        flex: 1;
        padding: 12px 0;
        font-size: 16px;
    }

    .nav.menu-open .nav-links > a,
    .nav.menu-open .nav-item {
        border-bottom: 1px solid var(--hairline);
    }

    .nav.menu-open .nav-links > a:last-child {
        border-bottom: 0;
    }

    .nav.menu-open .nav-item {
        flex-wrap: wrap;
    }

    .nav.menu-open .nav-menu-toggle {
        width: 44px;
        height: 44px;
        margin-inline-end: -12px;
    }
}

/* Phones: room for the logo, Sign in, Free Trial and the menu button on one
   line (the Library's own sheet has no small-screen nav rules). */
@media (max-width: 640px) {
    .nav-inner {
        gap: 12px;
    }

    .nav-actions {
        gap: 6px;
        margin-inline-start: auto;
    }

    .nav-signin,
    .nav-actions .btn-sm {
        white-space: nowrap;
    }

    .nav-signin {
        padding-inline: 6px;
    }

    .nav-actions .btn-sm {
        padding: 8px 14px;
    }
}