/*==========================
      Mega Menu
===========================*/
.induxo-mega-menu {
  position: relative;
}

.induxo-mega-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.induxo-mm-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
}

.induxo-mm-toggle:hover,
.induxo-mm-toggle:focus,
.induxo-mm-toggle:active {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

.induxo-mm-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #101010;
}

.induxo-mm-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.induxo-mm-item {
  position: relative;
}

.induxo-mm-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 15px .6rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: "Roboto", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.induxo-mm-item.induxo-mm-current>.induxo-mm-link {
  color: #ff5c23;
}

.induxo-mm-item:hover>.induxo-mm-link,
.induxo-mm-item.induxo-mm-current>.induxo-mm-link {
  border-bottom-color: currentColor;
}

/* the theme ships "ul ul li, ol ul li { list-style: outside; }" which adds
   bullet markers to every nested list in the mega menu (flyouts, the simple
   dropdown) — scoped to this widget so it doesn't touch the separate
   ::marker bullet styling built for blog/page content elsewhere */
.induxo-mega-menu ul ul li {
  list-style: none !important;
}

.induxo-mm-arrow {
  font-size: 12px;
  cursor: pointer;
}

.induxo-mm-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .9);
  border-top: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  z-index: 100;
}

.induxo-mm-item.has-megamenu.induxo-mm-open .induxo-mm-panel {
  display: block;
}

/* plain dropdown for top-level items that have children but aren't marked
   "mega-parent" (e.g. Nosotros, Sostenibilidad) — not enough content to
   justify the full grid + image panel, just a normal narrow dropdown */
.induxo-mm-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  padding: 15px 0;
  z-index: 100;
}

.induxo-mm-item.has-megamenu.induxo-mm-open .induxo-mm-dropdown {
  display: block;
}

.induxo-mm-dropdown-list,
.induxo-mm-dropdown-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.induxo-mm-dropdown-list>li>a {
  display: block;
  padding: 8px 25px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  color: #101010;
}

.induxo-mm-dropdown-list>li>a:hover {
  color: #ff5c23;
}

.induxo-mm-dropdown-sublist {
  padding-left: 20px;
}

.induxo-mm-dropdown-sublist a {
  display: block;
  padding: 6px 25px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  color: #444444;
}

.induxo-mm-dropdown-sublist a:hover {
  color: #ff5c23;
}

@media (min-width: 992px) {
  .induxo-mm-item.has-megamenu:hover .induxo-mm-dropdown {
    display: block;
  }
}

@media (max-width: 991px) {
  .induxo-mm-dropdown {
    display: none;
    position: static;
    box-shadow: none;
    padding: 0;
  }

  .induxo-mm-item.has-megamenu.induxo-mm-open .induxo-mm-dropdown {
    display: block;
  }

  .induxo-mm-dropdown-list>li>a {
    padding: 12px 20px 12px 35px;
    border-bottom: 1px solid #eee;
  }

  .induxo-mm-dropdown-sublist a {
    padding: 10px 20px 10px 50px;
  }
}

/* full-bleed panel, content column kept inside a centered max-width
   so column 2 always lines up under the panel's own top edge instead of
   flying out from wherever the hovered item happens to sit vertically */
.induxo-mm-panel-inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 30px 60px;
  display: flex;
}

/* 3-column grid of first-level items + a 4th column with a featured image
   that swaps on hover (assets/js/elementor.js, Mega_Menu) */
.induxo-mm-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
}

.induxo-mm-grid-item {
  position: relative;
}

/* divider between columns 1|2 and 2|3, matching the previous design — since
   items flow left-to-right row by row, "column 1" is every 3rd item
   starting at 1, "column 2" every 3rd starting at 2, "column 3" (no divider,
   it's the last one) every 3rd starting at 3 */
.induxo-mm-grid-item:nth-child(3n+1),
.induxo-mm-grid-item:nth-child(3n+2) {
  border-right: 1px solid #eee;
}

.induxo-mm-grid-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}

.induxo-mm-grid-item.has-children.induxo-mm-open>.induxo-mm-grid-link {
  color: #ff5c23;
}

/* flyout: a given item's own submenu, appearing beside it */
.induxo-mm-flyout {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-height: 100%;
  min-width: 260px;
  max-width: 420px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid #e5e5e5;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
  padding: 1.5rem 1.5rem 0.25rem;
  z-index: 10;
}

/* the flyout itself needs to grow to fit whatever column count its list uses */
.induxo-mm-grid-item.menu-2-cols .induxo-mm-flyout {
  max-width: none;
}

.induxo-mm-grid-item.menu-3-cols .induxo-mm-flyout {
  max-width: none;
}

.induxo-mm-grid-item.has-children.induxo-mm-open>.induxo-mm-flyout {
  display: block;
}

@media (min-width: 992px) {
  .induxo-mm-item.has-megamenu:hover .induxo-mm-panel {
    display: block;
  }

  .induxo-mm-grid-item.has-children:hover>.induxo-mm-grid-link {
    color: #ff5c23;
  }

  .induxo-mm-grid-item.has-children:hover>.induxo-mm-flyout {
    display: block;
  }
}

/* 1 columna por defecto; "menu-2-cols"/"menu-3-cols" en el ítem de 2do
   nivel (ver mega-menu.php) fuerza más columnas cuando el submenú tiene
   muchos items */
.induxo-mm-flyout-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.induxo-mm-grid-item.menu-2-cols .induxo-mm-flyout-list {
  columns: 2;
  column-gap: 25px;
  min-width: 380px;
}

.induxo-mm-grid-item.menu-3-cols .induxo-mm-flyout-list {
  columns: 3;
  column-gap: 25px;
  min-width: 700px;
}

.induxo-mm-flyout-list li {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.induxo-mm-flyout-list a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .9rem;
  line-height: 1.5;
  font-weight: normal;
  white-space: normal;
}

.induxo-mm-flyout-list a:hover {
  text-decoration: underline;
}

/* 4th column: the currently-hovered item's own featured image, or the
   mega-parent's own image while nothing is hovered */
.induxo-mm-image-col {
  flex: 0 0 260px;
  margin-left: 40px;
}

.induxo-mm-image {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  background: #f5f5f5;
}

@media (max-width: 991px) {
  .induxo-mm-toggle {
    display: flex;
  }

  .induxo-mm-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    max-height: 80vh;
    overflow-y: auto;
    z-index: 9999;
  }

  .induxo-mega-menu.induxo-mm-mobile-open .induxo-mm-list {
    display: flex;
  }

  .induxo-mm-link {
    justify-content: space-between;
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
  }

  .induxo-mm-panel {
    display: none;
    position: static;
    border-top: none;
    box-shadow: none;
  }

  .induxo-mm-item.has-megamenu.induxo-mm-open .induxo-mm-panel {
    display: block;
  }

  .induxo-mm-panel-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
  }

  /* mobile drops the 3-column grid, the image column, and the side-flyout —
     just a plain stacked accordion, tap to expand a submenu inline below it */
  .induxo-mm-grid {
    display: block;
  }

  .induxo-mm-grid-item:nth-child(3n+1),
  .induxo-mm-grid-item:nth-child(3n+2) {
    border-right: none;
  }

  .induxo-mm-grid-link {
    padding: 12px 20px 12px 35px;
    border-bottom: 1px solid #eee;
    font-weight: 400;
  }

  .induxo-mm-flyout {
    display: none;
    position: static;
    left: auto;
    min-height: 0;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    background: #fafafa;
    padding: 10px 20px 10px 50px;
  }

  .induxo-mm-grid-item.has-children.induxo-mm-open>.induxo-mm-flyout {
    display: block;
  }

  .induxo-mm-flyout-list {
    columns: 1;
  }

  .induxo-mm-image-col {
    display: none;
  }
}