/**
 * HI Widget Contattaci.
 *
 * Il pannello laterale "Contattaci": linguetta fissa sul bordo destro, pannello
 * scorrevole che ospita il form Gravity Forms.
 *
 * Questo file riguarda solo il contenitore. Lo stile del form, delle tessere dei
 * settori e del passaggio fra i due passi sta in hi-widget-contattaci-form.css;
 * il form e' dentro `.hi-widget-contattaci__form-raw`, il div che lo shortcode
 * mette attorno al suo output.
 *
 * Misure in px: il rem di Impreza cambia sotto i 1280px.
 *
 * Colori dalle variabili del tema con fallback esadecimale: il widget vive anche
 * in contesti dove quel blocco di variabili non e' stato ancora caricato.
 */

/* --------------------------------------------------------------------------
 * Contenitore: fuori schermo a riposo, in vista quando e' aperto
 * -------------------------------------------------------------------------- */

/*
 * Il contenitore e' largo pannello + linguetta ed e' traslato a destra di tutta
 * la larghezza del pannello: a riposo resta visibile solo la linguetta. Aprire
 * vuol dire azzerare la traslazione, cosi' l'animazione e' una sola transform e
 * non tocca il layout della pagina.
 *
 * pointer-events:none sul contenitore e auto sui due figli: la fascia trasparente
 * sopra e sotto la linguetta non deve intercettare i click della pagina.
 */
.hi-widget-contattaci {
	--hi-widget-contattaci-panel-w: 344px;
	--hi-widget-contattaci-tab-w: 54px;

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	width: calc(var(--hi-widget-contattaci-panel-w) + var(--hi-widget-contattaci-tab-w));
	max-width: 100vw;
	font-family: 'Inter', system-ui, sans-serif;
	pointer-events: none;
	transform: translateX(var(--hi-widget-contattaci-panel-w));
	transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hi-widget-contattaci.is-open {
	transform: none;
}

/* Su schermo stretto il pannello prende tutto, meno la linguetta. */
@media (max-width: 600px) {
	.hi-widget-contattaci {
		--hi-widget-contattaci-panel-w: calc(100vw - 54px);
	}
}

@media print {
	.hi-widget-contattaci {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Linguetta
 * -------------------------------------------------------------------------- */

.hi-widget-contattaci .hi-widget-contattaci__tab {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * L'altezza e' fissa ma il testo verticale non la riempie: senza questo il
	 * gruppo icona + etichetta resterebbe appeso in alto, con lo spazio morto
	 * tutto in fondo. Il padding resta simmetrico per lo stesso motivo.
	 */
	justify-content: center;
	gap: 18px;
	width: var(--hi-widget-contattaci-tab-w);
	height: 206px;
	margin: 0;
	padding: 14px 0;
	background: var(--color-hig-primario, #2b72c7);
	color: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.2s ease;
}

.hi-widget-contattaci .hi-widget-contattaci__tab:hover,
.hi-widget-contattaci .hi-widget-contattaci__tab:focus-visible {
	background: var(--color-hig-primario-hover, #245fa8);
	color: #fff;
}

.hi-widget-contattaci .hi-widget-contattaci__tab-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	font-size: 13px;
	line-height: 1;
}

/* La freccia ruota di 180 gradi: a pannello aperto indica la chiusura. */
.hi-widget-contattaci .hi-widget-contattaci__tab-ico i {
	transition: transform 0.35s ease;
}

.hi-widget-contattaci.is-open .hi-widget-contattaci__tab-ico i {
	transform: rotate(180deg);
}

.hi-widget-contattaci .hi-widget-contattaci__tab-txt {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 600 11px/1 'Onest', 'Inter', sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * Pannello
 * -------------------------------------------------------------------------- */

.hi-widget-contattaci .hi-widget-contattaci__panel {
	position: absolute;
	left: var(--hi-widget-contattaci-tab-w);
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: var(--hi-widget-contattaci-panel-w);
	background: var(--color-hig-primario-alt, #3f70c1);
	color: #fff;
	box-shadow: -30px 0 60px -30px rgba(10, 19, 38, 0.4);
	pointer-events: auto;
}

/*
 * A pannello chiuso il contenuto esce dal flusso di tabulazione, ma solo a
 * transizione finita: nascondere subito taglierebbe l'animazione di chiusura.
 */
.hi-widget-contattaci:not(.is-open) .hi-widget-contattaci__panel {
	visibility: hidden;
	transition: visibility 0s linear 0.35s;
}

.hi-widget-contattaci .hi-widget-contattaci__head {
	position: relative;
	flex: 0 0 auto;
	padding: 99px 26px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hi-widget-contattaci .hi-widget-contattaci__title {
	margin: 0;
	font: 600 24px/1.12 'Onest', 'Inter', sans-serif;
	letter-spacing: -0.02em;
	color: #fff;
}

.hi-widget-contattaci .hi-widget-contattaci__sub {
	margin: 10px 0 0;
	font: 400 13.5px/1.55 'Inter', system-ui, sans-serif;
	color: rgba(255, 255, 255, 0.82);
}

.hi-widget-contattaci .hi-widget-contattaci__close {
	position: absolute;
	top: 64px;
	right: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}

.hi-widget-contattaci .hi-widget-contattaci__close:hover,
.hi-widget-contattaci .hi-widget-contattaci__close:focus-visible {
	background: none;
	color: #fff;
	opacity: 1;
}

/* L'unica parte che scorre: la testata resta ferma. */
.hi-widget-contattaci .hi-widget-contattaci__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 26px 30px;
}