/* ============================================================
   Hero delle pagine interne - trascrizione di components.css
   (.hero-banner, .hero-banner-bg, .hero-banner-content e lo stato
   trasparente della navbar) dell'HTML di riferimento.

   Il markup e' quello di core/cover, quindi le classi del
   riferimento sono mappate su quelle che genera core:
     .hero-banner         -> .wp-block-cover
     .hero-banner-bg      -> .wp-block-cover__image-background
                             (immagine) + .wp-block-cover__background
                             (velo verde, gradiente di theme.json)
     .hero-banner-content -> .wp-block-cover__inner-container
   Il contenitore interno di core non puo' ricevere una classe:
   riceve qui sia le misure di .container sia quelle del contenuto.
   ============================================================ */

/* ─── HERO BANNER ────────────────────────────────────── */
/* position, display e overflow sono gia' quelli del riferimento e li mette
   core. Restano da battere, a specificita' pari, min-height 430px, padding 1em
   e l'allineamento al centro: da qui la doppia classe. */
.wp-block-cover.hero-banner {
	min-height: 56svh;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	border-bottom-left-radius: 64px;
	border-bottom-right-radius: 64px;
	/* fondo nero di riserva: se l'immagine non carica, il testo bianco resta
	   leggibile sul velo verde invece che sul bianco della pagina */
	background-color: #000;
}

/* Nel riferimento immagine e velo verde stanno sullo stesso elemento e la
   parallasse (assets/js/hero-banner.js) muove quello: core li separa in due,
   che si muovono insieme. Scalati dal basso, cosi' lo scorrimento non scopre
   un vuoto in alto. */
.hero-banner .wp-block-cover__image-background,
.hero-banner .wp-block-cover__background {
	transform-origin: bottom;
	will-change: transform;
}

/* ─── CONTENUTO ──────────────────────────────────────── */
.hero-banner .wp-block-cover__inner-container {
	/* .container: stesse misure di style.css, che qui non puo' arrivare */
	/* Su una riga sola: un minificatore che toglie le andate a capo dentro
	   calc() lascia var(--a)+var(--b), e senza gli spazi attorno al + la
	   dichiarazione e' invalida e il contenitore va a tutta larghezza. */
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right);
	/* .hero-banner-content: margin-block auto centra in verticale */
	margin-block: auto;
	padding-top: calc(132px + var(--wp--custom--topbar-height));
	padding-bottom: 120px;
	z-index: 2;
	will-change: transform, opacity;
}

/* I margini fra titolo e sottotitolo sono quelli del riferimento e non il
   blockGap globale che il layout "flow" di core applica ai figli. */
.hero-banner h1 {
	font-size: clamp(2.7rem, 6vw, 4.5rem);
	font-weight: 400;
	line-height: 1.15;
	margin-block: 0 16px;
}

.hero-banner .hero-sub {
	max-width: 560px;
	margin-block: 0;
	color: rgba(255, 255, 255, .9);
}

/* Entrata: prima il titolo, poi il sottotitolo. Solo CSS, cosi' non c'e' il
   lampo di contenuto visibile prima che parta l'animazione.
   @keyframes reveal-in sta in style.css. */
@media (prefers-reduced-motion: no-preference) {
	.hero-banner h1,
	.hero-banner .hero-sub {
		opacity: 0;
		animation: reveal-in .8s cubic-bezier(.22, .61, .36, 1) both;
	}

	.hero-banner h1        { animation-delay: .12s; }
	.hero-banner .hero-sub { animation-delay: .30s; }
}

/* ─── NAVBAR SOPRA LA HERO ───────────────────────────── */
/* Nel riferimento la navbar sta dentro <section class="hero-banner">, qui e' un
   template part fratello di <main>: la relazione fra le due si esprime sul
   body. La navbar resta trasparente finche' non esce dalla hero, poi
   assets/js/header.js le mette .scrolled. */
body:has(.hero-banner) .navbar {
	background: transparent;
	border-bottom: none;
	transition: background var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

body:has(.hero-banner) .navbar.scrolled {
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}

/* logo-white.png del riferimento e' lo stesso logo reso bianco: il filtro
   restituisce esattamente quei pixel (stesso canale alfa, RGB tutto bianco)
   senza un secondo <img> nell'header e senza un secondo file da gestire. */
body:has(.hero-banner) .navbar:not(.scrolled) .logo img {
	filter: brightness(0) invert(1);
}

body:has(.hero-banner) .navbar:not(.scrolled) .hamburger span {
	background: var(--wp--preset--color--white);
}

/* Sopra i 960px il menu e' in linea sopra l'immagine: voci bianche e pulsante
   invertito. Sotto, il menu e' un pannello bianco e i colori restano quelli. */
@media (min-width: 961px) {
	/* il colore va anche sul <li>, perche' la freccia del dropdown e' un
	   <button> fratello dell'ancora e disegna con currentColor */
	body:has(.hero-banner) .navbar:not(.scrolled) .nav-links .wp-block-navigation__container > .wp-block-navigation-item:not(.is-style-btn-nav),
	body:has(.hero-banner) .navbar:not(.scrolled) .nav-links .wp-block-navigation__container > .wp-block-navigation-item:not(.is-style-btn-nav) > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--white);
	}

	body:has(.hero-banner) .navbar:not(.scrolled) .nav-links .is-style-btn-nav > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--secondary);
	}

	body:has(.hero-banner) .navbar:not(.scrolled) .nav-links .is-style-btn-nav > .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--cream);
	}
}