/* 
 * Estilos para el widget Mega Menú de Cámara Valencia
 * Plugin: Cámara Valencia
 * Widget: Mega Menú
 */

/* Contenedor principal del megamenu */
.megamenu-widget {
    position: static;
    z-index: 1000;
}

/* Lista principal del megamenu */
.megamenu-widget .megamenu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 1rem;
}

/* Items del menu principal */
.megamenu-widget .megamenu-list > li {
    position: static;
    margin: 0;
    padding: 0;
}

/* Enlaces del menu principal */
.elementor-element .megamenu-widget .megamenu-list > li > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}

/* Iconos en los enlaces */
.megamenu-widget .megamenu-list figure {
    margin: 0;
    display: flex;
    align-items: center;
}

.megamenu-widget .megamenu-list figure img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Hover effects */
.elementor-element .megamenu-widget .megamenu-list > li > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Submenu container (megawrap) */
.megamenu-widget > nav.megamenu-nav > ul > li > div.megawrap {
    position: fixed;
    left: 0;
    right:0;
    margin:auto;
    /*transform:translateY(0.6rem);*/
    min-width: 300px;
    width:100vw;
    background: white;
    border-radius: 0rem 0rem 2rem 2rem;
    padding: 1.5rem 2rem;
    box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.1);
    border:1px solid #e2e8f0;
    border-top: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}
/* Mostrar submenu al hacer hover - Solo primer nivel */
.megamenu-widget .megamenu-list > li:hover .megawrap {
    opacity: 1;
    visibility: visible;
    /*transform: translateY(0);*/
}

/* Hover para niveles anidados */
.megamenu-widget .megawrap li:hover > .megawrap {
    opacity: 1;
    visibility: visible;
}

/* Estilos para megawrap anidados (segundo nivel y siguientes) */


.megamenu-widget>nav.megamenu-nav>ul>li>div.megawrap>ul>li>div.megawrap>ul {
    display: flex;
    flex-direction: column;
    gap:0.6rem;
}



/* Lista del submenu */
.megamenu-widget .sub-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8%, 1fr));
    gap: 2.2rem;
    list-style: none;
    max-width: 1720px;
    margin: 0 auto;
    padding: 1rem 0.5rem;

}

/* Items del submenu */
.megamenu-widget .sub-menu li {
    margin: 0;
    padding: 0;
}

/* Enlaces del submenu */
.elementor-element .megamenu-widget .sub-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    color: #374151;
    text-wrap:pretty;
}

.elementor-element .megamenu-widget .sub-menu a:hover {
    color: #C81E35;
}

/* Mensaje cuando no hay menú seleccionado */
.megamenu-no-menu {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 0;
    text-align: center;
}

/* Mensaje de aviso en el widget */
.megamenu-notice {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 0;
    text-align: center;
}

.megamenu-notice p {
    margin: 0.5rem 0;
}

.megamenu-notice a {
    color: #0369a1;
    text-decoration: underline;
}

.megamenu-notice a:hover {
    color: #1e40af;
}

/* Menú móvil */
.mobile-menu-container {
    display: none;
    margin-top: 1rem;
}

.mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.mobile-menu-list a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}


/* new */
    ul#menu-principal > li > div.megawrap > ul > li.mega-label > a{
        background-color: #F4F5FC;
        padding: 0.6rem 1.1rem;
    }
        ul#menu-principal>li>div.megawrap>ul>li:not(.mega-label)>a {
            padding: 0.9rem 1.1rem 0rem;
        }

/* Responsive design */
@media (max-width: 768px) {
    .megamenu-widget .megamenu-list {
        display: none;
    }
    
    .mobile-menu-container {
        display: block !important;
    }
    
    .megamenu-widget .megamenu-list > li > .megawrap {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 1rem 0;
        background: transparent;
    }
}

/* Accessibility improvements */
.megamenu-widget .megamenu-list a:focus,
.megamenu-widget .sub-menu a:focus,
.mobile-menu-list a:focus {
    /*outline: 2px solid #404247;
    outline-offset: 2px;*/
    box-shadow: inset 0 0 0 2px #404247;
}

/* Animation for smooth transitions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.megamenu-widget .megamenu-list > li > .megawrap {
    animation: fadeInUp 0.3s ease-out;
}



/*Imagen de fondo*/

    .mega-bg-image{
        width: 100%;
        height: 100%;
        max-height: 159px;
        aspect-ratio: 16 / 9;
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 1rem;
        margin-top: 2rem;
        display: flex;
        align-items: end;
        justify-content: end;
        padding: 0% 1rem 1rem 0.5rem;
    }

        .mega-bg-image > p {
            color: #fff;
            font-size: 1.2rem;
            line-height: 1.4rem;
            font-weight: bold;
            text-wrap:pretty;
        }