/*
 * tema.css · CapturaCO2
 *
 * Este fichero NO cambia entre variaciones de estilo. Todo lo que varía (colores, tipografías,
 * tamaños, espaciados, paleta oscura y los ajustes de abajo) vive en theme.json o en
 * styles/*.json, en settings.custom, y aquí solo se lee como variable CSS.
 *
 * Se carga después de los estilos globales (dependencia «global-styles») y también en el
 * editor. Lo registra inc/estilos.php.
 */

/* 1. Esquema de color y modo oscuro ------------------------------------------------------- */

:root {
	color-scheme: var(--wp--custom--esquema, light);
}

/*
 * Cada variación guarda su paleta oscura en settings.custom.oscuro. Laboratorio repite ahí su
 * propia paleta, de modo que se queda siempre en oscuro. «:root:root» gana a la regla «:root»
 * con la que WordPress declara los presets.
 */
@media (prefers-color-scheme: dark) {
	:root:root {
		color-scheme: dark;
		--wp--preset--color--base: var(--wp--custom--oscuro--base);
		--wp--preset--color--surface: var(--wp--custom--oscuro--surface);
		--wp--preset--color--surface-2: var(--wp--custom--oscuro--surface-alt);
		--wp--preset--color--contrast: var(--wp--custom--oscuro--contrast);
		--wp--preset--color--muted: var(--wp--custom--oscuro--muted);
		--wp--preset--color--primary: var(--wp--custom--oscuro--primary);
		--wp--preset--color--on-primary: var(--wp--custom--oscuro--on-primary);
		--wp--preset--color--secondary: var(--wp--custom--oscuro--secondary);
		--wp--preset--color--accent: var(--wp--custom--oscuro--accent);
		--wp--preset--color--line: var(--wp--custom--oscuro--line);
		--wp--custom--logo--filtro: var(--wp--custom--oscuro--logo-filtro);
		--wp--custom--logo--opacidad: var(--wp--custom--oscuro--logo-opacidad);
	}
}

/* 2. Ancho de los titulares (solo cambia en Laboratorio, con Archivo) --------------------- */

:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .is-style-cifra) {
	font-stretch: var(--wp--custom--titulares--ancho, 100%);
}

.wp-block-site-title {
	font-stretch: var(--wp--custom--marca--ancho, 100%);
	text-transform: var(--wp--custom--marca--transformacion, none);
}

/* 3. Subrayado de los enlaces (theme.json no admite color ni grosor del subrayado) ---------- */

a {
	text-decoration-color: var(--wp--custom--enlace--color-subrayado, currentColor);
	text-decoration-thickness: var(--wp--custom--enlace--grosor, auto);
	text-underline-offset: var(--wp--custom--enlace--separacion, 0.2em);
}

/* 4. Estilos de bloque (registrados en inc/estilos.php) ----------------------------------- */

/* «Etiqueta»: rótulo en versal sobre los títulos de sección y fechas destacadas. */
.is-style-etiqueta {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--etiqueta--peso, 600);
	letter-spacing: var(--wp--custom--etiqueta--tracking, 0.1em);
	text-transform: uppercase;
}

.is-style-etiqueta:not(.has-text-color) {
	color: var(--wp--preset--color--accent);
}

/* «Cifra»: los datos grandes (1.200 ha, < 1 km, +40 años, 2010). */
.is-style-cifra {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--figure);
	line-height: 1;
	letter-spacing: -0.02em;
}

.is-style-cifra:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

/*
 * «Tarjeta»: las tres claves de portada, las noticias y las fichas del equipo. Marisma la
 * dibuja con un filete superior de 2 px; Ría abierta, con fondo, borde y filete de color de
 * 4 px; Laboratorio, como celda de retícula. No le pongas relleno ni bordes en el bloque:
 * vienen de aquí.
 */
.is-style-tarjeta {
	background: var(--wp--custom--tarjeta--fondo, transparent);
	border: var(--wp--custom--tarjeta--borde, 0);
	border-top: var(--wp--custom--tarjeta--borde-superior, 0);
	border-radius: var(--wp--custom--tarjeta--radio, 0);
	padding: var(--wp--custom--tarjeta--relleno, 0);
}

/* «Logo monocromo»: logos de US, UCA y CSIC en gris, en blanco o en color según la variación. */
.is-style-logo-mono img {
	filter: var(--wp--custom--logo--filtro, none);
	opacity: var(--wp--custom--logo--opacidad, 1);
}

/* «Panorámica»: fotos a lo ancho. 12:5 en pantalla grande y 4:3 en el móvil. */
.is-style-panoramica img {
	width: 100%;
	aspect-ratio: 12 / 5;
	object-fit: cover;
}

@media (max-width: 599px) {
	.is-style-panoramica img {
		aspect-ratio: 4 / 3;
	}
}

/* Las categorías de una entrada con el estilo «Etiqueta». */
.is-style-etiqueta a {
	color: inherit;
	text-decoration: none;
}

/* 5. Cabecera ------------------------------------------------------------------------------ */

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

@media (max-width: 599px) {
	.wp-block-site-tagline {
		display: none;
	}
}

/* 6. Contenido antiguo de las entradas (HTML clásico de 2016 a 2024) ------------------------ */

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content img.alignleft {
	float: left;
	margin: 0.25em 1.5em 1em 0;
}

.wp-block-post-content img.alignright {
	float: right;
	margin: 0.25em 0 1em 1.5em;
}

.wp-block-post-content img.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-block-post-content iframe {
	max-width: 100%;
}

.wp-block-post-content iframe[src*="youtube"],
.wp-block-post-content iframe[src*="youtu.be"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content .wp-caption-text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* 7. Formulario de Contact Form 7 ---------------------------------------------------------- */

.wpcf7-form p {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.wpcf7-form label {
	display: block;
	font-weight: 600;
}

.wpcf7-form input:where([type="text"], [type="email"], [type="tel"], [type="url"]),
.wpcf7-form textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--tarjeta--radio, 0);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.wpcf7-form .wpcf7-submit {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--tarjeta--radio, 0);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* 8. Titulares, citas y pie ---------------------------------------------------------------- */

h1,
h2 {
	text-wrap: balance;
}

/* Énfasis en un titular: cursiva de color en Marisma; en las otras variaciones, solo color. */
:where(h1, h2, h3) em {
	font-style: var(--wp--custom--titulares--enfasis, italic);
	color: var(--wp--preset--color--primary);
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

/* El pie va pegado a la última sección de la página. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}