/* ========================================
   MENÚ PRINCIPAL - shortcode [inacoop_menu]

   Todo el bloque (botón + panel) es markup propio: no hay selectores de
   Elementor ni overrides peleando con el widget Nav Menu. Las clases
   .mega-menu__* las genera Inacoop_Mega_Menu_Walker a partir de la jerarquía
   nativa Columna > Grupo > Item del menú "menu-principal".

   Los colores salen de las variables globales del kit de Elementor (con
   fallback), así siguen sincronizados si se editan desde el admin.
   ======================================== */

.inacoop-nav {
  --inacoop-nav-top: 0px;
  --inacoop-nav-bg: var(--e-global-color-34f2292, #0077A3);
  --inacoop-nav-fg: var(--e-global-color-secondary, #FFFFFF);
  --inacoop-nav-trigger-fg: var(--e-global-color-2d26496, #401E5E);

  display: flex;
  align-items: center;
}

/* ========================================
   BOTÓN
   ======================================== */

/* Ojo con la especificidad de los <button>: hello-biz trae
   `[type="button"]:focus { background-color: #c36; color: #fff }`, que suma
   (0,2,0) igual que un selector de dos clases -- el atributo y la pseudo-clase
   cuentan los dos en la columna de clases. Como theme.css carga después que
   este archivo, un empate lo gana el theme y el botón se pinta rosado al
   hacerle foco. Por eso acá se califica con el tipo (`button.clase`) y se
   declaran hover/focus explícitos: gana por especificidad, sin depender del
   orden de carga ni de !important. */
.inacoop-nav button.inacoop-nav__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  margin: 0;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--inacoop-nav-trigger-fg);
  font-family: Asap, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  white-space: nowrap;
  cursor: pointer;
}

.inacoop-nav button.inacoop-nav__trigger:hover,
.inacoop-nav button.inacoop-nav__trigger:focus,
.inacoop-nav button.inacoop-nav__trigger:active {
  background-color: transparent;
  color: var(--inacoop-nav-trigger-fg);
  text-decoration: none;
}

/* Al sacar el estilo de foco del theme hay que reponer un anillo visible,
   si no el botón queda sin indicación de foco para teclado. */
.inacoop-nav button.inacoop-nav__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Íconos del Figma (node 1203-6755): 32px, los SVG traen
   preserveAspectRatio="none", así que tamaño fijo. */
.inacoop-nav .inacoop-nav__trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.inacoop-nav .inacoop-nav__trigger-icon img {
  display: block;
  width: 2rem;
  height: 2rem;
  max-width: none;
  border-radius: 0;
}

.inacoop-nav .inacoop-nav__trigger-icon--close,
.inacoop-nav.is-open .inacoop-nav__trigger-icon--open {
  display: none;
}

.inacoop-nav.is-open .inacoop-nav__trigger-icon--close {
  display: flex;
}

/* ========================================
   PANEL

   Fijo, ancho completo, arrancando abajo del header. El top lo escribe el JS
   en --inacoop-nav-top midiendo el header en vivo (nav.js), en vez de estar
   hardcodeado por breakpoint.
   ======================================== */

.inacoop-nav .inacoop-nav__panel {
  position: fixed;
  top: var(--inacoop-nav-top);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--inacoop-nav-bg);
  box-sizing: border-box;
}

.inacoop-nav .inacoop-nav__panel[hidden] {
  display: none;
}

.inacoop-nav .inacoop-nav__columns {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inacoop-nav .inacoop-nav__panel li {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}

.inacoop-nav .mega-menu__groups,
.inacoop-nav .mega-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* El walker usa .screen-reader-text para la etiqueta del toggle. La definimos
   acá para no depender de que la traiga el theme. */
.inacoop-nav .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   ITEMS - común a todos los breakpoints
   Figma: node 1203-6832 (desktop) / 1210-6878 (mobile).
   ======================================== */

.inacoop-nav .mega-menu__group {
  position: relative;
}

.inacoop-nav .mega-menu__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--inacoop-nav-fg);
  font-family: Asap, sans-serif;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
}

/* El kit de Elementor colorea a:hover con (0,2,1): se repone el blanco. */
.inacoop-nav a.mega-menu__group-title:hover,
.inacoop-nav a.mega-menu__group-title:focus,
.inacoop-nav a.mega-menu__item-link:hover,
.inacoop-nav a.mega-menu__item-link:focus {
  color: var(--inacoop-nav-fg);
}


.inacoop-nav .mega-menu__item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--inacoop-nav-fg);
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4875rem;
  text-decoration: none;
  background: transparent;
}

.inacoop-nav .mega-menu__arrow {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.inacoop-nav .mega-menu__chevron {
  flex-shrink: 0;
  width: 0.875rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

.inacoop-nav .mega-menu__icon {
  flex-shrink: 0;
  color: var(--inacoop-nav-fg);
}

.inacoop-nav li.mega-menu__item {
  display: block;
}

/* ========================================
   ESTADOS DE LOS LINKS
   Distintos por breakpoint, como el Figma:
   - Mobile (node 1219-13): presionado más oscuro, foco amarillo, página
     actual con fondo más claro (sin la barra blanca del nodo: así lo
     pidió el usuario, 2026-10-01). Hover sólo con
     mouse (en touch quedaría "pegado"), del color de presionado.
   - Desktop (node 1210-6826): hover con fondo blanco al 10 % + texto
     subrayado (títulos e items), foco con borde blanco de 2px. El Figma
     no define página actual para desktop: se deja el mismo fondo que en
     mobile para que se note dónde está uno.
   ======================================== */

.inacoop-nav a.mega-menu__item-link.is-current {
  background-color: #1289b5;
}

@media (max-width: 1024px) {
  .inacoop-nav a.mega-menu__item-link {
    border-radius: 2px;
  }

  .inacoop-nav a.mega-menu__item-link:active {
    background-color: #005d7f;
  }

  .inacoop-nav a.mega-menu__group-title:focus-visible,
  .inacoop-nav a.mega-menu__item-link:focus-visible {
    outline: 2px solid #f5c70d;
    outline-offset: -2px;
    border-radius: 2px;
  }
}

@media (max-width: 1024px) and (hover: hover) {
  .inacoop-nav a.mega-menu__item-link:hover {
    background-color: #005d7f;
  }
}

@media (min-width: 1025px) {
  .inacoop-nav a.mega-menu__item-link {
    border-radius: 0.25rem;
  }

  .inacoop-nav a.mega-menu__group-title:hover,
  .inacoop-nav a.mega-menu__item-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .inacoop-nav a.mega-menu__group-title:hover .mega-menu__label,
  .inacoop-nav a.mega-menu__item-link:hover .mega-menu__label {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
  }

  .inacoop-nav a.mega-menu__group-title:focus-visible,
  .inacoop-nav a.mega-menu__item-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    border-radius: 0.25rem;
  }
}

/* ========================================
   DESKTOP - 4 columnas (node 1203-6908)
   ======================================== */
@media (min-width: 1025px) {

  .inacoop-nav .inacoop-nav__panel {
    max-height: calc(100vh - var(--inacoop-nav-top));
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  /* Mismo ancho de contenido que el header (1160px). Las columnas guardan
     la proporción del Figma (212 / 302 / 318 / 264 sobre 1192px). */
  .inacoop-nav .inacoop-nav__columns {
    box-sizing: content-box;
    display: grid;
    grid-template-columns: 212fr 302fr 318fr 264fr;
    column-gap: 2rem;
    align-items: start;
    max-width: 1160px;
    margin-inline: auto;
    padding: 2rem 1.5rem 2.5rem;
  }

  .inacoop-nav .mega-menu__groups {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  /* El toggle y el item "Ir a {grupo}" sólo existen para el acordeón
     mobile: en desktop el título del grupo ya es el link. El item va con
     `li` para ganarle a `.inacoop-nav li.mega-menu__item { display: block }`. */
  .inacoop-nav .mega-menu__toggle,
  .inacoop-nav li.mega-menu__item--principal {
    display: none;
  }

  .inacoop-nav .mega-menu__group-title {
    box-sizing: border-box;
    height: 2.75rem;
    padding: 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.5625rem;
    white-space: nowrap;
  }

  .inacoop-nav .mega-menu__group--has-children:not(.cta) > .mega-menu__group-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .inacoop-nav .mega-menu__items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.5rem;
  }

  .inacoop-nav .mega-menu__item-link {
    min-height: 2.75rem;
    padding: 0 0.5rem;
    white-space: nowrap;
  }

  /* "Accesos directos" (node 1203-6995): 17px y flecha SVG de 14px. */
  .inacoop-nav .mega-menu__item--cta .mega-menu__item-link {
    font-size: 1.0625rem;
    line-height: 1.575rem;
  }

  .inacoop-nav .mega-menu__item--cta .mega-menu__icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.55;
  }
}

/* ========================================
   MOBILE Y TABLET - ACORDEÓN (node 1210-6878)
   ======================================== */
@media (max-width: 1024px) {

  .inacoop-nav .inacoop-nav__panel {
    height: calc(100vh - var(--inacoop-nav-top));
    height: calc(100dvh - var(--inacoop-nav-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  /* "Desenvuelve" la columna: sus grupos pasan a apilarse directo, en vez de
     quedar agrupados visualmente por columna. */
  .inacoop-nav .mega-menu__column,
  .inacoop-nav .mega-menu__groups {
    display: block;
  }

  .inacoop-nav .mega-menu__group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* Fila completa (título + chevron) del acordeón: el <li> es el flex row,
     y la lista de items baja a la fila siguiente (wrap). */
  .inacoop-nav li.mega-menu__group--has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* La fila del grupo es el botón que despliega (título + chevron): un
     solo blanco de toque. El link a la página del grupo va como primer
     item de la lista ("Ir a {grupo}", walker). */
  .inacoop-nav li.mega-menu__group--has-children > .mega-menu__group-title {
    display: none;
  }

  /* Grupo sin hijos (link suelto). */
  .inacoop-nav li.mega-menu__group--link > .mega-menu__group-title {
    min-height: 3.5rem;
    padding: 1rem;
    font-size: 1.125rem;
  }

  /* Mismo problema de especificidad que el trigger: es un <button
     type="button">, así que hay que calificar con el tipo y declarar los
     estados, o hello-biz lo pinta de rosado al tocarlo. Medidas del Figma
     (node 1210-6881): 56px de alto, 16px a la izquierda, 12px a la
     derecha del chevron. */
  .inacoop-nav button.mega-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: 0.375rem 0.75rem 0.375rem 1rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--inacoop-nav-fg);
    font-family: Asap, sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4625rem;
    text-align: left;
    white-space: normal;
    cursor: pointer;
  }

  .inacoop-nav button.mega-menu__toggle:hover,
  .inacoop-nav button.mega-menu__toggle:focus {
    background-color: transparent;
    color: var(--inacoop-nav-fg);
  }

  .inacoop-nav button.mega-menu__toggle:active {
    background-color: #005d7f;
    color: var(--inacoop-nav-fg);
  }

  .inacoop-nav button.mega-menu__toggle:focus-visible {
    outline: 2px solid #f5c70d;
    outline-offset: -2px;
  }

  .inacoop-nav .mega-menu__toggle-label {
    min-width: 0;
  }

  .inacoop-nav .mega-menu__toggle .mega-menu__toggle-icon {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    max-width: none;
    border-radius: 0;
    transition: transform 0.2s ease;
    pointer-events: none;
  }

  .inacoop-nav .mega-menu__toggle[aria-expanded="true"] .mega-menu__toggle-icon {
    transform: rotate(180deg);
  }

  /* Lista de items: ocupa toda la fila, debajo del título. */
  .inacoop-nav .mega-menu__items {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0 1rem 0.75rem;
  }

  .inacoop-nav .mega-menu__group.is-open .mega-menu__items {
    display: flex;
  }

  .inacoop-nav .mega-menu__item-link {
    min-height: 2.75rem;
    margin: 0 -0.5rem;
    padding: 0 1rem;
  }

  .inacoop-nav .mega-menu__item-link .mega-menu__chevron {
    color: #fff;
  }

  .inacoop-nav .mega-menu__item--principal .mega-menu__arrow {
    font-size: 1.125rem;
  }

  /* "Accesos directos": sin encabezado ni acordeón, sólo sus links, con
     un separador arriba (node 1210-6939). */
  .inacoop-nav .mega-menu__group.cta {
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem 1rem;
  }

  .inacoop-nav .mega-menu__group.cta > .mega-menu__group-title,
  .inacoop-nav .mega-menu__group.cta > .mega-menu__toggle {
    display: none;
  }

  .inacoop-nav .mega-menu__group.cta .mega-menu__items {
    display: flex;
    padding: 0;
  }

  .inacoop-nav .mega-menu__item--cta .mega-menu__item-link {
    min-height: 3.5rem;
    margin: 0;
    padding: 0 1rem;
    line-height: 1.4625rem;
  }

  .inacoop-nav .mega-menu__item--cta .mega-menu__icon {
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.6;
  }

  /* Con el panel a pantalla completa, el scroll del fondo sólo estorba. */
  html.inacoop-nav-open,
  html.inacoop-nav-open body {
    overflow: hidden;
  }
}