/* ==========================================================================
   JOBSEEKER ZONE - Modern Mobile Menu Styles
   Matches Employer Zone mobile menu style for consistency
   ========================================================================== */

/* Mobile Menu Overlay */
.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 Menu Sidebar */
.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; 
    margin-bottom: 4px;
}

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

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

.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) {
    /* Only show the menu button on mobile */
    button.mobile-only {
        display: inline-flex !important;
    }
    
    /* When menu is open, enable pointer events */
    .mobile-nav[style*="width: 280px"],
    .mobile-nav[style*="width:280px"] {
        pointer-events: auto !important;
    }
    
    /* When overlay is shown, enable pointer events */
    .mobile-nav-overlay[style*="display: block"],
    .mobile-nav-overlay[style*="display:block"] {
        pointer-events: auto !important;
    }
}

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