/*
 * wordpress-fixes.css
 * ------------------------------------------------------------------
 * Correcciones puntuales que el CDN de Tailwind no resuelve por sí solo.
 * NO es una segunda arquitectura de estilos: solo ajustes mínimos para
 * componentes nativos de WordPress y la legibilidad sobre fondo oscuro.
 * ------------------------------------------------------------------
 */

/* Evita el desplazamiento horizontal en cualquier dispositivo. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Color de selección de texto acorde a la marca. */
::selection {
	background-color: #e50914;
	color: #ffffff;
}

/* Anclas con compensación del header sticky (refuerzo de scroll-mt-*). */
:target {
	scroll-margin-top: 6rem;
}

/* Foco visible global coherente para navegación por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #e50914;
	outline-offset: 2px;
}

/*
 * Contenido del editor (the_content): el CDN de Tailwind no aplica estilos
 * a las etiquetas generadas por Gutenberg/el editor clásico. Aquí damos un
 * estilo legible básico SOLO dentro de .entry-content.
 */
.entry-content > * + * {
	margin-top: 1.25rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	color: #ffffff;
	line-height: 1.15;
	margin-top: 2rem;
}

.entry-content h2 {
	font-size: 1.75rem;
}

.entry-content h3 {
	font-size: 1.4rem;
}

.entry-content a {
	color: #e50914;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: #ffffff;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content blockquote {
	border-left: 4px solid #e50914;
	padding: 0.5rem 0 0.5rem 1.25rem;
	color: #d4d4d4;
	font-style: italic;
}

.entry-content img {
	height: auto;
	max-width: 100%;
	border-radius: 0.75rem;
}

.entry-content code {
	background-color: #181818;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.375rem;
	padding: 0.1rem 0.4rem;
	font-size: 0.9em;
}

.entry-content pre {
	background-color: #101010;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	padding: 1rem;
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 0.6rem 0.8rem;
	text-align: left;
}

/* Listas de comentarios anidados. */
.comment-list .children {
	margin-left: 1.25rem;
	padding-left: 1.25rem;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 1.5rem;
}

.comment-list .comment-body {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	background-color: #101010;
}

.comment-list .comment-author .fn {
	color: #ffffff;
	font-weight: 600;
}

.comment-list .comment-author .avatar {
	border-radius: 9999px;
	margin-right: 0.5rem;
}

.comment-list .comment-meta a {
	color: #9ca3af;
	font-size: 0.8rem;
}

.comment-list .reply a {
	display: inline-block;
	margin-top: 0.5rem;
	color: #e50914;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Paginación generada por the_posts_pagination(). */
.chris-soto-pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.chris-soto-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e5e5e5;
	font-family: "Oswald", sans-serif;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.chris-soto-pagination .page-numbers:hover {
	border-color: #e50914;
	color: #ffffff;
}

.chris-soto-pagination .page-numbers.current {
	background-color: #e50914;
	border-color: #e50914;
	color: #ffffff;
}

/* Respeto a usuarios que prefieren menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Animación discreta de aparición (controlada por IntersectionObserver). */
.cs-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.cs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.cs-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}