/**
 * Header — arquitectura Home oficial, sección 1.
 * - Home (sin scroll): transparente, superpuesto sobre el Hero.
 * - Home (con scroll): fondo marfil sólido (ver header-scroll.js).
 * - Resto de páginas: siempre fondo marfil sólido, sin superposición.
 */

.site-header {
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--mka-header-height);
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 200ms ease, border-color 200ms ease;
}

/* Home: flota sobre el Hero (100svh), por eso no reserva espacio en el flujo. */
.site-header--transparent {
	position: fixed;
}

/* Resto de páginas: respeta el flujo normal, no tapa el contenido. */
.site-header--solid {
	position: sticky;
}

.site-header__inner {
	max-width: 1600px;
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--mka-espaciado-lg);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--mka-espaciado-md);
}

/**
 * Grid en vez de flex space-between: con solo un elemento entre logo
 * y bolsa, space-between no lo centra de verdad (queda desplazado
 * hacia el lado con menos "peso" visual). El grid 1fr/auto/1fr sí
 * centra el menú respecto al conjunto del header.
 */
.site-header__bolsa {
	justify-self: end;
}

.site-header__logo {
	font-family: var(--mka-font-display);
	font-size: 1.1375rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mka-color-texto);
	text-decoration: none;
	white-space: nowrap;
}

.site-header__logo:focus-visible,
.site-header__menu-list a:focus-visible,
.site-header__toggle:focus-visible,
.mka-hero__cta:focus-visible {
	outline: 2px solid var(--mka-color-burdeos);
	outline-offset: 4px;
}

/* Estados de fondo */
.site-header--solid,
.site-header--transparent.is-scrolled,
.site-header--menu-open {
	background-color: var(--mka-color-marfil);
	border-bottom-color: var(--mka-color-plata);
}

/* Navegación de escritorio */
.site-header__menu-list {
	display: flex;
	align-items: center;
	gap: var(--mka-espaciado-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu-list a {
	color: var(--mka-color-texto);
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: var(--mka-espaciado-xs) 0;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}

.site-header__menu-list a:hover,
.site-header__menu-list a:focus-visible {
	border-bottom-color: var(--mka-color-burdeos);
}

.site-header__menu-list .current-menu-item a {
	border-bottom-color: var(--mka-color-texto);
}

/* Bolsa — icono discreto, sin mini-carrito; el contador solo aparece con piezas dentro. */
.site-header__bolsa {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--mka-color-texto);
	text-decoration: none;
	flex-shrink: 0;
}

.site-header__bolsa:focus-visible {
	outline: 2px solid var(--mka-color-burdeos);
	outline-offset: 4px;
}

.site-header__bolsa-icono {
	display: block;
}

.site-header__bolsa-contador {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 1rem;
	font-size: 0.6875rem;
	line-height: 1;
	text-align: center;
	color: var(--mka-color-burdeos);
}

.site-header__bolsa-contador:empty {
	display: none;
}

/* Botón hamburguesa — solo visible en móvil */
.site-header__toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--mka-espaciado-xs);
	cursor: pointer;
}

.site-header__toggle-lines,
.site-header__toggle-lines::before,
.site-header__toggle-lines::after {
	display: block;
	width: 22px;
	height: 1px;
	background-color: var(--mka-color-texto);
	position: relative;
	transition: transform 200ms ease, opacity 200ms ease;
}

.site-header__toggle-lines::before {
	content: '';
	position: absolute;
	top: -7px;
}

.site-header__toggle-lines::after {
	content: '';
	position: absolute;
	top: 7px;
}

/**
 * 900px, no 767px: con el ícono de bolsa sumado al menú completo, el
 * header ya no cabía en anchos de tablet (768-899px) — se amplió el
 * rango del menú hamburguesa en vez de apretar el espaciado.
 */
@media (max-width: 900px) {
	.site-header__toggle {
		display: block;
	}

	.site-header__nav {
		position: fixed;
		inset: var(--mka-header-height) 0 0 0;
		background-color: var(--mka-color-marfil);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
	}

	.site-header--menu-open .site-header__nav {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.site-header__menu-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mka-espaciado-md);
		padding: var(--mka-espaciado-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__nav,
	.site-header__toggle-lines,
	.site-header__toggle-lines::before,
	.site-header__toggle-lines::after {
		transition: none;
	}
}