/* hide-header.css
   Estilos que controlan la animación de ocultado/mostrado del header y bottom nav.
   No toca colores ni sombras — sólo transform/opacity/visibility para ser seguro
   con modo claro/oscuro y estilos existentes. */

/* Header (usa .is-hidden para no colisionar con otras utilidades) */

/* Header: mover completamente hacia arriba y ocultar opacidad */
.site-header {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}

.site-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Bottom nav: mover completamente hacia abajo y ocultar opacidad.
   Usamos .is-hidden para que sea el mismo selector que el header y ocurra
   en el mismo frame cuando JS lo togglea. También incluimos el selector
   .mobile-bottom-nav.is-hidden por compatibilidad. */
.bottom-nav,
.mobile-bottom-nav {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}

.bottom-nav.is-hidden,
.mobile-bottom-nav.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Seguridad: si el header no es fixed/sticky en algún layout, la transformación puede empujar contenido.
   Si tu layout no usa header sticky/fixed, considera añadir padding-top al <main> para compensar. */