/* ============================================================
   MOBILE NAVIGATION - OVERRIDES EXISTING NAV CSS
   ============================================================ */

/* Burger button hidden on desktop */
.mobile-nav-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: .3rem;
}

    .mobile-nav-btn span {
        display: block;
        width: 26px;
        height: 3px;
        background: var(--ink);
        border-radius: 3px;
        margin: 4px 0;
        transition: .25s ease;
    }

/* Desktop layout remains unchanged */
@media (max-width: 995px) {

    /* Burger button appears */
    .mobile-nav-btn {
        display: inline-block;
        z-index: 50;
    }

    /* Header container allows wrapping */
    .site-header .container {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Hide the nav **by default** */
    nav.primary-nav {
        display: none !important;
        width: 100%;
        margin-top: .75rem;
    }

        /* When JS toggles .open */
        nav.primary-nav.open {
            display: block !important;
        }

        /* Vertical menu layout */
        nav.primary-nav ul {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: .5rem !important;
            background: var(--surface);
            border-radius: var(--rad);
            padding: .75rem;
            width: 100%;
            box-shadow: var(--shadow-1);
        }

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

        nav.primary-nav a {
            width: 100% !important;
            display: block !important;
            padding: .6rem .9rem !important;
            border-radius: var(--rad-sm) !important;
        }

    /* Burger "X" animation */
    .mobile-nav-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-nav-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}