/* Header statico del tema (header_def.php): AUTONOMO, nessuna dipendenza
   dalla logica header del plugin NMA Page Blocks (niente classi .nma-nav*,
   niente header-footer.css/.js del plugin). Tutto il comportamento
   (hamburger, tendina dall'alto, accordion, sottomenu desktop) e' qui +
   assets/header-def.js. NESSUN breakpoint: l'hamburger scatta
   quando il menu non ci sta piu' sulla riga (misurato da header-def.js, che
   mette la classe .is-hamburger su .header-def__nav). I bottoni CTA (.btn / .btn--dark) restano invece gli
   stessi del sito: colori SOLO in Impostazioni Tema > Bottoni (vedi nota
   piu' sotto). */

.header-def {
	/* ancora della tendina mobile (position:absolute sul wrap) */
	position: relative;
	/* sopra le sezioni successive (anch'esse posizionate, piu' avanti nel DOM):
	   senza z-index coprono la parte dei sottomenu che esce dall'header, il
	   mouse "cade" sulla sezione, l'hover si perde e il sottomenu si chiude
	   prima di poterlo raggiungere. */
	z-index: 600;
	padding-top: 24px;
}

.header-def__row {
	/* stessa larghezza/gutter del contenitore del sito (custom property gia'
	   dichiarate su :root, con fallback se mancassero) */
	width: min( calc( 100% - ( var( --nma-container-gutter, 15px ) * 2 ) ), var( --nma-container-max-width, 1600px ) );
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.header-def__logo {
	display: inline-flex;
	flex: none;
}

.header-def__logo img {
	display: block;
	height: 45px;
	width: auto;
}

/* Nav: desktop = riga orizzontale, toggle nascosto. */
.header-def__nav {
	display: flex;
	align-items: center;
	/* larghezza naturale: mai compressa dal flex, cosi' header-def.js puo'
	   misurare se logo + menu ci stanno sulla riga. */
	flex: none;
}

.header-def__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	margin-left: auto;
	color: inherit;
	/* dopo il selettore lingua (order 2): in hamburger la lingua sta a
	   sinistra dell'icona. */
	order: 3;
}

.header-def__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.header-def__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.header-def__menu {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.header-def__menu li {
	position: relative;
}

.header-def__menu > li > a {
	white-space: nowrap;
}

.header-def__menu .sub-menu {
	list-style: none;
	margin: 0;
	position: absolute;
	left: 0;
}

/* Spazio standard fra le voci del menu (32px). */
.header-def__menu {
	gap: 32px;
}

/* Voci normali del menu (esclusa quella con .btn, che ha gia' il suo colore
   da .btn/.btn--dark). */
.header-def__menu > li > a:not( .btn ) {
	color: #222;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.header-def__menu > li > a:not( .btn ):hover {
	color: #3b6ef6;
}

/* NESSUNA regola .btn--dark qui: esiste gia', scritta dall'utente in
   Impostazioni Tema > Bottoni (option 'nma_theme_custom_buttons', iniettata
   inline sull'handle 'nma-cta-buttons'). Ridefinirla qui (stesso file .css,
   dipendente da 'nma-cta-buttons' quindi stampato DOPO) vincerebbe per ordine
   di sorgente a parita' di specificita' e la sovrascriverebbe in silenzio - il
   bug gia' successo una volta. Il filtro nma_theme_nav_menu_link_attributes()
   in functions.php si limita a portare la classe dal <li> della voce di menu
   al suo <a>: l'aspetto resta TUTTO e SOLO quello scritto in Impostazioni
   Tema > Bottoni. */

/* Sottomenu DESKTOP: tendina con fade+slide (opacity+transform, animabili a
   differenza di display), sfondo e ombra. Selettore su ID (#header-def-menu,
   l'ID del <ul> passato a wp_nav_menu()). */
#header-def-menu .sub-menu {
	top: calc( 100% + 25px );
	display: block;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.12 );
	padding: 8px;
	min-width: 210px;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

/* Ponte invisibile sopra la tendina: riempie i 25px di stacco cosi' il
   hover non cade mentre il mouse scende dalla voce alla tendina. */
#header-def-menu .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 25px;
}

#header-def-menu > li:hover > .sub-menu,
#header-def-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

#header-def-menu .sub-menu li + li {
	margin-top: 2px;
}

#header-def-menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 6px;
	color: #222;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#header-def-menu .sub-menu a:hover {
	background-color: #f3f5fa;
	color: #3b6ef6;
}

/* Voce corrente: grassetto sempre (desktop + hamburger), senza colore.
   Padre di una sottovoce corrente ("Soluzioni") incluso: da desktop la
   tendina e' chiusa, il grassetto sul padre dice dove sei. Bottone CTA
   escluso (ha il suo stile in Impostazioni Tema > Bottoni). */
#header-def-menu li.current-menu-item:not(.header-def__item--btn) > a,
#header-def-menu li.current-menu-ancestor > a,
#header-def-menu li.current-menu-parent > a {
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   HAMBURGER (.is-hamburger su .header-def__nav, messa da header-def.js
   quando il menu non ci sta piu' sulla riga). Menu = tendina a tutta larghezza SOTTO
   l'header (ancorata a .header-def, position:relative), voci centrate,
   sottovoci ad accordion (classe .header-def__open messa da
   assets/header-def.js al click sulla voce con sottovoci). Apertura/
   chiusura: classe .is-open su .header-def__nav (header-def.js).
   --------------------------------------------------------------------- */
.header-def__nav.is-hamburger {
	flex-wrap: wrap;
}

.header-def__nav.is-hamburger .header-def__toggle {
	display: flex;
}

/* Chiusa: opacity+transform (animabili, non display:none). pointer-events
   e visibility evitano che resti cliccabile/tabbabile da invisibile. */
.header-def__nav.is-hamburger .header-def__wrap {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 600;
	background-color: #fff;
	padding: 12px 16px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.15 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	pointer-events: none;
	transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
}

.header-def__nav.is-hamburger.is-open .header-def__wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
	pointer-events: auto;
}

.header-def__nav.is-hamburger .header-def__menu {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Voce bottone in fondo alla lista: 20px IN PIU' del gap standard. Classe
   "header-def__item--btn" (non "btn--dark") perche'
   nma_theme_nav_menu_css_class() in functions.php toglie apposta ogni
   classe "btn"/"btn--*" dal <li> - un selettore di classe nuda come
   ".btn--dark { background-color: ... }" (Impostazioni Tema > Bottoni)
   altrimenti dipinge ANCHE il <li>, un rettangolo pieno dietro che nasconde
   gli angoli arrotondati dell'<a> - bug reale gia' capitato. */
.header-def__nav.is-hamburger .header-def__menu > li.header-def__item--btn {
	margin-top: 20px;
}

/* Accordion: la tendina flottante desktop non ha senso in colonna,
   viene neutralizzata; altezza animata via max-height. Sottovoci un filo
   piu' piccole e chiare delle principali. */
.header-def__nav.is-hamburger #header-def-menu .sub-menu {
	position: static;
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	min-width: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
	overflow: hidden;
	max-height: 0;
	transition: max-height 250ms ease, padding-top 250ms ease;
}

/* padding-top (non margin): dentro l'overflow:hidden, animato insieme
   all'altezza; stacca il sottomenu dalla voce padre. */
.header-def__nav.is-hamburger #header-def-menu li.header-def__open > .sub-menu {
	max-height: 1000px;
	padding-top: 14px;
}

.header-def__nav.is-hamburger #header-def-menu .sub-menu a {
	padding: 8px 0 8px 16px;
	font-size: 0.9em;
	color: #555;
}

.header-def__nav.is-hamburger #header-def-menu .sub-menu::before {
	display: none;
}

/* Colore primario SOLO al primo livello (le sottovoci correnti restano in
   grassetto senza colore, dalla regola valida anche da desktop). Primo
   livello = voce corrente, oppure padre ("Soluzioni") di una sottovoce
   corrente, oppure voce con accordion aperto. */
.header-def__nav.is-hamburger #header-def-menu > li.current-menu-item:not(.header-def__item--btn) > a,
.header-def__nav.is-hamburger #header-def-menu > li.current-menu-ancestor > a,
.header-def__nav.is-hamburger #header-def-menu > li.current-menu-parent > a,
.header-def__nav.is-hamburger #header-def-menu > li.header-def__open > a {
	color: var( --color-primario );
	font-weight: 700;
}

/* Con un accordion aperto e' selezionata SOLO quella voce: le altre voci di
   primo livello (es. "Chi siamo", se era la pagina corrente) tornano normali
   finche' l'accordion resta aperto. Bottone CTA escluso (ha il suo stile). */
.header-def__nav.is-hamburger #header-def-menu:has( > li.header-def__open ) > li:not( .header-def__open ):not( .header-def__item--btn ) > a {
	color: #222;
	font-weight: 500;
}

/* Selettore lingua (Polylang): a destra del menu; fuori dal menu quindi in
   hamburger resta in barra, a sinistra dell'icona (toggle ha order 3).
   32px dal menu = stesso gap delle voci. Solo testo IT/EN/FR, lingua corrente non
   mostrata. */
.header-def__lang {
	order: 2;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 0 32px;
	padding: 0;
}

.header-def__lang a {
	color: #222;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.header-def__lang a:hover {
	color: #3b6ef6;
}

.header-def__nav.is-hamburger .header-def__lang {
	margin-left: 0;
}

/* Copia invisibile del menu usata da header-def.js per misurare la larghezza
   naturale in riga (fuori flusso, mai visibile ne' cliccabile). */
.header-def__measure {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	visibility: hidden;
	pointer-events: none;
}

/* Cambio di layout riga<->hamburger (header-def.js): niente animazioni. */
.header-def__nav.is-switching .header-def__wrap,
.header-def__nav.is-switching #header-def-menu .sub-menu {
	transition: none;
}