/* =========================================
   Mobile Menu Overlay - Add this to the END of pokenaka_style.css
   Or keep as separate file and add <link rel="stylesheet" href="pokenaka_mobile_fix.css"> to pokenaka.html
   ========================================= */

/* Mobile menu active state */
@media (max-width: 768px) {
    .nav.active {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 10, 0.98);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }
    .nav.active .nav-menu,
    .nav.active .nav-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .nav.active .nav-menu {
        list-style: none;
        padding: 0;
        margin: 0 0 40px 0;
        gap: 28px;
    }
    .nav.active .nav-link {
        font-size: 22px;
        color: #fff;
    }
    .nav.active .nav-cta {
        gap: 16px;
    }
    .nav.active .nav-cta .btn {
        font-size: 16px;
        padding: 14px 32px;
    }

    /* Hamburger button z-index above overlay */
    .mobile-menu-btn {
        position: relative;
        z-index: 1001;
    }
    .mobile-menu-btn.active i::before {
        content: "\f00d";
    }
}