/**
 * AutoconsumoGuía - ajustes de la Fase 3 (legibilidad, TOC, FAQ, relacionados y accesibilidad).
 * Se encola después de style.css y custom.css del tema hijo.
 */

/* Ancho de lectura cómodo (~68 caracteres) sin afectar a tablas ni cajas anchas */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3 {
	max-width: 68ch;
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
	scroll-margin-top: 1.5rem;
	text-wrap: balance;
}

/* Tablas: desplazamiento horizontal en móvil en lugar de desbordar */
.single-post .entry-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.single-post .entry-content .wp-block-table td,
.single-post .entry-content .wp-block-table th {
	font-variant-numeric: tabular-nums;
}

/* Fecha de actualización visible bajo el título */
.acg-updated {
	display: block;
	font-size: 0.92rem;
	color: var(--acg-gray-700);
	margin-top: 0.4rem;
}

/* Índice de contenidos plegable (generado desde los H2) */
.acg-toc {
	margin: 1.6em 0 2em;
	padding: 1rem 1.25rem;
	border: 1px solid var(--acg-gray-200, #e5e2da);
	border-radius: 10px;
	background: var(--acg-cream, #faf7f0);
	max-width: 68ch;
}

.acg-toc summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--acg-navy-dark);
}

.acg-toc ol {
	margin: 0.75rem 0 0;
	padding-left: 1.2rem;
}

.acg-toc li {
	margin: 0.3rem 0;
}

/* Preguntas frecuentes con <details> nativo (accesible y sin JS) */
.entry-content .acg-faq-item {
	border: 1px solid var(--acg-gray-200, #e5e2da);
	border-radius: 10px;
	padding: 0.9rem 1.1rem;
	margin: 0 0 0.75rem;
	max-width: 68ch;
	background: #fff;
}

.entry-content .acg-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--acg-navy-dark);
	list-style-position: outside;
}

.entry-content .acg-faq-item[open] summary {
	margin-bottom: 0.5rem;
}

/* Bloque «Sigue leyendo» con artículos del mismo grupo */
.acg-related {
	margin: 2.5em 0 1em;
	padding-top: 1.5em;
	border-top: 1px solid var(--acg-gray-200, #e5e2da);
}

.acg-related__title {
	font-family: var(--acg-font-heading);
	font-size: 1.3rem;
	margin: 0 0 0.8rem;
	color: var(--acg-navy-dark);
}

.acg-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.acg-related__list a {
	display: block;
	padding: 0.75rem 1rem;
	border: 1px solid var(--acg-gray-200, #e5e2da);
	border-radius: 10px;
	text-decoration: none;
	color: var(--acg-navy-dark);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.acg-related__list a:hover {
	border-color: var(--acg-orange);
	background: var(--acg-cream, #faf7f0);
}

/* Huecos de anuncio: altura reservada para evitar desplazamientos (CLS)
   y separación de botones, TOC y navegación (política de AdSense). */
.acg-ad-slot.acg-ad {
	margin: 2.4em auto;
	min-height: 280px;
	clear: both;
	text-align: center;
}

@media (min-width: 783px) {
	.acg-ad-slot.acg-ad {
		min-height: 250px;
	}
}

/* Portada: GeneratePress pone .site-content en flex y el hero quedaba como columna
   a la izquierda en escritorio; aquí todo va apilado (hero arriba, secciones debajo). */
.home .site-content {
	display: block;
}

/* Portada: bloque por tema (tarjeta con enlaces, no un enlace entero) */
.acg-cat-card--tema:hover {
	transform: none;
}

.acg-cat-card--tema .acg-cat-card__title a {
	color: inherit;
	text-decoration: none;
}

.acg-cat-card__list {
	list-style: none;
	margin: 0.4rem 0 0.8rem;
	padding: 0;
	font-size: 0.92rem;
	line-height: 1.45;
}

.acg-cat-card__list li {
	margin: 0 0 0.55rem;
}

.acg-cat-card__list a,
.acg-cat-card__more a {
	color: var(--acg-navy-dark);
}

.acg-cat-card__more {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
}

/* Cabecera: el menú corto cabe en una fila */
@media (min-width: 1025px) {
	.main-navigation .main-nav > ul {
		flex-wrap: nowrap;
	}
}

/* Accesibilidad: foco visible y movimiento reducido */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
	outline: 3px solid var(--acg-orange);
	outline-offset: 2px;
}

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

	.acg-fade-up {
		opacity: 1 !important;
		transform: none !important;
	}
}