/* Shared mobile navigation for sample demo pages */
body {
    overflow-x: hidden;
}

nav {
    position: relative;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    margin-left: auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.nav-toggle-icon-open,
.nav-toggle-icon-close {
    display: block;
}

.nav-toggle-icon-close {
    display: none;
}

nav.nav-open .nav-toggle-icon-open {
    display: none;
}

nav.nav-open .nav-toggle-icon-close {
    display: block;
}

@media (max-width: 768px) {
    nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin: 0;
        padding: 0.5rem 0 0;
        list-style: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    nav.nav-open .nav-links {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        min-height: 44px;
        padding: 0.75rem 0.5rem;
        line-height: 1.3;
    }
}