/**
 * El menú se pinta por encima de lo que venga después: en la home el
 * reel sube hasta el borde de la ventana y le pasa por debajo. Sin
 * z-index ganaría el reel, que va después en el documento.
 */
.nav {
	position: sticky;
	top: var(--fs-base);
	z-index: 1;
	display: flex;
	gap: var(--fs-base);
	flex-direction: column;
	align-items: center;
}

.nav a {
	text-decoration: none;
}

/**
 * El espacio entre las dos palabras del título es el ancho de ITERARE.
 * Se resta --space-word porque word-spacing se suma al espacio normal
 * en lugar de sustituirlo.
 */
.nav-title {
	text-transform: uppercase;
	word-spacing: calc(var(--space-iterare) - var(--space-word));
}

.nav-menu {
	display: flex;
	gap: var(--fs-base);
}

/**
 * Los paréntesis y su aparición al pasar por encima están en links.css:
 * son los mismos que los de los enlaces del contenido. Aquí queda sólo
 * lo que es propio del menú, que es marcar la página actual.
 *
 * En reposo los paréntesis marcan la página en la que estás.
 */
.nav-menu a[aria-current="page"]::before,
.nav-menu a[aria-current="page"]::after {
	opacity: 1;
}

/**
 * Mientras haya un enlace bajo el cursor, los paréntesis se los queda
 * él y la página actual los suelta. Al salir, vuelven solos.
 *
 * La condición va con :has() sobre la lista, y no con :hover sobre ella,
 * porque el hueco entre elementos también cuenta como hover del <ul>: al
 * cruzar de un elemento a otro los paréntesis desaparecerían un instante
 * de todas partes. Con :has() la regla sólo se activa si hay realmente
 * un enlace apuntado.
 *
 * El :not() es lo que evita que la página actual se apague a sí misma
 * cuando eres tú quien la está apuntando.
 */
.nav-menu:has(a:hover, a:focus-visible)
a[aria-current="page"]:not(:hover):not(:focus-visible)::before,
.nav-menu:has(a:hover, a:focus-visible)
	a[aria-current="page"]:not(:hover):not(:focus-visible)::after {
	opacity: 0;
}