/**
 * Barra de navegación secundaria de un programa.
 *
 * Acompaña a patterns/organisms/menu-programa.php.
 *
 * Valores tomados del mockup «Rediseño de programas» (Figma, nodo 84:1180).
 *
 * Los colores de marca se declaran aquí como variables CSS con los MISMOS
 * nombres que las variables Sass del Pattern Lab (`$universidad-800`,
 * `$verde-lima-700`, `$negro` en base/_variables.scss). Están duplicados a
 * propósito: esta barra todavía no existe en el Pattern Lab, y mientras el
 * rediseño se itera conviene poder ajustarla sin pasar por build + deploy a
 * Firebase. Cuando la feature se cierre, mover estas reglas a
 * scss/organisms/_submenu-anclas.scss es reemplazar `var(--x)` por `$x` y
 * borrar este archivo.
 *
 * --menu-programa-top: desplazamiento del sticky desde el borde superior. Si
 * el sitio llega a tener un header fijo, se sobreescribe desde aquí y la barra
 * se acomoda sola.
 */

:root {
  --menu-programa-top: 0px;
  /* La sobreescribe menu-programa.js con la altura real de la barra. */
  --menu-programa-alto: 79px;

  /* Equivalen a las variables Sass del Pattern Lab (ver cabecera). */
  --universidad-800: #00522c;
  --verde-lima-700: #4d7b19;
  --negro: #1a1a1a;
}

/**
 * Compensa la barra al saltar a un ancla: sin esto el inicio de la sección
 * queda escondido detrás del menú. La clase `bpx-seccion` la inyecta el plugin
 * sim-bloques-programas en el primer bloque de cada sección.
 */
.bpx-seccion {
  scroll-margin-top: calc(var(--menu-programa-top) + var(--menu-programa-alto) + 16px);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }
}

.menu-programa {
  position: sticky;
  top: var(--menu-programa-top);
  z-index: 20;
  padding: 20px 0;
  background: #fff;
  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.2);
}

/**
 * El mockup dibuja el contenido de la barra a 1188px dentro de un marco de
 * 1400px; eso es el contenedor `.centrar` del theme (max-width 1200px), así
 * que se replica ese ancho en vez del número exacto del Figma para que las
 * anclas queden alineadas con el contenido de la página.
 */
.menu-programa__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.menu-programa__nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

.menu-programa__lista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.menu-programa__lista::-webkit-scrollbar {
  display: none;
}

.menu-programa__item {
  margin: 0;
  white-space: nowrap;
}

.menu-programa__enlace {
  display: inline-block;
  padding: 4px 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--negro);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.menu-programa__enlace:hover,
.menu-programa__enlace:focus-visible {
  color: var(--universidad-800);
  text-decoration: none;
  border-bottom-color: currentcolor;
}

.menu-programa__enlace.is-activo {
  font-weight: 700;
  color: var(--universidad-800);
  border-bottom-color: currentcolor;
}

.menu-programa__ctas {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

.menu-programa__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 39px;
  padding: 5px 16px;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--verde-lima-700);
  text-align: center;
  background: #fff;
  border: 2px solid var(--verde-lima-700);
  cursor: pointer;
}

.menu-programa__btn--primario {
  min-width: 166px;
  padding: 5px 18px;
  color: #fff;
  background: var(--verde-lima-700);
}

.menu-programa__icono .icon {
  width: 24px;
  height: 24px;
  fill: currentcolor;
}

@media (max-width: 1200px) {

  .menu-programa__inner {
    padding: 0 2%;
  }
}

@media (max-width: 1024px) {

  .menu-programa__btn {
    min-width: 0;
  }

  .menu-programa__btn--primario {
    min-width: 0;
  }
}

/**
 * Móvil: la barra se queda fija arriba y el menú scrollea en horizontal; los
 * CTA se separan a una barra fija inferior para que sigan presentes durante
 * toda la navegación sin comerse el ancho del menú.
 */
@media (max-width: 782px) {

  .menu-programa {
    padding: 0;
  }

  .menu-programa__inner {
    display: block;
    padding: 0;
  }

  .menu-programa__lista {
    padding: 10px 20px;
    scroll-padding-inline: 20px;
  }

  .menu-programa__ctas {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 21;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  }

  .menu-programa__btn {
    flex: 1 1 0;
    font-size: 1rem;
  }

  /* Espacio para que la barra de CTA no tape el final del contenido. */
  body:has(.menu-programa__ctas) {
    padding-bottom: 72px;
  }
}