/*
 * Cabecera (cabecera.md): un componente, tres estados.
 *   --sitio    A · superpuesta al contenido, fondo transparente; en las
 *              páginas interiores (--fija) acompaña al bajar
 *   --menu     B · primera fila de la capa del menú
 *   --cortina  C · fija dentro de la cortina (la del 02 y la del método
 *              del 01)
 */

.loha-cabecera {
	/* Alto del logo, fluido de 32 a 56 px: 32 a 390, 56 a 1440. */
	--logo-alto: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);
	display: flex;
	align-items: center;
	gap: var(--medianil);
	min-height: var(--cabecera);
	padding-inline: var(--margen);
	color: var(--azul);
	font-family: var(--sans);
	font-size: var(--fs-interfaz);
	line-height: var(--lh-interfaz);
}

/* A · sitio. Arriba de la página, superpuesta a la primera sección. */
.loha-cabecera--sitio {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--z-cabecera);
}

/* Con sesión iniciada WordPress baja el documento lo que mide la barra
   (margin-top en <html>, 32 o 46 px); la cabecera baja lo mismo. */
.admin-bar .loha-cabecera--sitio {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* La plantilla la pide en blanco si su primera sección es oscura:
   get_header( null, array( 'fondo' => 'oscuro' ) ). */
.loha-cabecera--sobre-oscuro {
	color: var(--blanco);
}

/* ── Cabecera que acompaña (--fija) ───────────────────── */
/* Páginas interiores, con JavaScript (componentes.md, S5 revertida). Pegada
   arriba al bajar (sticky) y, con el margen negativo, superpuesta a la
   primera sección como la absoluta: arriba de la página se ve igual que
   sin script, transparente y con el color de su apertura. En cuanto se
   baja, cabecera.js le pone .loha-cabecera--bajada: fondo liso
   --beige-50 y siempre azul, así no hace falta saber qué sección oscura
   tiene debajo. Sin JavaScript no acompaña: transparente y fija sobre
   una sección oscura dejaría de leerse. */
.loha-js .loha-cabecera--fija {
	position: sticky;
	top: 0;
	height: var(--cabecera);
	margin-bottom: calc(-1 * var(--cabecera));
	transition:
		background-color var(--t-hover) ease-out,
		color var(--t-hover) ease-out;
}

/* Con la barra de administración fija (más de 600 px), debajo de ella.
   Por debajo, la barra se va con la página y la cabecera sube a 0. */
.loha-js .admin-bar .loha-cabecera--fija {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.loha-js .admin-bar .loha-cabecera--fija {
		top: 0;
	}
}

/* Las anclas, y el foco al tabular, dejan arriba el hueco de la cabecera
   (y de la barra de administración, donde es fija): scroll-padding en el
   documento vale para todos los destinos a la vez. selector.js lo lee
   para colocar a la persona al principio de un ámbito. */
html.loha-js:has(.loha-cabecera--fija) {
	scroll-padding-top: var(--cabecera);
}

@media (min-width: 601px) {
	html.loha-js:has(.admin-bar .loha-cabecera--fija) {
		scroll-padding-top: calc(var(--cabecera) + var(--wp-admin--admin-bar--height, 32px));
	}
}

.loha-cabecera--fija.loha-cabecera--bajada {
	background-color: var(--beige-50);
	color: var(--azul);
}

/* Arriba de la página, transparente solo donde la foto de apertura llega
   al borde superior de la pantalla: la portada y el 03 en todos los
   anchos y el 02 desde 1024 (--papel-tv). En el resto, el fondo del
   papel. Es el mismo --beige-50 que esas páginas tienen detrás, así que
   no cambia lo que se ve: nada puede pasar bajo una cabecera
   transparente. Tabla en cabecera.md. */
.loha-cabecera--papel {
	background-color: var(--beige-50);
}

@media (max-width: 1023px) {
	.loha-cabecera--papel-tv {
		background-color: var(--beige-50);
	}
}

.loha-cabecera--fija.loha-cabecera--bajada .loha-cabecera__numero {
	color: var(--beige-600);
}

/* HABLEMOS con fondo (--relleno), si se elige: sobre oscuro se invierte
   (accion.css); con la cabecera bajada vuelve a azul. */
.loha-cabecera--fija.loha-cabecera--bajada .loha-accion--relleno {
	border-color: var(--azul);
	background-color: var(--azul);
	color: var(--beige-100);
}

.loha-cabecera--fija .loha-cabecera__numero,
.loha-cabecera--fija .loha-accion {
	transition:
		background-color var(--t-hover) ease-out,
		border-color var(--t-hover) ease-out,
		color var(--t-hover) ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.loha-js .loha-cabecera--fija,
	.loha-cabecera--fija .loha-cabecera__numero,
	.loha-cabecera--fija .loha-accion {
		transition: none;
	}
}

/* B y C, dentro de su capa. */
.loha-cabecera--menu,
.loha-cabecera--cortina {
	position: relative;
	z-index: 2;
}

/* ── Logo ─────────────────────────────────────────────── */

.loha-cabecera__logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: var(--control-minimo);
	color: inherit;
}

/* Proporción del logo: 1600 × 729. */
.loha-cabecera__marca {
	width: auto;
	height: var(--logo-alto);
}

/* ── Contexto de sección ──────────────────────────────── */
/* Como en las previas aprobadas del 01 y el 02: número en DM Serif,
   línea vertical fina y nombre en Manrope mayúsculas. */

.loha-cabecera__contexto {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
	margin: 0 0 0 clamp(0.5rem, 1.5vw, 1.5rem);
	white-space: nowrap;
}

.loha-cabecera__numero {
	color: var(--beige-600);
	font-family: var(--serif);
	font-size: var(--fs-cabecera-numero);
	line-height: 1;
}

/* La numeración 01–05 tiene un solo color en todo el sitio, el de la
   numeración del menú en reposo: --beige-600 sobre claro (3,47, válido
   porque nunca baja de 24 px) y --beige-100 sobre oscuro. */
.loha-cabecera--sobre-oscuro .loha-cabecera__numero {
	color: var(--beige-100);
}

.loha-cabecera__nombre {
	overflow: hidden;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	text-overflow: ellipsis;
	text-transform: uppercase;
}


/* ── Acciones ─────────────────────────────────────────── */

.loha-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.75rem);
	margin-left: auto;
}

/* MENÚ, CERRAR e idioma: texto, sin caja, con área mínima de 44 px. */
.loha-cabecera__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	min-width: var(--control-minimo);
	min-height: var(--control-minimo);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.loha-cabecera__cerrar {
	min-width: var(--cerrar);
	min-height: var(--cerrar);
}

/* Línea vertical fina: entre número y nombre del contexto, entre MENÚ y
   HABLEMOS (A) y entre CERRAR y HABLEMOS (B). Toma el color del texto al
   28 %, que sobre claro es --azul-300 y sobre oscuro sigue viéndose. */
.loha-cabecera__divisor {
	flex: none;
	width: 1px;
	height: 1.9em;
	background: currentColor;
	opacity: 0.28;
}

/* HABLEMOS, siempre en una línea (las píldoras del contenido pueden
   pasar a dos, accion.css). */
.loha-cabecera .loha-accion {
	white-space: nowrap;
}

/* En M, el idioma alinea sus letras con el margen derecho: su área de
   44 px sobresale por la derecha lo que le sobra a las dos letras, y la
   cabecera gana esos 12 px sin quitar nada. Con EN y las cadenas en
   español la cabecera pide a 390 px 391 (y 393 con LET'S TALK y ES). */
@media (max-width: 599px) {
	.loha-cabecera .loha-accion {
		padding-inline: 1.1em;
	}

	.loha-cabecera__idioma {
		margin-right: -0.9em;
	}
}

/* Por debajo de 390 px los cuatro elementos (logo, MENÚ | HABLEMOS →,
   idioma) no caben con los huecos de siempre: a 360 px la cabecera medía
   11 px más que la pantalla y la página se movía de lado. Sin quitar
   nada: logo de 28 px, huecos de 8 px entre las acciones y menos relleno
   en HABLEMOS. Las áreas de interacción siguen en 44 px. */
@media (max-width: 389px) {
	.loha-cabecera {
		--logo-alto: 1.75rem;
	}

	.loha-cabecera__acciones {
		gap: 0.5rem;
	}

	.loha-cabecera .loha-accion {
		padding-inline: 0.7em;
	}
}

/* Por debajo de 360 px no caben aun así: con EN, el estado A pide 348 px
   a 320 (349 en inglés), y el B, el del menú abierto, 346 también sin
   EN (HABLEMOS se salía por la derecha). En los tres estados, 8 px entre
   el logo y las acciones, y HABLEMOS sin su flecha. El logo no baja de
   28 px (por debajo, ESPACIOS deja de leerse) y MENÚ, la línea, HABLEMOS
   y el idioma se quedan. */
@media (max-width: 359px) {
	.loha-cabecera {
		gap: 0.5rem;
	}

	.loha-cabecera__hablemos .loha-accion__flecha {
		display: none;
	}
}

/* ── C · cortina ──────────────────────────────────────── */
/* Formato de las previas de la cortina: «QUÉ RESOLVEMOS · CONTEXTO», en
   microtexto, sin número ni línea vertical (no es el del estado A). El
   color y el fondo, los de la pantalla que tiene debajo (data-fondo, lo
   pone cortina.js). */

.loha-cabecera--cortina {
	background-color: var(--c-fondo);
	color: var(--c-texto);
}

.loha-cabecera__contexto--cortina {
	display: block;
	overflow: hidden;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	text-overflow: ellipsis;
	text-transform: uppercase;
}

/* ── Contexto por debajo de 900 px (A y C) ────────────── */
/* En una línea no cabe entero junto a las acciones. El nombre baja a
   13 px, el suelo de los rótulos (tipografia.md), y pasa a dos líneas
   equilibradas si lo necesita, sin que la cabecera crezca: el
   número se queda a la izquierda y el nombre sigue alineado consigo
   mismo. Los que caben en una línea siguen en una. Sin overflow: nunca
   se recorta ni lleva puntos suspensivos; min-width: 0 deja que se
   estreche y parta. */
@media (max-width: 899px) {
	.loha-cabecera__nombre,
	.loha-cabecera__contexto--cortina {
		min-width: 0;
		overflow: visible;
		font-size: 0.8125rem;
		line-height: 1.35;
		white-space: normal;
		text-wrap: balance;
	}
}

/* Un único corte para todas las páginas: por debajo de 749 px el nombre
   más largo de la web («Centros de Participación Activa») ya no cabe en
   dos líneas y se retira el contexto entero, número y nombre, en A y en
   C. Nunca el idioma ni el disparador. Medido en cabecera.md: hay que
   revisarlo con los nombres en inglés. */
@media (max-width: 748px) {
	.loha-cabecera--sitio .loha-cabecera__contexto,
	.loha-cabecera__contexto--cortina {
		display: none;
	}
}