/* Mobile Menu Enhancements - Card-Based Design */

/* ============================================================
   FIX: Textos de navegación desktop
   ============================================================
   Problema: theme.style.min.css define `.d-none { display: none; }` 
   pero no incluye la regla responsive `.d-md-inline` necesaria
   para mostrar textos en pantallas ≥768px.
   
   Resultado sin este fix: Los spans con clase `d-none d-md-inline` 
   permanecen ocultos en desktop, mostrando solo iconos.
   
   Solución: Forzar display inline en desktop para textos de 
   navegación que usan el patrón de 3 capas:
   - d-md-none d-block: Título móvil (visible solo en móvil)
   - d-md-none d-block: Subtítulo móvil (visible solo en móvil)
   - d-none d-md-inline: Título desktop (debe ser visible en desktop)
   - d-none d-md-inline-flex: Dropdown desktop (debe ser visible)
   ============================================================ */
@media (min-width: 768px) {
    .navbar-nav .nav-link .d-none.d-md-inline {
        display: inline !important;
    }
    
    .navbar-nav .nav-link.d-none.d-md-inline-flex {
        display: inline-flex !important;
    }
    
    /* FIX: Dropdown menu visibility
       Problema: El tema fuerza .navbar-nav .dropdown-menu{position:static}
       lo que previene que se muestre correctamente cuando tiene .show
       
       Solución: En desktop, asegurar que los dropdowns se posicionen
       absolutamente y se muestren cuando tienen la clase .show de Bootstrap */
    .navbar-nav .dropdown-menu {
        position: absolute !important;
    }
    
    .navbar-nav .dropdown-menu.show {
        display: block !important;
    }
}

/* Offcanvas mobile menu styling */
@media (max-width: 767.98px) {
    .offcanvas.navbar-collapse {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        padding: 0 !important;
    }

    /* Header con logo */
    .offcanvas.navbar-collapse::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 70px;
        background: var(--bs-primary, #94b811);
        z-index: 1;
    }

    /* Espaciado para el contenido después del header */
    .offcanvas.navbar-collapse > div:not(.position-absolute) {
        margin-top: 100px;
    }

    .offcanvas.navbar-collapse .btn-close {
        /* Área táctil óptima WCAG */
        width: 44px;
        height: 44px;
        padding: 0;
        
        /* Estilo visual mejorado */
        background-color: rgba(255, 255, 255, 0.2);
        background-size: 16px;
        border-radius: 50%;
        opacity: 1;
        backdrop-filter: blur(10px);
        
        /* Transiciones suaves */
        transition: all 0.3s ease;
        
        /* Posicionamiento */
        position: absolute;
        top: 13px;
        right: 16px;
        z-index: 10;
    }

    .offcanvas.navbar-collapse .btn-close:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

    /* Menu items styling - Card Design */
    .offcanvas.navbar-collapse .main-nav {
        width: 100%;
        gap: 0;
        margin-top: 0; /* Sin margin adicional */
        padding: 0;
    }

    /* Contenedor flex interno */
    .offcanvas.navbar-collapse > div {
        align-items: flex-start !important;
        padding: 0 !important;
    }

    .offcanvas.navbar-collapse .nav-item {
        width: 100%;
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Ocultar nav-links inicialmente */
    .offcanvas.navbar-collapse .nav-link {
        opacity: 0;
    }

    /* Nav-link estilo card */
    .offcanvas.navbar-collapse .nav-link {
        /* Diseño card */
        margin: 8px 12px;
        padding: 16px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 2px solid transparent;
        border-bottom: 2px solid transparent !important;
        
        /* Layout */
        display: flex;
        align-items: center;
        gap: 16px;
        width: calc(100% - 24px);
        box-sizing: border-box;
        
        /* Tipografía */
        font-size: 1.05rem;
    }

    /* Separador visual para opciones de alquiler */
    .offcanvas.navbar-collapse .nav-item.rental-option:first-of-type {
        margin-top: 20px;
        padding-top: 20px;
        position: relative;
    }

    .offcanvas.navbar-collapse .nav-item.rental-option:first-of-type::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 20px;
        right: 20px;
        height: 3px;
        background: linear-gradient(90deg, rgba(148, 184, 17, 0.3), rgba(148, 184, 17, 0.7), rgba(148, 184, 17, 0.3));
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(148, 184, 17, 0.2);
    }

    .offcanvas.navbar-collapse .nav-link {
        transform: scale(0.97);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .offcanvas.navbar-collapse .nav-link i:first-child {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(148, 184, 17, 0.1) 0%, rgba(148, 184, 17, 0.05) 100%);
        border-radius: 12px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .offcanvas.navbar-collapse .nav-link.active {
        background: linear-gradient(135deg, rgba(148, 184, 17, 0.08) 0%, rgba(148, 184, 17, 0.03) 100%);
        border-color: #94b811 !important;
        color: #212529;
    }

    .offcanvas.navbar-collapse .nav-link.active i:first-child {
        background: var(--bs-primary, #94b811);
        color: white;
    }

    /* Texto del nav-link */
    .offcanvas.navbar-collapse .nav-link span {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Smooth entrance animation */
    .offcanvas.navbar-collapse.showing,
    .offcanvas.navbar-collapse.show {
        animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Animación de entrada escalonada para items */
    @keyframes slideInItem {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .offcanvas.show .nav-item:nth-child(1) .nav-link { animation: slideInItem 0.3s ease-out 0s both; }
    .offcanvas.show .nav-item:nth-child(2) .nav-link { animation: slideInItem 0.3s ease-out 0.05s both; }
    .offcanvas.show .nav-item:nth-child(3) .nav-link { animation: slideInItem 0.3s ease-out 0.10s both; }
    .offcanvas.show .nav-item:nth-child(4) .nav-link { animation: slideInItem 0.3s ease-out 0.15s both; }
    .offcanvas.show .nav-item:nth-child(5) .nav-link { animation: slideInItem 0.3s ease-out 0.20s both; }
}

/* Desktop dropdown - mantener comportamiento original */
@media (min-width: 768px) {
    .offcanvas.navbar-collapse .dropdown-toggle::after {
        display: inline-block;
    }

    .offcanvas.navbar-collapse .dropdown-chevron {
        margin-left: auto;
        font-size: 1rem;
        transition: transform 0.3s ease;
    }

    .offcanvas.navbar-collapse .dropdown.show .dropdown-chevron {
        transform: rotate(180deg);
    }

    .offcanvas.navbar-collapse .dropdown-menu {
        display: none;
        position: absolute !important;
    }

    .offcanvas.navbar-collapse .dropdown.show .dropdown-menu {
        display: block;
    }

    .offcanvas.navbar-collapse .dropdown-item {
        padding: 0.5rem 1rem;
    }
}