/* =========================================================
   PAGINA - STABILITÀ DELLA SCROLLBAR
   ========================================================= */

/* Mantiene sempre riservato lo spazio della scrollbar
   verticale.

   In questo modo, quando l'apertura dell'off-canvas
   blocca lo scroll della pagina, la scrollbar scompare
   senza modificare la larghezza del layout. */
html {
	scrollbar-gutter: stable;
}


/* =========================================================
   PULSANTE MENU - STRUTTURA GENERALE
   ========================================================= */

/* Contenitore principale dell'hamburger e della label */
.agriflora-menu-toggle {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	width: fit-content;
	height: auto;
	gap: 7px;
	margin: 0;
	padding: 0;
	cursor: pointer;

	/* Stato iniziale:
	   hamburger e label bianchi sopra l'header trasparente.

	   Durante lo scroll e durante l'apertura dell'off-canvas
	   il colore viene gestito anche da GSAP. */
	color: #ffffff;
}


/* =========================================================
   PULSANTE MENU - ICONA HAMBURGER
   ========================================================= */

/* Contenitore delle tre linee */
.agriflora-menu-icon {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 7px;
	margin: 0;
	padding: 0;
}

/* Stile comune delle tre linee */
.agriflora-menu-icon .line {
	display: block;
	height: 2px;

	/* Le linee ereditano il colore
	   dal contenitore principale del pulsante. */
	background: currentColor;

	border-radius: 999px;
	margin: 0;
	padding: 0;

	/* Punto di rotazione centrale
	   per la trasformazione hamburger / X. */
	transform-origin: center;

	/* Transizioni delle micro-animazioni dell'icona. */
	transition:
		transform 0.35s ease,
		opacity 0.25s ease,
		width 0.35s ease,
		background-color 0.35s ease;
}

/* Linea superiore e inferiore */
.agriflora-menu-icon .line--top,
.agriflora-menu-icon .line--bottom {
	width: 40px;
}

/* Linea centrale più lunga,
   allineata a destra */
.agriflora-menu-icon .line--middle {
	width: 52px;
}


/* =========================================================
   PULSANTE MENU - ETICHETTA
   ========================================================= */

/* Stile della label MENU / CLOSE */
.agriflora-menu-label {
	font-family: "Poppins", sans-serif;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;

	/* Transizione morbida del colore. */
	transition: color 0.35s ease;
}


/* =========================================================
   PULSANTE MENU - HOVER
   ========================================================= */

/* L'hover viene applicato solamente
   sui dispositivi dotati di puntatore mouse. */
@media (hover: hover) and (pointer: fine) {

	/* Quando il menu è chiuso,
	   la linea superiore e quella inferiore
	   si spostano leggermente verso sinistra. */
	.agriflora-menu-toggle:not(.is-open):hover .line--top,
	.agriflora-menu-toggle:not(.is-open):hover .line--bottom {
		transform: translateX(-4px);
	}

	/* La linea centrale si sposta invece
	   leggermente verso destra. */
	.agriflora-menu-toggle:not(.is-open):hover .line--middle {
		transform: translateX(4px);
	}
}


/* =========================================================
   PULSANTE MENU - STATO CHIUSO / APERTO
   ========================================================= */

/* Stato iniziale:
   mostra MENU e nasconde CLOSE. */
.agriflora-menu-label .label-close {
	display: none;
}

/* Quando il menu è aperto:
   nasconde MENU. */
.agriflora-menu-toggle.is-open .label-menu {
	display: none;
}

/* Quando il menu è aperto:
   mostra CLOSE. */
.agriflora-menu-toggle.is-open .label-close {
	display: inline;
}

/* Fallback CSS:
   quando il menu diventa una X,
   icona e label CLOSE devono essere scure.

   Il JS forza lo stesso colore anche quando
   GSAP ha precedentemente applicato un colore inline
   durante la trasformazione sticky dell'header. */
.agriflora-menu-toggle.is-open {
	color: #1c1d1a;
}


/* =========================================================
   PULSANTE MENU - TRASFORMAZIONE HAMBURGER / X
   ========================================================= */

/* Quando il menu è aperto:
   la linea superiore scende e ruota. */
.agriflora-menu-toggle.is-open .line--top {
	transform: translateY(9px) rotate(45deg);
	width: 40px;
}

/* Quando il menu è aperto:
   la linea centrale scompare. */
.agriflora-menu-toggle.is-open .line--middle {
	opacity: 0;
}

/* Quando il menu è aperto:
   la linea inferiore sale e ruota. */
.agriflora-menu-toggle.is-open .line--bottom {
	transform: translateY(-9px) rotate(-45deg);
	width: 40px;
}


/* =========================================================
   HEADER - LINK PRINCIPALI
   ========================================================= */

/* Le tre voci principali dell'header.
   La posizione relativa serve come riferimento
   per la linea animata inferiore. */
.header-nav-link {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

/* Linea decorativa sotto il link.

   Utilizziamo currentColor così la linea
   segue automaticamente il colore del testo:
   bianco sopra la hero, scuro nello sticky. */
.header-nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: currentColor;

	/* La linea parte nascosta. */
	transform: scaleX(0);
	transform-origin: right center;

	/* Animazione dell'underline. */
	transition: transform 0.35s ease;
}

/* Hover:
   la linea entra da sinistra verso destra. */
.header-nav-link:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Pagina corrente:
   la linea resta sempre visibile. */
.header-nav-link.is-current::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* =========================================================
   OFF-CANVAS - STATO INIZIALE
   ========================================================= */

/* L'off-canvas parte nascosto per evitare
   qualsiasi flash durante:

   - caricamento della pagina;
   - refresh;
   - passaggio da una pagina all'altra.

   La posizione verticale viene poi gestita
   interamente da GSAP. */
.menu-overlay {
	visibility: hidden;
	opacity: 1;
	pointer-events: none;
	overflow: hidden;
}


/* =========================================================
   OFF-CANVAS - CONTENITORI INTERNI
   ========================================================= */

/* Nasconde temporaneamente gli elementi
   che durante le animazioni GSAP escono
   dai limiti dei rispettivi contenitori. */
.menu-overlay-inner,
.menu-panel-secondary,
.menu-panel-primary {
	overflow: hidden;
}


/* =========================================================
   OFF-CANVAS - LINK PRINCIPALI
   ========================================================= */

/* Elemento principale del menu.
   La posizione relativa serve come riferimento
   per la linea decorativa laterale. */
.menu-overlay-link-primary {
	position: relative;
	display: inline-block;
	text-decoration: none;

	/* Transizione morbida dello spostamento. */
	transition: transform 0.35s ease;
}

/* Piccola linea che compare a sinistra
   durante hover e stato active. */
.menu-overlay-link-primary::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 50%;
	width: 12px;
	height: 1px;
	background: currentColor;

	/* La linea parte nascosta. */
	opacity: 0;
	transform: translateY(-50%) scaleX(0);
	transform-origin: right center;

	transition:
		opacity 0.30s ease,
		transform 0.35s ease;
}

/* Hover:
   il testo si sposta leggermente verso destra. */
.menu-overlay-link-primary:hover {
	transform: translateX(8px);
}

/* Hover:
   compare la linea laterale. */
.menu-overlay-link-primary:hover::before {
	opacity: 1;
	transform: translateY(-50%) scaleX(1);
	transform-origin: left center;
}

/* Pagina corrente:
   mantiene lo stesso trattamento dell'hover. */
.menu-overlay-link-primary.is-current {
	transform: translateX(8px);
}

/* Pagina corrente:
   la linea resta visibile. */
.menu-overlay-link-primary.is-current::before {
	opacity: 1;
	transform: translateY(-50%) scaleX(1);
	transform-origin: left center;
}


/* =========================================================
   OFF-CANVAS - LINK SECONDARI
   ========================================================= */

/* Le voci secondarie utilizzano
   un underline minimale. */
.menu-overlay-link-secondary {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

/* Linea inferiore nascosta nello stato normale. */
.menu-overlay-link-secondary::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;

	transform: scaleX(0);
	transform-origin: right center;

	transition: transform 0.35s ease;
}

/* Hover:
   la linea entra da sinistra verso destra. */
.menu-overlay-link-secondary:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Pagina corrente:
   mantiene la linea visibile. */
.menu-overlay-link-secondary.is-current::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* =========================================================
   HEADER - STATO INIZIALE LOGO STICKY
   ========================================================= */

/* Il logo sticky parte nascosto già dal CSS
   per evitare il flash durante:

   - caricamento;
   - refresh;
   - cambio pagina.

   GSAP lo renderà visibile solamente
   quando l'header passa allo stato compatto. */
.header-logo-sticky {
	visibility: hidden;
	opacity: 0;
}


/* =========================================================
   HEADER INTERNO - STATO INIZIALE / ANTI-FLASH
   ========================================================= */

/* L'header delle pagine interne parte
   già con lo sfondo chiaro, prima ancora
   che venga eseguito il JavaScript. */
.agriflora-header-inner {
	background-color: #fffdf8 !important;
}


/* Il logo chiaro resta nel layout
   e continua a determinare l'altezza iniziale
   dell'header, ma non deve essere visibile
   nelle pagine interne. */
.agriflora-header-inner .header-logo-default {
	visibility: hidden !important;
	opacity: 0 !important;
}


/* Il logo scuro è quello effettivamente visibile
   nelle pagine interne fin dal primo rendering. */
.agriflora-header-inner .header-logo-sticky {
	visibility: visible !important;
	opacity: 1 !important;
}


/* Le tre voci dell'header interno
   devono essere scure fin dal primo rendering.

   La seconda regola intercetta anche
   l'eventuale tag <a> generato da Elementor. */
.agriflora-header-inner .header-nav-link,
.agriflora-header-inner .header-nav-link a {
	color: #1c1d1a !important;
}


/* Anche hamburger e label MENU devono essere
   scuri fin dal primo rendering. */
.agriflora-header-inner .agriflora-menu-toggle {
	color: #1c1d1a !important;
}


/* =========================================================
   ELEMENTOR EDITOR - VISIBILITÀ OFF-CANVAS
   ========================================================= */

/*
 * Nell'editor Elementor forza l'off-canvas
 * nella posizione visibile per permetterne
 * la modifica grafica.
 *
 * BLOCCO TEMPORANEAMENTE DISATTIVATO
 * per lavorare sulle altre parti del sito.
 */

/*
.elementor-editor-active .menu-overlay {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transform: translate3d(0, 0, 0) !important;
}
*/