/**
 * Longevion — effetti header (applicati all'header Elementor, ID 23).
 * 1) Sottolineatura #46c98a sugli item del menu, larga quanto il testo,
 *    che cresce dal primo all'ultimo carattere.
 * 2) Header sticky che allo scroll si rimpicciolisce un po' e mostra il bordino sotto.
 */

/* ============ 1. Sottolineatura menu (#46c98a, larga quanto il testo) ============ */

/* disattiva il pointer "underline" nativo di Elementor per evitare doppioni */
.elementor-location-header .e--pointer-underline .elementor-item::before,
.elementor-location-header .e--pointer-underline .elementor-item::after {
	display: none !important;
}

/*
 * Il menu è in modalità "stretch": le voci riempiono la cella e il testo è centrato.
 * Restringo l'ancora al suo contenuto (= testo) mantenendola centrata nella cella,
 * così la linea coincide esattamente col testo e cresce da sinistra a destra.
 */
.elementor-location-header .elementor-nav-menu .elementor-item {
	display: block;
	width: -webkit-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;

	background-image: linear-gradient(#46c98a, #46c98a);
	background-repeat: no-repeat;
	background-position: 0 calc(100% + 2px); /* appena sotto il testo */
	background-size: 0% 1px;                 /* nascosta: larghezza 0 */
	background-origin: content-box;          /* l'area di riferimento è il testo, non il padding */
	transition: background-size .45s cubic-bezier(.22, .61, .36, 1);
}

.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item:focus,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active {
	background-size: 100% 1px; /* cresce fino a coprire tutto il testo */
}

/* ============ 2. Header sticky + shrink + bordino allo scroll ============ */

.elementor-location-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
}

/*
 * La "barra" dell'header è il container diretto (elementor-element-43b15d5):
 * bordo, ombra e transizioni vanno messi QUI, non sul wrapper <header>.
 * Sul wrapper il border-width restava 0, quindi allo scroll non c'era
 * nessuno spessore da colorare (per questo il bordino non compariva).
 */
.elementor-location-header > .e-con {
	/* spessore sempre presente (1px) ma trasparente: allo scroll basta colorarlo */
	border-bottom: 1px solid transparent !important;
	/*
	 * Animo SOLO le proprietà fisiche (padding-top/bottom). Il container ha
	 * padding-block:14px (logica) e Safari non anima in modo affidabile le
	 * proprietà logiche → era quello lo "scatto". Il padding fisico !important
	 * vince sul logico e viene animato correttamente.
	 */
	transition:
		padding-top .45s cubic-bezier(.22, .61, .36, 1),
		padding-bottom .45s cubic-bezier(.22, .61, .36, 1),
		border-color .45s ease,
		box-shadow .45s ease !important;
	will-change: padding-top, padding-bottom;
}

/* logo: transizione per il rimpicciolimento */
.elementor-location-header .elementor-widget-theme-site-logo img {
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	transform-origin: left center;
	will-change: transform;
}

/* --- stato scrollato --- */
.elementor-location-header.ll-scrolled > .e-con {
	border-bottom-color: #e9ecee3d !important; /* il bordino diventa visibile */
	box-shadow: 0 6px 26px rgba(0, 0, 0, .28);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	/* solo fisiche: niente padding-block-* per non reintrodurre lo scatto su Safari */
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.elementor-location-header.ll-scrolled .elementor-widget-theme-site-logo img {
	transform: scale(.82);
}