/* PCW-STICKY-VERSION: v4-20261028-var-adminbar-flush */
/**
 * header-sticky-mobile.css — Fija el header en móvil también en la HOME.
 *
 * Problema medido (2026-10-28, sonda tools/pcw-header-sticky-probe.mjs, 390x844):
 *   - Home  (/)                          -> #masthead { position: relative }  => NO PEGA
 *   - Categoría (/categorias/portatiles) -> position: sticky, z-index 90      => PEGA
 *
 * Causa: la regla que fija el header en el resto del sitio es
 *   @media (max-width:1024px) { body .site-header { position: sticky; z-index: 90 } }
 * y esa hoja NO se carga en la home. Allí solo llega `#masthead { position: relative }`
 * de header.min.css, que además gana por especificidad (ID 1,0,0 > 0,1,1).
 *
 * HISTORIAL DE ESTA REGLA (para no repetir el error):
 *   v1  : `top: 0` fijo. Con sesión iniciada el header se metía BAJO la barra de
 *         administración de WordPress (32/46 px): se veía recortado.
 *   v2/v3: compensación hardcodeada `top: 32px` / `46px`. Si la barra NO ocupa ese
 *         espacio, queda una franja blanca arriba y el header flota en una
 *         posición intermedia: exactamente el síntoma reportado en móvil.
 *   v4 (esta): NO se inventa ninguna altura. Se usa la variable que publica el
 *         propio WordPress (`--wp-admin--admin-bar--height`, 32 px y 46 px en su
 *         propio media query) y, si no existe, el fallback es **0px**: el header
 *         se pega al borde superior del viewport, sin franjas ni huecos.
 *
 * Sin JS. Sin `!important`. Reversión: borrar este fichero y su enqueue.
 */
@media (max-width: 1024px) {
  #masthead.site-header {
    /* Prefijo para iOS/Safari antiguos: sin `-webkit-sticky` el valor se ignora. */
    position: -webkit-sticky;
    position: sticky;
    /* Anclaje limpio al borde superior del viewport. */
    top: 0;
    z-index: 90;
  }

  /* Solo si WordPress ha reservado espacio para su barra. La altura la da WP,
     no nosotros: si la variable no está (barra ausente o no reservada), 0px. */
  body.admin-bar #masthead.site-header {
    top: var(--wp-admin--admin-bar--height, 0px);
  }

  /* El header sticky no debe tapar el destino de un salto interno (#ancla). */
  html {
    scroll-padding-top: 80px;
  }
}
