/* mobile-nav.css - shared hamburger menu for the blog and legal pages.
 *
 * The homepage ships its own copy of this inside its inline <style>; these
 * pages load it alongside blog.css, which defines the tokens used here.
 * Mirrors the homepage's markup and behaviour.
 *
 * .nav-links.active (two classes) outranks the .nav-links { display: none }
 * rule in blog.css, so load order does not matter.
 */

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: transform .3s, opacity .3s;
}

/* Close (X) state */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
    .hamburger { display: flex; }

    .nav-links.active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(6, 11, 24, 0.97);
        padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
        border-bottom: 1px solid var(--line);
        gap: 1rem;
        margin: 0;
        list-style: none;
    }

    .nav-links.active a { display: block; padding: .35rem 0; }
    .nav-links.active a.nav-cta { padding: .55rem 1rem; }
}

/* Keyboard focus needs to stay visible against the dark chrome. */
.hamburger:focus-visible,
.nav-links a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}