/**
 * Páginas legales (política de privacidad y las que vengan detrás).
 *
 * Va aparte de base.css porque son reglas de una página que casi nadie visita:
 * cargarlas en la portada sería peso muerto en la ruta crítica. Se encolan solo
 * cuando el contenido lleva la clase `av-legal` (ver inc/enqueue.php).
 *
 * Criterios:
 *  - Medida de lectura acotada a --av-medida: 1.4.8 de la WCAG pide un máximo
 *    de 80 caracteres por línea y un texto legal es justo donde más se nota.
 *  - Jerarquía por tamaño y aire, no por color: 1.4.1 pide que el color no sea
 *    el único medio para transmitir información.
 *  - Los enlaces del índice y del cuerpo van subrayados. En un documento legal
 *    la sobriedad ayuda, y un enlace sin subrayado dentro de un párrafo solo se
 *    distingue por color.
 */

.av-legal {
	/*
	 * 38rem, no los 44rem de --av-medida. Esa variable está calibrada para la
	 * tipografía de los artículos, que llega a 20px; aquí el cuerpo se queda en
	 * 18px y con 44rem la línea salía a 87 caracteres medidos, por encima del
	 * tope de 80 del criterio 1.4.8 de la WCAG. Con 38rem la medida baja a 75.
	 */
	/*
	 * El gutter va incluido en el max-width, igual que en --av-content: el
	 * bloque av/seccion no aplica margen lateral —lo pone cada contenido— y sin
	 * esto el texto quedaba pegado a los dos bordes de la pantalla en móvil.
	 */
	max-inline-size: calc(38rem + 2 * var(--av-gutter));
	padding-inline: var(--av-gutter);
	margin-inline: auto;
	/*
	 * El suelo del cuerpo sube a 17px porque a 768px de ventana la columna ya
	 * está a su ancho máximo pero la letra todavía no: salían 79 caracteres por
	 * línea, pegados al tope de 80 de la WCAG. Con este suelo bajan a 74.
	 */
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
	line-height: 1.75;
	color: var(--av-contrast);
	text-wrap: pretty;
}

.av-legal > * {
	margin-block: 0;
}

.av-legal > * + * {
	margin-block-start: 1.125rem;
}

.av-legal .av-legal__fecha {
	margin-block-start: 0;
	font-size: 0.9375rem;
	color: var(--av-muted);
}

/* --------------------------------------------------------------------- Índice */

.av-legal .av-legal__indice {
	margin-block-start: 2rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius, 16px);
	background: var(--av-surface);
}

.av-legal__indice-titulo {
	margin-block: 0 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--av-primary-dark);
}

.av-legal__indice-lista {
	/*
	 * Sin viñetas: la lista es un sumario de navegación y el punto no aporta
	 * nada. Sigue siendo un <ul>, así que el lector de pantalla anuncia el
	 * número de elementos igual.
	 */
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.25rem 1.5rem;
	font-size: 0.9375rem;
}

.av-legal__indice-lista a {
	display: block;
	/* 24px de alto mínimo por el criterio 2.5.8 de la WCAG 2.2. */
	min-block-size: 1.75rem;
	padding-block: 0.125rem;
	color: var(--av-primary-dark);
	text-decoration: none;
}

.av-legal__indice-lista a:hover,
.av-legal__indice-lista a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- Encabezados */

.av-legal h2 {
	/*
	 * El aire de arriba es casi el triple que el de abajo: así cada apartado se
	 * lee como un bloque y no como una línea suelta entre dos párrafos.
	 */
	margin-block: 2.75rem 0.75rem;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--av-primary-dark);
	scroll-margin-block-start: 1rem;
}

.av-legal h2 + p,
.av-legal h2 + ul {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------- Listas */

.av-legal ul:not(.av-legal__indice-lista) {
	margin-block: 1.125rem;
	padding-inline-start: 1.25rem;
	list-style: none;
}

.av-legal ul:not(.av-legal__indice-lista) > li {
	position: relative;
	padding-inline-start: 1rem;
	margin-block-start: 0.5rem;
}

.av-legal ul:not(.av-legal__indice-lista) > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.7em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--av-primary);
}

/* -------------------------------------------------------------------- Enlaces */

.av-legal a {
	color: var(--av-primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.av-legal a:hover {
	color: var(--av-primary);
}

/*
 * Las direcciones de correo y las URL largas no tienen espacios donde partir y
 * desbordan la columna en móvil. `overflow-wrap` las corta solo si hace falta.
 */
.av-legal a[href^="mailto:"],
.av-legal a[href^="http"] {
	overflow-wrap: anywhere;
}

@media (width < 40rem) {
	.av-legal__indice-lista {
		grid-template-columns: 1fr;
	}
}