/* =========================================
   MOBILE NAVIGATION (DRAWER) - SHARED
   ========================================= */

/* Default: Hide Hamburger on Desktop */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1100;
    position: relative;
    /* Ensure z-index works */
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 2px;
}

/* Mobile Styling */
@media screen and (max-width: 768px) {

    /* Hamburger Visible */
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Drawer Styles */
    .nav-links {
        position: fixed !important;
        /* Override potential frameworks */
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 100% !important;
        background: rgba(2, 6, 23, 0.95) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex !important;
        /* Force display */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1050 !important;
        padding-top: 60px !important;
        margin: 0 !important;
        /* Reset any margins */
    }

    .nav-links.nav-active {
        transform: translateX(0);
    }

    /* Links inside drawer */
    .nav-links>a,
    .dropdown-trigger {
        font-size: 1.5rem !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 5px 0;
        color: white !important;
        /* Ensure visibility */
        display: flex;
        /* Inherited from desktop potentially, but ensure it */
        justify-content: center;
        /* FIX: Centers the flex content (text + icon) */
        align-items: center;
    }

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

    /* Staggered animation */
    /* We need to target the containers or the specific elements that are direct children of nav-links usually, 
       but here we have mix of <a> and <div> */
    .nav-links.nav-active>a:nth-child(1) {
        transition-delay: 0.1s;
    }

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

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

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

    .nav-links.nav-active>div:nth-child(5) .dropdown-trigger {
        transition-delay: 0.5s;
    }

    /* Future */

    /* Dropdowns in Drawer */
    .nav-dropdown {
        width: 100%;
        text-align: center;
    }

    /* PREMIUM UPDATE: Accordion Style for Better UX */
    .dropdown-menu {
        position: static;
        transform: none;
        background: transparent;
        box-shadow: none;
        border: none;
        margin-top: 0;
        display: none;
        /* Hidden by default */
        padding: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }

    /* When Active (Toggled via JS) */
    .dropdown-menu.active {
        display: flex;
        opacity: 1;
        visibility: visible;
        margin-top: 15px;
        margin-bottom: 15px;
        max-height: 200px;
        /* Arbitrary limit for animation */
    }

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
        /* Disable hover on mobile, rely on click */
        display: none;
        animation: none;
    }

    /* Ensure the active class overrides the hover disable if needed, 
       though purely JS toggling is safer for mobile */
    .nav-dropdown .dropdown-menu.active {
        display: flex;
    }

    .dropdown-menu a {
        font-size: 1rem !important;
        /* Smaller than main links */
        color: #94a3b8 !important;
        padding: 8px 0;
        display: block;
        transition: color 0.3s ease;
    }

    .dropdown-menu a:hover {
        color: #3b82f6 !important;
        transform: translateX(5px);
    }

    .dropdown-menu::before {
        display: none;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}