/* ==========================================================================
   EMPLOYER ZONE - Mobile Menu Styles
   Extracted from EmployerUserModern.cshtml inline styles per Global Rules
   ========================================================================== */

/* Minimal mobile menu for secure employer */
.mobile-nav-overlay {
    display: none !important; /* Hidden by default, only shown when menu is open */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    pointer-events: none; /* Allow clicks to pass through when hidden */
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
    background: #0b1220;
    color: #fff;
    z-index: 9999;
    transition: width 0.25s ease;
    padding-top: 18px;
    pointer-events: none; /* Allow clicks to pass through when width is 0 */
}

.mobile-nav__inner { 
    width: 280px; 
    padding: 0 14px 18px 14px; 
}

.mobile-nav a { 
    display: block; 
    padding: 12px 10px; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 10px; 
}

.mobile-nav a:hover { 
    background: rgba(255,255,255,0.10); 
}

.mobile-nav__title { 
    font-weight: 900; 
    margin: 10px 8px 6px; 
    opacity: 0.9; 
}

.mobile-nav__close {
    margin-left: auto;
    margin-right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav__close:hover {
    background: rgba(255,255,255,0.15);
}

/* Show mobile menu button on mobile, hide on desktop */
/* Note: .mobile-only class is defined in directjob4u.css */
@media (max-width: 768px) {
    /* Show the menu button on mobile - override any conflicting styles */
    button.mobile-only,
    .btn.mobile-only,
    .btn.btn--outline.mobile-only {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure mobile menu button is visible in navbar */
    .navbar button.mobile-only,
    .navbar .btn.mobile-only {
        display: inline-flex !important;
        visibility: visible !important;
    }
    
    /* Show mobile menu elements on mobile */
    .mobile-nav-overlay.mobile-only,
    .mobile-nav.mobile-only {
        display: block !important;
        visibility: visible !important;
    }
    
    /* When menu is closed, hide overlay but keep menu structure */
    .mobile-nav-overlay.mobile-only[style*="display: none"],
    .mobile-nav-overlay.mobile-only[style*="display:none"] {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* When menu is open, enable pointer events */
    .mobile-nav[style*="width: 280px"],
    .mobile-nav[style*="width:280px"] {
        pointer-events: auto !important;
        display: block !important;
    }
    
    /* When overlay is shown, enable pointer events */
    .mobile-nav-overlay[style*="display: block"],
    .mobile-nav-overlay[style*="display:block"] {
        pointer-events: auto !important;
        display: block !important;
        visibility: visible !important;
    }
}

@media (min-width: 769px) {
    .mobile-only { 
        display: none !important; 
    }
}