/*
 * Hero Section - Pizzettando (Custom HTML block, non blocco nativo).
 * I blocchi nativi - sia Kadence scritti a mano sia core/cover - si sono
 * dimostrati fragili/poco affidabili nell'editor su questo progetto; l'HTML
 * custom con add_editor_style() (functions.php) resta la scelta piu' stabile:
 * l'anteprima in Gutenberg mostra comunque il risultato stilizzato reale.
 * Il background e' via CSS (non <img>) cosi' non blocca il rendering del
 * testo (LCP-friendly).
 * La foto di sfondo ha gia' il testo di benvenuto composito al suo interno
 * (fornito cosi' dal cliente) - marchio/sottotitolo/bottone HTML separati
 * di prima sono stati rimossi per non duplicare il messaggio. Resta solo
 * l'icona menu (.pz-hero__menu-icon), link cliccabile verso il menu pizze,
 * posizionata in percentuale sulla base della reference fornita (icona
 * assente dalla foto di sfondo, va aggiunta come elemento separato).
 * Nessun overlay scuro sopra la foto: serviva solo a garantire leggibilita'
 * al testo HTML bianco rimosso sopra - lasciato attivo dopo quella rimozione
 * rendeva l'intera sezione opaca/desaturata senza motivo.
 */

/* background-size:100% auto (non cover) - la larghezza della foto deve
 * combaciare sempre con quella dello schermo (mai ritagliata ai lati);
 * l'altezza si adatta di conseguenza mantenendo le proporzioni originali,
 * il che puo' lasciare intravedere il colore di sfondo sopra/sotto la
 * foto quando la sezione e' proporzionalmente piu' alta della foto
 * stessa (compromesso accettato: priorita' alla larghezza, non al
 * riempimento verticale completo). */
.pz-hero {
	position: relative;
	min-height: 640px;
	background-color: var(--pz-color-darkest);
	background-image: url('../images/hero/hero-section-background-v3.webp');
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Posizione orizzontale (right) in percentuale dalla reference originale.
 * bottom: partito dal margine del riquadro testo nella foto (60.3%, vedi
 * round precedente), poi ridotto del 75% su richiesta esplicita
 * (60.3% * 0.25 = 15.075%). */
.pz-hero__menu-icon {
	position: absolute;
	z-index: 2;
	right: 21.1%;
	bottom: 15.075%;
	width: 6.67%;
	min-width: 60px;
	max-width: 280px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
	animation: pz-hero-menu-icon-bob 2.2s ease-in-out infinite;
}

.pz-hero__menu-icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* Piccolo movimento verticale continuo (su e giu'), mentre la Hero e'
 * visibile - richiamo visivo verso il menu, non legato a hover/scroll. */
@keyframes pz-hero-menu-icon-bob {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pz-hero__menu-icon {
		animation: none;
	}
}

@media (max-width: 600px) {
	.pz-hero {
		min-height: 480px;
	}
}