/*
 Theme Name:   LPF Child
 Theme URI:    https://test.lpf.com.pa
 Description:  Child Theme de LPF para Alchemists
 Author:       Reload Publisher
 Author URI:   https://reloadpublisher.com
 Template:     alchemists
 Version:      1.0.0
 Text Domain:  alchemists-child
*/

/* ============================================================
   LPF CHILD — Correcciones UI
   ============================================================ */

/* ── 1. Ocultar header móvil nativo en desktop ── */
@media (min-width: 992px) {
    .header-mobile {
        display: none;
    }
}

/* ── 2. Etiqueta del marquee (ticker de noticias) ── */
.marquee-label {
    color:        #ffffff;
    padding-left: 15px;
}

/* ── 3. Ocultar hamburguesa nativa en móvil ── */
@media (max-width: 991px) {

    .burger-menu-icon {
        display: none !important;
    }

    /* Centrar logo del header móvil */
    .header-mobile__logo {
        margin-top: 0 !important;
    }
}

/* ── 4. Corregir logo desktop (layout-3) ── */
@media (min-width: 992px) {

    .header--layout-3 .header-logo {
        bottom:    auto;
        top:       50%;
        transform: translate(-50%, -50%);
    }
}

/* ============================================================
   FIX MENÚ PRINCIPAL DESKTOP — Tercer nivel (flyout)

   DIAGNÓSTICO DEL PROBLEMA:
   El tema tiene dos reglas en conflicto directo:
     A) .main-nav__sub-0 li:hover > .main-nav__sub-1 { display: block }
     B) .main-nav__list li:hover .main-nav__sub-0 .main-nav__sub-1 { display: none }
   La regla B tiene mayor especificidad (0,4,1) que A (0,3,1),
   por lo que siempre gana y el sub-1 nunca aparece.

   Además, jQuery (init.js) usa slideToggle() que controla
   el display mediante estilos inline, causando conflictos
   adicionales con cualquier regla CSS que use display.

   SOLUCIÓN: Usar opacity + pointer-events en vez de display.
   El slideToggle del tema no toca opacity, por lo que no
   hay conflicto posible.
   ============================================================ */

@media (min-width: 992px) {

    /* ── 1. Position:relative en el li de nivel 2 ── */
    .no-mega-menu .main-nav__sub-0 > li.menu-item-has-children {
        position: relative !important;
    }

    /* ── 2. Flyout oculto vía opacity (no display:none) ──
       opacity:0 evita el conflicto con slideToggle de jQuery
       porque slideToggle solo manipula height y display       */
    .no-mega-menu .main-nav__sub-0 > li > .main-nav__sub-1 {
        /* Posición del flyout: a la derecha del li */
        position:       absolute !important;
        left:           100% !important;
        top:            0 !important;
        min-width:      220px !important;
        z-index:        9999 !important;
        /* Cancelar el sistema rotateX del tema */
        transform:      none !important;
        transform-style: flat !important;
        /* Ocultar con opacity, NO con display */
        opacity:        0 !important;
        visibility:     visible !important;
        pointer-events: none !important;
        /* Transición suave */
        transition:     opacity 0.2s ease !important;
        /* Estilo visual igual que el nivel 2 */
        background-color: var(--alch-nav-sub-bg, var(--alch-color-dark, #1e2024)) !important;
        border:         1px solid var(--alch-nav-sub-border-color, #292c31) !important;
        list-style:     none !important;
        padding:        0 !important;
        margin:         0 !important;
        display:        block !important;
    }

    /* ── 3. Mostrar al hover del li padre ── */
    .no-mega-menu .main-nav__sub-0 > li.menu-item-has-children:hover > .main-nav__sub-1 {
        opacity:        1 !important;
        pointer-events: auto !important;
    }

    /* ── 4. Estilo de ítems del nivel 3 ── */
    .no-mega-menu .main-nav__sub-1 > li {
        position: relative;
        margin:   0;
        padding:  0;
        display:  block;
    }

    .no-mega-menu .main-nav__sub-1 > li > a {
        display:         block !important;
        padding:         16px 30px !important;
        color:           var(--alch-nav-sub-link-color, #fff) !important;
        font-size:       var(--alch-nav-sub-font-size, 11px) !important;
        font-weight:     700 !important;
        text-transform:  uppercase !important;
        text-align:      left !important;
        line-height:     1.5em !important;
        text-decoration: none !important;
        white-space:     nowrap !important;
        border-bottom:   1px solid var(--alch-nav-sub-border-color, #292c31) !important;
        transition:      background-color 0.3s ease, color 0.3s ease !important;
    }

    .no-mega-menu .main-nav__sub-1 > li:last-child > a {
        border-bottom: none !important;
    }

    .no-mega-menu .main-nav__sub-1 > li > a:hover {
        color:            var(--alch-nav-sub-hover-link-color,
                              var(--alch-color-4, #c2ff1f)) !important;
        background-color: var(--alch-nav-sub-hover-bg-color, transparent) !important;
    }
}