/**
 * Header template part.
 *
 * Only what block supports and theme.json cannot express lives here:
 * the three-column optical centering, the underline affordance on nav
 * links, and the CTA pin glyph. Colour, type and spacing all come from
 * presets — no design values are hardcoded in this file.
 */

/* --- Scala dei livelli ----------------------------------------------- */

/* I livelli si dichiarano qui, una volta, con un nome. Senza una scala ogni
   foglio sceglie un numero per conto suo guardando solo i propri vicini: la
   barra stava a 50 perché i contenuti di pagina arrivano al massimo a 20, ma
   nessuno dei due sapeva che `vendor/leaflet.css` porta i propri livelli a
   400 e i suoi comandi a 1000. Sullo store locator la mappa finiva sopra la
   barra fissa. Alzare quel 50 a un numero più grande avrebbe spostato il
   problema al prossimo elemento sovrapposto; dichiarare la scala dice invece
   dove sta ciascuno, e dove va messo quello che verrà. */
:root {
	/* Contenuti di pagina: decorazioni, nastri, sovrapposizioni interne. */
	--cn-livello-contenuto: 20;
	/* Mappe: `.leaflet-pane` sta a 400, i comandi della mappa a 1000. */
	--cn-livello-mappa: 1000;
	/* La barra di navigazione sta sopra tutto ciò che scorre sotto di lei. */
	--cn-livello-header: 1100;
}

/* --- Homepage: header sovrapposto all'hero -------------------------- */

/* In homepage la barra non ha sfondo e sta sopra l'hero, come nel
   riferimento. Altrove resta solida (rosso), perché senza un hero scuro
   dietro il testo chiaro sarebbe illeggibile.

   Il template part viene tolto dal flusso, così l'hero parte da y=0 e la
   navigazione ci si appoggia sopra. L'ordine nel DOM non cambia, quindi
   la navigazione da tastiera resta corretta.

   position: fixed e non sticky: sticky resterebbe nel flusso e occuperebbe
   spazio, spingendo l'hero verso il basso invece di lasciarselo scorrere
   sotto. */
.home .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--cn-livello-header);
}

/* L'hero deve partire da y=0 e prendersi anche lo spazio sotto la barra.
   Il core mette 24px di margine fra i blocchi di primo livello
   (:where(.wp-site-blocks) > *): senza annullarlo resta una striscia
   visibile sopra l'hero. Vale su tutte le pagine: fuori dalla home la barra
   è in flusso e quel margine lascerebbe una riga di carta fra header e
   banda fotografica. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* --- Pagine interne: barra solida ------------------------------------ */

/* Fuori dalla home non c'è un hero scuro sotto la barra: senza fondo il
   menu chiaro finirebbe sulla carta e sparirebbe. Il rosso è quindi lo
   stato predefinito e la trasparenza l'eccezione della home.

   Il fondo sta qui e non fra gli attributi del blocco per lo stesso motivo
   del padding: la classe preset uscirebbe con !important e lo stato scorso
   non riuscirebbe a portarla al bianco. */
.site-header {
	background-color: var(--wp--preset--color--rosso);
}

.home .site-header {
	background-color: transparent;
}

/* La barra resta nel flusso finché non si scorre, poi si stacca. Lo spazio
   che lasciava va riservato sul contenitore del template part, altrimenti
   il contenuto risale di colpo nel momento in cui si aggancia.

   L'altezza arriva dal modulo, che misura la barra a riposo: gli 88px sono
   solo la rete di sicurezza se il modulo non è ancora partito.

   Il fondo rosso serve al momento dello sgancio: risalendo sopra la soglia la
   barra torna nel flusso con il padding ancora compatto e ci mette 0,3s a
   ricrescere, così per quella frazione non copre tutto lo spazio riservato.
   Senza colore qui, sotto la barra comparirebbe una striscia di carta. */
body:not(.home) .wp-site-blocks > header.wp-block-template-part {
	min-height: var(--cn-header-height, 88px);
	background-color: var(--wp--preset--color--rosso);
}

body:not(.home) .site-header.is-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--cn-livello-header);
}

/* Padding e colore stanno qui e non sugli attributi del blocco: le classi
   preset di theme.json escono con !important e il padding del blocco
   sarebbe inline, quindi lo stato "scrolled" non riuscirebbe a
   sovrascriverli senza una guerra di specificità. */
.site-header {
	padding-block: 22px;
	color: var(--wp--preset--color--floral);
	transition:
		background-color 0.3s ease,
		padding 0.3s ease,
		border-color 0.3s ease,
		backdrop-filter 0.3s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header {
		transition: none;
	}
}

/* --- Gutter proprio della barra --------------------------------------- */

/* Nel riferimento la barra non si allinea alle sezioni: usa un gutter suo,
   clamp(24px, 3vw, 40px), più stretto dei 56px del corpo pagina. A 1440px il
   contenuto del menu arriva così a 1200px mentre le sezioni si fermano a
   1168, e logo e invito stanno sedici pixel più vicini ai bordi.

   La misura è già in theme.json come `custom.nav.gutter` — finora dichiarata
   e mai consumata. Prima la barra ereditava il padding globale, e questo la
   faceva rientrare rispetto al disegno.

   `has-global-padding` nel selettore serve a battere la regola di core che
   assegna quel padding: è `:root :where(.has-global-padding)`, quindi 0-1-0,
   e a parità di peso vincerebbe lei perché stampata inline nel <head>. */
.site-header.has-global-padding {
	padding-inline: var(--wp--custom--nav--gutter);
}

/* La riga interna vale il frame meno i due gutter: oltre i 1280px si ferma lì
   e si centra, sotto prende tutta la larghezza disponibile — che è appunto il
   comportamento di `max-width: var(--maxw)` con padding interno nel
   riferimento.

   Tre classi perché il layout `constrained` di core impone wideSize alle
   .alignwide con due (.wp-container-… > .alignwide). */
.site-header .site-header__inner.alignwide {
	max-width: calc( var(--wp--custom--layout--frame) - 2 * var(--wp--custom--nav--gutter) );
}

/* --- Stato scorso ---------------------------------------------------- */

/* Oltre i 20px la barra prende fondo chiaro e testo scuro, altrimenti il
   menu bianco finirebbe illeggibile sopra le sezioni chiare. */
.site-header.is-scrolled {
	background-color: var(--wp--preset--color--white);
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	padding-block: 14px;
	border-bottom: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 8%, transparent );
	color: var(--wp--preset--color--ink);
}

/* core/site-logo renderizza una sola immagine, quindi lo scambio fra i due
   file del riferimento non è replicabile a livello di markup. Si mostra il
   wordmark rosso come sfondo del contenitore; l'img è già resa invisibile
   dalla regola più sotto, a riposo come da scorso, quindi qui basta cambiare
   lo sfondo.

   Il colore è quello vero del file (#8d1832), non una sua approssimazione:
   un filtro CSS non può centrare un valore esatto. */
.site-header.is-scrolled .site-header__logo {
	background: var(--cn-media-logo-red) left center / contain no-repeat;
}

.site-header.is-scrolled .site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

.site-header.is-scrolled .site-header__cta-button .wp-block-button__link {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.site-header.is-scrolled .site-header__cta-button .wp-block-button__link:hover,
.site-header.is-scrolled .site-header__cta-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Barra bianca: sotto il pin c'è fondo chiaro, serve la versione rossa. */
.site-header.is-scrolled .site-header__cta-button .wp-block-button__link::before {
	background-image: var(--cn-media-cup-pin);
}

/* Barra bianca + hover: lo sfondo diventa ink, torna il pin chiaro. */
.site-header.is-scrolled .site-header__cta-button .wp-block-button__link:hover::before,
.site-header.is-scrolled .site-header__cta-button .wp-block-button__link:focus-visible::before {
	background-image: var(--cn-media-pin-coffee-inverse);
}

/* Three columns so the nav is centred against the viewport, not against
   whatever width the logo and CTA happen to take. flex + space-between
   would drift as either side changes. */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);

}

.site-header__logo {
	justify-self: start;
}

/* Il contenitore è alto 44px come .wordmark nel riferimento, l'immagine 30px.
   Da quei 44px dipende l'altezza della barra (22 + 44 + 22 = 88px), che a sua
   volta detta dove parte l'hero: senza, la barra restava a 74px e tutta la
   composizione scendeva. */
.site-header__logo {
	display: flex;
	align-items: center;
	height: 44px;
}

/* Il marchio è il file vettoriale del tema, non l'immagine della libreria.
   Quella è un raster da 315px disegnato a 191: a densità 1 tiene, su schermo
   retina ne servirebbero 382 e si vede impastata. Il riferimento ha lo stesso
   limite — usa un PNG — ma qui il vettoriale ce l'abbiamo già, ed è per giunta
   quello che lo stato scorso usa da sempre per la versione rossa: tenere il
   raster a riposo e il vettoriale da scorso era un'incoerenza.

   L'immagine del blocco resta nel documento, invisibile: detta l'ingombro e
   tiene il nome del sito nell'albero di accessibilità.

   `opacity: 0` e non `visibility: hidden`, ed è la differenza fra le due cose
   che la riga sopra promette. `visibility: hidden` toglie l'elemento
   dall'albero di accessibilità: l'`alt` dell'immagine spariva con lui, e il
   collegamento del marchio — il primo in ordine di tabulazione — restava senza
   nome, annunciato come «link» e basta (Lighthouse: link-name). `opacity: 0`
   non dipinge nulla ma lascia sia il box sia il nome. */
/* `contain` e non un'altezza fissa: lo sfondo viene ritagliato dalla scatola,
   e la scatola la detta l'immagine nascosta. Con `auto 30px` il vettoriale
   veniva 4px più largo di quel riquadro e l'ultima I di NAPOLI spariva. */
.site-header__logo {
	background: var(--cn-media-logo-white) left center / contain no-repeat;
}

.site-header__logo img {
	height: 30px;
	width: auto;
	display: block;
	opacity: 0;
}

/* --- Navigation --------------------------------------------------- */

.site-header__nav {
	justify-self: center;
}

/* Il riferimento usa gap 2px fra le voci; il preset spacing 10 vale 8px e
   allargava il menu di una quindicina di pixel. */
.site-header__nav .wp-block-navigation__container {
	gap: 2px;
}

/* Il chevron di core è un SVG 8x8; il riferimento usa chevron-down.svg a
   12x7 con 6px di distanza dal testo. Si nasconde l'SVG e si mette lo
   stesso file del riferimento come sfondo, così le voci con sottomenu
   hanno la larghezza giusta e il menu combacia. */
.site-header__nav .wp-block-navigation__submenu-icon {
	width: 12px;
	height: 7px;
	padding: 0;

	/* Nel riferimento la freccia sta dentro al bottone, a 6px dal testo, e i
	   10px di respiro restano fuori. Qui il markup di core la mette fuori
	   dall'ancora, quindi al distacco voluto si sommavano i 10px di padding
	   dell'ancora e la freccia finiva a 16px dall'etichetta, appiccicata alla
	   voce successiva. I 10px si restituiscono a destra: la voce resta larga
	   uguale, cambia solo dove cade la freccia. */
	margin-left: -4px;
	margin-right: 10px;
	background: var(--cn-media-chevron-down) center / contain no-repeat;

	/* Nel riferimento la freccia è un gradino sotto al testo: 85% di opacità,
	   non piena. Senza, pesa quanto l'etichetta e la barra sembra più fitta. */
	opacity: 0.85;
	transition: transform 0.25s ease;
}

.site-header__nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

/* Aperto il pannello, la freccia si gira: è l'unico segno che dice se il mega
   menu è aperto o chiuso. */
.site-header__nav .has-child:hover > .wp-block-navigation__submenu-icon,
.site-header__nav .has-child:focus-within > .wp-block-navigation__submenu-icon {
	transform: rotate( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header__nav .wp-block-navigation__submenu-icon {
		transition: none;
	}
}

/* Sulla barra bianca il chevron chiaro sparirebbe: si scurisce come nel
   riferimento invece di sostituire il file. */
.site-header.is-scrolled .site-header__nav .wp-block-navigation__submenu-icon {
	filter: brightness( 0 );
	opacity: 0.6;
}

.site-header__nav .wp-block-navigation-item__content {
	position: relative;
	padding: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: var(--wp--custom--radius--pill);
}

/* Underline grows from the left on hover and on keyboard focus. It is an
   enhancement on top of the link itself, never the only cue that a thing
   is interactive. */
.site-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.site-header__nav .wp-block-navigation-item__content:hover::after,
.site-header__nav .wp-block-navigation-item__content:focus-visible::after,
.site-header__nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* "News" non porta da nessuna parte: apre il suo pannello e basta, quindi nel
   menu di navigazione manca l'`url` e core rende un `<a>` senza `href` — che
   per la specifica non è un collegamento. La sottolineatura al passaggio è il
   segno che qualcosa si può aprire *altrove*: qui prometterebbe una pagina che
   non esiste, e va tolta. Il pannello resta raggiungibile da tastiera con il
   bottone della freccia, che core rende comunque. */
.site-header__nav a.wp-block-navigation-item__content:not([href])::after {
	content: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header__nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* --- Call to action ------------------------------------------------ */

.site-header__cta {
	justify-self: end;
}

.site-header__cta-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	border-color: color-mix( in srgb, var(--wp--preset--color--floral) 55%, transparent );
	color: var(--wp--preset--color--floral);
	background-color: transparent;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Gli SVG sono bicolore (pin + tazzina interna): vanno usati come immagine,
   non come maschera. Una mask usa solo il canale alfa e li appiattirebbe in
   una sagoma piena, perdendo la tazzina. Come nel riferimento si scambia
   quale file mostrare a seconda dello sfondo dietro al bottone. */
.site-header__cta-button .wp-block-button__link::before {
	content: "";
	flex: none;
	height: 16px;
	aspect-ratio: 32.86 / 41.08;
	background: var(--cn-media-pin-coffee-inverse) center / contain no-repeat;
	transition: transform 0.25s ease;
}

.site-header__cta-button .wp-block-button__link:hover::before,
.site-header__cta-button .wp-block-button__link:focus-visible::before {
	transform: translateY( -2px ) scale( 1.08 );
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header__cta-button .wp-block-button__link::before {
		transition: none;
	}

	.site-header__cta-button .wp-block-button__link:hover::before,
	.site-header__cta-button .wp-block-button__link:focus-visible::before {
		transform: none;
	}
}

/* Barra trasparente + hover: lo sfondo diventa floral, serve il pin rosso. */
.site-header__cta-button .wp-block-button__link:hover::before,
.site-header__cta-button .wp-block-button__link:focus-visible::before {
	background-image: var(--cn-media-cup-pin);
}

.site-header__cta-button .wp-block-button__link:hover,
.site-header__cta-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--floral);
	border-color: var(--wp--preset--color--floral);
	color: var(--wp--preset--color--crimson);
}

/* --- Small screens -------------------------------------------------- */

/* Soglia allineata al riferimento (900px): la griglia a tre colonne
   collassa in logo a sinistra e menu a destra.

   Il riferimento qui nasconde del tutto la CTA, ma può permetterselo
   perché la ripropone dentro il drawer mobile. Quel drawer da noi non
   esiste ancora, quindi nasconderla farebbe sparire "Trova Caffè Napoli"
   su mobile: resta su una riga propria, a piena larghezza, finché la CTA
   non trova posto nell'overlay del menu. */
@media ( max-width: 900px ) {
	.site-header__inner {
		grid-template-columns: 1fr auto;
		row-gap: var(--wp--preset--spacing--20);
	}

	.site-header__nav {
		justify-self: end;
	}

	/* Come nel riferimento la barra mobile porta solo logo e hamburger. La
	   CTA non sparisce: è ripresa dentro il drawer come voce .is-drawer-cta,
	   quindi l'azione resta raggiungibile. */
	.site-header .site-header__cta {
		display: none;
	}
}

/* --- Drawer mobile --------------------------------------------------- */

/* core/navigation apre il menu come overlay a tutto schermo su fondo bianco.
   Il riferimento usa invece un pannello che entra da destra su fondo carta,
   quindi qui si riscrive quella parte.

   I selettori partono da .site-header per superare la specificità di core
   (.wp-block-navigation__responsive-container.is-menu-open:not(...)) senza
   ricorrere a !important. */
@media ( max-width: 900px ) {
	/* Il selettore è volutamente lungo: core usa
	   .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container…
	   per imporre il fondo bianco, e con meno classi di queste vince lui.
	   È il motivo per cui padding e ombra passavano ma lo sfondo no. */
	.site-header .site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		/* Senza border-box il padding si somma a 100dvh: il pannello diventa
		   più alto dello schermo e il fondo — dove sta la CTA — resta
		   irraggiungibile perché esce dal viewport invece di scorrere. */
		box-sizing: border-box;
		width: min( 82vw, 360px );
		height: 100dvh;
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink);
		padding: 96px clamp( 24px, 6vw, 36px ) calc( 28px + env( safe-area-inset-bottom ) );
		box-shadow: -18px 0 50px -20px color-mix( in srgb, var(--wp--preset--color--ink) 45%, transparent );
		overflow-y: auto;

		/* Impedisce che lo scroll a fondo pannello prosegua sulla pagina
		   sotto, che resterebbe altrimenti trascinata dal gesto. */
		overscroll-behavior: contain;

		/* core alterna display fra none e flex: senza allow-discrete la
		   transizione non partirebbe, perché un elemento display:none non
		   anima. @starting-style dà lo stato di partenza al primo frame. */
		transform: translateX( 0 );
		transition:
			transform 0.34s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
			display 0.34s allow-discrete;
	}

	@starting-style {
		.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
			transform: translateX( 100% );
		}
	}

	@media ( prefers-reduced-motion: reduce ) {
		.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
			transition: none;
		}
	}

	/* Voci di primo livello: allineate a sinistra e separate da una linea,
	   non centrate come nell'overlay predefinito. */
	/* L'allineamento a sinistra va forzato sul contenitore del contenuto:
	   core lo centra leggendo --navigation-layout-justification-setting,
	   che vale "center" per via del layout scelto sul blocco. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		width: 100%;

		/* Core tiene 56px in cima per far posto al bottone di chiusura. Da
		   quando la X è fissata alla barra quello spazio non serve più a
		   nessuno, e faceva partire il menu mezzo capitolo più in basso del
		   riferimento. */
		padding-top: 0;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	/* La voce è un flex container: senza questo l'ancora resta larga quanto il
	   testo e finisce accentrata, invece di occupare la riga come nel
	   riferimento. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		align-items: stretch;
		justify-content: flex-start;
	}

	/* La linea separa i capitoli, non ogni riga: nel riferimento il gruppo
	   «Menù → Caffè / Dolci e Torte / Salato e Break» ne ha una sola, in fondo.
	   Prima stava su ogni `.wp-block-navigation-item`, quindi spuntava anche
	   fra le voci figlie e per giunta rientrata, perché la voce figlia parte
	   dove parte il suo testo. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		flex: 1 1 auto;
		width: 100%;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding: 11px 4px;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		letter-spacing: 0.01em;
		text-align: left;
		color: var(--wp--preset--color--ink);
		transition: color 0.2s ease, padding-left 0.2s ease;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--rosso);
		padding-left: 8px;
	}

	/* Nel drawer non serve il sottolineato animato della barra desktop. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		content: none;
	}

	/* --- Sottovoci del drawer ---------------------------------------- */

	/* Nel riferimento le destinazioni di un mega menu restano sempre in vista,
	   sotto al titolo del gruppo: nessuna fisarmonica da aprire. L'overlay di
	   core le mostra già, ma con la stessa taglia delle voci principali e con
	   un rientro doppio del disegno — è la ragione per cui il pannello
	   sembrava un altro menu. Qui tornano al corpo minore, rientrate di 18px e
	   senza il pannello bianco che core disegna sul desktop. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		width: 100%;
		padding: 0;
		border: none;
		background-color: transparent;
		box-shadow: none;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 7px 4px 7px 18px;
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		color: var(--wp--preset--color--ink-soft);
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
		padding-bottom: 12px;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		padding-left: 24px;
	}

	/* Il titolo del gruppo non ha più niente da aprire, quindi il chevron
	   sarebbe una promessa falsa. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Nel riferimento la X resta dov'era l'hamburger, in linea con la barra.
	   Core la posiziona invece dentro al pannello, quindi partiva sotto i 96px
	   di padding e finiva a metà altezza del primo capitolo.

	   `fixed` e non `absolute`: il pannello ha una `transform`, e un elemento
	   trasformato diventa il blocco contenitore anche dei discendenti fissi.
	   Il riferimento quindi non è il viewport ma il pannello stesso — che è
	   esattamente quello che serve, perché il pannello tocca il bordo destro
	   dello schermo e parte da y=0. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 22px;
		right: var(--wp--custom--nav--gutter);
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--wp--preset--color--ink);
	}
}


/* --- Mega menu ------------------------------------------------------- */

/* Le schede sono blocchi core: navigation-submenu con dentro navigation-link
   che portano già `description`, renderizzata dal core in uno span dedicato.
   Non serve un blocco custom — resta da fare solo la scheda in CSS e
   l'icona, che è fissa per voce. */
@media ( min-width: 901px ) {
	/* Catena lunga per battere la regola di core che apre i sottomenu
	   (.wp-block-navigation .has-child:not(.open-on-click):hover > …, 0-5-0):
	   con meno classi vince lei e la scheda resta ai suoi 200px di
	   min-width invece dei 340 del riferimento. */
	.site-header .site-header__nav.wp-block-navigation .nav-mega.has-child .wp-block-navigation__submenu-container {
		/* Senza border-box i 16px di padding si sommano ai 340px e la scheda
		   esce a 372px. */
		box-sizing: border-box;
		/* Nel riferimento il pannello è ancorato al bordo inferiore della barra,
		   non alla voce di menu: da qui l'offset maggiore dei 4px del disegno.
		   La voce è alta 41px e centrata nei 22px di padding della barra, così
		   restano 24px fino al bordo, più i 4px di distacco. */
		top: calc( 100% + 28px );
		left: 50%;
		transform: translateX( -50% );
		width: 340px;
		min-width: 0;
		padding: 16px;
		border: none;
		border-radius: var(--wp--custom--radius--xl);
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--navy);
		box-shadow:
			0 4px 14px rgba( 0, 0, 0, 0.08 ),
			0 24px 50px rgba( 0, 0, 0, 0.18 );
	}

	/* La scheda è staccata di 28px dalla voce, e quei 28px erano terra di
	   nessuno: core tiene aperto il sottomenu finché il puntatore sta sulla
	   voce o dentro alla scheda, così scendendo verso la scheda si usciva
	   dalla voce prima di entrarci e il pannello si chiudeva in faccia.

	   Il ponte è un pseudo-elemento della scheda, quindi un discendente della
	   voce: attraversarlo tiene vivo l'hover. Esiste solo a pannello aperto —
	   da chiuso core mette `overflow: hidden` e altezza zero, quindi non
	   diventa un bersaglio invisibile sulla barra. */
	.site-header .site-header__nav.wp-block-navigation .nav-mega.has-child .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 28px;
	}

	/* Ogni voce è icona a sinistra, titolo e descrizione impilati a destra.
	   L'icona è un pseudo-elemento: è decorazione, e come tale non deve
	   finire nell'albero di accessibilità accanto al titolo che già dice
	   dove porta il link. */
	/* La catena è lunga perché core impone display: flex sulle voci di
	   navigazione con più specificità della nostra: senza salire, le aree
	   della griglia restano dichiarate ma inattive. */
	.site-header .site-header__nav.wp-block-navigation .nav-mega__item .wp-block-navigation-item__content {
		display: grid;
		grid-template-columns: 40px 1fr;
		grid-template-areas:
			"icon label"
			"icon desc";
		column-gap: 18px;
		align-items: center;
		padding: 14px 6px;
		border-radius: var(--wp--custom--radius--lg);
		color: var(--wp--preset--color--navy);
		transition: background-color 0.2s ease;
	}

	.site-header__nav .nav-mega__item .wp-block-navigation-item__content:hover,
	.site-header__nav .nav-mega__item .wp-block-navigation-item__content:focus-visible {
		background-color: color-mix( in srgb, var(--wp--preset--color--navy) 4%, transparent );
	}

	/* Dentro la scheda il sottolineato animato della barra non ha senso. */
	.site-header__nav .nav-mega__item .wp-block-navigation-item__content::after {
		content: none;
	}

	.site-header__nav .nav-mega__item .wp-block-navigation-item__content::before {
		content: "";
		grid-area: icon;
		justify-self: center;
		width: 30px;
		height: 30px;
		background: center / contain no-repeat;
	}

	.site-header__nav .nav-mega__item .wp-block-navigation-item__label {
		grid-area: label;
		font-weight: 700;
		font-size: 19px;
		letter-spacing: 0;
		margin-bottom: 4px;
	}

	/* core nasconde le descrizioni nel blocco navigazione: qui vanno
	   riattivate, altrimenti la scheda resta alta la metà del riferimento. */
	.site-header__nav .nav-mega__item .wp-block-navigation-item__description {
		display: block;
		grid-area: desc;
		font-weight: 500;
		font-size: 15px;
		line-height: 1.45;
		letter-spacing: 0;
	}

	.site-header__nav .is-icon-coffee .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-icon-coffee);
	}

	.site-header__nav .is-icon-cake .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-icon-cake);
	}

	.site-header__nav .is-icon-panino .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-icon-panino);
	}

	.site-header__nav .is-icon-blog .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-icon-blog);
	}

	.site-header__nav .is-icon-press .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-icon-press);
	}

	.site-header__nav .is-icon-contatti .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-contatti-icon);
	}

	.site-header__nav .is-icon-lavora .wp-block-navigation-item__content::before {
		background-image: var(--cn-media-lavora-con-noi-icon);
	}
}

/* Nel drawer le descrizioni allungherebbero molto l'elenco: restano solo i
   titoli, come fa il riferimento con .nav-drawer-group. */
@media ( max-width: 900px ) {
	.site-header__nav .wp-block-navigation-item__description {
		display: none;
	}
}

/* --- Voce CTA del drawer --------------------------------------------- */

/* Sul desktop la CTA è il pill nella barra: qui sarebbe un doppione. */
@media ( min-width: 901px ) {
	.site-header__nav .is-drawer-cta {
		display: none;
	}
}

/* Nel drawer diventa il pulsante pieno in fondo all'elenco, come
   .nav-drawer-cta nel riferimento. */
@media ( max-width: 900px ) {
	/* La catena ricalca quella della regola che mette la linea sotto ai
	   capitoli, più `.is-drawer-cta`: serve a superarla, non a pareggiarla,
	   altrimenti il pulsante si porta dietro un filo che nel riferimento non
	   c'è. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .is-drawer-cta.wp-block-navigation-item {
		border-bottom: none;
		margin-top: 28px;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .is-drawer-cta .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 16px 22px;
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--wp--preset--color--rosso);
		color: var(--wp--preset--color--floral);
		font-weight: 700;
		letter-spacing: 0.02em;
		box-shadow: var(--wp--preset--shadow--rosso);
		transition: background-color 0.2s ease;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .is-drawer-cta .wp-block-navigation-item__content:hover,
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .is-drawer-cta .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--rosso-dark);
		padding-left: 22px;
		color: var(--wp--preset--color--floral);
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .is-drawer-cta .wp-block-navigation-item__content::before {
		content: "";
		width: 18px;
		height: 22px;
		flex: none;
		background: var(--cn-media-pin-coffee-inverse) center / contain no-repeat;
	}
}

/* --- Soglia di collasso del menu ------------------------------------- */

/* core/navigation con overlayMenu "mobile" collassa a 600px, il riferimento
   a 900. Fra le due soglie i link restavano in linea sopra l'hero e la barra
   cresceva fino a 361px di altezza, sfondando la composizione.

   I selettori partono da .site-header per superare la specificità delle
   regole di core, che hanno lo stesso peso delle nostre ma vengono dopo
   nell'ordine di caricamento. */
@media ( max-width: 900px ) {
	.site-header .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* --- Hamburger ---------------------------------------------------- */

	/* core disegna un SVG di tre righe da 18px; il riferimento usa tre barre
	   da 26×2 distanziate 6px dentro a un bersaglio di 44×44. Le barre sono
	   tre gradienti sullo stesso pseudo-elemento invece di tre nodi, perché il
	   markup del bottone lo genera core e non è nostro da riscrivere.

	   `currentColor` fa il resto: la barra è chiara sull'header trasparente e
	   diventa scura su quello bianco, senza una seconda regola.

	   Tutto dentro la media query, `display` compreso: fuori di qui la regola
	   scavalcava quella con cui core nasconde il bottone sopra la soglia, e
	   l'hamburger compariva in mezzo alla barra desktop. */
	.site-header .site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 26px;
		height: 18px;
		background-image:
			linear-gradient( currentColor, currentColor ),
			linear-gradient( currentColor, currentColor ),
			linear-gradient( currentColor, currentColor );
		background-size: 26px 2px;
		background-position: left top, left center, left bottom;
		background-repeat: no-repeat;
	}
}