/**
 * NAVIGATION MOBILE - Professional Mobile Menu System
 * 
 * Pure mobile navigation CSS with hamburger menu, overlay, and touch gestures
 * Clean BEM methodology for maintainable code
 * 
 * @package RentAssistenz  
 * @version 3.0.0 - Modular Split Architecture
 * @priority 6
 */

/* =============================================================================
   MOBILE NAVIGATION - BEM ARCHITECTURE 
   ============================================================================= */

/* CSS Custom Properties */
:root {
    /* Mobile Navigation Colors */
    --rent-nav-mobile-bg: rgba(0, 0, 0, 0.8);
    --rent-nav-mobile-panel: #ffffff;
    --rent-nav-mobile-text: #333333;
    --rent-nav-mobile-text-hover: #007cba;
    --rent-nav-mobile-accent: #007cba;
    
    /* Mobile Navigation Layout */
    --rent-nav-mobile-z-index: 1100;
    --rent-nav-mobile-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --rent-nav-mobile-spacing: 2rem;
}

/* ===== MOBILE HAMBURGER TOGGLE ===== */

.nav-mobile__toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: calc(var(--rent-nav-mobile-z-index) + 1);
    position: relative;
}

/* BEM burger system REMOVED - using 3 separate spans instead */

/* ===== MOBILE OVERLAY MENU ===== */

.nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--rent-nav-mobile-bg);
    z-index: var(--rent-nav-mobile-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--rent-nav-mobile-transition);
}

.nav-mobile.active {
    opacity: 1;
    visibility: visible;
}

.nav-mobile__panel {
    background: var(--rent-nav-mobile-panel);
    border-radius: 16px;
    padding: var(--rent-nav-mobile-spacing);
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(30px);
    transition: var(--rent-nav-mobile-transition);
    opacity: 0;
}

.nav-mobile.active .nav-mobile__panel {
    transform: translateY(0);
    opacity: 1;
}

/* ===== MOBILE MENU CONTENT ===== */

.nav-mobile__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-mobile__item {
    margin-bottom: 0.5rem;
}

.nav-mobile__link {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--rent-nav-mobile-text);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 12px;
    transition: var(--rent-nav-mobile-transition);
    text-align: center;
}

.nav-mobile__link:hover,
.nav-mobile__link:focus {
    background: rgba(0, 124, 186, 0.1);
    color: var(--rent-nav-mobile-text-hover);
}

.nav-mobile__link--active {
    background: var(--rent-nav-mobile-accent);
    color: #ffffff;
}

/* ===== MOBILE CTA BUTTONS ===== */

.nav-mobile__cta-group {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 124, 186, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-mobile__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--rent-nav-mobile-accent);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: var(--rent-nav-mobile-transition);
    min-height: 48px; /* Touch-friendly */
}

.nav-mobile__cta:hover {
    background: #005a8a;
    transform: translateY(-2px);
}

.nav-mobile__cta i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.nav-mobile__cta--secondary {
    background: transparent;
    color: var(--rent-nav-mobile-accent);
    border: 2px solid var(--rent-nav-mobile-accent);
}

.nav-mobile__cta--secondary:hover {
    background: var(--rent-nav-mobile-accent);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ===== BODY SCROLL MANAGEMENT WHEN MENU OPEN ===== */

/* Lock body scroll ONLY when mobile menu is active - better approach */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Fallback for old class name compatibility */
body.menu-open {
    overflow: hidden;
}

/* ===== WORDPRESS THEME COMPATIBILITY ===== */

/* Map existing theme classes */
.navbar-toggler,
#mobile-menu-toggle,
.hamburger-menu {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    min-width: 32px !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking in flexbox */
    flex-grow: 0; /* Prevent growing in flexbox */
    overflow: hidden; /* Prevent content overflow */
}

.burger-line {
    display: block;
    width: 16px !important;
    height: 2px !important;
    background: var(--rent-nav-mobile-text);
    margin: 2px auto !important;
    transition: var(--rent-nav-mobile-transition);
    border-radius: 1px;
    max-width: 16px !important;
    position: relative;
    left: 0;
    right: 0;
}

/* Active hamburger state - Transform to X with 3 separate spans */
.navbar-toggler.active .burger-line:nth-child(1),
#mobile-menu-toggle.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: #ffffff !important;
}

.navbar-toggler.active .burger-line:nth-child(2),
#mobile-menu-toggle.active .burger-line:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.active .burger-line:nth-child(3),
#mobile-menu-toggle.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
    background: #ffffff !important;
}

/* CRITICAL: Hamburger button STAYS IN PLACE - no repositioning */
.navbar-toggler.active,
#mobile-menu-toggle.active {
    /* NO position: fixed - keeps button in navbar flow */
    z-index: calc(var(--rent-nav-mobile-z-index) + 2) !important; /* Above overlay */
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 50% !important;
    /* Keep existing padding and size */
    pointer-events: auto !important; /* CRITICAL: Ensure button is clickable */
    /* Subtle scale effect instead of repositioning */
    transform: scale(1.05);
}

/* Hamburger button hover state when active */
.navbar-toggler.active:hover,
#mobile-menu-toggle.active:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    transform: scale(1.1) !important;
}

/* Mobile navigation overlay */
#mobile-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--rent-nav-mobile-bg);
    z-index: var(--rent-nav-mobile-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--rent-nav-mobile-transition);
}

/* WordPress Theme Override - Proper Loading Order */
#mobile-navigation.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    background: var(--rent-nav-mobile-panel);
    border-radius: 16px;
    padding: var(--rent-nav-mobile-spacing);
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(30px);
    transition: var(--rent-nav-mobile-transition);
    opacity: 0;
}

#mobile-navigation.active .mobile-menu-content {
    transform: translateY(0);
    opacity: 1;
}

/* ===== MOBILE MENU HEADER STYLING ===== */

.mobile-menu-header {
    text-align: center !important;
    padding: 1rem 0 2rem 0 !important;
    border-bottom: none !important; /* Remove gray border */
    background: transparent !important; /* Remove gray background */
    margin-bottom: 0 !important;
}

.mobile-menu-title {
    color: var(--rent-nav-mobile-text) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
}

/* Hide the old close button (now removed from HTML) */
.mobile-menu-close {
    display: none !important;
}

/* ===== RESPONSIVE MOBILE ===== */

/* Show mobile navigation on tablets and mobile */
@media (max-width: 991px) {
    .nav-mobile__toggle,
    .navbar-toggler,
    #mobile-menu-toggle {
        display: flex !important;
    }
}

/* REAL TOUCH DEVICES - Extra constraints */
@media (pointer: coarse) and (hover: none) {
    .navbar-toggler,
    #mobile-menu-toggle {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        min-width: 32px !important;
        padding: 6px !important;
        margin-right: 8px !important;
    }
    
    .burger-line {
        width: 16px !important;
        max-width: 16px !important;
        height: 2px !important;
        margin: 2px auto !important;
        text-align: center !important;
        transform: translateX(0) !important;
    }
    
    /* Hide desktop navigation */
    .nav-desktop__menu,
    .navbar-nav,
    .header-nav .nav,
    .main-nav {
        display: none;
    }
    
    /* COMPACT MOBILE NAVBAR for touch devices */
    .site-header {
        min-height: 50px !important;
        height: auto !important;
    }
    
    .main-bar {
        min-height: 50px !important;
        padding: 8px 0 !important;
    }
    
    .main-bar .container,
    .site-header .container {
        min-height: 50px !important;
        padding: 0 12px !important;
    }
    
    /* Logo optimal for touch devices */
    .logo-header img,
    .navbar-brand img,
    .site-header .logo img {
        height: 35px !important;
    }
    
    .nav-container {
        min-height: 50px !important;
        gap: 0.75rem !important;
    }
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .nav-mobile__panel,
    .mobile-menu-content {
        max-width: 95vw;
        padding: 1.5rem;
    }
    
    .nav-mobile__link {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }
    
    /* COMPACT MOBILE NAVBAR - Optimal height */
    .site-header {
        min-height: 50px !important; /* Larger but still compact */
        height: auto !important; /* Allow natural height */
    }
    
    .main-bar {
        min-height: 50px !important; /* Match site-header */
        padding: 8px 0 !important; /* More breathing room */
    }
    
    .main-bar .container,
    .site-header .container {
        min-height: 50px !important;
        align-items: center !important;
        padding: 0 15px !important; /* Standard mobile padding */
    }
    
    /* Logo optimal sizing */
    .logo-header img,
    .navbar-brand img,
    .site-header .logo img {
        height: 35px !important; /* Good visibility for seniors */
    }
    
    /* Navigation container - single line layout */
    .nav-container {
        min-height: 50px !important;
        align-items: center !important;
        gap: 0.75rem !important; /* Balanced spacing */
    }
    
    /* Hide CTA button on mobile for more space */
    .cta-section,
    .extra-nav {
        display: none !important; /* Save space on mobile */
    }
    
    /* Burger menu optimal positioning */
    .navbar-toggler,
    #mobile-menu-toggle {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        min-width: 32px !important;
        padding: 6px !important;
        margin-right: 8px !important; /* Clear right margin */
    }
    
    .burger-line {
        width: 16px !important;
        max-width: 16px !important;
        height: 2px !important;
        margin: 2px auto !important;
    }
}

/* Small mobile optimization */
@media (max-width: 480px) {
    .nav-mobile__cta {
        min-height: 50px; /* Larger touch targets */
        font-size: 1.05rem;
    }
    
    /* Slightly more compact for very small screens */
    .site-header {
        min-height: 45px !important;
    }
    
    .main-bar {
        min-height: 45px !important;
        padding: 6px 0 !important;
    }
    
    .main-bar .container,
    .site-header .container {
        min-height: 45px !important;
        padding: 0 10px !important;
    }
    
    .logo-header img,
    .navbar-brand img,
    .site-header .logo img {
        height: 30px !important;
    }
    
    .nav-container {
        min-height: 45px !important;
        gap: 0.5rem !important;
    }
    
    .navbar-toggler,
    #mobile-menu-toggle {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        min-width: 28px !important;
        padding: 5px !important;
        margin-right: 6px !important;
    }
    
    .burger-line {
        width: 14px !important;
        max-width: 14px !important;
        height: 2px !important;
        margin: 1.5px auto !important;
    }
}

/* =============================================================================
   ACCESSIBILITY & PERFORMANCE
   ============================================================================= */

/* Focus styles */
.nav-mobile__toggle:focus,
.nav-mobile__link:focus,
.nav-mobile__cta:focus {
    outline: 2px solid var(--rent-nav-mobile-accent);
    outline-offset: 2px;
}

/* High contrast support */
@media (prefers-contrast: high) {
    .nav-mobile__link {
        border: 1px solid transparent;
    }
    
    .nav-mobile__link:hover,
    .nav-mobile__link:focus {
        border-color: var(--rent-nav-mobile-accent);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .nav-mobile,
    .nav-mobile__panel,
    .nav-mobile__toggle,
    .nav-mobile__link,
    .nav-mobile__cta,
    .burger-line {
        transition: none;
    }
    
    .nav-mobile__cta:hover {
        transform: none;
    }
}