/* =========================================================
   MENU — Collapsed mode (JS accordion)
   - Applied via .is-collapsed class on .menu
   - Panel expands in flow (pushes content)
   - Submenus open only via JS (.is-subopen)
========================================================= */


/* =========================================================
   1) Collapsed base layout
========================================================= */
.menu.is-collapsed {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 14px;
  padding-right: 14px;
  min-height: var(--menu-minh);
}

/* Hamburger on the left */
.menu.is-collapsed .menu-toggle{
  display: block;
  left: 14px;
  right: auto;
}

/* Main list is hidden until JS adds .is-open */
.menu.is-collapsed .menu-list {
  display: none;
}

/* Open main panel (in flow, not an overlay) */
.menu.is-collapsed.is-open .menu-list{
  display: flex;
  flex-direction: column;

  position: static; /* critical: pushes content */
  width: 100%;
  margin-top: 8px;

  background: var(--menu-blue);
  padding: 8px 0;
}

/* Level 1 links inside blue panel */
.menu.is-collapsed .menu-link {
  height: auto;
  min-height: 48px;
  justify-content: flex-start;
  padding: 12px 18px;
  font-size: 16px;

  color: #fff;
  background: transparent;
  white-space: normal;
}

/* Hover in panel */
.menu.is-collapsed .menu-item:not(.has-dropdown):hover > .menu-link,
.menu.is-collapsed .menu-item:not(.is-subopen):focus-within > .menu-link,
.menu.is-collapsed .menu-link.active:not(.is-subopen) {
  background: rgba(255,255,255,.12);
  color: #fff;
}


/* =========================================================
   2) Collapsed dropdowns (accordion)
========================================================= */

/* Force ALL nested dropdowns to be static (accordion), not flyouts */
.menu.is-collapsed .dropdown {
  display: none;

  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 8px 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Open submenu (JS-controlled) */
.menu.is-collapsed .menu-item.is-subopen > .dropdown {
  display: block !important;
}

/* Submenu links: white + dynamic indent */
.menu.is-collapsed .menu-link {
  color: #fff;
  /* level 0 => 18px, level 1 => 34px, level 2 => 50px, etc. */
  padding-left: calc(18px + (var(--lvl, 0) * 16px));
}

/* Optional: slightly smaller text as depth increases */
.menu.is-collapsed .dropdown .menu-link {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  line-height: 1.25;
}
.menu.is-collapsed .dropdown .dropdown .menu-link { font-size: 14px; }
.menu.is-collapsed .dropdown .dropdown .dropdown .menu-link { font-size: 13.5px; }

/* Submenu hover */
.menu.is-collapsed .dropdown .menu-link:hover,
.menu.is-collapsed .dropdown .menu-link.active {
  background: rgba(255,255,255,.10);
  color: white;
}
/* ✅ NEW: Highlight parent of open submenu for clarity */
.menu.is-collapsed .menu-item.is-subopen > .menu-link {
  font-weight: 600;
  color: white;
}

/* Keep caret visible on blue panel (it inherits color, but let's be safe) */
.menu.is-collapsed .menu-item.has-dropdown > .menu-link::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* Evita que el JS de escritorio afecte al modo colapsado */
.menu.is-collapsed .dropdown.is-flipped {
  left: auto !important;
  right: auto !important;
}

/* CRITICAL: Never open submenus on hover/focus-within (JS only) */
.menu.is-collapsed .menu-item.has-dropdown:not(.is-subopen):hover > .dropdown,
.menu.is-collapsed .menu-item.has-dropdown:not(.is-subopen):focus-within > .dropdown {
  display: none !important;
}