/* =============================================================================
   Página de contenido (templates/page-content.html) y entrada del blog
   (templates/single.html)
   -----------------------------------------------------------------------------
   Textos largos al contentSize de theme.json (760 px): migas, título y el
   contenido en una hoja blanca con la tipografía de lectura (.ws-prose).
   .ws-prose da formato a lo que se escribe con los bloques de siempre (títulos,
   párrafos, listas, tablas, citas, separadores, imágenes), sin clases extra.
   Se carga solo con esas plantillas (inc/content-page.php) y en el editor.
   Bajo 700 px la hoja pierde el borde y el relleno grande. La hoja y el
   espacio entre bloques llevan .wp-block-post-content para ganarle al relleno
   global anidado (has-global-padding) y al blockGap del layout del editor.
   ============================================================================= */

/* ---- Cabecera ---------------------------------------------------------------- */
.ws-content__head {
	margin-block-end: var(--wp--preset--spacing--60);
}

.ws-content__head > * {
	margin-block: 0;
}

/* Las migas, un poco más separadas del título que en el resto del sitio. */
.ws-content__head .ws-content__crumbs {
	margin-block-end: var(--wp--preset--spacing--50);
}

.ws-content__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: var(--wp--custom--line-height--tight);
}

.ws-content__meta {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-small);
}

/* ---- Hoja ------------------------------------------------------------------ */
.wp-block-post-content.ws-prose {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--70);
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--xx-large);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--relaxed);
	overflow-wrap: break-word;
}

.wp-block-post-content.ws-prose > * {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.wp-block-post-content.ws-prose > :first-child {
	margin-block-start: 0;
}

/* ---- Títulos: cada h2 abre una sección con una línea encima ------------------ */
.ws-prose h2,
.ws-prose h3,
.ws-prose h4 {
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--heading);
	line-height: var(--wp--custom--line-height--snug);
}

.wp-block-post-content.ws-prose > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start-width: 1px;
	border-block-start-style: solid;
	border-block-start-color: var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-post-content.ws-prose > h2:first-child {
	padding-block-start: 0;
	border-block-start-width: 0;
}

.wp-block-post-content.ws-prose > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--subtitle);
}

.wp-block-post-content.ws-prose > h4 {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--lead);
}

/* Títulos dentro de columnas, imagen y texto, etc.: el mismo tamaño que sueltos. */
.ws-prose :is(.wp-block-columns, .wp-block-media-text, .wp-block-group) h3 {
	font-size: var(--wp--preset--font-size--subtitle);
}

.ws-prose :is(.wp-block-columns, .wp-block-media-text, .wp-block-group) h4 {
	font-size: var(--wp--preset--font-size--lead);
}

/* h5 y h6: con la letra del texto; el h6 como línea superior en mayúsculas. */
.ws-prose h5,
.ws-prose h6 {
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--normal);
	letter-spacing: 0;
	text-transform: none;
}

.ws-prose h5 {
	font-size: var(--wp--preset--font-size--body);
}

.ws-prose h6 {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-transform: uppercase;
}

.wp-block-post-content.ws-prose > :is(h5, h6) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content.ws-prose > :is(h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Letra capital: con la letra de títulos y el color primario, de tres líneas de alto. */
.ws-prose .has-drop-cap:not(:focus)::first-letter {
	margin: 0.08em var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4.2em;
	font-weight: 400;
	line-height: 0.8;
}

.wp-block-post-content.ws-prose > :is(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---- Texto ------------------------------------------------------------------ */
.ws-prose strong,
.ws-prose b {
	font-weight: 700;
}

.ws-prose a {
	text-underline-offset: 0.15em;
}

.ws-prose code {
	padding: 0.1em 0.3em;
	border-radius: var(--wp--preset--border-radius--x-small);
	background-color: var(--wp--preset--color--surface-sunken);
	font-size: 0.9em;
}

.ws-prose pre code {
	padding: 0;
	background-color: transparent;
	font-size: inherit;
}

.ws-prose .wp-block-code {
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface-sunken);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Listas: viñeta y número del color primario ----------------------------- */
.ws-prose :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.ws-prose li + li,
.ws-prose li > :is(ul, ol) {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ws-prose li::marker {
	color: var(--wp--preset--color--primary);
}

.ws-prose ol > li::marker {
	font-weight: 700;
}

/* ---- Tablas ------------------------------------------------------------------ */
.ws-prose .wp-block-table {
	overflow-x: auto;
}

.ws-prose .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--normal);
}

.ws-prose .wp-block-table :is(th, td) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
}

.ws-prose .wp-block-table thead {
	border-block-end-width: 0;
}

.ws-prose .wp-block-table th {
	background-color: var(--wp--preset--color--surface-sunken);
	font-weight: 700;
}

.ws-prose .wp-block-table tfoot {
	border-block-start-width: 0;
	font-weight: 700;
}

/* Tabla de dos columnas sin encabezado (dato y valor): el dato, más angosto. */
.ws-prose .wp-block-table table:not(:has(thead)) td:first-child {
	width: 38%;
	background-color: var(--wp--preset--color--background);
}

.ws-prose .wp-block-table figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---- Citas, separadores e imágenes ------------------------------------------ */
.ws-prose blockquote:not(.wp-block-pullquote blockquote),
.ws-prose .wp-block-quote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start-width: 3px;
	border-inline-start-style: solid;
	border-inline-start-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lead);
}

.ws-prose cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.ws-prose cite::before {
	content: "— ";
}

/* Cita destacada: centrada entre dos líneas del color primario, con la letra de títulos. */
.ws-prose .wp-block-pullquote {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-block-width: 2px;
	border-block-style: solid;
	border-block-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
	text-align: center;
}

.ws-prose .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.ws-prose .wp-block-pullquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--snug);
}

.wp-block-post-content.ws-prose :is(hr, .wp-block-separator) {
	margin-block: var(--wp--preset--spacing--60);
	border: 0;
	border-block-start-width: 1px;
	border-block-start-style: solid;
	border-block-start-color: var(--wp--preset--color--border);
}

.ws-prose img,
.ws-prose .wp-block-cover,
.ws-prose .wp-block-embed iframe {
	border-radius: var(--wp--preset--border-radius--medium);
}

.ws-prose .wp-block-cover {
	overflow: hidden;
}

.ws-prose .wp-block-cover img {
	border-radius: 0;
}

.ws-prose :is(.wp-block-image, .wp-block-embed, .wp-block-gallery) figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Desplegable: una fila con línea arriba y abajo y un "+" que gira al abrir (como las preguntas frecuentes). */
.ws-prose .wp-block-details {
	padding-block: var(--wp--preset--spacing--40);
	border-block-width: 1px;
	border-block-style: solid;
	border-block-color: var(--wp--preset--color--border);
}

.ws-prose .wp-block-details + .wp-block-details {
	margin-block-start: 0;
	border-block-start-width: 0;
}

.ws-prose .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.ws-prose .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.ws-prose .wp-block-details summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--none);
	transition: transform var(--wp--custom--transition--base);
}

.ws-prose .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.ws-prose .wp-block-details > :not(summary) {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
}

/* Texto preformateado: la misma caja del código. */
.ws-prose .wp-block-preformatted {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface-sunken);
	font-size: var(--wp--preset--font-size--small);
	white-space: pre-wrap;
}

.ws-prose .wp-block-verse {
	padding-inline-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
}

/* Notas al pie: separadas del texto, más chicas. */
.wp-block-post-content.ws-prose > .wp-block-footnotes {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start-width: 1px;
	border-block-start-style: solid;
	border-block-start-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ws-prose sup.fn a {
	text-decoration: none;
	font-weight: 700;
}

/* ---- Mobile ------------------------------------------------------------------ */
@media (max-width: 699px) {
	.ws-content__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.wp-block-post-content.ws-prose {
		padding: 0;
		border-width: 0;
		border-radius: 0;
		background-color: transparent;
	}

	/* Tablas de tres columnas o más: se deslizan de lado antes que apretarse. */
	.ws-prose .wp-block-table table:has(tr > :nth-child(3)) {
		min-width: 36em;
	}
}