/*
 * base.css — Estilos globales de HTML, body, tipografía y links
 */

body {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
	overflow-x: hidden;
}

/* ---- Headings ---- */
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

@media (min-width: 1024px) {
	h1 { font-size: clamp(var(--text-h1), 4vw, var(--text-display)); }
}

/* ---- Links ---- */
a {
	color: var(--color-accent-cyan);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover,
a:focus-visible {
	opacity: 0.85;
}

a:focus-visible {
	outline: 2px solid var(--color-accent-cyan);
	outline-offset: 3px;
	border-radius: var(--border-radius-sm);
}

/* ---- Contenido enriquecido (the_content) ---- */
.article__content p {
	margin-bottom: var(--space-3);
	line-height: var(--line-height-body);
}

.article__content h2,
.article__content h3 {
	margin-top: var(--space-5);
	margin-bottom: var(--space-2);
	color: var(--color-text-primary);
}

.article__content ul,
.article__content ol {
	margin-bottom: var(--space-3);
	padding-left: var(--space-3);
}

.article__content ul { list-style: disc; }
.article__content ol { list-style: decimal; }

.article__content li {
	margin-bottom: var(--space-1);
}

.article__content blockquote {
	border-left: 3px solid var(--color-accent-cyan);
	padding-left: var(--space-3);
	margin: var(--space-4) 0;
	font-style: italic;
	color: var(--color-text-muted);
}

.article__content a {
	color: var(--color-accent-cyan);
	border-bottom: 1px solid rgba(0, 229, 255, 0.3);
	transition: border-color var(--transition-fast);
}

.article__content a:hover {
	border-color: var(--color-accent-cyan);
}

.article__content img {
	border-radius: var(--border-radius-md);
	margin: var(--space-4) 0;
	max-width: 100%;
	height: auto;
}

/* Embeds, iframes y objetos incrustados */
.article__content iframe,
.article__content embed,
.article__content object,
.article__content video {
	max-width: 100%;
}

.article__content .wp-block-embed__wrapper {
	position: relative;
	overflow: hidden;
}

.article__content .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---- Tablas en el contenido ---- */
.article__content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-4) 0;
	font-size: 0.9375rem;
	overflow-x: auto;
	display: block;
}

.article__content th,
.article__content td {
	padding: var(--space-1) var(--space-2);
	border: 1px solid rgba(0, 229, 255, 0.12);
	text-align: left;
}

.article__content th {
	background: rgba(0, 229, 255, 0.06);
	color: var(--color-accent-cyan);
	font-weight: var(--font-weight-bold);
	font-size: var(--text-caption);
	letter-spacing: var(--letter-spacing-caption);
	text-transform: uppercase;
}

.article__content tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.02);
}

/* ---- Separador horizontal ---- */
.article__content hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
	margin: var(--space-6) 0;
}

/* ---- Clases de alineación de WordPress ---- */
/* Mobile-first: bloque en mobile, float en tablet+ */
.alignleft,
.alignright {
	display: block;
	max-width: 100%;
	margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
	.alignleft {
		float: left;
		max-width: 50%;
		margin-right: var(--space-3);
	}

	.alignright {
		float: right;
		max-width: 50%;
		margin-left: var(--space-3);
	}
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	margin-inline: calc( var(--space-6) * -1 );
	max-width: calc( 100% + var(--space-6) * 2 );
}

.alignfull {
	margin-inline: calc( 50% - 50vw );
	max-width: 100vw;
	width: 100vw;
}

/* En mobile, alignwide y alignfull no salen del contenedor */
@media (max-width: 767px) {
	.alignwide {
		margin-inline: calc( var(--container-padding) * -1 );
		max-width: calc( 100% + var(--container-padding) * 2 );
	}

	.alignfull {
		margin-inline: calc( var(--container-padding) * -1 );
		max-width: calc( 100% + var(--container-padding) * 2 );
		width: auto;
	}
}

/* ---- Captions de imágenes (wp-caption) ---- */
.wp-caption {
	max-width: 100%;
	margin: var(--space-4) 0;
}

.wp-caption img {
	border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
	margin: 0;
}

.wp-caption-text {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	padding: var(--space-1) var(--space-2);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(0, 229, 255, 0.08);
	border-top: none;
	border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
	text-align: center;
}

/* ---- Código ---- */
.article__content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.875rem;
	background: rgba(0, 229, 255, 0.07);
	border: 1px solid rgba(0, 229, 255, 0.15);
	border-radius: var(--border-radius-sm);
	padding: 2px 6px;
	color: var(--color-accent-cyan);
}

.article__content pre {
	background: var(--color-bg-secondary);
	border: 1px solid rgba(0, 229, 255, 0.12);
	border-radius: var(--border-radius-md);
	padding: var(--space-3);
	overflow-x: auto;
	margin: var(--space-4) 0;
}

.article__content pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	color: var(--color-text-primary);
}

/* ---- Contenido: ajustes responsive (mobile) ---- */
@media (max-width: 767px) {
	.article__content p {
		line-height: var(--line-height-body);
	}

	.article__content h2 {
		margin-top: var(--space-4);
	}

	.article__content h3 {
		margin-top: var(--space-3);
	}

	.article__content ul,
	.article__content ol {
		padding-left: var(--space-2);
	}

	.article__content blockquote {
		margin: var(--space-3) 0;
		padding-left: var(--space-2);
	}

	.article__content pre {
		padding: var(--space-2);
		font-size: var(--text-caption);
	}

	.article__content img {
		margin: var(--space-3) 0;
	}

	.article__content table {
		font-size: 0.875rem;
	}
}

/* ---- Accesibilidad ---- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--color-bg-secondary);
	clip: auto;
	height: auto;
	left: var(--space-2);
	padding: var(--space-2) var(--space-3);
	top: var(--space-2);
	width: auto;
	z-index: var(--z-modal);
}