/*
 * Header de navegación — mecánica de colapso al scrollear.
 * Calcado de front-dev-fdual/assets/css/input.css (esa versión ya está
 * pulida y probada), adaptado a los colores, el logo único y las partículas
 * de la Unidad de Innovación. Los ids cambian de #header-inner/#header-logos
 * /#header-nav/.logoUTU a #headerInner/#headerLogos/#headerNav/#headerLogo,
 * pero la estructura y los valores son los mismos.
 *
 * Todo lo que Tailwind resuelve directo (colores, tipografía, spacing) va
 * como clases en el HTML. Acá el mecanismo que Tailwind no puede expresar:
 * el flip de flex-direction column->row al cruzar el umbral de scroll. El
 * toggle de la clase .header-scrolled — con histéresis para evitar
 * parpadeo — y el swap del logo viven en src/scripts/menu.js.
 */

html {
  scroll-behavior: smooth;
  /* El header sticky cambia de altura al colapsar. Sin esto, el "scroll
     anchoring" del navegador compensa ese salto de layout ajustando scrollY
     para que el contenido no "salte" — y esa compensación resta justo lo
     suficiente como para cruzar de nuevo el umbral de salida, reexpandiendo
     el header, que vuelve a cruzar el de entrada, etc.: bucle de
     expande/repliega cerca del top. */
  overflow-anchor: none;
}

#siteHeader {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background-color, box-shadow;
}

#siteHeader.header-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#headerInner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#headerLogos {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#headerLogo {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#headerNav {
  display: none;
}

@media (min-width: 768px) {
  #headerInner {
    height: 144px;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
  }

  #headerLogos {
    height: 88px;
    justify-content: flex-start;
    gap: 1.5rem;
  }

  #headerLogo {
    height: 2.75rem;
  }

  #headerNav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 56px;
    flex-shrink: 0;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #siteHeader.header-scrolled {
    background-color: rgb(0, 136, 204); /* anep_cyan_two */
  }

  #siteHeader.header-scrolled #headerInner {
    flex-direction: row;
    align-items: center;
    height: 64px;
  }

  #siteHeader.header-scrolled #headerLogos {
    height: 64px;
    flex-shrink: 0;
  }

  #siteHeader.header-scrolled #headerLogo {
    height: 2rem;
  }

  #siteHeader.header-scrolled #headerNav {
    margin-left: auto;
    height: 64px;
  }
}