/* ============================================================
   MKTONS — Header sticky, etapa compacta (2026-07-27)
   Ver mktons-sticky-header.php para el detalle de por qué cada regla existe.
   ============================================================ */

/* Etapa 1 (nativa Blueprint): el theme YA achica .cs-header__inner cuando el JS propio del theme
   (scripts.js → stickyScroll()) agrega .cs-scroll-sticky al pasar el umbral de --cs-header-height.
   Solo bajamos el valor de esa var (default = --cs-header-initial-height, 96px, sin efecto). */
:root {
	--cs-header-height: 86px;
}

/* El theme no achica el logo solo (solo el contenedor) — mismo target de Barnes: 64px -> 54px.
   Reusa la fórmula que el propio theme usa para el logo (max-height: header-height - 32px),
   atada ahora a la var compacta. La transition ya viene de .cs-header__logo (theme, 0.25s). */
.cs-navbar-sticky-enabled .cs-header.cs-scroll-sticky .cs-header__logo img {
	max-height: calc(var(--cs-header-height) - 32px);
}

/* Etapa 2: separación visual del contenido al bajar más (el theme no trae un segundo umbral).
   Clase .mktons-header-elevated puesta por sticky-header.js. Header ya tiene el mismo color que
   la página (decisión de diseño previa, no se toca) — no hace falta "colorear sólido", solo
   sombra + borde, igual que Barnes .is-solid pero sin el cambio de color/fondo. */
.cs-header {
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-header.mktons-header-elevated {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Dark mode: mismo patrón que usa el theme para sus propios dropdowns
   (.cs-header__nav-inner .sub-menu, style.css ~L3925) — sombra clara en vez de negra, porque
   negra sobre fondo oscuro no se ve. */
[data-scheme="inverse"] .cs-header.mktons-header-elevated,
[data-scheme="dark"] .cs-header.mktons-header-elevated {
	box-shadow: 0 6px 24px rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* QA en vivo (2026-07-27) detectó DOS lugares donde el theme mismo, al entrar en estado
   "stuck" (.cs-scroll-sticky) con sticky nativo, vuelve el fondo del header semitransparente +
   backdrop-blur (pensado para headers tipo overlay/glass sobre un hero):
     1) .cs-navbar-sticky-enabled .cs-header.cs-scroll-sticky { background: alpha } + :before blur
        — es el propio estado "pegado" del sticky nativo, SIEMPRE se dispara al comprimir (etapa 1).
     2) .cs-header.cs-header-smart-visible { background: alpha } + :before blur — scripts.js del
        theme sigue togglando esta clase aunque el body ya no tenga cs-navbar-smart-enabled
        (artefacto del JS del theme, no introducido por este cambio; su lógica de scroll-direction
        no está gateada por esa clase de body).
   Yago pidió explícitamente que la etapa 2 sea SOLO separación visual (sombra/borde), sin
   "colorear" el header porque ya tiene el color de la página — así que neutralizamos ambas y
   dejamos el fondo siempre opaco; el único efecto visual al bajar es el de arriba
   (.mktons-header-elevated). Selector de (1) repetido tal cual para igualar especificidad. */
.cs-navbar-sticky-enabled .cs-header.cs-scroll-sticky,
.cs-header.cs-header-smart-visible {
	background: var(--cs-color-header-background);
}
.cs-navbar-sticky-enabled .cs-header.cs-scroll-sticky:before,
.cs-header.cs-header-smart-visible:before {
	content: none;
}

/* Ancla interna de los posts de ranking: "¿Andas con prisa? Checa directo el ranking ↓" enlaza a
   #tabla-resultados, que en el HTML generado es un <a id="tabla-resultados"></a> vacío justo
   antes del <h2> "Ranking interactivo de...". Con header sticky, el salto nativo del navegador
   deja ese <h2> tapado detrás del header. Reservamos el alto máximo posible del header (el
   inicial, no el compacto, para cubrir el peor caso) + aire. */
#tabla-resultados {
	scroll-margin-top: calc(var(--cs-header-initial-height) + 24px);
}