/**
 * Navegación (core/navigation): menú en línea y botón de menú de la
 * cabecera, listas del menú completo y del pie.
 *
 * theme.json fija los estados (subrayado al pasar el puntero, raya naranja de
 * la página actual con -current). Aquí va lo que depende de la composición:
 * - En la cabecera, cada elemento ocupa los 80 px de alto de la barra para
 *   que la raya de la página actual quede pegada al borde inferior.
 * - El botón del menú es un círculo de 48 px con borde (el núcleo lo pinta
 *   sin borde y con el tamaño del icono).
 * - Tipografía e interlineado de las listas del menú completo y del pie, que
 *   theme.json no puede distinguir de otros menús.
 *
 * Las clases del núcleo se envuelven en :where() para no pasar de una clase
 * de especificidad.
 */

/* ===== Cabecera: menú en línea ===== */

/* Los siete enlaces, el logo, el nombre y el selector de la familia piden
   unos 1360 px; por debajo de 1280 px no caben ni apretados y el nombre se
   montaba sobre el selector (medido el 29/10/2026). Por eso el menú en
   línea se ve desde 1280 px (antes de eso, solo el botón del menú, como en
   tableta), y entre 1280 y 1440 px el relleno de los enlaces baja de 12 a
   8 px y el hueco entre ellos de 20 a 16 px. El hueco no pasa de 20 px:
   la barra mide como mucho 1360 px y con 24 px no quedaba sitio y el
   nombre se partía en tres líneas. La visibilidad por pantalla de
   WordPress solo llega a 1024 px; este tramo va aquí. */
.fermento-cabecera__menu {
	align-self: stretch;
	align-items: stretch;
	gap: clamp(16px, 5vw - 48px, 20px);
	font-weight: 500;

	& :where(.wp-block-navigation-item) {
		align-self: stretch;
	}

	/* El elemento ya centra en vertical (núcleo); el enlace no se estira. */
	& :where(.wp-block-navigation-item__content) {
		padding: 12px clamp(8px, 2.5vw - 24px, 12px);
		white-space: nowrap;
	}
}

@media (width < 80rem) {

	.fermento-cabecera__menu {
		display: none;
	}
}

/* ===== Cabecera: botón del menú completo ===== */

.fermento-cabecera__boton-menu {
	align-self: center;

	& :where(.wp-block-navigation__responsive-container-open) {
		display: grid;
		place-items: center;
		box-sizing: border-box;
		inline-size: var(--wp--preset--dimension--control);
		block-size: var(--wp--preset--dimension--control);
		border: 1.5px solid color-mix(in srgb, currentcolor 45%, transparent);
		border-radius: 50%;
		color: inherit;
	}

	& :where(.wp-block-navigation__responsive-container-open:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}
}

/* ===== Menú completo ===== */

.fermento-menu__secciones {
	gap: 4px;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--subseccion);
	font-weight: 800;
	line-height: 1.15;

	& :where(.wp-block-navigation-item__content) {
		padding-block: 6px;
	}
}

.fermento-menu__lista {
	gap: 0;
	margin-block-start: 16px;
	font-size: var(--wp--preset--font-size--normal);
	color: var(--wp--preset--color--sobre-marca-suave);

	& :where(.wp-block-navigation-item__content) {
		padding-block: 8px;
	}
}

/* ===== Pie ===== */

.fermento-pie__lista {
	gap: 0;
	color: var(--wp--preset--color--sobre-marca-tenue);

	& :where(.wp-block-navigation-item__content) {
		padding-block: 4px;
	}
}