/* ENDOLIFTER — v24 menu-fix.css
 * BUGFIX: cuando el usuario crea un menú personalizado en WP Admin y anida páginas,
 * WordPress aplica automáticamente la clase `.menu-item-has-children` al <li> padre
 * — NO `.has-children` (esa es la clase del fallback hardcodeado del tema).
 *
 * En main.css todas las reglas de dropdown sólo apuntan a `.has-children`, por lo
 * que los menús creados desde wp-admin no desplegaban su sub-menú al hacer hover.
 *
 * Esta hoja replica las reglas existentes apuntando también a `.menu-item-has-children`
 * y añade un "puente" invisible que evita que el sub-menú se cierre al cruzar el gap
 * de 8px que hay entre el item padre y el dropdown.
 *
 * Aplica tanto a desktop (.main-nav) como a mobile (.mobile-nav).
 */

/* ============================================================
 *  DESKTOP — .main-nav dropdown
 * ============================================================ */

/* Posicionamiento del wrapper del item padre */
.main-nav__list .menu-item-has-children { position: relative; }

/* Indicador visual (chevron suave a la derecha del enlace padre) */
.main-nav__list .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.main-nav__list .menu-item-has-children > a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.7;
    transition: transform var(--t-fast, .2s);
    margin-left: 4px;
}
.main-nav__list .menu-item-has-children:hover > a::after,
.main-nav__list .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
    opacity: 1;
}

/* Sub-menu visible al hacer hover/focus sobre el item padre */
.main-nav__list .menu-item-has-children:hover > .sub-menu,
.main-nav__list .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Asegura el estado inicial (por si algún plugin lo sobreescribe) */
.main-nav__list .menu-item-has-children > .sub-menu {
    pointer-events: none;
}

/* Puente invisible: padding-top en el sub-menu para que el cursor no pierda
   el hover al cruzar de parent <a> al dropdown. Usamos un pseudo para no
   alterar el padding visual (que ya viene de main.css). */
.main-nav__list .menu-item-has-children > .sub-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* Sub-menus de NIVEL 2+ (anidación profunda) — abren a la derecha */
.main-nav__list .sub-menu .menu-item-has-children { position: relative; }
.main-nav__list .sub-menu .menu-item-has-children > .sub-menu {
    top: -8px;
    left: 100%;
    margin-left: 4px;
    transform: translateX(8px);
}
.main-nav__list .sub-menu .menu-item-has-children:hover > .sub-menu,
.main-nav__list .sub-menu .menu-item-has-children:focus-within > .sub-menu {
    transform: translateX(0);
}
.main-nav__list .sub-menu .menu-item-has-children > .sub-menu::before {
    /* puente lateral en lugar de superior */
    top: 0;
    bottom: 0;
    left: -12px;
    right: auto;
    width: 12px;
    height: auto;
}
.main-nav__list .sub-menu .menu-item-has-children > a::after {
    border: 0;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    margin-left: auto;
}

/* ============================================================
 *  MOBILE — .mobile-nav dropdown
 * ============================================================ */

/* En mobile, los hijos se muestran SIEMPRE expandidos (no hover). 
   Cuando el menú esté generado por WP con menu-item-has-children, simplemente
   nos aseguramos de que el sub-menú se vea con sangría. main.css ya lo cubre
   con .mobile-nav__list .sub-menu { padding-left: 16px } — añadimos también la
   variante con .menu-item-has-children (que en wp-admin trae class automática). */
.mobile-nav__list .menu-item-has-children > .sub-menu {
    padding-left: 16px;
    list-style: none;
    margin: 4px 0 8px;
    border-left: 2px solid var(--color-border, #222);
}
.mobile-nav__list .menu-item-has-children > .sub-menu li {
    border-bottom: 1px solid var(--color-border, #222);
}
.mobile-nav__list .menu-item-has-children > .sub-menu li:last-child {
    border-bottom: 0;
}
.mobile-nav__list .menu-item-has-children > .sub-menu a {
    padding: 12px 0;
    font-size: 0.95rem;
    color: var(--color-text-muted, #ccc);
}
.mobile-nav__list .menu-item-has-children > a {
    font-weight: 600;
}