/* Mobile menu for the site nav (markup in each page, behaviour in nav-menu.js) */
.nav-menu-btn,
.nav-menu { display: none; }

@media (max-width: 720px) {
    .site-nav .nav { position: relative; }
    .site-nav .nav-link { display: none; }

    .nav-menu-btn {
        appearance: none;
        position: relative;
        display: inline-flex;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 160ms ease;
    }

    body.mac-dark .nav-menu-btn { color: #fff; }

    .nav-menu-btn:active { background: rgba(128, 128, 140, 0.16); }

    .nav-menu-btn span {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 50%;
        height: 1.6px;
        margin-top: -0.8px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .nav-menu-btn span:first-child { transform: translateY(-3.5px); }
    .nav-menu-btn span:last-child { transform: translateY(3.5px); }
    .nav-menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
    .nav-menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

    .nav-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        padding: 8px;
        border-radius: 24px;
        background: #17171d;
        box-shadow:
            0 24px 60px -20px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.08);
        pointer-events: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px) scale(0.98);
        transform-origin: top right;
        transition:
            opacity 200ms ease,
            transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s linear 280ms;
    }

    .site-nav.is-menu-open .nav-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity 200ms ease,
            transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s;
    }

    .nav-menu a {
        display: block;
        padding: 14px 16px;
        border-radius: 16px;
        color: rgba(245, 245, 247, 0.72);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: -0.015em;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-menu a:hover,
    .nav-menu a:active { background: rgba(255, 255, 255, 0.08); color: #F5F5F7; }

    .nav-menu a[aria-current="page"] { color: #F5F5F7; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu,
    .site-nav.is-menu-open .nav-menu,
    .nav-menu-btn span { transition: none; }
}