/**
 * @layer components — header oscuro (ver referencia hero.jpg): mismo tono
 * que el panel del hero, sin topbar.
 *
 * En el home el header es fixed y transparente arriba de todo, superpuesto
 * al hero (que no tiene padding-top propio para el header, ver layout.css);
 * al scrollear pasa a vidrio oscuro con blur. En el resto de las páginas,
 * que no tienen un hero oscuro debajo, el header queda sólido siempre —
 * transparente ahí encima de contenido claro sería ilegible.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@keyframes santiago-header-vidrio {
	from {
		background: transparent;
		backdrop-filter: none;
		border-bottom-color: transparent;
	}
	to {
		background: color-mix(in oklab, var(--c-ink-900) 94%, transparent);
		backdrop-filter: blur(16px) saturate(1.4);
		border-bottom-color: color-mix(in oklab, var(--c-white) 12%, transparent);
	}
}

@layer components {
	.site-header {
		position: fixed;
		inset-inline: 0;
		top: 0;
		z-index: 9999;
		border-bottom: 1px solid transparent;
		background: var(--c-ink-900);
	}

	/* La admin bar de WP también es fixed/top:0 (32px desktop, 46px <783px):
	   sin esto queda tapada por (o tapa a) el header fixed del tema. */
	body.admin-bar .site-header {
		top: 32px;
	}

	@media (width < 783px) {
		body.admin-bar .site-header {
			top: 46px;
		}
	}

	/* Sólo el home tiene hero oscuro debajo: ahí el header arranca
	   transparente y se hace vidrio al scrollear (sin JS). */
	body.home .site-header {
		background: transparent;
		animation: santiago-header-vidrio linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	@supports not (animation-timeline: scroll()) {
		body.home .site-header {
			background: var(--c-ink-900);
		}
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
		padding-block: var(--space-4);
	}

	.site-header__marca {
		display: inline-flex;
		align-items: center;
	}

	.site-header__marca .custom-logo-link {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}

	.site-header__marca .custom-logo {
		display: block;
		height: 36px;
		width: auto;
		flex-shrink: 0;
	}

	.site-header__marca-enlace {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3);
		color: var(--c-white) !important;
		text-decoration: none !important;
	}

	.site-header__marca-icono {
		width: 28px;
		height: 28px;
	}

	.site-header__wordmark {
		font-family: var(--font-body);
		font-size: var(--text-sm);
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.site-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-2);
		color: var(--c-white);
	}

	.site-header__toggle .icono {
		width: 26px;
		height: 26px;
	}

	@media (width >= 1024px) {
		.site-header__toggle {
			display: none;
		}
	}
}