/* ============================================================
   Header - trascrizione di components.css (.navbar, .topbar,
   .nav-inner, .nav-dropdown) dell'HTML di riferimento.
   Cambiano solo i nomi dei token, che theme.json espone come
   preset, e le classi del menu, di proprieta' di core/navigation.
   ============================================================ */

/* ─── NAVBAR ─────────────────────────────────────────── */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--wp--custom--z-nav);
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.navbar.scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
	border-bottom-color: var(--wp--preset--color--border-line);
}

/* ─── Barra annuncio sopra il menu ───────────────────── */
.topbar {
	display: block;
	height: var(--wp--custom--topbar-height);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
}

.topbar-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey-light);
	flex-shrink: 0;
}

.topbar-sep {
	opacity: .55;
}

.topbar-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--wp--custom--transition);
}

.topbar-link:hover {
	opacity: .8;
}

.topbar-arrow {
	transition: transform var(--wp--custom--transition);
}

.topbar-link:hover .topbar-arrow {
	transform: translateX(3px);
}

/* Sotto i 720px i due messaggi non stanno su una riga: resta l'avviso uffici */
@media (max-width: 720px) {
	.topbar-sep,
	.topbar-link {
		display: none;
	}
}

@media (max-width: 480px) {
	.topbar-inner {
		font-size: .82rem;
		gap: 8px;
	}
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--wp--custom--nav-height);
}

.logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-base);
}

.logo img {
	height: 60px;
	width: auto;
	display: block;
}

/* ─── Voci di menu ───────────────────────────────────── */
/* Il DOM del menu appartiene a core/navigation: i valori sono quelli
   di .nav-links a, mappati sulle classi che core genera. */

.nav-links .wp-block-navigation-item__content {
	position: relative;
	font-size: .9rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-base);
	text-decoration: none;
	transition: color var(--wp--custom--transition), text-decoration-color var(--wp--custom--transition);
}

.nav-links .wp-block-navigation__container > .wp-block-navigation-item:not(.is-style-btn-nav) > .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	/* -1px e non -4px: il padding aggiunto qui sotto per l'area cliccabile
	   abbassa il bordo della voce di 3px, e la barretta va rimessa dov'era. */
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--honey);
	border-radius: 2px;
	transition: width var(--wp--custom--transition);
}

.nav-links .wp-block-navigation__container > .wp-block-navigation-item:not(.is-style-btn-nav) > .wp-block-navigation-item__content:hover::after,
.nav-links .wp-block-navigation__container > .wp-block-navigation-item:not(.is-style-btn-nav) > .wp-block-navigation-item__content[aria-current="page"]::after,
.nav-links .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item:not(.is-style-btn-nav) > .wp-block-navigation-item__content::after {
	width: 100%;
}

/* ─── Area cliccabile ────────────────────────────────── */
/* Nel riferimento le voci del menu sono alte 23px, sotto i 24px minimi che le
   WCAG chiedono per un bersaglio tattile. Il padding allarga l'area, il
   margine negativo uguale e contrario rimette il layout dov'era: .nav-inner ha
   altezza fissa e align-items: center, quindi non si sposta niente. */
.topbar-link,
.nav-links .wp-block-navigation__container > .wp-block-navigation-item:not(.is-style-btn-nav) > .wp-block-navigation-item__content {
	padding-block: 3px;
	margin-block: -3px;
}

/* Non si allarga il pulsante del sottomenu: piu' avanti in questo file la sua
   misura e' fissata a 13x23.04 per ricalcare la freccia del riferimento, e
   con box-sizing: border-box il padding ci finirebbe dentro senza allargare
   niente. Resta l'unico bersaglio sotto i 24px, ed e' affiancato dalla voce
   "Servizi", che porta alla stessa pagina ed e' alta 29px. */

/* ─── .btn-nav ───────────────────────────────────────── */
.nav-links .is-style-btn-nav > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	padding: 8px 22px;
	border-radius: 50px;
	font-size: .9rem;
	transition: var(--wp--custom--transition);
}

.nav-links .is-style-btn-nav > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--secondary-dark);
}

/* ─── NAV DROPDOWN (menu Servizi) ────────────────────── */
/* batte .wp-block-navigation .wp-block-navigation__submenu-icon svg di core */
.navbar .nav-links .nav-chevron {
	width: 13px;
	height: 13px;
	/* core applica un margin-top all'SVG che lo scentra dentro il bottone */
	margin: 0;
	flex-shrink: 0;
	transition: transform var(--wp--custom--transition);
}

/* Nel riferimento la freccia sta dentro .nav-dropdown-toggle, che e' un
   inline-flex con gap 5px dentro un <li> a blocco. core la rende come <button>
   fratello dell'ancora: qui i due box tornano inline, affiancati e centrati,
   cosi' la voce misura come nel riferimento (61.3 x 25.6). */
.navbar .nav-links .wp-block-navigation__container > .has-child {
	display: block;
	line-height: 1.6;
}

.navbar .nav-links .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content,
.navbar .nav-links .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
}

/* L'ancora resta sulla linea di base, come il toggle del riferimento: centrarla
   con vertical-align: middle la faceva scendere di mezzo pixel, e il testo
   sovrapposto ai due screenshot si vedeva spostato di una riga di pixel. */
.navbar .nav-links .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	vertical-align: middle;
}

.navbar .nav-links .wp-block-navigation__submenu-icon {
	width: 13px;
	/* stessa altezza dell'ancora: cosi' i due box inline si centrano sullo
	   stesso asse, come la freccia dentro il toggle del riferimento */
	height: 23.04px;
	margin-left: 5px;
	padding: 0;
}

.navbar .nav-links .has-child:hover .nav-chevron,
.navbar .nav-links .has-child:focus-within .nav-chevron {
	transform: rotate(180deg);
}

/* Sottolineatura della voce con sottomenu. Nel riferimento sta sul toggle, che
   contiene anche la freccia, e misura 61.3px; sull'ancora di core misurerebbe
   43.3px, perche' la freccia le e' fratello. Sta quindi sul <li>, che i due box
   li contiene entrambi. Si accende passando sul toggle, non sul pannello aperto
   - anche quello e' dentro il <li> - e sulla pagina corrente. */
.navbar .nav-links .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content::after {
	display: none;
}

.navbar .nav-links .wp-block-navigation__container > .has-child {
	position: relative;
}

.navbar .nav-links .wp-block-navigation__container > .has-child::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--honey);
	border-radius: 2px;
	transition: width var(--wp--custom--transition);
}

.navbar .nav-links .wp-block-navigation__container > .has-child:has( > .wp-block-navigation-item__content:hover )::after,
.navbar .nav-links .wp-block-navigation__container > .has-child:has( > .wp-block-navigation__submenu-icon:hover )::after,
.navbar .nav-links .wp-block-navigation__container > .has-child:has( > .wp-block-navigation-item__content[aria-current="page"] )::after,
.navbar .nav-links .wp-block-navigation__container > .has-child.current-menu-item::after {
	width: 100%;
}

/* core allinea il sottomenu a sinistra (left:-1px, poi left:auto per
   items-justified-right). Il riferimento lo centra sul toggle: serve una
   specificita' superiore a quella delle due regole di core. */
.navbar .nav-links .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--text-base);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 210px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-line);
	border-radius: 12px;
	box-shadow: var(--wp--custom--shadow-md);
	padding: 8px;
	gap: 2px;
	z-index: var(--wp--custom--z-overlay);
}

/* batte .wp-block-navigation .has-child .…__submenu-container > … > .…__content */
.navbar .nav-links .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: .88rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-base);
	padding: 9px 14px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

/* Ponte trasparente: senza questo il puntatore, passando dalla voce al
   pannello, esce dal <li> e core chiude il sottomenu. */
.navbar .nav-links .wp-block-navigation__submenu-container::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

/* niente sottolineatura scorrevole sulle voci del sottomenu */
.navbar .nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* Solo lo sfondo. Il riferimento scrive anche color: var(--secondary) in
   .nav-dropdown-menu a:hover, ma quella riga non arriva mai a dipingere: la
   batte .nav-links a:not(.btn-nav):hover { color: var(--text) }, che ha una
   classe in piu'. Sul sito online il testo del sottomenu resta scuro. */
.navbar .nav-links .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--cream);
}

/* core annulla la transform quando apre il sottomenu: va riaffermata,
   altrimenti il menu perde la centratura appena diventa visibile. */
.navbar .nav-links .wp-block-navigation__container .has-child:hover > .wp-block-navigation__submenu-container,
.navbar .nav-links .wp-block-navigation__container .has-child:focus-within > .wp-block-navigation__submenu-container {
	transform: translateX(-50%) translateY(6px);
}

/* ─── HAMBURGER ──────────────────────────────────────── */
/* Trascrizione di .hamburger di components.css. core disegna un SVG e usa due
   bottoni distinti (apri / chiudi) invece di uno solo che si trasforma: il
   bottone di chiusura viene sovrapposto trasparente a quello di apertura, cosi'
   l'icona visibile e' sempre la stessa e anima da barre a X sul posto. */
.navbar .hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 4px;
	width: auto;
	height: auto;
	background: none;
	border: none;
}

.navbar .hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--text-base);
	border-radius: 2px;
	transition: var(--wp--custom--transition);
}

/* Stato aperto. core usa due bottoni distinti dove il riferimento ne ha uno
   solo che si trasforma: l'hamburger resta visibile e anima le barre a X, e il
   bottone di chiusura di core gli viene sovrapposto trasparente per ricevere il
   clic. L'hamburger diventa trasparente ai puntatori, altrimenti sarebbe lui a
   intercettarlo e riaprirebbe il menu invece di chiuderlo. */
.navbar .nav-links:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.navbar .nav-links:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open span:nth-child(2) {
	opacity: 0;
}

.navbar .nav-links:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* core aggiunge un secondo bottone per chiudere: nel riferimento non esiste,
   l'hamburger stesso fa da interruttore (assets/js/header.js lo reinstrada
   qui). Resta nel DOM, nascosto, perche' e' lui a eseguire la chiusura. */
.navbar .wp-block-navigation__responsive-container-close {
	display: none;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
/* core apre l'overlay sotto i 600px; il riferimento rompe a 720px.
   Queste due regole invertono il comportamento di core fra 600 e 720. */
@media (max-width: 720px) {
	.navbar .hamburger {
		display: flex;
	}

	.nav-links .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.nav-links .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* .nav-links in versione pannello sotto la navbar.
	   core apre il menu come velo a tutto schermo: inset a zero, voci centrate
	   e un pulsante di chiusura in alto. Nel riferimento e' un pannello che
	   scende da sotto la navbar, alto quanto le sue voci, e si richiude con lo
	   stesso hamburger che l'ha aperto. Le tre righe qui sotto - bottom, height
	   e il pulsante nascosto - sono quello che riporta core a quella forma. */
	.nav-links .wp-block-navigation__responsive-container.is-menu-open {
		top: calc(var(--wp--custom--nav-height) + var(--wp--custom--topbar-height));
		bottom: auto;
		height: auto;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--text-base);
		padding: 24px;
		border-bottom: 1px solid var(--wp--preset--color--border-line);
		box-shadow: var(--wp--custom--shadow-md);
	}

	/* Il riferimento non ha un pulsante di chiusura: apre e chiude l'hamburger,
	   e assets/js/header.js gli ha gia' restituito quel comportamento. */
	.nav-links .wp-block-navigation__responsive-container-close {
		display: none;
	}

	/* core stringe l'elenco sul contenuto e lo spinge a destra, dove sta nella
	   barra; nel pannello le voci partono da sinistra come nel riferimento. */
	.nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
		width: 100%;
		align-items: flex-start;
	}

	.nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		align-items: flex-start;
		gap: 20px;
	}

	/* Dentro il pannello core azzera il padding delle voci: il pulsante
	   "Contattaci" tornerebbe un link come gli altri. */
	.nav-links .wp-block-navigation__responsive-container.is-menu-open .is-style-btn-nav > .wp-block-navigation-item__content {
		padding: 8px 22px;
		/* 1rem come le altre voci: nel riferimento .nav-links a { font-size: 1rem }
		   della media query viene dopo .btn-nav e lo batte. */
		font-size: 1rem;
	}

	.nav-links .wp-block-navigation-item__content {
		font-size: 1rem;
	}

	/* Il sottomenu di "Servizi" non compare nel pannello.
	
	   Nel riferimento le regole per il sottomenu mobile sono scritte
	   (components.css, dentro @media max-width 720px: position static, opacity 1,
	   visibility visible), ma non arrivano mai a dipingere: le regole desktop che
	   le annullano stanno dopo nel file, a parita' di specificita', e vince
	   l'ultima. Sul sito online quelle tre voci restano quindi assolute e
	   invisibili anche da telefono, e il pannello e' alto solo quanto le sei voci
	   di primo livello.
	
	   Si riproduce il reso, non l'intenzione: qui il sottomenu resta fuori dal
	   flusso e nascosto come nella barra chiusa. Conseguenza accettata: da
	   telefono Materiale Apistico, Anagrafe Apistica e Accordi e convenzioni si
	   raggiungono dalla pagina Servizi, non dal menu. */
	/* La freccia resta rivolta in basso. Il riferimento la gira solo su hover
	   (.nav-dropdown:hover), qui c'e' anche :focus-within - serve alla tastiera
	   sul desktop - e dopo il tocco sull'hamburger il fuoco finisce dentro il
	   pannello, girando la freccia di una tendina che non si apre. */
	.navbar .nav-links .has-child:focus-within .nav-chevron {
		transform: none;
	}

	.navbar .nav-links .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
		/* absolute anche qui: core dentro il pannello lo rimette nel flusso, e
		   nascosto ma nel flusso occuperebbe comunque lo spazio di tre voci. */
		position: absolute;
		visibility: hidden;
		opacity: 0;
	}
}