/*
Theme Name:   Ágora Legal
Theme URI:    https://agoralegal.example
Author:       Soriano i Piqueras Abogados
Description:  Tema de bloques para un diario jurídico. El papel dice qué clase de discurso lees —blanco de registro para la información, lavado de tampón para la opinión, manila de carpetilla para la jurisprudencia— y la tipografía dice quién habla: grotesca cuando responde la cabecera, serif cuando responde una persona. Requiere el plugin «Ágora Legal — Núcleo» para el modelo de contenido.
Version:      1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  agora-legal
Tags:         news, blog, block-patterns, full-site-editing, editor-style, custom-colors
*/

/* =========================================================================
   1. PLIEGOS DE PAPEL
   El fondo de la página cambia con el tipo de contenido. Es la única
   decisión audaz del diseño: todo lo demás se mantiene callado.
   ========================================================================= */

body {
	--filete: 1px solid var(--wp--preset--color--regla);
	--gris-dato: var(--wp--preset--color--gris);
}

body.agora-stock-opinion {
	background-color: var(--wp--preset--color--wash);
	--filete: 1px solid #d6d2e4;
	--gris-dato: #64606b; /* el gris de dato se recalibra: sobre lavado, #66686C no llega a AA */
}

body.agora-stock-juris {
	background-color: var(--wp--preset--color--carpeta);
	--filete: 1px solid #d3c7a8;
	--gris-dato: #5a564c;
}

/* =========================================================================
   2. TIPOGRAFÍA CON FUNCIÓN
   ========================================================================= */

.agora-antetitulo {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tampon);
	display: block;
}

.agora-genero {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tampon);
}

/* La voz personal. El titular y el cuerpo cambian de familia a la vez:
   la ruptura es total a propósito, para que se lea sin leer. */
.agora-voz,
.agora-voz p {
	font-family: var(--wp--preset--font-family--petrona);
}

.agora-voz p {
	font-size: var(--wp--preset--font-size--voz);
	line-height: 1.6;
}

.agora-capitular > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--petrona);
	font-weight: 600;
	font-size: 3.4em;
	line-height: 0.86;
	padding: 0.04em 0.085em 0 0;
	color: var(--wp--preset--color--tampon);
}

.agora-voz h2,
.agora-voz h3 {
	font-family: var(--wp--preset--font-family--archivo);
	font-stretch: 88%;
}

.agora-titular-voz {
	font-family: var(--wp--preset--font-family--petrona) !important;
	font-weight: 500 !important;
	font-stretch: normal !important;
	letter-spacing: -0.012em !important;
	line-height: 1.11 !important;
}

.agora-entradilla {
	font-size: var(--wp--preset--font-size--entradilla);
	line-height: 1.5;
	max-width: 60ch;
}

.agora-entradilla.agora-voz {
	font-style: italic;
	max-width: 56ch;
}

/* =========================================================================
   3. MANCHETA Y SECCIONES
   ========================================================================= */

.agora-mancheta .wp-block-site-title a {
	text-decoration: none;
}

.agora-sello {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tampon);
	border: 1px solid var(--wp--preset--color--tampon);
	padding: 5px 9px;
	font-variant-numeric: tabular-nums;
}

.agora-lema {
	font-family: var(--wp--preset--font-family--petrona);
	font-style: italic;
	color: var(--gris-dato);
}

/* En la navegación, Opinión se escribe con la otra voz. Es un aviso
   de un carácter: lo que hay detrás de ese enlace no es información. */
.agora-nav .wp-block-navigation-item.agora-nav-opinion a {
	font-family: var(--wp--preset--font-family--petrona);
	font-style: italic;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* =========================================================================
   4. FICHA DE LA RESOLUCIÓN
   El aparato documental. Es lo que separa un diario jurídico de un blog
   jurídico: el dato en bruto, tabulado, junto al texto.
   ========================================================================= */

.agora-ficha__lista {
	font-variant-numeric: tabular-nums;
	border-top: 1px solid var(--wp--preset--color--tinta);
	margin: 0;
}

.agora-ficha__lista > div {
	display: grid;
	grid-template-columns: 6.6rem 1fr;
	gap: 12px;
	padding: 6px 0;
	border-bottom: var(--filete);
	font-size: 0.78rem;
	line-height: 1.4;
}

.agora-ficha__lista dt {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.62rem;
	color: var(--gris-dato);
	padding-top: 2px;
	margin: 0;
}

.agora-ficha__lista dd {
	font-weight: 500;
	margin: 0;
}

.agora-ficha__fallo {
	color: var(--wp--preset--color--tampon);
	font-weight: 700;
}

.agora-ficha__enlace {
	margin-top: 11px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.agora-ficha__enlace a {
	color: var(--wp--preset--color--tampon);
}

/* En el margen la columna es estrecha: la etiqueta se pone encima. */
.agora-margen .agora-ficha__lista > div,
.agora-ficha--compacta .agora-ficha__lista > div {
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 8px 0;
}

.agora-margen .agora-ficha__lista,
.agora-ficha--compacta .agora-ficha__lista {
	border-top: 0;
}

/* =========================================================================
   5. CRÉDITO Y FIRMA
   ========================================================================= */

.agora-credito {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--tinta);
	border-bottom: var(--filete);
}

.agora-credito__cabecera {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.agora-credito__fecha {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--gris-dato);
	font-variant-numeric: tabular-nums;
	margin-left: auto;
}

.agora-firma {
	display: flex;
	align-items: center;
	gap: 11px;
}

.agora-firma__retrato {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(150deg, var(--wp--preset--color--tampon), var(--wp--preset--color--tinta));
	display: block;
}

.agora-firma__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agora-firma__texto {
	display: block;
}

.agora-firma__nombre {
	display: block;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	line-height: 1.25;
	text-decoration: none;
}

.agora-firma__cargo {
	display: block;
	font-family: var(--wp--preset--font-family--petrona);
	font-style: italic;
	font-size: 0.79rem;
	color: var(--gris-dato);
	line-height: 1.3;
	margin-top: 3px;
}

/* =========================================================================
   6. MARGEN DOCUMENTAL
   La noticia y la sentencia llevan la ficha al lado. La opinión no lleva
   ficha: lleva otras voces. Esa asimetría es el modelo hecho visible.
   ========================================================================= */

.agora-margen {
	border-left: var(--filete);
	padding-left: var(--wp--custom--margen--canal);
}

.agora-columna-lectura {
	padding-right: var(--wp--custom--margen--canal);
	min-width: 0;
}

.agora-mod__tit,
.agora-margen h3 {
	font-size: 0.62rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--wp--preset--color--tinta);
	margin: 0 0 4px;
}

.agora-margen .wp-block-post-template li {
	border-bottom: var(--filete);
	padding: 10px 0;
	margin: 0;
}

.agora-margen .wp-block-post-title {
	font-size: 0.86rem;
	font-weight: 600;
	font-stretch: 92%;
	line-height: 1.3;
	letter-spacing: -0.006em;
	margin: 0;
}

.agora-margen .wp-block-post-terms,
.agora-margen .wp-block-post-date {
	display: block;
	margin-bottom: 3px;
	font-size: 0.63rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
}

/* =========================================================================
   7. RAIL «LO ÚLTIMO»
   ========================================================================= */

.agora-rail .wp-block-post-template li {
	border-bottom: var(--filete);
	padding: 11px 0;
	margin: 0;
}

.agora-rail .wp-block-post-date {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--wp--preset--color--tampon);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.agora-rail .wp-block-post-title {
	font-size: 0.92rem;
	font-weight: 600;
	font-stretch: 92%;
	line-height: 1.28;
	letter-spacing: -0.008em;
	margin: 0;
}

/* =========================================================================
   8. FILETES DE COLUMNA
   Lo que hace que una página se lea como un periódico y no como un blog.
   ========================================================================= */

.agora-filetes > .wp-block-column + .wp-block-column {
	border-left: var(--filete);
	padding-left: var(--wp--custom--margen--canal);
}

.agora-filetes > .wp-block-column:not(:last-child) {
	padding-right: var(--wp--custom--margen--canal);
}

.agora-regla-fuerte {
	border-top: 3px solid var(--wp--preset--color--tinta);
}

.agora-regla-media {
	border-top: 2px solid var(--wp--preset--color--tinta);
}

.agora-regla-fina {
	border-top: var(--filete);
}

/* =========================================================================
   9. PIE
   ========================================================================= */

.agora-pie {
	border-top: 3px solid var(--wp--preset--color--tinta);
}

.agora-pie a {
	font-size: 0.82rem;
	line-height: 1.75;
}

.agora-pie-legal {
	font-size: 0.7rem;
	color: var(--gris-dato);
	font-variant-numeric: tabular-nums;
	border-top: var(--filete);
	padding-top: 14px;
	margin-top: 28px;
}

.agora-aviso {
	font-size: 0.8rem;
	color: var(--gris-dato);
	border: 1px dashed var(--wp--preset--color--regla);
	padding: 10px 12px;
}

/* =========================================================================
   10. SUELO DE CALIDAD
   ========================================================================= */

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--tampon);
	outline-offset: 3px;
}

.agora-salta {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--tinta);
	color: #fff;
	padding: 10px 16px;
	z-index: 99;
}

.agora-salta:focus {
	left: 8px;
	top: 8px;
}

img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 960px) {
	.agora-margen {
		border-left: 0;
		padding-left: 0;
		border-top: 3px solid var(--wp--preset--color--tinta);
		margin-top: 34px;
		padding-top: 22px;
	}

	.agora-columna-lectura {
		padding-right: 0;
	}

	.agora-filetes > .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
		border-top: var(--filete);
		padding-top: 20px;
		margin-top: 20px;
	}

	.agora-filetes > .wp-block-column:not(:last-child) {
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================================
   11. CORRECCIONES SOBRE WORDPRESS REAL
   Lo que sólo se ve cuando el tema está instalado y no en una maqueta.
   ========================================================================= */

/* La entradilla manda sobre el tamaño que theme.json da a post-excerpt:
   sin el descendiente, empatan en especificidad y decide el orden de carga. */
.agora-entradilla,
.agora-entradilla p {
	font-size: var(--wp--preset--font-size--entradilla);
	line-height: 1.5;
	color: var(--wp--preset--color--tinta);
}

.agora-entradilla.agora-voz p {
	font-style: italic;
	font-family: var(--wp--preset--font-family--petrona);
}

/* Los enlaces de sección se separan solos: el blockGap los pegaba. */
.agora-nav .wp-block-navigation-item > a {
	padding: 11px 15px;
	display: block;
}

.agora-nav .wp-block-navigation__container {
	gap: 0;
}

/* En el margen los titulares son titulares, no epígrafes: h4 traía versales
   heredadas de elements.h4. */
.agora-margen .wp-block-post-title,
.agora-margen .wp-block-post-title a,
.agora-rail .wp-block-post-title {
	text-transform: none;
	letter-spacing: -0.006em;
}

.agora-margen .wp-block-post-title {
	font-size: 0.86rem;
	font-weight: 600;
}

/* Las listas del pie son navegación, no enumeración. */
.agora-pie-lista {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* Ficha de la firma al pie de la tribuna. */
.agora-bio__ficha {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.agora-firma__retrato--grande {
	width: 74px;
	height: 74px;
	flex: 0 0 74px;
}

.agora-bio__texto {
	font-family: var(--wp--preset--font-family--petrona);
	font-size: 0.94rem;
	line-height: 1.52;
	color: var(--gris-dato);
	margin-top: 7px;
}

/* El sello con la fecha de la edición. */
time.agora-sello {
	font-family: var(--wp--preset--font-family--archivo);
	text-transform: uppercase;
}

/* Los filetes verticales de la rejilla de portada. */
.agora-rejilla-3 > li,
.agora-rejilla-op > li,
.agora-rejilla-jur > li {
	border-left: var(--filete);
	padding-left: var(--wp--custom--margen--canal);
}

.agora-rejilla-3 > li:first-child,
.agora-rejilla-op > li:first-child,
.agora-rejilla-jur > li:first-child {
	border-left: 0;
	padding-left: 0;
}

.agora-rejilla-op > li {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* La franja de opinión no lleva ficha; lleva otras voces. */
.agora-rejilla-op .agora-credito {
	border: 0;
	padding: 0;
}

@media (max-width: 960px) {
	.agora-rejilla-3 > li,
	.agora-rejilla-op > li,
	.agora-rejilla-jur > li {
		border-left: 0;
		padding-left: 0;
	}
}

/* Un módulo de margen sin resultados no deja el epígrafe colgando. */
.agora-mod:has(.agora-vacio) {
	display: none;
}

.agora-vacio {
	display: none;
}