/*
Theme Name: CIM-Renova
Theme URI: https://renova.cim.uvigo.gal
Description: Tema hijo de Twenty Twenty-Five con la identidad visual del CIM (Centro de Investigación Mariña, Universidade de Vigo) para su sección CIM-Renova.
Author: CIM-Renova
Template: twentytwentyfive
Version: 0.2.10
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cim-renova
*/

/* Los colores, fuentes y tamaños están en theme.json. Aquí solo va lo que theme.json no puede expresar. */

/* ---------- Cabecera ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.cr-cabecera {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

@media (max-width: 600px) {
	.cr-cabecera {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

.cr-marca {
	display: inline-flex;
	line-height: 0;
}

.cr-marca img {
	display: block;
	height: 2.6rem;
	width: auto;
}

@media (max-width: 600px) {
	.cr-marca img {
		height: 1.35rem;
	}

	.cr-cabecera .wp-block-group {
		gap: 0.9rem;
	}

	.cr-idiomas ul {
		gap: 0.7rem;
	}

	.cr-cabecera .wp-block-navigation__responsive-container-open svg {
		width: 1.9rem;
		height: 1.9rem;
	}
}

.cr-idiomas ul {
	display: flex;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-idiomas a {
	font-family: var(--wp--preset--font-family--sora);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	color: inherit;
	opacity: 0.8;
}

.cr-idiomas a:hover,
.cr-idiomas a[aria-current] {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

/* Menú hamburguesa (siempre) y panel desplegable azul */
.cr-cabecera .wp-block-navigation__responsive-container-open svg,
.cr-cabecera .wp-block-navigation__responsive-container-close svg {
	width: 2.25rem;
	height: 2.25rem;
}

.cr-cabecera .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 5vw, 4rem);
}

.cr-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
	align-items: center;
}

.cr-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	gap: 1.4rem;
}

.cr-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	font-weight: 800;
}

/* ---------- Botones de áreas (estilos de bloque del botón) ---------- */

.wp-block-button[class*="is-style-area-"] .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	padding: 1.15rem 2.6rem;
	min-width: 13rem;
	text-align: center;
	transition: background-color 0.2s, color 0.2s;
}

.wp-block-button.is-style-area-turquesa .wp-block-button__link { background: var(--wp--preset--color--turquesa-claro); color: var(--wp--preset--color--turquesa); }
.wp-block-button.is-style-area-verde .wp-block-button__link { background: var(--wp--preset--color--verde-claro); color: var(--wp--preset--color--verde); }
.wp-block-button.is-style-area-teja .wp-block-button__link { background: var(--wp--preset--color--teja-claro); color: var(--wp--preset--color--teja); }
.wp-block-button.is-style-area-mostaza .wp-block-button__link { background: var(--wp--preset--color--mostaza-claro); color: var(--wp--preset--color--mostaza); }

.wp-block-button.is-style-area-turquesa .wp-block-button__link:hover { background: var(--wp--preset--color--turquesa); color: #fff; }
.wp-block-button.is-style-area-verde .wp-block-button__link:hover { background: var(--wp--preset--color--verde); color: #fff; }
.wp-block-button.is-style-area-teja .wp-block-button__link:hover { background: var(--wp--preset--color--teja); color: #fff; }
.wp-block-button.is-style-area-mostaza .wp-block-button__link:hover { background: var(--wp--preset--color--mostaza); color: #fff; }

/* ---------- Portada ---------- */

.cr-hero .wp-block-cover__inner-container h1,
.cr-hero .wp-block-cover__inner-container h2,
.cr-hero .wp-block-cover__inner-container p {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.cr-hero-titulo {
	text-transform: uppercase;
}

/* Crédito de la foto de fondo (licencias CC con atribución), abajo a la derecha. */
.cr-hero:has(.cr-credito) {
	isolation: isolate;
}

.cr-hero:has(.cr-credito) .wp-block-cover__image-background,
.cr-hero:has(.cr-credito) .wp-block-cover__background {
	z-index: -1;
}

.cr-hero:has(.cr-credito) .wp-block-cover__inner-container {
	position: static;
}

.cr-hero .cr-credito {
	position: absolute;
	right: 1rem;
	bottom: 0.5rem;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.85);
	text-align: right;
}

.cr-hero .cr-credito a {
	color: inherit;
}

/* ---------- Cifras ---------- */

/* La cifra no se parte nunca («500 k€»): el tamaño baja con el ancho de la columna. */
.wp-block-column:has(> .cr-cifra) {
	container-type: inline-size;
}

.cr-cifra {
	font-family: var(--wp--preset--font-family--sora);
	font-size: min(var(--wp--preset--font-size--cifra), 24cqi);
	white-space: nowrap;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.4rem;
}

.cr-rotulo {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Títulos de sección ---------- */

.cr-titulo-seccion {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.cr-enlace-flecha a {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

.cr-enlace-flecha a::after {
	content: " →";
}

.cr-enlace-flecha a:hover {
	text-decoration: underline;
}

/* ---------- Tarjetas de noticias ---------- */

.cr-tarjeta.wp-block-cover {
	min-height: 320px;
	padding: 1.25rem;
	align-items: flex-end;
	overflow: hidden;
}

.cr-tarjeta.wp-block-cover:not(:has(img)) {
	background: linear-gradient(160deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--contrast) 100%);
}

/* Imagen y velo por debajo del texto: el contenedor interior es estático para que el enlace cubra toda la tarjeta. */
.cr-tarjeta.wp-block-cover {
	isolation: isolate;
}

.cr-tarjeta .wp-block-cover__image-background,
.cr-tarjeta .wp-block-cover__background {
	z-index: -1;
}

.cr-tarjeta .wp-block-cover__image-background {
	transition: transform 0.4s ease;
}

.cr-tarjeta:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

.cr-tarjeta .wp-block-cover__inner-container {
	position: static;
}

.cr-tarjeta .wp-block-post-terms {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	margin: 0;
	background: var(--wp--preset--color--accent-2);
	color: #fff;
	padding: 0.3rem 0.9rem;
	font-size: 1.1875rem; /* ≥ 18,66 px en negrita: texto grande para WCAG (blanco sobre verde CIM = 3:1) */
	font-weight: 800;
	line-height: 1.3;
}

.cr-tarjeta .wp-block-post-terms a {
	color: inherit;
}

.cr-tarjeta .wp-block-post-title {
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin: 0;
}

.cr-tarjeta .wp-block-post-title a {
	color: #fff;
}

.cr-tarjeta .wp-block-post-title a::before {
	/* toda la tarjeta es clicable */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---------- Banda azul con lista (convocatorias, ofertas…) ---------- */

.cr-banda-azul .cr-item {
	background: rgba(255, 255, 255, 0.08);
	padding: 1.25rem 1.5rem;
	transition: background-color 0.2s;
}

.cr-banda-azul .cr-item:hover {
	background: rgba(255, 255, 255, 0.14);
}

.cr-banda-azul .cr-item h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.35rem;
}

.cr-banda-azul .cr-enlace-flecha a,
.cr-banda-azul a {
	color: #fff;
}

/* ---------- Pie ---------- */

/* En la portada el pie va justo después del logo de UVigo: menos hueco arriba. */
body.home .cr-pie {
	padding-top: 2.5rem !important;
}

.cr-pie .cr-aniversario {
	margin-top: 1.75rem;
}

.cr-pie .cr-aniversario img {
	display: block;
	width: 11rem;
	height: auto;
}

@media (max-width: 781px) {
	.cr-pie .cr-aniversario img {
		margin-inline: auto;
		width: 9rem;
	}
}


.cr-pie .wp-block-navigation {
	font-size: 0.9375rem;
	font-weight: 800;
}

.cr-pie .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
}

.cr-pie-inferior .wp-block-navigation .wp-block-navigation-item__content {
	color: inherit;
}

.cr-pie-direccion {
	font-weight: 300;
	line-height: 1.45;
}

@media (max-width: 781px) {
	/* En móvil las columnas del pie se apilan: todo centrado. */
	.cr-pie .wp-block-column,
	.cr-pie .cr-pie-direccion {
		text-align: center !important;
	}

	.cr-pie .cr-marca {
		display: flex;
		justify-content: center;
	}

	.cr-pie-inferior .wp-block-group {
		justify-content: center !important;
	}
}

.cr-pie-direccion a {
	text-decoration: none;
}

.cr-pie-inferior {
	box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.25);
}

.cr-pie-inferior .wp-block-navigation {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* Logos institucionales: todos al mismo ancho, como en el pie de la web del CIM. */
.cr-logos {
	row-gap: 1.25rem;
	column-gap: 1.5rem;
	align-items: center;
}

.cr-logos .wp-block-image {
	margin: 0;
}

.cr-logos .wp-block-image img {
	display: block;
	width: 10.5rem;
	height: auto;
}

.cr-pie-legal {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--accent-3);
}

.cr-pie-legal p {
	margin: 0;
}

@media (max-width: 781px) {
	.cr-logos {
		justify-content: center !important;
	}

	.cr-logos .wp-block-image img {
		width: 8.5rem;
	}
}

/* ---------- Accesibilidad ---------- */

:where(a, button, .wp-block-button__link):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cr-tarjeta .wp-block-cover__image-background {
		transition: none;
	}
}

/* ---------- Plantillas a todo el ancho (portada y "Página a todo el ancho") ---------- */

/* Las bandas de color van pegadas unas a otras, sin el hueco estándar entre bloques. */
.cr-secciones > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ---------- Páginas interiores ---------- */

.cr-cabecera-pagina .cr-hero-titulo {
	margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
	.cr-cabecera-pagina.wp-block-cover {
		min-height: 220px !important;
	}
}

/* Estilo de párrafo "Justificado" (functions.php). */
.is-style-justificado {
	text-align: justify;
	hyphens: auto;
}

.cr-entradilla {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

a.cr-enlace-flecha,
.cr-enlace-flecha a {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

a.cr-enlace-flecha::after {
	content: " →";
}

/* ---------- Miembros ---------- */

.cr-miembro .wp-block-post-featured-image {
	margin-bottom: 1rem;
	overflow: hidden;
}

.cr-miembro .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.cr-miembro:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.cr-miembro .wp-block-post-title {
	margin: 0.25rem 0 0.5rem;
	line-height: 1.2;
}

.cr-miembro .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.cr-miembro .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
}

.cr-cargo {
	margin: 0;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--accent-1);
}

.cr-cargo a {
	color: inherit;
	text-decoration: none;
}

.cr-miembro .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.5;
}

.cr-ficha .wp-block-post-featured-image {
	margin: 0;
}

.cr-ficha .wp-block-post-title {
	margin: 0.4rem 0 1.5rem;
}

/* ---------- Líneas de investigación ---------- */

.cr-linea {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.cr-linea .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.cr-linea .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.cr-linea:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.cr-linea-texto {
	padding: 1.5rem 1.75rem 1.75rem;
}

.cr-linea .wp-block-post-title {
	margin: 0 0 0.75rem;
}

.cr-linea .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.cr-linea .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
}

@media (prefers-reduced-motion: reduce) {
	.cr-miembro .wp-block-post-featured-image img,
	.cr-linea .wp-block-post-featured-image img {
		transition: none;
	}
}

/* ---------- Esquema de objetivos y estrategias (Quiénes somos) ---------- */

/* Hecho con bloques normales: un párrafo raíz y dos columnas con título y lista.
   Cada elemento de la lista es "<strong>Verbo</strong> texto de la caja"; las líneas
   y las flechas son de CSS. */
.cr-esquema {
	--cr-esquema-linea: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, #fff);
	--cr-esquema-hueco: clamp(7.5rem, 11vw, 10rem);
	--cr-esquema-rama: clamp(6.5rem, 9vw, 7.5rem);
}

.is-layout-constrained > .cr-esquema.alignwide {
	max-width: 65rem;
}

.cr-esquema-raiz {
	width: fit-content;
	margin: 0 auto;
	padding: 0.9rem 2.25rem;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
}

.cr-esquema > .cr-esquema-ramas {
	position: relative;
	margin-block: 2.5rem 0;
	column-gap: var(--cr-esquema-hueco);
}

/* Del recuadro raíz baja una línea que se abre hacia los dos títulos. */
.cr-esquema-ramas::before,
.cr-esquema-ramas::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
}

.cr-esquema-ramas::before {
	top: -2.5rem;
	left: calc(50% - 0.75px);
	height: 1.25rem;
	border-left: 1.5px solid var(--cr-esquema-linea);
}

.cr-esquema-ramas::after {
	top: -1.25rem;
	left: calc(50% - var(--cr-esquema-hueco) / 2 - 1.5px);
	width: calc(var(--cr-esquema-hueco) + 3px);
	height: 0.9rem;
	border: 1.5px solid var(--cr-esquema-linea);
	border-bottom: 0;
}

/* Cada título queda centrado sobre su tronco (el borde interior de la columna). */
.cr-esquema .cr-esquema-titulo {
	width: fit-content;
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.cr-esquema-objetivos .cr-esquema-titulo {
	margin-left: auto;
	transform: translateX(50%);
}

.cr-esquema-estrategias .cr-esquema-titulo {
	transform: translateX(-50%);
}

.cr-esquema .cr-esquema-lista {
	list-style: none;
	margin: 0;
	padding: 1rem 0 0;
}

.cr-esquema-lista > li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 4.5rem;
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1.5px solid;
	border-radius: 12px;
	text-align: center;
	line-height: 1.35;
}

.cr-esquema-lista > li + li {
	margin-top: 1rem;
}

.cr-esquema-objetivos li {
	margin-right: var(--cr-esquema-rama);
	background: var(--wp--preset--color--verde-claro);
	border-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--oliva);
}

.cr-esquema-estrategias li {
	margin-left: var(--cr-esquema-rama);
	background: var(--wp--preset--color--teja-claro);
	border-color: var(--wp--preset--color--teja);
	color: var(--wp--preset--color--teja);
}

/* ::before = flecha horizontal; ::after = tramo de tronco vertical (el último acaba en su flecha).
   Las posiciones van referidas al interior del borde de la caja (1,5 px). */
.cr-esquema-lista > li::before,
.cr-esquema-lista > li::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
}

.cr-esquema-lista > li::before {
	top: calc(50% - 0.75px);
	width: var(--cr-esquema-rama);
	border-top: 1.5px solid var(--cr-esquema-linea);
}

.cr-esquema-lista > li::after {
	top: calc(-1rem - 1.5px);
	bottom: -1.5px;
	border-left: 1.5px solid var(--cr-esquema-linea);
}

.cr-esquema-lista > li:last-child::after {
	bottom: calc(50% - 0.75px);
}

.cr-esquema-lista strong {
	position: absolute;
	bottom: 50%;
	box-sizing: border-box;
	width: var(--cr-esquema-rama);
	padding-bottom: 0.3rem;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

/* Punta de flecha, en el lado de la caja. */
.cr-esquema-lista strong::after {
	content: "";
	position: absolute;
	bottom: -3.5px;
	box-sizing: border-box;
	width: 7px;
	height: 7px;
	border: 0 solid var(--cr-esquema-linea);
	transform: rotate(45deg);
}

.cr-esquema-objetivos li::before,
.cr-esquema-objetivos strong {
	right: calc(-1 * var(--cr-esquema-rama) - 1.5px);
}

.cr-esquema-objetivos li::after {
	right: calc(-1 * var(--cr-esquema-rama) - 1.5px);
}

.cr-esquema-objetivos strong::after {
	left: 1.5px;
	border-left-width: 1.5px;
	border-bottom-width: 1.5px;
}

.cr-esquema-estrategias li::before,
.cr-esquema-estrategias li::after,
.cr-esquema-estrategias strong {
	left: calc(-1 * var(--cr-esquema-rama) - 1.5px);
}

.cr-esquema-estrategias strong::after {
	right: 1.5px;
	border-top-width: 1.5px;
	border-right-width: 1.5px;
}

/* En móvil las columnas se apilan: las dos ramas cuelgan de un tronco a la izquierda. */
@media (max-width: 781px) {
	.cr-esquema {
		--cr-esquema-rama: 6.75rem;
	}

	.cr-esquema > .cr-esquema-ramas {
		margin-block-start: 2rem;
		row-gap: 2rem;
	}

	.cr-esquema-ramas::before,
	.cr-esquema-ramas::after {
		display: none;
	}

	.cr-esquema .cr-esquema-titulo {
		margin-left: 0;
		transform: none;
	}

	.cr-esquema-objetivos li {
		margin-right: 0;
		margin-left: var(--cr-esquema-rama);
	}

	.cr-esquema-objetivos li::before,
	.cr-esquema-objetivos li::after,
	.cr-esquema-objetivos strong {
		right: auto;
		left: calc(-1 * var(--cr-esquema-rama) - 1.5px);
	}

	.cr-esquema-objetivos strong::after {
		left: auto;
		right: 1.5px;
		border-width: 1.5px 1.5px 0 0;
	}
}

/* ---------- Ritmo vertical en textos largos ---------- */

/* Solo en el texto corrido (no en tarjetas ni rejillas). */
:where(.wp-block-post-content, .cr-secciones > .wp-block-group, .cr-secciones .wp-block-column) > :where(h2, h3):not(:first-child):not(.cr-titulo-seccion) {
	margin-block-start: 2.25rem;
}

:where(.wp-block-post-content, .cr-secciones > .wp-block-group, .cr-secciones .wp-block-column) > :where(h2, h3) + :where(p, ul, ol) {
	margin-block-start: 0.75rem;
}

/* Miembros en móvil: tarjeta horizontal (foto pequeña a la izquierda). */
@media (max-width: 600px) {
	.cr-miembro {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}

	.cr-miembro > * {
		grid-column: 2;
		margin-block-start: 0 !important;
	}

	.cr-miembro > .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
	}

	.cr-miembro .wp-block-post-title {
		margin: 0.2rem 0 0.35rem;
	}

	.cr-miembro .cr-cargo {
		font-size: 0.6875rem;
		letter-spacing: 0.5px;
		overflow-wrap: anywhere;
	}
}
