/*
  Cabecera
  - Por defecto es sólida (funciona sin JS).
  - header.js calcula --header-fade (0 a 1) según el scroll dentro del hero:
    0 arriba del todo (transparente) y 1 en cuanto el hero termina (sólida,
    el estado de siempre). El fondo sigue ese valor en todo momento, así
    que la opacidad sube progresivamente con el scroll, sin saltos.
  - El color de texto/iconos pasa por 3 fases mientras sube la opacidad:
    blanco (data-header-text="light") → negro puro, de paso
    (data-header-text="ink") → gris de marca (sin atributo, el color sólido
    de siempre). El color NUNCA se anima (no está en `transition`): se
    cambia de golpe, justo en los dos puntos donde el color de salida y el
    de entrada cumplen 4.5:1 a la vez. Si el color se animase (interpolando
    blanco → gris), a mitad de la interpolación el texto pasaría por un gris
    que coincide con la luminancia del fondo en ese instante y el contraste
    caería a ~0 un instante, aunque sea breve: por eso el salto es instantáneo
    en vez de una transición de color. El fondo (que si se anima, vía
    --header-fade) y el texto cambian de forma independiente.
  - "Regístrate" mantiene siempre su mismo estilo con fondo (button--primary)
    para no mezclarse con el contenido variable del hero detrás.
  - Escritorio amplio (>= 1440px, --breakpoint-wide): navegación visible.
    Por debajo (tablet y portátil pequeño): "Regístrate" + botón Menú
    (menú a pantalla completa, menu.css). Con los 6 enlaces + Regístrate + Accede
    no cabe una fila legible antes de ese ancho.
  - Móvil: "Regístrate" se oculta mientras se ve la llamada fija (sticky-cta.js)
    y siempre por debajo de 400px, donde no cabe junto al nombre y el menú.
  - Estado con sesión: <html data-session="true"> muestra "Acceder al área privada"
    en lugar de "Regístrate" y "Accede" (spec apartado 2, CA-M1-12).
*/

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  --header-fade: 1; /* sin JS, o fuera del hero: siempre sólida */
  background: rgb(250 248 246 / calc(var(--header-fade) * 0.96));
  color: var(--gray-900);
  box-shadow: 0 1px 0 rgb(230 225 219 / var(--header-fade));
  transition: box-shadow var(--duration-base) var(--easing-standard);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgb(250 248 246 / calc(var(--header-fade) * 0.88));
    backdrop-filter: blur(calc(var(--header-fade) * 12px)) saturate(calc(1 + var(--header-fade) * 0.2));
  }
}

.site-header[data-header-text="light"],
.site-header[data-header-text="ink"] {
  --focus: var(--secondary-300);
}

.site-header[data-header-text="light"] {
  color: #fff;
}

.site-header[data-header-text="ink"] {
  color: #000;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-6);
  min-height: var(--header-height);
}

/* Marca: caja de logo + nombre provisional */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3);
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.brand__logo {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  font-size: 0.5625rem;
  line-height: 1;
  border-color: currentColor;
  color: inherit;
}

.brand__name {
  white-space: nowrap;
  font-family: var(--heading);
  font-size: var(--font-size-5);
  line-height: var(--line-height-9);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  letter-spacing: -0.01em;
}

/* Navegación principal (solo escritorio) */
.main-nav {
  display: none;
}

/* Si el texto se amplía y no cabe, la navegación salta de línea (WCAG 1.4.4) */
.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--gap-6);
}

.main-nav a {
  position: relative;
  display: block;
  padding-block: var(--padding-2);
  color: inherit;
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.main-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.25rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--easing-standard);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Acciones: Accede, Regístrate, Menú */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}

.header-link {
  display: none;
  align-items: center;
  gap: var(--gap-2);
  min-height: 2.75rem;
  color: inherit;
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.header-link:hover {
  text-decoration: underline;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 2.75rem;
  padding: var(--padding-2) var(--padding-3);
  border: 0;
  border-radius: var(--border-radius-md);
  background: none;
  color: inherit;
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  font-weight: var(--font-weight-semibold);
}

/*
  PENDIENTE (Víctor, al pasar a Astro): animar este icono de hamburguesa a aspa,
  inspirado en el efecto de
  https://21st.dev/community/components?q=menu&preview=%2F%40efferd%2Fcomponents%2Fmenu-toggle
  (replicar el efecto, no copiar su código: es React + Tailwind, este proyecto no usa ese stack).
  Requisitos: debe deshacerse igual al cerrar que al abrir (misma transición en los
  dos sentidos), y el icono no puede desplazarse de su sitio al animarse — solo se
  transforma su contenido interno (barras/trazo), nunca el contenedor .menu-toggle.
  Se probó una versión con tres <line> rotando sobre transform-box: view-box
  (pivote en el centro del icono) y quedó descartada por no acercarse al efecto
  pedido; queda como referencia de un enfoque que sí es fiable para que no cruce
  mal el aspa, por si sirve de punto de partida.
*/

/* Sobre la foto el foco es un doble anillo (blanco por dentro, oscuro por fuera):
   contrasta tanto con el cielo claro como con las zonas oscuras (WCAG 1.4.11) */
.site-header[data-header-text="light"] :focus-visible,
.site-header[data-header-text="ink"] :focus-visible {
  outline: 3px solid var(--gray-900);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.site-header[data-header-text="light"] .button--primary,
.site-header[data-header-text="ink"] .button--primary {
  box-shadow: 0 4px 16px rgb(31 26 24 / 0.25);
}

/* Visibilidad según sesión */
[data-session="true"] .only-guest,
html:not([data-session="true"]) .only-session {
  display: none !important;
}

@media (max-width: 767px) {
  .brand__name {
    font-size: var(--font-size-3);
    line-height: var(--line-height-7);
  }

  .site-header .button--small {
    padding-inline: var(--padding-4);
  }

  .brand__logo {
    width: 2.25rem;
    height: 2.25rem;
  }

  .site-header__inner {
    gap: var(--gap-3);
  }

  /* En móvil el botón Menú queda solo con icono; la etiqueta sigue para lectores */
  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .menu-toggle {
    width: 2.75rem;
    justify-content: center;
    padding: 0;
  }

  .menu-toggle .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Mientras se ve la barra fija de registro, la cabecera no repite "Regístrate" */
  [data-sticky-cta-visible] .site-header .header-register {
    display: none;
  }
}

/* Por debajo de 400px no cabe: "Regístrate" sigue en el hero, el menú y la barra fija (WCAG 1.4.10) */
@media (max-width: 399px) {
  .site-header .header-register {
    display: none;
  }
}

@media (min-width: 768px) {
  .header-link {
    display: inline-flex;
  }
}

/* Escritorio amplio (--breakpoint-wide): la navegación completa ya cabe en una fila */
@media (min-width: 1440px) {
  .main-nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .header-actions {
    gap: var(--gap-5);
  }
}