/**
 * Element:     Menu esteso
 * Class:       .hi-cva-menu-esteso
 * Description: Pannello a tendina sotto l'header, aperto passando sopra una
 *              voce del menu principale. Geometria e colori dal prototipo
 *              cva-proposta-1-B; corpo dei testi dal tema.
 *
 * Il pannello è agganciato al bordo inferiore dell'header, che il JS misura e
 * scrive in --hi-cva-hme-top: gli header che si rimpiccioliscono scorrendo
 * cambiano altezza, e il pannello deve seguirli.
 */

.hi-cva-menu-esteso {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--hi-cva-hme-top, 0px);
	z-index: var(--hi-cva-hme-z, 99);
	/* Il contenitore non deve intercettare nulla: lo fanno i pannelli aperti. */
	pointer-events: none;
}

.hi-cva-menu-esteso *,
.hi-cva-menu-esteso *::before,
.hi-cva-menu-esteso *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Header chiaro
   A pannello aperto — passando sopra o cliccando, indifferentemente — tutto
   l'header diventa bianco e si fonde col box, come nel mockup.

   Non si riscrivono le regole del tema ma le sue variabili: Impreza fa
   derivare sfondo e testi di tutte e tre le fasce, e di entrambi i menu, da
   --color-header-middle-*. Ridefinirle sull'header basta a cambiare tutto in
   un colpo solo, senza !important e senza inseguire i selettori del tema.
   La fascia alta prende già il testo da --color-header-top-text, che il tema
   tiene scuro: lì serve solo lo sfondo.
   ========================================================================== */

.l-header[data-hme-light] {
	--color-header-middle-bg: #fff;
	--color-header-middle-bg-grad: #fff;
	--color-header-middle-text: #0c2236;
	--color-header-middle-text-hover: #00a0cc;
	/* Se l'header è impostato trasparente sopra la hero, a pannello aperto
	   deve comunque riempirsi: altrimenti il box bianco resterebbe appeso. */
	--color-header-transparent-bg: #fff;
	--color-header-transparent-bg-grad: #fff;
	--color-header-transparent-text: #0c2236;
	--color-header-transparent-text-hover: #00a0cc;
	--color-header-top-transparent-bg: #fff;
	--color-header-top-transparent-bg-grad: #fff;
	--color-header-top-transparent-text: #0c2236;
	--color-header-top-transparent-text-hover: #00a0cc;
}

/* Il filo che separa le due fasce, come nel mockup: senza, la riga alta e
   quella del logo diventano un unico campo bianco indistinto. */
.l-header[data-hme-light] .l-subheader.at_top {
	box-shadow: inset 0 -1px rgba(12, 34, 54, .1);
}

/* Il marchio è un SVG bianco: su fondo bianco sparirebbe. Il prototipo lo
   scurisce così, senza bisogno di un secondo file in libreria. */
.l-header[data-hme-light] .ush_image_1 img {
	filter: brightness(0);
}

/* Le transizioni stanno fuori dallo stato acceso, altrimenti varrebbero solo
   all'andata e il ritorno al blu sarebbe uno scatto. Le variabili CSS non si
   animano: si animano le proprietà che le leggono.
   Non serve restringerle a una classe sul body: questo foglio entra in pagina
   solo dove lo shortcode rende, cioè dove l'header ha davvero il pannello. */
.l-header .l-subheader {
	transition: background-color .28s ease, color .28s ease, box-shadow .28s ease;
}

.l-header .l-subheader a {
	transition: color .28s ease;
}

.l-header .ush_image_1 img {
	transition: filter .28s ease;
}

/* ==========================================================================
   Attivazione a click
   Il pannello prende il posto del menu principale invece di coprirlo: i menu
   dell'header si ritirano, tranne quello che contiene la voce cliccata. Sono
   marcati dal JS, quindi questa regola non tocca nulla finché non si apre un
   pannello di quel tipo.
   ========================================================================== */

[data-hme-hidden] {
	/* Si toglie di mezzo senza sparire di scatto: il menu sfuma e si alza di
	   poco, come se lasciasse il posto. `visibility` lo rende anche
	   inaccessibile al tab, che con la sola opacità resterebbe raggiungibile. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity .28s ease,
		transform .28s ease,
		visibility 0s linear .28s;
}

/* ==========================================================================
   Pannello
   Uno solo, con dentro tutte le sezioni: passando da una voce all'altra
   resta aperto e adatta l'altezza, invece di chiudersi e riaprirsi.
   Chiuso è alto zero e non riceve il puntatore, ma resta nel DOM, quindi il
   suo contenuto è già lì, misurabile e leggibile dai motori di ricerca.
   L'altezza a cui aprirsi la misura il JS: dipende dalla sezione mostrata.
   ========================================================================== */

.hi-cva-menu-esteso__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	overflow: hidden;
	height: 0;
	opacity: 0;
	background: var(--color-content-bg, #fff);
	box-shadow: 0 24px 48px -24px rgba(12, 34, 54, .28);
	pointer-events: none;
	transition:
		height .42s cubic-bezier(.16, .84, .32, 1),
		opacity .3s ease;
}

.hi-cva-menu-esteso__panel[data-hme-open] {
	height: var(--hi-cva-hme-height, 0px);
	opacity: 1;
	pointer-events: auto;
}

/* Solo la sezione attiva occupa spazio: è la sua altezza che il pannello segue. */
.hi-cva-menu-esteso__section {
	display: none;
}

.hi-cva-menu-esteso__section[data-hme-current] {
	display: block;
	animation: hi-cva-hme-enter .28s cubic-bezier(.16, .84, .32, 1) both;
}

/* Il contenuto entra con un accenno di discesa: senza, cambiando voce
   cambierebbe di scatto. */
@keyframes hi-cva-hme-enter {

	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hi-cva-menu-esteso__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	padding: 48px clamp(24px, 6vw, 84px) 56px;
}

/* ==========================================================================
   Colonna di sinistra — quella che viene dalle impostazioni
   ========================================================================== */

.hi-cva-menu-esteso__lead {
	flex: 0 0 30%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	padding-right: clamp(32px, 4vw, 72px);
}

/*
 * Corpo, peso e interlinea arrivano dal livello h3 del tema. Qui si dichiara
 * solo il colore, perché nel pannello il titolo è il richiamo cromatico della
 * sezione e non un titolo di contenuto, e l'azzeramento dei margini, che in
 * un menu non servono.
 */
.hi-cva-menu-esteso__title {
	margin: 0;
	padding: 0;
	color: var(--color-content-link, #00a0cc);
}

.hi-cva-menu-esteso__summary {
	margin: 26px 0 0;
	max-width: 34ch;
	color: var(--color-content-text, #0c2236);
}

.hi-cva-menu-esteso__cta {
	margin-top: 44px;
	align-self: flex-start;
}

/* ==========================================================================
   Colonna di destra — il blocco riutilizzabile
   Il filo verticale separa ciò che arriva dalle impostazioni da ciò che si
   compone nel builder. Dentro non si tocca nulla: il blocco esce come è
   stato costruito, spaziature comprese, che si regolano dal builder.
   ========================================================================== */

.hi-cva-menu-esteso__body {
	flex: 1 1 auto;
	min-width: 0;
	border-left: 1px solid var(--color-content-border, rgba(12, 34, 54, .16));
	padding-left: clamp(32px, 4vw, 64px);
}

/* ==========================================================================
   Avviso ai redattori
   ========================================================================== */

.hi-cva-menu-esteso__notice {
	margin: 8px 0;
	padding: 12px 18px;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: #0a1320;
	background: #ffd166;
	border-radius: 4px;
}

/* ==========================================================================
   Sotto la soglia il pannello non esiste: c'è il menu mobile del tema
   ========================================================================== */

.hi-cva-menu-esteso[data-hme-off] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.hi-cva-menu-esteso__panel {
		transition-duration: 1ms;
	}

	.hi-cva-menu-esteso__section[data-hme-current] {
		animation-duration: 1ms;
	}
}