/**
 * Mobile Menu Enhanced Styles - Proem Abogados
 * Professional slide-in menu with subtle animations
 */

/* Mobile Menu Specific Styles */
@media (max-width: 768px) {
    /* Header adjustments for mobile */
    .site-header {
        padding: 0;
    }
    
    .header-inner {
        padding: 0.75rem 0;
    }
    
    /* Enhanced mobile menu wrapper */
    .nav-menu-wrapper {
        padding-top: 80px;
        background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    }
    
    /* Menu header with logo */
    .nav-menu-wrapper::after {
        content: 'MENÚ';
        position: absolute;
        top: 30px;
        left: 30px;
        font-family: 'Playfair Display', serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: #541D36; /* var(--color-primary) */
        letter-spacing: 2px;
    }
    
    /* Enhanced menu items */
    .nav-menu li {
        position: relative;
        overflow: hidden;
    }
    
    .nav-menu li::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 3px;
        height: 0;
        background: #541D36; /* var(--color-primary) */
        transition: height 0.3s ease;
    }
    
    .nav-menu li:hover::before {
        height: 100%;
    }
    
    .nav-menu a {
        position: relative;
        padding-left: 20px;
        transition: all 0.3s ease;
    }
    
    .nav-menu li:hover a {
        padding-left: 30px;
        color: #541D36; /* var(--color-primary) */
    }
    
    /* Active menu item */
    .nav-menu .current-menu-item a {
        color: #541D36; /* var(--color-primary) */
        font-weight: 600;
    }
    
    .nav-menu .current-menu-item::before {
        height: 100%;
    }
    
    /* Submenu styles */
    .nav-menu .sub-menu {
        display: none;
        padding-left: 20px;
        margin-top: 10px;
    }
    
    .nav-menu .menu-item-has-children > a::after {
        content: '+';
        position: absolute;
        right: 20px;
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }
    
    .nav-menu .menu-item-has-children.open > a::after {
        transform: rotate(45deg);
    }
    
    .nav-menu .menu-item-has-children.open .sub-menu {
        display: block;
    }
    
    /* CTA Button in menu */
    .menu-cta {
        padding: 20px 0;
    }
    
    .menu-cta .btn {
        background: linear-gradient(135deg, #541D36 0%, #3A1325 100%);
        box-shadow: 0 4px 15px rgba(84, 29, 54, 0.3);
        transform: scale(1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .menu-cta .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(84, 29, 54, 0.4);
    }
    
    /* Social links in mobile menu */
    .mobile-menu-social {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding: 20px 0;
        margin-top: auto;
        border-top: 1px solid rgba(0,0,0,0.05);
    }
    
    .mobile-menu-social a {
        width: 40px;
        height: 40px;
        background: #B6AF68; /* var(--color-accent) */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-social a:hover {
        background: #541D36; /* var(--color-primary) */
        transform: translateY(-3px);
    }
    
    .mobile-menu-social svg {
        width: 20px;
        height: 20px;
        fill: #541D36; /* var(--color-primary) */
        transition: fill 0.3s ease;
    }
    
    .mobile-menu-social a:hover svg {
        fill: #ffffff; /* var(--color-white) */
    }
    
    /* Menu toggle enhanced styles */
    .menu-toggle {
        background: #f8f8f8; /* var(--color-background) */
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    .menu-toggle:hover {
        background: #B6AF68; /* var(--color-accent) */
    }
    
    .menu-toggle.is-active {
        background: #541D36; /* var(--color-primary) */
    }
    
    .menu-toggle.is-active .menu-text {
        color: #ffffff; /* var(--color-white) */
    }
    
    .menu-toggle.is-active .hamburger-inner,
    .menu-toggle.is-active .hamburger-inner::after {
        background-color: #ffffff; /* var(--color-white) */
    }
    
    /* Smooth transitions */
    .nav-menu,
    .nav-menu li,
    .nav-menu a {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Accessibility improvements */
    .nav-menu a:focus {
        outline: 2px solid #541D36; /* var(--color-primary) */
        outline-offset: 2px;
    }
    
    /* Landscape mobile adjustments */
    @media (max-height: 600px) and (orientation: landscape) {
        .nav-menu-wrapper {
            padding-top: 60px;
        }
        
        .nav-menu {
            padding: 60px 20px 20px;
        }
        
        .nav-menu a {
            padding: 10px 0;
            font-size: 0.95rem;
        }
    }
}

/* Tablet adjustments */
@media (min-width: 769px) {
    /* Hide mobile-only elements */
    .mobile-menu-social {
        display: none;
    }
    
    /* Ensure desktop menu is visible */
    .nav-menu-wrapper {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    .nav-menu li {
        opacity: 1 !important;
        transform: none !important;
        border: none !important;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    @media (max-width: 768px) {
        .nav-menu-wrapper {
            background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
        }
        
        .nav-menu a {
            color: #ffffff;
        }
        
        .nav-menu li {
            border-bottom-color: rgba(255,255,255,0.1);
        }
    }
}

/* Print styles - hide menu toggle */
@media print {
    .menu-toggle,
    .mobile-menu-social {
        display: none !important;
    }
}