/* Treppco — fix de menú independiente de smartmenus.
 * El mirror estático no puede confiar en el bootstrap dinámico de Elementor Pro,
 * así que abrimos los submenús con CSS puro (desktop) y un toggle JS minimal (mobile).
 */

/* === DESKTOP (≥ 1025px): submenús aparecen al hover === */
@media (min-width: 1025px) {
  .elementor-nav-menu--main .menu-item-has-children {
    position: relative;
  }
  .elementor-nav-menu--main > .elementor-nav-menu .menu-item-has-children > .sub-menu,
  .elementor-nav-menu--main .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    border-radius: 6px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
  }
  /* Padding-top transparente para que no haya hueco entre el item padre
     y el submenu (evita que el mouse "pierda" el hover al bajar). */
  .elementor-nav-menu--main .menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
  }
  .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
  /* Switcher de idioma (Polylang) alineado a la derecha porque está al final del menú. */
  .elementor-nav-menu--main .pll-parent-menu-item.menu-item-has-children > .sub-menu {
    left: auto;
    right: 0;
    min-width: 64px;
  }
  .elementor-nav-menu--main .pll-parent-menu-item .sub-menu .elementor-sub-item {
    padding: 8px 12px;
  }
  .elementor-nav-menu--main .sub-menu li {
    list-style: none;
    margin: 0;
  }
  .elementor-nav-menu--main .sub-menu .elementor-sub-item {
    display: block;
    padding: 10px 18px;
    color: #1f2937;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
  }
  .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
  .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus {
    background: #f8fafc;
    color: #e11d48;
  }
}

/* === MOBILE/TABLET (< 1025px): el menú hamburguesa abre el dropdown === */
@media (max-width: 1024px) {
  /* Asegurar que el botón hamburger es visible. */
  .elementor-widget-nav-menu .elementor-menu-toggle {
    display: inline-flex !important;
  }
  /* Estado por defecto: oculto.
     position: fixed para que el dropdown ocupe el ancho completo del viewport
     independientemente de la columna en que vive el widget del nav. */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
    display: none !important;
    position: fixed;
    top: 60px; /* valor inicial seguro; JS lo recalcula al abrir */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    padding: 12px 0;
    z-index: 9998;
    max-height: 80vh !important;
    overflow-y: auto;
    transform: none !important;
  }
  /* Estado abierto: dropdown visible. */
  .elementor-widget-nav-menu.tw-menu-open .elementor-nav-menu--dropdown,
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
    display: block !important;
    transform: none !important;
  }
  .elementor-nav-menu--dropdown .elementor-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .elementor-nav-menu--dropdown .elementor-item,
  .elementor-nav-menu--dropdown .elementor-sub-item {
    display: block;
    padding: 12px 20px;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
  }
  .elementor-nav-menu--dropdown .elementor-sub-item {
    padding-left: 36px;
    font-size: 14px;
  }
  .elementor-nav-menu--dropdown .menu-item-has-children > .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f9fafb;
  }
  .elementor-nav-menu--dropdown .menu-item-has-children.tw-sub-open > .sub-menu {
    display: block;
  }
  .elementor-nav-menu--dropdown .menu-item-has-children > .elementor-item::after {
    content: "▾";
    float: right;
    color: #94a3b8;
    transition: transform .2s ease;
  }
  .elementor-nav-menu--dropdown .menu-item-has-children.tw-sub-open > .elementor-item::after {
    transform: rotate(180deg);
  }
}