/* ==========================================================================
   THEME: Larmaries Child Theme
   SECTION: Custom Header & Navigation
   DESCRIPTION: Estilos para header transparente que cambia a blanco, 
                manejo de logos superpuestos y menú personalizado.
   ========================================================================== */

/* ==========================================================================
   1. CONTENEDOR PRINCIPAL DEL HEADER
   ========================================================================== */

/* ESTADO INICIAL (TOP DE PÁGINA) */
.cust-header-trans-to-white {
    /* Forzamos fondo transparente al inicio */
    background-color: transparent !important;
    
    /* Transición suave para el color de fondo */
    transition: background-color 0.4s ease-in-out; 
}

/* ESTADO "SCROLLED" (CUANDO BAJAS) */
/* Esta clase (.cust-scrolled-active) es añadida por larmaries.js */
.cust-header-trans-to-white.cust-scrolled-active {
    background-color: #ffffff !important; /* Fondo blanco */
    
    /* Sombra suave para separar el header del contenido */
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1); 
}


/* ==========================================================================
   2. SISTEMA DE LOGOTIPO (CAMBIO DE COLOR)
   ========================================================================== */

/* CONTENEDOR DEL ENLACE DEL LOGO */
.cust-logo-link {
    display: inline-block;
    position: relative; /* Necesario para contener las imágenes absolutas */
    text-decoration: none;
    
    /* TAMAÑO ESCRITORIO Y TABLET */
    width: 180px; 
    
    transition: width 0.3s ease; /* Suaviza el cambio de tamaño responsive */
}

/* RESPONSIVE: TAMAÑO MÓVIL (Pantallas < 767px) */
@media (max-width: 767px) {
    .cust-logo-link {
        width: 120px; /* Logo más pequeño en móviles */
    }
}

/* ESTILOS GENERALES DE LAS IMÁGENES */
.cust-logo-img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s ease-in-out;
    /* backface-visibility ayuda a evitar parpadeos en animaciones */
    backface-visibility: hidden; 
}

/* LOGO DE COLOR (Fondo) */
/* Usamos relative para que este defina la altura del contenedor */
.cust-logo-color {
    position: relative;
    opacity: 0; /* Invisible al inicio */
    z-index: 1;
}

/* LOGO BLANCO (Frente) */
/* Absolute para que flote encima del de color */
.cust-logo-white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1; /* Visible al inicio */
    z-index: 2;
}

/* --- LOGICA DE INTERCAMBIO (SCROLL) --- */

/* Cuando el header está blanco, oculta el logo blanco */
.cust-header-trans-to-white.cust-scrolled-active .cust-logo-white {
    opacity: 0;
}

/* Cuando el header está blanco, muestra el logo de color */
.cust-header-trans-to-white.cust-scrolled-active .cust-logo-color {
    opacity: 1;
}


/* ==========================================================================
   3. MENÚ DE NAVEGACIÓN (LINKS)
   ========================================================================== */

/* CONTENEDOR FLEXBOX */
.cust-nav-menu {
    display: flex;
    gap: 30px; /* Espacio entre items */
    align-items: center;
    justify-content: flex-end; 
}

/* ESTILO DE LOS ENLACES (ESTADO INICIAL) */
.cust-menu-item {
    text-decoration: none !important;
    font-size: 20px; 
    font-weight: 800; 
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    
    /* Color BLANCO por defecto (fondo transparente) */
    color: #ffffff !important;
    
    transition: color 0.4s ease-in-out;
    padding: 10px 0; 
    position: relative;
}

/* ESTILO DE LOS ENLACES (ESTADO SCROLL/BLANCO) */
.cust-header-trans-to-white.cust-scrolled-active .cust-menu-item {
    color: #3cacd8 !important; /* Azul Turquesa */
}

/* --- ESTADO ACTIVO (PÁGINA ACTUAL) --- */

/* Caso A: Fondo Transparente */
.cust-menu-item.active-page {
    color: #115f7e !important; /* Azul Oscuro */
}

/* Caso B: Fondo Blanco (Scroll) */
.cust-header-trans-to-white.cust-scrolled-active .cust-menu-item.active-page {
    color: #115f7e !important; /* Mantenemos Azul Oscuro para indicar posición */
}

/* EFECTO HOVER */
.cust-menu-item:hover {
    opacity: 0.8;
}

/* OCULTAR EN MÓVIL */
@media (max-width: 767px) {
    .cust-nav-menu {
        display: none; /* Se oculta para dar paso a la hamburguesa */
    }
}


/* ==========================================================================
   4. BOTÓN HAMBURGUESA (MÓVIL / MODAL)
   ========================================================================== */

/* ÁREA DE CLIC */
.cust-burger-trigger {
    display: block; 
    cursor: pointer;
    padding: 10px; /* Aumenta el área táctil */
    z-index: 50;
    text-decoration: none;
    float: right; 
    -webkit-tap-highlight-color: transparent; 
}

/* CAJA CONTENEDORA DE LAS LÍNEAS */
.cust-burger-box {
    width: 30px;  /* Ancho del icono */
    height: 20px; /* Alto del icono */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; /* Alineado a la derecha */
}

/* LÍNEAS INDIVIDUALES */
.cust-burger-line {
    display: block;
    height: 4px; /* Grosor */
    width: 100%; 
    border-radius: 4px;
    transition: width 0.3s ease, background-color 0.4s ease; 
    background-color: #ffffff; /* Blanco al inicio */
}

/* CAMBIO DE COLOR EN SCROLL */
.cust-header-trans-to-white.cust-scrolled-active .cust-burger-line {
    background-color: #3cacd8 !important; /* Azul al bajar */
}

/* ANIMACIÓN HOVER (EFECTO ESCALERA) */
.cust-burger-trigger:hover .cust-burger-box .cust-burger-line:nth-child(2) {
    width: 70%; /* La línea del medio se encoge */
}
.cust-burger-trigger:hover .cust-burger-box .cust-burger-line:nth-child(3) {
    width: 50%; /* La línea de abajo se encoge más */
}