/**
 * Header (parts/header.html).
 *
 * Misure prese dai PNG in `design/screens/` a canvas 1920: barra alta 110px,
 * contenuto allineato alla wide (1760px → margini 80px), riquadro della nav
 * alto 44px con angoli da 16 e voci alte 36 con angoli da 13, CTA 44px con gli
 * stessi 16. Le due varianti (bruno pieno / trasparente su hero) si attivano
 * dalla classe `is-transparent` sul blocco template-part.
 *
 * La barra resta sempre in vista mentre si scorre (deciso il 19/8, prima si
 * nascondeva scendendo): cambia solo il fondo, da trasparente a bruno.
 */

/* L'altezza della barra sta sulla radice e non sull'header: la barra resta in
   vista mentre si scorre, quindi serve anche a chi deve scansare quello che ci
   finirebbe sotto (il salto all'ancora del modulo, in `contatti.css`). */
:root {
	--dnpa-header-h: 110px;
}

.dnpa-header,
.dnpa-header__bar {
	--dnpa-nav-gap: 20px;
	--dnpa-nav-pad: 18px;
}

.dnpa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var( --wp--preset--color--bruno );
	color: var( --wp--preset--color--bianco );
	transition: background-color 0.35s ease;
}

/* Variante Home: sovrapposta all'hero, diventa bruna appena si scorre. */
.dnpa-header.is-transparent {
	position: fixed;
	inset-inline: 0;
	background-color: transparent;
}

.dnpa-header.is-transparent.is-scrolled {
	background-color: var( --wp--preset--color--bruno );
}

/* Fuori dal flusso: l'hero sotto deve partire davvero dal bordo alto,
   senza il distanziamento fra blocchi di primo livello. */
.dnpa-header.is-transparent + * {
	margin-block-start: 0;
}

.dnpa-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
	min-height: var( --dnpa-header-h );
	max-width: calc( 1760px + 2 * var( --wp--preset--spacing--30 ) );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--bianco );

	/* Fondo di servizio per quando la barra è modificata da sola nel Site
	   Editor: sul sito lo dipinge il wrapper, che va da bordo a bordo. */
	background-color: var( --wp--preset--color--bruno );
}

.dnpa-header .dnpa-header__bar {
	background-color: transparent;
}

/* Il layout "flow" di WP distanzia i figli con un margine: qui spaziano
   grid e flex, quindi il margine sposterebbe solo le colonne. */
.dnpa-header__bar > * {
	margin-block: 0;
}

.dnpa-header__brand {
	gap: var( --wp--preset--spacing--20 );
}

/* --- Nav nel suo riquadro --- */

.dnpa-header__bar .dnpa-nav {
	justify-self: center;
}

/* Il riquadro che tiene insieme le voci. Nel Site Editor il blocco nav non
   produce la <ul> del front, quindi lo stesso velo va messo sul blocco: la
   classe `block-editor-block-list__block` esiste solo dentro l'editor. */
.dnpa-header__bar .dnpa-nav ul.wp-block-navigation__container,
.dnpa-header__bar .dnpa-nav.block-editor-block-list__block {
	padding: 4px;
	border-radius: var( --wp--custom--bottone-radius );
	background-color: var( --wp--custom--surface--soft );
}

.dnpa-header__bar .dnpa-nav ul.wp-block-navigation__container {
	position: relative;
	gap: var( --dnpa-nav-gap );
}

/* Il blocco nav di WP fa ereditare lo sfondo alle voci (serve ai sottomenu):
   qui raddoppierebbe il velo chiaro del riquadro che le contiene. */
.dnpa-header__bar .dnpa-nav .wp-block-navigation-item {
	background-color: transparent;
}

.dnpa-header__bar .dnpa-nav .wp-block-navigation-item__content {
	position: relative;
	z-index: 1;
	padding: 10px var( --dnpa-nav-pad );
	border-radius: var( --wp--custom--voce-radius );
	color: var( --wp--preset--color--bianco );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* L'evidenziatore che scivola: creato da JS, uno solo per nav.
   Fuori dal flusso, così non conta come voce nella riga. */
.dnpa-nav__pill {
	position: absolute;
	list-style: none;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 0;
	border-radius: var( --wp--custom--voce-radius );
	background-color: var( --wp--custom--surface--strong );
	opacity: 0;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ), width 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 0.2s ease;
}

/* Riposizionamenti (resize, caricamento font) senza animazione. */
.dnpa-nav__pill.is-static {
	transition: none;
}

/* Senza JS l'evidenziatore resta fermo sulla voce corrente. Vale per le voci
   che puntano a un contenuto del sito, le uniche che WordPress marca. */
.dnpa-header__bar .dnpa-nav:not( [data-pill] ) .current-menu-item > .wp-block-navigation-item__content {
	background-color: var( --wp--custom--surface--strong );
}

/* --- CTA --- */

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

/* Il bottone in sé sta in `brand.css`: qui solo dove va nella barra. */

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

/* La barra amministrazione di WP occupa già la cima dello schermo. */
body.admin-bar .dnpa-header {
	top: var( --wp-admin--admin-bar--height, 32px );
}

/* --- Responsive --- */

@media ( max-width: 1280px ) {
	.dnpa-header,
	.dnpa-header__bar {
		--dnpa-nav-gap: 10px;
		--dnpa-nav-pad: 14px;
	}

	.dnpa-header__bar {
		gap: var( --wp--preset--spacing--30 );
	}
}

/* Sotto i 1024px logo, nav e CTA non stanno più in riga: la nav diventa il
   menu a tutto schermo del blocco WordPress, che di suo scatta solo a 600px. */
@media ( max-width: 1023px ) {
	:root {
		--dnpa-header-h: 88px;
	}

	.dnpa-header__bar {
		grid-template-columns: 1fr auto auto;
	}

	.dnpa-header__bar .dnpa-nav {
		order: 3;
		justify-self: end;
	}

	.dnpa-nav__pill {
		display: none;
	}

	.dnpa-header .wp-block-button.is-style-dnpa-ghost > .wp-block-button__link {
		padding: 11px 18px;
	}
}

@media ( min-width: 600px ) and ( max-width: 1023px ) {
	.dnpa-header__bar .dnpa-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none;
	}

	.dnpa-header__bar .dnpa-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.dnpa-header__bar .dnpa-nav .wp-block-navigation__responsive-container-close {
		display: block;
	}
}

/* Voci del menu a tutto schermo: niente riquadro, testo più grande. */
.dnpa-header__bar .dnpa-nav .is-menu-open .wp-block-navigation-item__content {
	padding: 0;
	font-size: var( --wp--preset--font-size--x-large );
	letter-spacing: 0.02em;
}

@media ( max-width: 599px ) {
	:root {
		--dnpa-header-h: 72px;
	}

	.dnpa-header__bar {
		grid-template-columns: 1fr auto;
	}

	/* Su telefono restano identità e menu: la CTA per esteso non ci sta
	   accanto al logo e resta raggiungibile dalla sezione Contattaci. */
	.dnpa-header__bar .dnpa-header__cta {
		display: none;
	}

	body.admin-bar .dnpa-header {
		top: 0;
	}
}