/**
 * core/navigation — menu orizzontale e popup a schermo pieno.
 *
 * Melinda: .main-menu 14px/700 uppercase con sottolineatura #265cdc su hover;
 * sotto i 1200px (hidden-xs hidden-sm hidden-md) il menu orizzontale non esiste
 * e vale il popup .popup-menu-popup.
 *
 * Ogni valore viene dai computed style della produzione in docs/baseline/
 * (Melinda attivo), non dai sorgenti del tema legacy.
 */

/* -------------------------------------------------------------------------- */
/*  Navigazione                                                               */
/*  .main-menu: 14px/14 700 uppercase, voci a 30px l'una dall'altra,          */
/*  sottolineatura #265cdc 2px su hover e sulla voce corrente.                */
/* -------------------------------------------------------------------------- */
/* Il core mette il className del blocco sia sul `<nav>` sia sull'`<ul>` interno: padding e margini
   vanno sul solo `<nav>`, o si sommano. */
nav.skuola-nav {
	padding-top: 14px;
	padding-bottom: 10px;
}

.skuola-nav {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--30);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.35px;
	text-transform: uppercase;
}

.skuola-nav .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding: 8px 0;
	color: inherit;
	text-decoration: none;
	transition: color 0.4s;
}

.skuola-nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--badge);
	transition: width 0.4s;
}

.skuola-nav .wp-block-navigation-item__content:hover::after,
.skuola-nav .current-menu-item > .wp-block-navigation-item__content::after,
.skuola-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	width: 100%;
}

@media (min-width: 1200px) {
	nav.skuola-nav {
		margin-right: 60px;
	}
}

@media (max-width: 1199px) {
	nav.skuola-nav {
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.skuola-nav .wp-block-navigation__responsive-container-open.always-shown {
		display: none;
	}
	.skuola-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		width: 100%;
		position: relative;
		z-index: auto;
		background-color: inherit;
	}
	.skuola-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* Popup del menu: schermo pieno rgba(32,35,38,.95), voci centrate 30px/700 bianche, chiudi a 60px
   dai bordi. Colore e sfondo arrivano dagli attributi del blocco; l'allineamento dalle variabili
   `--navigation-layout-*`, che senza valore ricadono su `initial` cioè a sinistra. Si sovrascrivono
   le variabili e non le regole: la specificità del core non si batte da un foglio del tema. */
.skuola-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 90px 15px;
	text-align: center;
	--navigation-layout-justification-setting: center;
	--navigation-layout-justify: center;
	--navigation-layout-align: center;
}

.skuola-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	min-height: 100%;
}

/* Ogni voce è centrata sulla larghezza piena (`.popup-menu .menu-item` è block + center), non
   allineata al blocco della lista. */
.skuola-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.skuola-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: center;
}

.skuola-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 15px 0;
	font-size: var(--wp--preset--font-size--80);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.skuola-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	height: 4px;
	bottom: 5px;
}

.skuola-nav .wp-block-navigation__responsive-container-close {
	padding: 60px;
	color: var(--wp--preset--color--white);
	opacity: 0.5;
	transition: opacity 0.4s;
}

.skuola-nav .wp-block-navigation__responsive-container-close:hover {
	opacity: 1;
}

.skuola-nav .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}