/* Mobile Navigation */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1002;
    transition: transform 0.3s ease;
}

@media (max-width: 1200px) {
    .hamburger-menu {
        display: block;
        position: relative;
        /* Ensure it overlays correctly if needed */
        z-index: 1003;
        /* Higher than menu overlay */
    }

    .nav-links {
        display: flex;
        /* Override display: none from style.css */
        position: fixed;
        top: 0;
        right: -100%;
        left: auto !important;

        /* Reset style.css desktop styles */
        transform: none !important;
        /* Reset style.css desktop styles */
        width: 280px;
        height: 100vh;
        background: rgba(13, 13, 16, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 100px 40px 40px;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1001;
        gap: 25px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        pointer-events: none;
    }

    .nav-links.active {
        right: 0;
        box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.6), -5px 0 30px rgba(0, 0, 0, 0.5);
        visibility: visible;
        pointer-events: auto;
    }

    .nav-links > a {
        font-size: 1.5rem !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .nav-links.active > a {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger animation for links */
    .nav-links.active > a:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-links.active > a:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav-links.active > a:nth-child(3) {
        transition-delay: 0.3s;
    }

    .nav-links.active > a:nth-child(4) {
        transition-delay: 0.4s;
    }

    /* Hide the desktop header actions; render actions inside the drawer instead */
    .nav-container > .nav-actions {
        display: none !important;
    }

    .nav-links .nav-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        width: 100%;
        margin-top: auto;
        padding-top: 18px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-links .nav-actions .nav-btn {
        width: 100%;
        justify-content: center;
    }

    /* Hide socials on mobile or move them into the menu if desired. 
       For now, let's just hide them to keep it clean or we can append them to nav-links in JS.
       Let's keep them visible in the header but maybe smaller or just hide text? 
       Actually, standard pattern is often to hide them or put them in the menu. 
       Let's hide the header visuals and strictly use the menu. */

    .nav-socials {
        display: none;
    }
}