/*
 * U9 · Página legal (componentes.md): aviso legal, privacidad y cookies.
 * Titular a escala H1 y cuerpo de lectura en una columna centrada, al
 * ancho de lectura (espaciado.md). Es la única plantilla con el editor de
 * bloques: aquí se da estilo a lo que produce en un texto legal
 * (párrafos, h2, h3, listas, enlaces, negritas y tablas sencillas) y a
 * nada más. Solo se carga en la plantilla Legal.
 */

/* La columna se mide con la letra del texto, no con la del titular: por
   eso el ancho va en la rejilla del contenedor. */
.loha-legal {
	display: grid;
	grid-template-columns: minmax(0, var(--lectura));
	justify-content: center;
}

.loha-legal__cuerpo {
	margin-top: var(--separacion);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

/* El reset deja sin margen lo que pinta el editor: aire entre bloques. */
.loha-legal__cuerpo > * + * {
	margin-top: 1em;
}

/* Titulares del texto: h2 en DM Serif, al escalón H3; h3 en Manrope
   seminegrita, al tamaño de lectura. Más aire encima que debajo, para
   que cada titular se lea con su apartado. */
.loha-legal__cuerpo h2 {
	color: var(--c-texto);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.loha-legal__cuerpo h3 {
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-lectura);
	font-weight: 600;
	line-height: var(--lh-lectura);
}

.loha-legal__cuerpo > h2:not(:first-child) {
	margin-top: 2.25em;
}

.loha-legal__cuerpo > h3:not(:first-child) {
	margin-top: 1.75em;
}

.loha-legal__cuerpo > :is(h2, h3) + * {
	margin-top: 0.6em;
}

/* Listas: el reset quita las viñetas a las que llevan clase, y el editor
   se la pone a todas (wp-block-list). */
.loha-legal__cuerpo :is(ul, ol) {
	padding-left: 1.4em;
}

.loha-legal__cuerpo ul {
	list-style: disc;
}

.loha-legal__cuerpo ol {
	list-style: decimal;
}

.loha-legal__cuerpo li + li {
	margin-top: 0.35em;
}

.loha-legal__cuerpo li::marker {
	color: var(--c-texto);
}

.loha-legal__cuerpo strong,
.loha-legal__cuerpo b {
	color: var(--c-texto);
}

/* Enlaces subrayados, como en todo el sitio; el hover y el foco
   engruesan el subrayado. */
.loha-legal__cuerpo a {
	color: var(--c-texto);
	overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
	.loha-legal__cuerpo a:hover {
		text-decoration-thickness: 2px;
	}
}

.loha-legal__cuerpo a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Tablas sencillas (las de cookies): filetes horizontales finos, sin
   cuadrícula, cabecera en seminegrita. En M se desplazan de lado dentro
   de su bloque, nunca la página. Sustituyen a los bordes de la tabla del
   editor (wp-block-table). */
.loha-legal__cuerpo figure {
	margin: 0;
}

.loha-legal__cuerpo .wp-block-table {
	overflow-x: auto;
}

.loha-legal__cuerpo table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-interfaz);
	line-height: 1.5;
}

.loha-legal__cuerpo :is(th, td) {
	padding: 0.65em 1em 0.65em 0;
	border: 0;
	border-bottom: 1px solid var(--c-filete);
	text-align: left;
	vertical-align: top;
}

.loha-legal__cuerpo th {
	color: var(--c-texto);
	font-weight: 600;
}

.loha-legal__cuerpo thead {
	border: 0;
}

.loha-legal__cuerpo thead :is(th, td) {
	border-bottom-color: var(--c-texto);
}

.loha-legal__cuerpo figcaption {
	margin-top: 0.6em;
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
}