/* ==========================================================================
   Reformas en Toledo · Lectura (paso 4)

   Una columna de ~70 caracteres para los artículos, una escala de títulos
   con pasos claros y estilo propio para lo que acompaña al texto: entradilla,
   índice, tablas, citas, valoración, navegación y caja del autor.

   Escala (rem): 1.25 cuerpo · 1.375 entradilla · 1.5 H3 · 1.875 H2 · 3 H1
   Source Sans 3 es estrecha y de ojo pequeño: a 20px se lee como otras a 18px
   y deja ~75 caracteres por línea en la columna de 40rem.
   ========================================================================== */

:root {
	--rt-measure: 40rem;
}


/* --------------------------------------------------------------------------
   Columna de lectura
   Las entradas ya no tienen barra lateral (functions.php); aquí se centra
   la columna para que el texto no pase de ~75 caracteres por línea.
   -------------------------------------------------------------------------- */
body.single-post #primary.content-area {
	float: none;
	width: 100%;
	max-width: var(--rt-measure);
	margin-inline: auto;
}

body.single-post .em-breadcrumbs {
	max-width: var(--rt-measure);
	margin-inline: auto;
}

/* El artículo va directamente sobre el papel, como la portada: sin la caja
   blanca con sombra de CoverNews. */
body.single-post .entry-content-wrap,
body.single-post .entry-header {
	padding-inline: 0;
	background: transparent;
	box-shadow: none;
}


/* --------------------------------------------------------------------------
   Cabecera del artículo
   -------------------------------------------------------------------------- */
body.single-post .entry-header .entry-title {
	margin-block: 0.4em 0.5em;
}

/* Entradilla: antes una cursiva larga de 21px, cansada de leer.
   Ahora redonda, algo mayor que el cuerpo y en tinta secundaria. */
body.single-post .entry-header .post-excerpt,
body.single-post .entry-header .post-excerpt p {
	font-family: var(--rt-sans) !important;
	font-style: normal;
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--rt-ink-2);
}

body.single-post .aft-post-thumbnail-wrapper img {
	border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Cuerpo del texto
   -------------------------------------------------------------------------- */
body.single-post .entry-content {
	font-size: 1.25rem;
	line-height: 1.6;
}

body.single-post .entry-content :is(p, li) {
	font-size: 1.25rem;
	line-height: 1.6;
}

body.single-post .entry-content p {
	margin-bottom: 1.1em;
}

body.single-post .entry-content :is(ul, ol) {
	margin-bottom: 1.25em;
	padding-left: 1.25em;
}

body.single-post .entry-content li + li {
	margin-top: 0.4em;
}

body.single-post .entry-content li::marker {
	color: var(--rt-accent);
}

/* Más aire encima de cada título que debajo: el título pertenece a lo que sigue. */
body.single-post .entry-content h2 {
	margin: 2.2em 0 0.6em;
}

body.single-post .entry-content h3 {
	margin: 1.8em 0 0.5em;
}

body.single-post .entry-content :is(h2, h3) + :is(p, ul, ol) {
	margin-top: 0;
}

body.single-post .entry-content img {
	border-radius: 2px;
}

body.single-post .entry-content strong {
	font-weight: 700;
	color: var(--rt-ink);
}

/* Citas reales (bloque Cita y Cita destacada). */
body.single-post .entry-content :is(blockquote, .wp-block-quote, .wp-block-pullquote) {
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border: 0;
	border-left: 1px solid var(--rt-accent);
	background: none;
	font-family: var(--rt-display) !important;
	font-size: 1.375rem;
	font-stretch: 87.5%;
	/* Archivo no tiene cursiva y algunas citas la traen en línea desde el
	   editor (style="font-style: italic"): saldría inclinada a la fuerza. */
	font-style: normal !important;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.45;
	color: var(--rt-ink);
}

body.single-post .entry-content :is(blockquote, .wp-block-quote, .wp-block-pullquote) p {
	font: inherit !important;
	color: inherit;
}


/* --------------------------------------------------------------------------
   Índice de contenidos (Easy Table of Contents)
   -------------------------------------------------------------------------- */
body #ez-toc-container {
	width: 100%;
	margin: 1.75em 0 2em;
	padding: 1.1em 1.4em 1.2em;
	background: var(--rt-paper);
	border: 1px solid var(--rt-line);
	border-radius: 4px;
	box-shadow: none;
}

body #ez-toc-container .ez-toc-title {
	font-family: var(--rt-display) !important;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--rt-ink);
}

body #ez-toc-container nav ul {
	margin: 0.6em 0 0;
	padding-left: 0;
}

body #ez-toc-container nav ul ul {
	padding-left: 1.1em;
}

body #ez-toc-container li {
	margin: 0.35em 0 0;
	font-size: 1rem;
	line-height: 1.4;
}

/* !important: los enlaces del texto llevan la terracota forzada (brand.css)
   y el índice está dentro del artículo. Aquí van en tinta; el acento solo
   al pasar el ratón. */
body #ez-toc-container a,
body #ez-toc-container a:visited {
	color: var(--rt-ink) !important;
	text-decoration: none !important;
}

body #ez-toc-container a:hover {
	color: var(--rt-accent) !important;
	text-decoration: underline !important;
	text-underline-offset: 0.18em;
}

/* Botón de plegar el índice: icono en tinta sobre un filete. */
body #ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle,
body #ez-toc-container a.ez-toc-toggle {
	padding: 4px 6px;
	border: 1px solid var(--rt-line) !important;
	border-radius: 4px;
	background: var(--rt-surface) !important;
	color: var(--rt-ink) !important;
}

body #ez-toc-container a.ez-toc-toggle svg,
body #ez-toc-container a.ez-toc-toggle svg * {
	fill: currentColor;
	color: currentColor;
}


/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
body.single-post .entry-content table {
	width: 100%;
	margin: 1.5em 0 2em;
	border-collapse: collapse;
	border: 0;
	font-size: 1rem;
	line-height: 1.45;
}

body.single-post .entry-content :is(th, td) {
	padding: 0.65em 0.75em;
	border: 0;
	border-bottom: 1px solid var(--rt-line);
	text-align: left;
	vertical-align: top;
	font-size: 1rem;
}

body.single-post .entry-content thead :is(th, td),
body.single-post .entry-content tr:first-child th {
	background: var(--rt-paper);
	border-bottom: 2px solid var(--rt-ink);
	font-weight: 700;
	color: var(--rt-ink);
}


/* --------------------------------------------------------------------------
   «Valora este post» (kk Star Ratings): discreto, no compite con el texto
   -------------------------------------------------------------------------- */
body .kk-star-ratings {
	margin: 0 0 1.25em;
	opacity: 0.85;
}

body .kk-star-ratings .kksr-legend {
	font-size: 0.875rem;
	color: var(--rt-ink-3);
}


/* --------------------------------------------------------------------------
   Final del artículo: autor, navegación y «Sigue leyendo»
   -------------------------------------------------------------------------- */

/* Caja del autor (Simple Author Box). */
body .saboxplugin-wrap {
	display: block;
	margin: 3em 0 0;
	padding: 1.5em 0 0;
	border: 0;
	border-top: 1px solid var(--rt-line);
	background: none;
	box-shadow: none;
}

body .saboxplugin-wrap .saboxplugin-tab {
	display: grid;
	grid-template-columns: 72px 1fr;
	column-gap: 1.1em;
	align-items: start;
}

body .saboxplugin-wrap .saboxplugin-gravatar {
	grid-row: span 2;
	float: none;
	width: 72px;
	margin: 0;
}

body .saboxplugin-wrap .saboxplugin-gravatar img {
	width: 72px;
	height: 72px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

body .saboxplugin-wrap .saboxplugin-authorname {
	margin: 0 0 0.3em;
	font-family: var(--rt-display) !important;
	font-size: 1.25rem;
	font-weight: 600;
	text-align: left;
}

body .saboxplugin-wrap .saboxplugin-authorname a {
	color: var(--rt-ink);
}

body .saboxplugin-wrap .saboxplugin-desc,
body .saboxplugin-wrap .saboxplugin-desc p {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1.55;
	text-align: left;
	color: var(--rt-ink-2);
}

/* Navegación anterior / siguiente. */
body.single-post .post-navigation {
	margin-top: 2.5em;
	padding-top: 1.25em;
	border-top: 1px solid var(--rt-line);
}

/* Marcado de CoverNews: <a>Anterior: <span class="nav-title">Título</span></a>.
   La etiqueta va pequeña en sans; el título, en serif. */
body.single-post .post-navigation .nav-links a {
	display: block;
	font-family: var(--rt-sans) !important;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--rt-ink-3) !important;
	text-decoration: none !important;
}

body.single-post .post-navigation .nav-links a .nav-title {
	display: block;
	margin-top: 0.25em;
	font-family: var(--rt-display) !important;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--rt-ink);
}

body.single-post .post-navigation .nav-links a:hover .nav-title {
	color: var(--rt-accent);
}

/* «Sigue leyendo»: alineado con la columna del texto. */
body.single-post .em-reated-posts {
	width: 100%;
	max-width: var(--rt-measure);
	margin: 3em auto 0;
	float: none;
}

body.single-post .em-reated-posts .related-title {
	margin: 0 0 1rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--rt-ink);
	font-family: var(--rt-display) !important;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--rt-ink);
}

/* «Sigue leyendo» como lista compacta (imagen pequeña + título): en la
   rejilla de CoverNews, a 40rem, los titulares se partían cada dos palabras. */
body.single-post .em-reated-posts .row {
	display: block;
	margin: 0;
}

/* CoverNews fija estas columnas a un cuarto del ancho con más especificidad. */
body.single-post .em-reated-posts .latest-posts-grid {
	float: none;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: 0;
}

body.single-post .em-reated-posts .spotlight-post {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 1rem;
	align-items: start;
	padding: 1rem 0;
	border-bottom: 1px solid var(--rt-line);
	background: transparent;
	box-shadow: none;
}

body.single-post .em-reated-posts figure {
	margin: 0;
}

body.single-post .em-reated-posts figure img {
	display: block;
	width: 112px;
	height: 84px;
	object-fit: cover;
	border-radius: 2px;
}

body.single-post .em-reated-posts .figure-categories {
	display: none;
}

body.single-post .em-reated-posts figcaption {
	padding: 0;
}

body.single-post .em-reated-posts .article-title {
	margin: 0 0 0.3rem;
	font-size: 1.125rem;
	line-height: 1.35;
}

body.single-post .em-reated-posts .grid-item-metadata {
	font-size: 0.875rem;
	color: var(--rt-ink-3);
}


/* --------------------------------------------------------------------------
   Archivos de categoría y búsqueda: tarjetas sobre el papel, como la portada
   -------------------------------------------------------------------------- */
body:is(.archive, .search) .page-title,
body.archive h1 {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.1;
}

body:is(.archive, .search) #primary .spotlight-post {
	background: transparent;
	box-shadow: none;
}

body:is(.archive, .search) #primary .spotlight-post figcaption {
	padding: 0.9rem 0 0;
}

body:is(.archive, .search) #primary .spotlight-post .article-title {
	font-size: 1.25rem;
	line-height: 1.3;
}

body:is(.archive, .search) #primary .spotlight-post .read-img img,
body:is(.archive, .search) #primary .spotlight-post figure img {
	border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.single-post .entry-header .post-excerpt,
	body.single-post .entry-header .post-excerpt p {
		font-size: 1.1875rem;
	}

	body.single-post .entry-content :is(p, li) {
		font-size: 1.125rem;
	}

	body .saboxplugin-wrap .saboxplugin-tab {
		grid-template-columns: 56px 1fr;
	}

	body .saboxplugin-wrap .saboxplugin-gravatar,
	body .saboxplugin-wrap .saboxplugin-gravatar img {
		width: 56px;
		height: 56px;
	}
}
