/* ==========================================================================
   Reformas en Toledo · Correcciones (pasos 1 y 2)
   1. Contenido visible sin esperar a JavaScript
   2. Adaptación a móvil
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Contenido visible desde la primera carga
   Blockspare deja sus bloques en opacity:0 hasta que un script detecta el
   scroll, y LiteSpeed retrasa ese script hasta que el visitante interactúa.
   Resultado: portada vacía para quien no toca nada (y para los buscadores).
   El contenido se muestra siempre; la animación de entrada se rehará en el
   paso de movimiento partiendo de un estado ya visible.
   -------------------------------------------------------------------------- */
body .blockspare-block-animation,
body:not(.amp) .blockspare-block-animation {
	opacity: 1 !important;
	animation: none !important;
}

/* Carruseles de Blockspare antes de que arranque slick: en vez de apilar
   todas las tarjetas, se muestran en fila y se recorta el resto. */
.blockspare-posts-block-latest-post-carousel-wrap .slick-slider:not(.slick-initialized) {
	display: flex;
	gap: 16px;
	overflow: hidden;
}

.blockspare-posts-block-latest-post-carousel-wrap .slick-slider:not(.slick-initialized) > * {
	flex: 0 0 calc((100% - 48px) / 4);
	min-width: 0;
}

.blockspare-slides-1 .slick-slider:not(.slick-initialized) > * {
	flex-basis: 100%;
}

/* Flechas del carrusel sin inicializar: no hacen nada todavía. */
.slick-slider:not(.slick-initialized) .slick-arrow {
	display: none !important;
}


/* --------------------------------------------------------------------------
   2. Ajustes generales que afectan sobre todo al móvil
   -------------------------------------------------------------------------- */

/* CoverNews anima «width» en <body>: provoca recálculos de maquetación
   al cambiar el tamaño de la ventana y no aporta nada. */
body {
	transition: none;
}

/* El lema del sitio en mayúsculas se lee peor (y a veces se muestra). */
#masthead .site-description {
	text-transform: none;
}

/* Migas de pan en minúsculas: en mayúsculas ocupaban dos líneas en móvil
   y se leen peor. */
.em-breadcrumbs ul li {
	text-transform: none;
}

/* Jerarquía del artículo: el H1 siempre por encima de los H2 y H3.
   Antes, en móvil, el título medía 24px y los H2 30px. */
.single .entry-header .entry-title,
.single h1.entry-title {
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
	line-height: 1.15;
	text-wrap: balance;
}

.single .entry-content h2 {
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
	line-height: 1.25;
	text-wrap: balance;
}

.single .entry-content h3 {
	font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.5rem);
	line-height: 1.3;
	text-wrap: balance;
}

/* Objetivos táctiles: «Leer más» y etiquetas de categoría medían 12px de alto.
   Se llevan a un mínimo de 24px (WCAG 2.2) sin cambiar su aspecto. */
body .aft-readmore,
body .blockspare-posts-block-post-grid-more-link a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-size: 14px !important;
}

.cat-links a,
.blockspare-posts-block-post-category a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Autor y fecha de las tarjetas de CoverNews (17px de alto), «Ver cookies»
   y el crédito del pie (22px): mínimo de 24px sin cambiar el aspecto. */
body .item-metadata a,
body .grid-item-metadata a,
body .cky-consent-container a.cky-policy,
body .site-footer .site-info a,
body .saboxplugin-wrap .saboxplugin-authorname a {
	display: inline-block;
	min-height: 24px;
	padding-block: 3px;
	line-height: 18px;
}

/* Aviso de cookies: CookieYes pinta el borde de «Rechazar» y «Configurar»
   en blanco desde un atributo style (de ahí el !important). Sin borde no
   parecen botones y rechazar queda menos visible que aceptar. */
.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-customize {
	border-color: currentColor !important;
}


/* --------------------------------------------------------------------------
   2b. Móvil y tableta
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Bloques a ancho completo: CoverNews los saca 10px más allá del borde
	   (calc(50% - 50vw - 10px)) y cortaba la primera letra de cada línea
	   en la portada («eer más», «ormas generales»). En móvil ocupan el ancho
	   del contenido, como el resto de la página. */
	body.full-width-content:not(.single-content-mode-boxed) .alignfull,
	.entry-content ol:not([class*="wp-"]).alignfull,
	.entry-content ul:not([class*="wp-"]).alignfull {
		margin-left: 0;
		margin-right: 0;
		width: auto;
		max-width: 100%;
	}

	/* Cabecera: de ~300px a ~140px antes del primer contenido. */
	.masthead-banner,
	.masthead-banner.data-bg {
		padding: 14px 0;
	}

	.masthead-banner .custom-logo {
		max-height: 56px;
		width: auto;
	}

	/* Aviso de cookies (CookieYes): ocupaba casi media pantalla.
	   Texto más compacto y los tres botones en una fila, con «Rechazar»
	   y «Configurar» visibles como botones, igual de fáciles de pulsar
	   que «Aceptar». */
	.cky-consent-container .cky-consent-bar {
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
	}

	.cky-consent-container .cky-title {
		font-size: 16px;
		margin-bottom: 4px;
	}

	.cky-consent-container .cky-notice-des,
	.cky-consent-container .cky-notice-des * {
		font-size: 13px;
		line-height: 1.45;
	}

	.cky-consent-container .cky-notice-des {
		max-height: 7.5em;
		overflow-y: auto;
	}

	.cky-consent-container .cky-notice-btn-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		margin-top: 10px;
	}

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
		flex: 1 1 0;
		width: auto;
		min-height: 44px;
		margin: 0;
		padding: 8px 6px;
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
	}

	/* «Configurar» lleva una flecha que pisaba el texto. */
	.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
		padding-right: 22px;
	}

	/* Tablas del artículo: medían 364px en una columna de 335 y hacían
	   desplazarse la página en horizontal. Columnas repartidas y texto
	   que parte línea dentro de la celda. */
	.entry-content table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
		font-size: 15px;
	}

	.entry-content th,
	.entry-content td {
		padding: 8px 6px;
		overflow-wrap: break-word;
		hyphens: auto;
		vertical-align: top;
	}

	.entry-content .wp-block-table {
		overflow-x: auto;
	}
}