/**
 * Mobile Menu Toggle Styles
 * Styles for hamburger menu toggle functionality
 */

/* Hamburger menu button animation */
#nav_toggle {
    transition: all 0.3s ease;
}

#nav_toggle span {
    transition: all 0.3s ease;
}

/* Active state - hamburger to X animation */
#nav_toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#nav_toggle.active span:nth-child(2) {
    opacity: 0;
}

#nav_toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.menu-wrapper {
    transition: all 0.3s ease;
}

/* DESKTOP: Ensure menu is visible and properly styled on larger screens */
@media (min-width: 992px) {
    /* Force desktop menu to always be visible */
    .menu-wrapper {
        display: block !important;
        position: static !important;
        background: transparent !important;
        width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Hide hamburger menu on desktop */
    #nav_toggle {
        display: none !important;
    }
    
    /* Desktop menu styling */
    .menu-wrapper .user-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .menu-wrapper .user-menu li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    .menu-wrapper .user-menu li a {
        display: inline-block !important;
        padding: 10px 15px !important;
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Mobile menu styles - CRITICAL: Menu must be hidden by default */
@media (max-width: 991px) {
    #nav_toggle {
        display: block !important;
    }
    
    /* FORCE menu to be hidden by default on mobile */
    .menu-wrapper {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #2c3e50;
        z-index: 9999;
    }
    
    /* Only show menu when menu-visible class is added */
    .menu-wrapper.menu-visible {
        display: block !important;
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Improve mobile menu appearance */
    .menu-wrapper.menu-visible {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        border-radius: 0 0 8px 8px;
    }
    
    .menu-wrapper .user-menu {
        padding: 0;
        margin: 0;
        display: block !important;
        flex-direction: column !important;
    }
    
    .menu-wrapper .user-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block !important;
    }
    
    .menu-wrapper .user-menu li:last-child {
        border-bottom: none;
    }
    
    .menu-wrapper .user-menu li a {
        padding: 15px 20px;
        display: block;
        color: #fff !important;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .menu-wrapper .user-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}