/**
 * Cabecera (plantilla «Cabecera» del Theme Builder): lo que Elementor no guarda.
 *
 * Las medidas de reposo y las de móvil viven en las Clases del Kit (rj-header*, rj-logo*,
 * rj-nav*, rj-menu*). Aquí va solo lo que depende de la página o del scroll:
 *
 *  1. Color de la barra según la sección, leído de la clase que WordPress pone al <body>.
 *     Lima en episodios y lila en el Archivo, como dibujan las barras compactas de
 *     RJ_Episodios_Capitulo_1440px_Viewport.pdf pág. 2 y RJ_Archivo_HERSTORY_1440px_Viewport.pdf pág. 2;
 *     crema en la portada (RJ_Archivo_Home_360px_Viewport.pdf pág. 1) y blanco en tienda y páginas.
 *  2. Estado compacto de escritorio, interpolado con el scroll (bloque 5). Medidas anotadas en
 *     RJ_Archivo_HERSTORY_1440px_IM_Viewport.pdf pág. 2:
 *     barra de 50 con fondo, isotipo de 35 a 30 del borde, menú a 120, MATROCINA de 150 a toda la altura.
 *  3. Móvil (≤1024): la barra de 40 lleva siempre el color (RJ_Archivo_HERSTORY_360px_IM_ScrollCompleto.pdf).
 *     La portada del Archivo (/archivo/, cuadrícula `rj-sections`) es una página, no un archivo de WordPress: se
 *     reconoce por su cuadrícula (body:has) y cuenta como Archivo en los puntos 1 y 4 (usuario 26/09, provisional
 *     hasta que THE TIAS digan el color de la barra de cada sección).
 *  4. Sección actual del menú en Bold (ITC: «Switzer Regular y Bold 18px»): todo es Archivo salvo
 *     los podcasts y la tienda; en la portada y en las páginas no hay Bold.
 *  5. Cambio fluido entre los dos estados, ligado al scroll (animación CSS); instantáneo si el sistema pide menos movimiento.
 */

/* 1. Color de la barra por sección */
body {
	--rj-header-bar: var(--rj-base);
}
body.home {
	--rj-header-bar: var(--rj-base-2);
}
body.single-podcast,
body.post-type-archive-podcast {
	--rj-header-bar: var(--rj-accent);
}
body.single:not(.single-podcast):not(.woocommerce),
body.archive:not(.post-type-archive-podcast):not(.woocommerce),
body.blog,
body.search,
body:has(.rj-sections) {
	--rj-header-bar: var(--rj-accent-2);
}

/* 1b. MATROCINA en el listado de «Situación de las mujeres en el mundo» (y en las páginas de ubicación, que son ese
   mismo listado con el mismo mapa): el mapa del hero es berenjena y el botón se fundía con él. Es una excepción por
   esa imagen, no un cambio del botón: NO se aplica a las fichas ni a ninguna otra página (usuario 27/09). Provisional (usuario 26/09) hasta que THE TIAS digan cómo va: fondo blanco, texto y borde berenjena,
   solo en escritorio con la cabecera en reposo. Vuelve a su bloque berenjena a la vez que la barra coge color
   (primeros 20 px de scroll, ver bloque 5); en móvil la barra siempre tiene color y no cambia.
   Si lo descartan, se borra este bloque. */
@media (min-width: 1025px) {
	body.post-type-archive-situacion_mujeres .rj-header .rj-header__cta,
	body.tax-ubicacion .rj-header .rj-header__cta {
		border: var(--rj-line-ui) solid var(--rj-contrast);
	}
	@supports (animation-timeline: scroll()) {
		body.post-type-archive-situacion_mujeres .rj-header .rj-header__cta,
		body.tax-ubicacion .rj-header .rj-header__cta {
			animation-name: rj-header-cta, rj-header-cta-claro;
		}
	}
	@supports not (animation-timeline: scroll()) {
		body.post-type-archive-situacion_mujeres .rj-header .rj-header__cta,
		body.tax-ubicacion .rj-header .rj-header__cta {
			background-color: color-mix(in srgb, var(--rj-contrast) calc(min(1, var(--rj-header-progress) / 0.1) * 100%), var(--rj-base));
			color: color-mix(in srgb, var(--rj-base) calc(min(1, var(--rj-header-progress) / 0.1) * 100%), var(--rj-contrast));
		}
	}
}
@keyframes rj-header-cta-claro {
	0% {
		background-color: var(--rj-base);
		color: var(--rj-contrast);
	}
	10%,
	100% {
		background-color: var(--rj-contrast);
		color: var(--rj-base);
	}
}

/* Barra de administración de WordPress: la cabecera baja lo que mide la barra */
body.admin-bar .rj-header {
	inset-block-start: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .rj-header {
		inset-block-start: 46px;
	}
}
/* Hasta 600 px, WordPress deja de fijar su barra (position: absolute) y se va con el scroll: la
   cabecera sube con ella, de 46 a 0, en los primeros 46 px de desplazamiento. Solo afecta a quien
   tiene la sesión iniciada. Sin animaciones ligadas al scroll, se queda en 46 (como antes). */
@media (max-width: 600px) {
	@supports (animation-timeline: scroll()) {
		body.admin-bar .rj-header {
			animation: rj-header-adminbar linear both;
			animation-timeline: scroll(root);
			animation-range: 0 46px;
		}
	}
}
@keyframes rj-header-adminbar {
	from {
		inset-block-start: 46px;
	}
	to {
		inset-block-start: 0;
	}
}

/* Páginas que pinta el propio tema, sin plantilla de Elementor (carrito, pago, mi cuenta, 404, búsqueda):
   la cabecera va sobre la página, así que el contenido empieza donde lo hace rj-page (cabecera + 60; móvil 40 + 30). */
.site-main {
	padding-block-start: calc(var(--rj-header-height) + var(--rj-space-60));
}
@media (max-width: 1024px) {
	.site-main {
		padding-block-start: calc(var(--rj-space-40) + var(--rj-space-30));
	}
}

/* 2. Estado compacto (solo escritorio): ver bloque 5, que lo hace ligado al scroll. */

/* 3. Móvil: la barra siempre con color */
@media (max-width: 1024px) {
	.rj-header .rj-header__inner {
		background-color: var(--rj-header-bar);
	}
}

/* 3b. Chevron del acordeón ARCHIVO del menú móvil (RJ_Archivo_Home_360px_Viewport.pdf págs. 4–5: 13,4×6,7, abajo
   cerrado y arriba abierto). El widget Acordeón anidado solo admite el icono desde la Biblioteca de medios; los iconos de
   interfaz viven en assets/img del tema (regla del 21/09), así que va aquí. */
.rj-menu__accordion .e-n-accordion-item-title::after {
	content: "";
	flex: none;
	width: 14px;
	height: 7px;
	background: url("../img/chevron.svg") center / contain no-repeat;
}
.rj-menu__accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
	background-image: url("../img/chevron-arriba.svg");
}

/* 4. Sección actual en Bold */
body.single-podcast .rj-nav__link--episodios,
body.post-type-archive-podcast .rj-nav__link--episodios,
body.woocommerce .rj-nav__link--tienda,
body.woocommerce-page .rj-nav__link--tienda,
body.single:not(.single-podcast):not(.woocommerce) .rj-nav__link--archivo,
body.archive:not(.post-type-archive-podcast):not(.woocommerce) .rj-nav__link--archivo,
body.blog .rj-nav__link--archivo,
body.search .rj-nav__link--archivo,
body:has(.rj-sections) .rj-nav__link--archivo {
	font-weight: 700;
}

/* 5. Cambio entre reposo y compacto, ligado al scroll: cada propiedad se interpola con el desplazamiento
   entre 0 y 200 px (--rj-header-scroll), sin saltos. Ningún PDF fija el recorrido; 200 para que una
   muesca de rueda (unos 100 px en Chrome) haga solo la mitad del cambio y se vea gradual. El fondo se
   hace opaco en el primer 10 % (20 px), antes de que el contenido llegue a la barra. Dos vías con el mismo resultado:
   - navegadores con animaciones ligadas al scroll (Chrome 115, Safari 26, Firefox 159): CSS puro, @keyframes;
   - los demás (Firefox hasta la 158): header.js escribe --rj-header-progress (0→1) y los calc() de abajo lo aplican.
   Ligado al scroll no es movimiento propio (solo se mueve lo que el usuario desplaza), así que vale también
   con «reducir movimiento». */
@media (min-width: 1025px) {
	@supports (animation-timeline: scroll()) {
		.rj-header__inner,
		.rj-header__brand,
		.rj-logo__img,
		.rj-header__cta {
			animation-timeline: scroll(root);
			animation-range: 0 200px;
			animation-fill-mode: both;
			animation-timing-function: linear;
		}
		.rj-header__inner {
			animation-name: rj-header-inner;
		}
		.rj-header__brand {
			animation-name: rj-header-brand;
		}
		.rj-logo__img {
			animation-name: rj-header-logo;
		}
		.rj-header__cta {
			animation-name: rj-header-cta;
		}
	}
	@supports not (animation-timeline: scroll()) {
		.rj-header {
			--rj-header-progress: 0;
		}
		/* Con .rj-header delante para ganar a las Clases del Kit, que se cargan después. */
		.rj-header .rj-header__inner {
			height: calc(var(--rj-header-height) - (var(--rj-header-height) - var(--rj-space-50)) * var(--rj-header-progress));
			padding: calc(22px * (1 - var(--rj-header-progress))) calc(var(--rj-space-60) * (1 - var(--rj-header-progress))) 0 calc(var(--rj-space-60) - (var(--rj-space-60) - var(--rj-space-30)) * var(--rj-header-progress));
			background-color: color-mix(in srgb, var(--rj-header-bar) calc(min(1, var(--rj-header-progress) / 0.1) * 100%), transparent);
		}
		.rj-header .rj-header__brand {
			gap: calc(var(--rj-space-40) + (58px - var(--rj-space-40)) * var(--rj-header-progress));
		}
		.rj-header .rj-logo__img {
			width: calc(var(--rj-space-50) - (var(--rj-space-50) - var(--rj-space-35) * 50 / 54.9) * var(--rj-header-progress));
		}
		.rj-header .rj-header__cta {
			width: calc(135px + (var(--rj-space-150) - 135px) * var(--rj-header-progress));
			height: calc(var(--rj-space-35) + (var(--rj-space-50) - var(--rj-space-35)) * var(--rj-header-progress));
		}
	}
}
@keyframes rj-header-inner {
	0% {
		height: var(--rj-header-height);
		padding: 22px var(--rj-space-60) 0;
		background-color: transparent;
	}
	10% {
		background-color: var(--rj-header-bar);
	}
	100% {
		height: var(--rj-space-50);
		padding: 0 0 0 var(--rj-space-30);
		background-color: var(--rj-header-bar);
	}
}
@keyframes rj-header-brand {
	from {
		gap: var(--rj-space-40);
	}
	to {
		gap: 58px;
	}
}
@keyframes rj-header-logo {
	from {
		width: var(--rj-space-50);
	}
	to {
		width: calc(var(--rj-space-35) * 50 / 54.9);
	}
}
@keyframes rj-header-cta {
	from {
		width: 135px;
		height: var(--rj-space-35);
	}
	to {
		width: var(--rj-space-150);
		height: var(--rj-space-50);
	}
}