/* Mobile menu position and visibility fix */

/* Fixed header on mobile */
@media (max-width: 768px) {
    .glass-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        height: 60px !important; /* Ensure consistent height */
        display: flex !important;
        align-items: center !important;
        background: rgba(10, 10, 15, 0.98) !important; /* More opaque for better visibility */
    }
    
    /* Ensure header content is visible and properly centered */
    .glass-header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    /* Logo styles */
    .logo {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Menu button styles */
    .menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        z-index: 1001 !important;
    }
    
    /* Fix for menu items panel */
    .menu-items {
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        top: 60px !important; /* Position just below header */
        right: -100% !important; /* Hidden by default */
        width: 80% !important; 
        height: calc(100% - 60px) !important;
        padding-top: 20px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: right 0.3s ease !important;
        overflow-y: auto !important;
        z-index: 999 !important;
    }
    
    /* Active state for menu */
    .menu-items.active {
        right: 0 !important;
    }
    
    /* Fix menu backdrop */
    .menu-backdrop {
        position: fixed !important;
        top: 60px !important; /* Start below header */
        left: 0 !important;
        width: 100% !important;
        height: calc(100% - 60px) !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 998 !important;
    }
}

/* Smaller screens */
@media (max-width: 480px) {
    .glass-header {
        height: 50px !important; /* Even smaller height for very small screens */
    }
    
    .menu-items {
        top: 50px !important;
        height: calc(100% - 50px) !important;
        width: 85% !important;
    }
    
    .menu-backdrop {
        top: 50px !important;
        height: calc(100% - 50px) !important;
    }
}