/* ==========================================================================
  Desktop nav — submenú anidado (3er nivel) como flyout a la DERECHA.
  Scoped a .header .main-nav (oculto en mobile => no afecta el menú móvil).
  Trabaja CON el mecanismo hover existente (max-height / opacity / visibility)
  y usa selectores con suficiente especificidad para ganarle a las reglas
  ya presentes en el _header.scss.
========================================================================== */

/* El item anidado (p.ej. Texas) es el ancla de posicionamiento del flyout. */
.header .main-nav__list .sub-menu .two-menu-item-has-children {
  position: relative;
}

/* Wrapper del flyout: pegado a la derecha del item, alineado arriba.
  padding:0 anula el padding-top:15px que el wrapper usa para el dropdown
  vertical de 1er nivel.
*/
.header
  .main-nav__list
  .sub-menu
  .two-menu-item-has-children
  > .sub-menu-wrapper {
  top: 0;
  left: 100%;
  padding: 0;
  padding-left: 10px;
}

.header
  .main-nav__list
  .sub-menu
  .two-menu-item-has-children
  > .sub-menu-wrapper .sub-menu {
    width: 260px;
}

/* (A) Mientras el dropdown de 1er nivel está abierto, NO debe recortar el
  flyout lateral. Su overflow:hidden era lo que "comía" el 3er nivel.
*/
.header
  .main-nav__list
  > li:not(.button):hover
  > .sub-menu-wrapper
  > .sub-menu {
  overflow: visible;
}

/* (B) Re-ocultar el submenú anidado cuando SOLO se hace hover del item de
   1er nivel (la regla descendente existente lo revelaba de más). */
.header
  .main-nav__list
  > li:not(.button):hover
  > .sub-menu-wrapper
  .sub-menu
  .sub-menu {
  opacity: 0;
  max-height: 0;
  visibility: hidden;
}

/* (C) Mostrar el submenú anidado SOLO al hacer hover (o foco) en SU propio
  item. Mayor especificidad que (B) para que gane cuando ambos aplican.
*/
.header
  .main-nav__list
  > li:not(.button):hover
  .two-menu-item-has-children:hover
  > .sub-menu-wrapper
  > .sub-menu,
.header
  .main-nav__list
  .sub-menu
  .two-menu-item-has-children:focus-within
  > .sub-menu-wrapper
  > .sub-menu {
  opacity: 1;
  max-height: 600px;
  visibility: visible;
  overflow: visible;
  z-index: 2;
}

.header
  .main-nav__list
  .sub-menu
  .two-menu-item-has-children
  > a {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

.header
  .main-nav__list
  .sub-menu
  .two-menu-item-has-children
  > a
  > .dropdown-toggle {
  transform: rotate(270deg);
}

/* ----------------------------------------------------------------------------
  Como (A) quita el overflow:hidden, el border-radius del contenedor ya no
  recorta las esquinas de los items. Redondeamos el primer/último item para
  conservar el aspecto del menú. (Aplica a todos los niveles.)
---------------------------------------------------------------------------- */
.header .main-nav__list .sub-menu > li:first-child > a {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.header .main-nav__list .sub-menu > li:last-child > a {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.header .mobile-nav__list> li .sub-menu {
  padding: 0 30px !important;
}

.header .mobile-nav__list> li .sub-menu .sub-menu {
  padding: 0 20px !important;
  min-width: auto !important;
}
.header .mobile-nav__list> li .sub-menu .sub-menu a{
  font-size: 12px;
}