/**
 * @file
 * Custom navigation styles.
 *
 * Horizontal Superfish navigation and mobile off-canvas menu.
 */

/* ==========================================================
   Secondary navigation: temporary development rules
   ========================================================== */

/**
 * @file
 * Custom navigation styles.
 */

/* ==========================================================
   Hamburger button
   ========================================================== */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--color-rhazt);
  cursor: pointer;
}

.menu-toggle__icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 21px;
}



/* ==========================================================
   HAMBURGUESA: HOVER Y FOCO ACCESIBLE
   ========================================================== */

.menu-toggle {
  border-radius: 8px;
  transition: color 0.25s ease-in-out;
}

/* Hover: cambiar solo el color de las líneas */
.menu-toggle:hover {
  color: var(--color-independizate);
  background-color: transparent;
}

/* Foco visible para navegación con teclado */
.menu-toggle:focus-visible {
  outline: 2px solid var(--color-independizate);
  outline-offset: 3px;
}

/* Respetar las preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle {
    transition: none;
  }
}

.menu-toggle__icon span {
  display: block;
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

/* ==========================================================
   Off-canvas overlay
   ========================================================== */

.mobile-navigation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgb(0 0 0 / 45%);
}

.mobile-navigation-overlay[hidden] {
  display: none;
}

/* ==========================================================
   Off-canvas navigation panel
   ========================================================== */

#block-vuela-rioja-2026-navegacionprincipal-2 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;

  width: min(85vw, 380px);
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;

  padding: 0;
  margin: 0;

  background: #e6e6e6;
  color: #222;
  box-shadow: -5px 0 25px rgb(0 0 0 / 15%);

  transform: translateX(100%);
  visibility: hidden;

  transition:
    transform 0.25s ease,
    visibility 0.25s ease;
}

#block-vuela-rioja-2026-navegacionprincipal-2.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Ocultar el título del bloque dentro del panel. */
#block-vuela-rioja-2026-navegacionprincipal-2 > h2 {
  display: none;
}

/* Eliminar los marcadores heredados de Olivero. */
#block-vuela-rioja-2026-navegacionprincipal-2 .menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2 .menu-item--collapsed {
  list-style: none;
  list-style-image: none;
}

/* Listas verticales del panel. */
#block-vuela-rioja-2026-navegacionprincipal-2 ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

#block-vuela-rioja-2026-navegacionprincipal-2 li.menu-item {
  margin: 0;
  padding: 0;
}

#block-vuela-rioja-2026-navegacionprincipal-2 a {
  display: block;
  padding: 12px 0;
}

/* Botón de cierre, generado por JavaScript. */
.mobile-navigation__close {
  display: block;
  margin: 0 0 16px auto;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Bloquear el scroll de la página cuando el panel está abierto. */
body.navigation-open {
  overflow: hidden;
}

/* Respetar la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  #block-vuela-rioja-2026-navegacionprincipal-2 {
    transition: none;
  }
}

/* Acordeón del menú lateral: submenús cerrados inicialmente. */
#block-vuela-rioja-2026-navegacionprincipal-2
.menu-item--expanded > ul.menu {
  display: none;
}

/* Mostrar el submenú cuando su elemento padre esté abierto. */
#block-vuela-rioja-2026-navegacionprincipal-2
.menu-item--expanded.is-submenu-open > ul.menu {
  display: block;
}

/* Botones para expandir y contraer submenús. */
#block-vuela-rioja-2026-navegacionprincipal-2
.menu-item--expanded {
  position: relative;
}

/* Cada categoría y su botón comparten una misma fila. */
#block-vuela-rioja-2026-navegacionprincipal-2
li.menu-item--expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
}

/* El enlace ocupa únicamente la primera columna. */
#block-vuela-rioja-2026-navegacionprincipal-2
li.menu-item--expanded > a {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* El botón queda alineado con el enlace, en la segunda columna. */
#block-vuela-rioja-2026-navegacionprincipal-2
li.menu-item--expanded > .mobile-navigation__submenu-toggle {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  justify-self: stretch;
  align-self: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

/* Los submenús ocupan toda la fila siguiente. */
#block-vuela-rioja-2026-navegacionprincipal-2
li.menu-item--expanded > ul.menu {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

#block-vuela-rioja-2026-navegacionprincipal-2
.mobile-navigation__submenu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

#block-vuela-rioja-2026-navegacionprincipal-2
ul.menu[hidden] {
  display: none !important;
}

/* Categorías principales del menú lateral */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #1e1e1e;
  color: #fff;
  border-bottom: 1px solid #444;
}

/* Enlace principal: blanco sobre negro. */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > a {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  color: #fff;
  background-color: #1e1e1e;
  text-decoration: none;
}

/* Botón + / − */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > .mobile-navigation__submenu-toggle {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
  height: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background-color: #1e1e1e;
  cursor: pointer;
}

/* Submenús: fondo blanco y texto oscuro. */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > ul.menu {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 16px;
  background-color: #fff;
  color: #222;
}

/* Enlaces secundarios. */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > ul.menu a {
  display: block;
  padding: 10px 0;
  color: #222;
  background-color: #fff;
  text-decoration: none;
}

/* ==========================================================
   Efecto hover: subrayado de enlaces del menú lateral
   ========================================================== */

/* Transición suave para los enlaces */
#block-vuela-rioja-2026-navegacionprincipal-2 a {
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.2s ease;
}

/* Categorías principales: texto blanco sobre negro */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #fff;
}

/* Enlaces secundarios: texto oscuro sobre blanco */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > ul.menu a:hover {
  color: #222;
  text-decoration: underline;
  text-decoration-color: #222;
}


/* ==========================================================
   MENÚ SECUNDARIO: COLORES CORPORATIVOS
   ========================================================== */

/* Categorías principales */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded {
  transition:
    background-color 0.4s ease-in-out,
    border-color 0.4s ease-in-out;
}

/* Enlaces principales: transición suave */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > a {
  transition:
    background-color 0.4s ease-in-out,
    color 0.4s ease-in-out;
}

/* Botones de expansión (+ / −) */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > .mobile-navigation__submenu-toggle {
  transition:
    background-color 0.4s ease-in-out,
    color 0.4s ease-in-out;
}

/* R-HAZ-T */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(1).menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(1).menu-item--expanded > a,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(1).menu-item--expanded > .mobile-navigation__submenu-toggle {
  background-color: var(--color-rhazt);
}

/* Empléa-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(2).menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(2).menu-item--expanded > a,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(2).menu-item--expanded > .mobile-navigation__submenu-toggle {
  background-color: var(--color-empleate);
}

/* Fórma-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(3).menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(3).menu-item--expanded > a,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(3).menu-item--expanded > .mobile-navigation__submenu-toggle {
  background-color: var(--color-formate);
}

/* Independíza-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(4).menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(4).menu-item--expanded > a,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(4).menu-item--expanded > .mobile-navigation__submenu-toggle {
  background-color: var(--color-independizate);
}

/* Interésa-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(5).menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(5).menu-item--expanded > a,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(5).menu-item--expanded > .mobile-navigation__submenu-toggle {
  background-color: var(--color-interesate);
}

/* Espacio Creativo IRJ */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(6).menu-item--expanded,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(6).menu-item--expanded > a,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(6).menu-item--expanded > .mobile-navigation__submenu-toggle {
  background-color: var(--color-creativo);
}

/* Hover: aclarar ligeramente el enlace principal */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > a:hover {
  filter: brightness(1.12);
}

/* Transición del hover */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > a {
  transition:
    filter 0.4s ease-in-out,
    background-color 0.4s ease-in-out,
    color 0.4s ease-in-out;
}

/* Los submenús conservan el fondo blanco */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > ul.menu {
  background-color: #fff;
}

/* Los enlaces secundarios conservan el texto oscuro */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > ul.menu a {
  color: #222;
  background-color: #fff;
}


/* ==========================================================
   MENÚ SECUNDARIO: HOVER DE LOS SUBMENÚS
   Texto y subrayado con el color corporativo del padre
   ========================================================== */

/* Preparar los enlaces secundarios para el efecto */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li.menu-item--expanded > ul.menu a {
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition:
    color 0.4s ease-in-out,
    text-decoration-color 0.4s ease-in-out,
    background-color 0.4s ease-in-out;
}

/* R-HAZ-T */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(1) > ul.menu a:hover,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(1) > ul.menu a:focus-visible {
  color: var(--color-rhazt);
  text-decoration: underline;
  text-decoration-color: var(--color-rhazt);
}

/* Empléa-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(2) > ul.menu a:hover,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(2) > ul.menu a:focus-visible {
  color: var(--color-empleate);
  text-decoration: underline;
  text-decoration-color: var(--color-empleate);
}

/* Fórma-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(3) > ul.menu a:hover,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(3) > ul.menu a:focus-visible {
  color: var(--color-formate);
  text-decoration: underline;
  text-decoration-color: var(--color-formate);
}

/* Independíza-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(4) > ul.menu a:hover,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(4) > ul.menu a:focus-visible {
  color: var(--color-independizate);
  text-decoration: underline;
  text-decoration-color: var(--color-independizate);
}

/* Interésa-TE */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(5) > ul.menu a:hover,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(5) > ul.menu a:focus-visible {
  color: var(--color-interesate);
  text-decoration: underline;
  text-decoration-color: var(--color-interesate);
}

/* Espacio Creativo IRJ */
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(6) > ul.menu a:hover,
#block-vuela-rioja-2026-navegacionprincipal-2
> ul.menu > li:nth-child(6) > ul.menu a:focus-visible {
  color: var(--color-creativo);
  text-decoration: underline;
  text-decoration-color: var(--color-creativo);
}

/* Respetar las preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  #block-vuela-rioja-2026-navegacionprincipal-2
  > ul.menu > li.menu-item--expanded > ul.menu a {
    transition: none;
  }
}



/* ==========================================================
   MENÚ PRINCIPAL SUPERFISH
   Centrado horizontal
   ========================================================== */

.region-primary-menu {
  display: flex;
  justify-content: center;
  width: 100%;
}

.region-primary-menu nav {
  width: 100%;
  box-sizing: border-box;
  padding: 2.1em 0.5em 1.1em 0.5em;
}

.region-primary-menu ul.sf-menu.sf-horizontal {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}



/* ==========================================
   MENÚ PRINCIPAL SUPERFISH - R-HAZ-T
   Identidad visual Vuela
   ========================================== */

/* Paleta de colores por sección */
#superfish-main {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Elementos principales */
#superfish-main > li {
  margin: 0;
  padding: 0;
}

/* Botones principales */
#superfish-main > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* Colores de los seis botones */
#superfish-main > li:nth-child(1) > a {
  background-color: var(--color-rhazt);
}

#superfish-main > li:nth-child(2) > a {
  background-color: var(--color-empleate);
}

#superfish-main > li:nth-child(3) > a {
  background-color: var(--color-formate);
}

#superfish-main > li:nth-child(4) > a {
  background-color: var(--color-independizate);
}

#superfish-main > li:nth-child(5) > a {
  background-color: var(--color-interesate);
}

#superfish-main > li:nth-child(6) > a {
  background-color: var(--color-creativo);
}

/* Hover y foco de teclado */
#superfish-main > li > a:hover,
#superfish-main > li > a:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 4px 10px rgb(0 0 0 / 16%);
}

/* Foco accesible */
#superfish-main > li > a:focus-visible {
  outline: 3px solid #263746;
  outline-offset: 3px;
}

/* ==========================================
   SUBMENÚS
   ========================================== */

/* Contenedor desplegable */
#superfish-main ul {
  box-sizing: border-box;
  margin-top: 6px;
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #dce2e8;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  list-style: none;
}

/* Enlaces de los submenús */
#superfish-main ul li a {
  display: block;
  padding: 11px 14px;
  border-radius: 5px;
  border-bottom: 2px solid transparent;
  background-color: #ffffff;
  color: #263746;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Color del subrayado según el botón padre */
#superfish-main > li:nth-child(1) ul li a {
  --submenu-accent: var(--color-rhazt);
}

#superfish-main > li:nth-child(2) ul li a {
  --submenu-accent: var(--color-empleate);
}

#superfish-main > li:nth-child(3) ul li a {
  --submenu-accent: var(--color-formate);
}

#superfish-main > li:nth-child(4) ul li a {
  --submenu-accent: var(--color-independizate);
}

#superfish-main > li:nth-child(5) ul li a {
  --submenu-accent: var(--color-interesate);
}

#superfish-main > li:nth-child(6) ul li a {
  --submenu-accent: var(--color-creativo);
}

/* Hover del submenú: fondo suave y subrayado */
#superfish-main ul li a:hover,
#superfish-main ul li a:focus-visible {
  color: var(--submenu-accent, #263746);
  background-color: #f5f6f8;
  border-bottom-color: var(--submenu-accent, #263746);
}

/* Foco visible en enlaces desplegados */
#superfish-main ul li a:focus-visible {
  outline: 2px solid var(--submenu-accent, #263746);
  outline-offset: -2px;
}

/* ==========================================
   ELIMINAR FLECHAS
   ========================================== */

#superfish-main .sf-sub-indicator {
  display: none !important;
}

#superfish-main > li.menuparent > a::after {
  content: none !important;
  display: none !important;
}

/* Reducir animaciones según preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  #superfish-main > li > a,
  #superfish-main ul li a {
    transition: none;
  }
}


/* Eliminar el fondo residual en las esquinas redondeadas */
#superfish-main > li {
  background: transparent !important;
  border: none;
  box-shadow: none;
}

#superfish-main > li > a {
  background-clip: padding-box;
}

/* Evitar fondos heredados del tema */
#superfish-main > li.sf-depth-1,
#superfish-main > li.sf-depth-1 > a {
  background-color: transparent;
}

/* Recuperar el color propio de cada botón */
#superfish-main > li:nth-child(1) > a {
  background-color: var(--color-rhazt);
}

#superfish-main > li:nth-child(2) > a {
  background-color: var(--color-empleate);
}

#superfish-main > li:nth-child(3) > a {
  background-color: var(--color-formate);
}

#superfish-main > li:nth-child(4) > a {
  background-color: var(--color-independizate);
}

#superfish-main > li:nth-child(5) > a {
  background-color: var(--color-interesate);
}

#superfish-main > li:nth-child(6) > a {
  background-color: var(--color-creativo);
}


/* ==========================================
   CORREGIR FONDOS DE LOS SUBMENÚS
   ========================================== */

/* Los elementos de la lista no deben tener fondo */
#superfish-main ul li {
  background: transparent !important;
  border: none;
  box-shadow: none;
}

/* El fondo blanco pertenece al enlace */
#superfish-main ul li > a {
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 5px;
}

/* Hover: fondo suave y subrayado de color */
#superfish-main ul li > a:hover,
#superfish-main ul li > a:focus-visible {
  background-color: #f5f6f8;
  border-bottom-color: var(--submenu-accent, #263746);
}


/* ==========================================================
   TRANSICIONES SUAVES DEL MENÚ SUPERFISH
   ========================================================== */

/* Botones principales */
#superfish-main > li > a {
  transition:
    background-color 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out,
    filter 0.4s ease-in-out;
}

/* Enlaces de los submenús */
#superfish-main ul li > a {
  transition:
    background-color 0.4s ease-in-out,
    color 0.4s ease-in-out,
    border-color 0.4s ease-in-out;
}


/* Borde del contenedor del submenú con el color de su padre */
#superfish-main > li:nth-child(1) > ul {
  border: 1px solid var(--color-rhazt);
}

#superfish-main > li:nth-child(2) > ul {
  border: 1px solid var(--color-empleate);
}

#superfish-main > li:nth-child(3) > ul {
  border: 1px solid var(--color-formate);
}

#superfish-main > li:nth-child(4) > ul {
  border: 1px solid var(--color-independizate);
}

#superfish-main > li:nth-child(5) > ul {
  border: 1px solid var(--color-interesate);
}

#superfish-main > li:nth-child(6) > ul {
  border: 1px solid var(--color-creativo);
}

/* Separación de 2 px entre cada botón principal y su submenú */
#superfish-main > li > ul {
  margin-top: 6px !important;
}

@media screen and (max-width: 839px) {
  .region-primary-menu .block-superfish {
    display: none;
  }
}