/* Common Mobile Navigation Styles for All Pages */

/* Ensure mobile menu is visible on all pages */
@media (max-width: 768px) {
    /* Mobile menu button visibility */
    .mobile-menu-button,
    .hamburger,
    .mobile-menu-button span,
    .mobile-header-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Mobile menu container */
    .mobile-top-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        padding: 10px 15px !important;
        background: #8a2be2 !important;
        width: 100% !important;
        min-height: 70px !important;
        z-index: 1000 !important;
    }
    
    /* Logo and welcome text */
    .mobile-logo-container {
        display: flex !important;
        justify-content: center !important;
    }
    
    .mobile-logo-container img {
        height: 50px !important;
        width: auto !important;
    }
    
    .mobile-welcome-text {
        margin-left: 10px !important;
        color: white !important;
        display: block !important;
    }
    
    .mobile-welcome-text h1 {
        margin: 0 !important;
        font-size: 1.2rem !important;
        color: white !important;
        line-height: 1.2 !important;
    }
    
    .mobile-welcome-text p {
        margin: 5px 0 0 !important;
        font-size: 0.8rem !important;
        color: white !important;
    }
    
    /* Override any CSS that may hide the menu */
    .mobile-menu-overlay,
    .mobile-menu-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* But keep menu hidden until activated */
    .mobile-menu-overlay:not(.active) {
        display: none !important;
    }
    
    /* Mobile menu overlay and content */
    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Navigation styles */
    .mobile-nav-links {
        display: block !important;
    }
    
    .mobile-nav-links li {
        display: block !important;
    }
    
    .mobile-nav-links a {
        display: block !important;
    }
    
    /* Hide desktop nav on mobile */
    header nav {
        display: none !important;
    }
}