/**
 * Header sempre visibile (appiccicato in cima) con effetto vetro allo scroll.
 *
 * PERCHE' NON BASTA "position: sticky". La barra di Astra e' leggibile solo
 * perche' sta sopra il proprio sfondo: appiccicandola e basta, il contenuto le
 * scorre dietro e si legge attraverso (il difetto segnalato da Mario). Qui gli
 * stati sono due e distinti:
 *   - in cima alla pagina  -> identico a prima: sfondo pieno, nessuna ombra;
 *   - dopo 24px di scroll  -> body.f9t10-header-stuck (la mette
 *     assets/header-sticky.js): sfondo semitrasparente, sfocatura di cio' che
 *     passa sotto, ombra bassa. La barra si stacca dal contenuto senza coprirlo.
 *
 * Scorrendo la barra si stringe anche in altezza (120 -> 88px), per restituire
 * schermo: e' quello che ha chiesto Mario il 3/9/2026 ("da 120 farei 80-90, non
 * arriverei a 76").
 *
 * Senza JavaScript l'header resta appiccicato e PIENO: mai trasparente.
 * Il colore e' quello del tema (--ast-global-color-4): cambiando la palette dal
 * Customizer cambia anche il vetro, senza toccare questo file.
 */

:root {
	/* altezza a riposo. E' anche il valore che header-sticky.js RIMISURA sulla
	   barra vera al caricamento, cosi' se un giorno l'altezza viene cambiata dal
	   Customizer qui si adegua da solo invece di restare indietro. */
	--f9t10-header-h: 120px;
	/* altezza da scrollato */
	--f9t10-header-h-compatta: 88px;
}

#masthead {
	position: sticky;
	top: 0;
	/* sopra il contenuto, sotto il banner cookie di Complianz (9998/99999) */
	z-index: 999;
	/* ⚠️ IL PEZZO CHE EVITA IL SALTO. Restringendo la barra, il posto che
	   l'header occupa nel flusso si accorcerebbe di 32px e tutta la pagina
	   sotto salterebbe su di scatto nel momento esatto in cui parte lo scroll.
	   Qui il posto resta alto quanto prima: si stringe solo la barra dentro. */
	min-height: var(--f9t10-header-h);
}

/* barra di amministrazione di WordPress: e' fissa sopra i 600px di viewport,
   sotto scorre via con la pagina */
body.admin-bar #masthead {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #masthead {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar #masthead {
		top: 0;
	}
}

/* le ancore interne non devono finire sotto l'header. Si arriva sempre
   scrollando, quindi il riferimento e' l'altezza da scrollato */
html {
	scroll-padding-top: calc(var(--f9t10-header-h-compatta) + 16px);
}

/* il passaggio fra i due stati e' morbido: stessa durata per sfondo, ombra,
   sfocatura e altezza, se no si vedono partire in ordine sparso */
#masthead .ast-primary-header-bar {
	transition: background-color 0.25s ease, box-shadow 0.25s ease, min-height 0.25s ease,
		-webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
}

#masthead .ast-primary-header-bar .site-primary-header-wrap {
	transition: min-height 0.25s ease;
}

#masthead .ast-primary-header-bar .main-header-menu > .menu-item {
	transition: line-height 0.25s ease;
}

/* --- stato "sto scorrendo": vetro ------------------------------------- */

/* il selettore prende sia la barra desktop sia quella dentro
   .ast-mobile-header-wrap: la classe .ast-primary-header-bar e' la stessa */
body.f9t10-header-stuck #masthead .ast-primary-header-bar {
	/* prima in rgba per i browser senza color-mix, poi ricalcolata sul colore
	   vero del tema per chi ce l'ha */
	background-color: rgba(247, 251, 254, 0.8);
	background-color: color-mix(in srgb, var(--ast-global-color-4, #f7fbfe) 80%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	box-shadow: 0 1px 0 rgba(16, 40, 48, 0.06), 0 12px 28px -20px rgba(16, 40, 48, 0.55);
}

/* senza backdrop-filter (Firefox con la sfocatura disattivata, browser vecchi)
   il semitrasparente sarebbe illeggibile: si torna al pieno */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body.f9t10-header-stuck #masthead .ast-primary-header-bar {
		background-color: var(--ast-global-color-4, #f7fbfe);
	}
}

/* --- stato "sto scorrendo": barra piu' bassa --------------------------- */

/* Solo su schermo e solo dove l'header e' davvero appiccicato: sotto i 500px di
   altezza e in stampa non lo e' (vedi in fondo), e li' stringere lascerebbe una
   fascia vuota sotto la barra invece di restituire spazio. */
@media screen and (min-height: 501px) {
	/* da desktop l'altezza la detta .site-primary-header-wrap, da telefono la
	   barra stessa: servono tutte e due */
	body.f9t10-header-stuck #masthead .ast-primary-header-bar .site-primary-header-wrap,
	body.f9t10-header-stuck #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
		min-height: var(--f9t10-header-h-compatta);
	}

	/* Astra centra le voci del menu con un line-height pari all'altezza della
	   barra: senza questa riga le voci terrebbero la barra a 120px e la
	   restrizione non si vedrebbe proprio */
	body.f9t10-header-stuck.ast-desktop #masthead .ast-primary-header-bar .main-header-menu > .menu-item {
		line-height: var(--f9t10-header-h-compatta);
	}

	/* ⚠️ LA FASCIA CHE AVANZA. Il posto dell'header resta alto 120px, quindi
	   sotto la barra stretta restano 32px di header trasparente sopra il
	   contenuto: senza questo si mangerebbero i click e la selezione del testo
	   di cio' che ci passa sotto. */
	body.f9t10-header-stuck #masthead {
		pointer-events: none;
	}

	/* ...tranne le parti che sono davvero l'header: la barra e, sul telefono, il
	   menu a tendina — che e' FRATELLO della barra, non figlio */
	body.f9t10-header-stuck #masthead .ast-primary-header-bar,
	body.f9t10-header-stuck #masthead .ast-mobile-header-content {
		pointer-events: auto;
	}
}

/* --- menu mobile ------------------------------------------------------- */

/* con l'header appiccicato il menu aperto non puo' piu' allungare la pagina:
   se le voci non ci stanno nello schermo, scorre lui */
@media (max-width: 921px) {
	#masthead .ast-mobile-header-wrap .main-header-bar-navigation {
		max-height: calc(100vh - var(--f9t10-header-h) - 16px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* chi ha chiesto meno animazioni non deve vedere transizioni */
@media (prefers-reduced-motion: reduce) {
	#masthead .ast-primary-header-bar,
	#masthead .ast-primary-header-bar .site-primary-header-wrap,
	#masthead .ast-primary-header-bar .main-header-menu > .menu-item {
		transition: none;
	}
}

/* --- dove appiccicarlo NON conviene ------------------------------------ */

/* schermo basso (telefono in orizzontale: 844x390): una barra da 120px si
   mangia un terzo dell'altezza e non la restituisce piu'. Meglio che scorra
   via come prima. */
@media (max-height: 500px) {
	#masthead {
		position: relative;
	}
}

/* in stampa l'header appiccicato si ripete su ogni pagina o copre il testo */
@media print {
	#masthead {
		position: relative;
	}
}