/* CBN Informatica (IT-Tech) - banner cookie, icona "Manage consent", segnaposto Google Maps e pagina Cookie Policy di Complianz.

   Perche' CSS nel child e non le impostazioni del plugin (Complianz > Banner): quelle
   stanno nel DB (opzioni cmplz_*) e non sopravvivono a un rebuild dello staging; questo
   file si': e' nel child, caricato da cbn_enqueue_identity_styles().

   Come si sovrascrive: Complianz scrive i colori e le misure come custom property su
   :root (--cmplz_*, file generato in uploads/complianz/css/banner-N-optin.css). Le
   ridefinisco sull'elemento del banner, che e' piu' vicino di :root nell'ereditarieta':
   vincono senza specificita' ne' !important e il plugin continua a usarle nelle sue
   regole. Le regole strutturali del plugin hanno specificita' fino a 0,4,0 e sono
   caricate in ordine non garantito rispetto a questo foglio: il prefisso "body" (+1)
   le batte sempre. !important solo dove il plugin lo usa a sua volta (segnato sotto). */

/* ---- Token del banner ---------------------------------------------------------
   Stessi elementi del bottone del sito: angoli netti, bordo charcoal, ombra dura.
   Accetta usa l'arancio scuro (bianco 5,62:1): l'arancio pieno darebbe 3,5:1 al testo. */
.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
	--cmplz_banner_background_color: var(--cbn-white);
	--cmplz_banner_border_color: var(--cbn-charcoal);
	--cmplz_banner_border_width: 2px;
	--cmplz_banner_border_radius: 0;
	--cmplz_text_color: var(--cbn-text);
	--cmplz_hyperlink_color: var(--cbn-orange-strong);   /* 5,62:1 su bianco */
	--cmplz_text_font_size: .875rem;
	--cmplz_link_font_size: .8125rem;
	--cmplz_category_body_font_size: .8125rem;
	--cmplz_title_font_size: 1rem;
	--cmplz_button_font_size: .9375rem;
	--cmplz_button_border_radius: 0;
	--cmplz_button_accept_background_color: var(--cbn-orange-strong);
	--cmplz_button_accept_border_color: var(--cbn-orange-strong);
	--cmplz_button_accept_text_color: var(--cbn-white);
	/* Rifiuta e Preferenze: stessa forma, stessa taglia e stesso peso visivo (bordo pieno
	   charcoal), uno accanto all'altro: nessuna e' meno cliccabile dell'altra. */
	--cmplz_button_deny_background_color: var(--cbn-white);
	--cmplz_button_deny_border_color: var(--cbn-charcoal);
	--cmplz_button_deny_text_color: var(--cbn-text);
	--cmplz_button_settings_background_color: var(--cbn-white);
	--cmplz_button_settings_border_color: var(--cbn-charcoal);
	--cmplz_button_settings_text_color: var(--cbn-text);
	--cmplz_category_header_always_active_color: var(--cbn-text-muted);
	--cmplz_slider_active_color: var(--cbn-orange-strong);
	--cmplz_slider_inactive_color: var(--cbn-text-muted);
}

/* Su :root e non sul banner: la usa anche #scrollUp, che non e' un discendente del banner.
   Altezza massima del pannello su mobile; sopra questa quota si alza #scrollUp (sotto). */
:root {
	--cbn-cookie-sheet-max: 44dvh;
}

body .cmplz-cookiebanner {
	font-family: var(--cbn-font-body);
	border-top: 4px solid var(--cbn-orange-strong);
	box-shadow: 6px 6px 0 var(--cbn-charcoal);
}
body .cmplz-cookiebanner .cmplz-message,
body .cmplz-cookiebanner .cmplz-title,
body .cmplz-cookiebanner .cmplz-category-title,
body .cmplz-cookiebanner .cmplz-description,
body .cmplz-cookiebanner .cmplz-link {
	font-family: var(--cbn-font-body);
}
body .cmplz-cookiebanner .cmplz-title,
body .cmplz-cookiebanner .cmplz-category-title {
	font-weight: 800;
	letter-spacing: var(--cbn-tracking-card);
}
body .cmplz-cookiebanner .cmplz-divider {
	background: var(--cbn-line-on-light);
}

/* Desktop: in basso a SINISTRA invece che a destra, dove stanno #scrollUp (right 30-50px)
   e la linguetta "Gestisci consenso" (ora un'icona, nascosta finche' il banner e' aperto,
   vedi sotto): cosi' il banner non li copre mai. */
@media (min-width: 769px) {
	body .cmplz-cookiebanner.cmplz-bottom-right {
		right: auto;
		left: 24px;
		bottom: 24px;
	}
}

/* ---- "Manage consent": da linguetta larga a icona nell'angolo ----------------------
   Il plugin la disegna come linguetta 163x50 che resta ancorata in basso e, ferma sul
   contenuto, copriva il testo (Chi siamo, Contatti, indice Privacy). Qui diventa un
   quadrato 48x48 nell'angolo in basso a sinistra (a destra sta #scrollUp), fisso: niente
   piu' animazione di scorrimento. Resta sempre visibile (e' l'unico modo di riaprire il
   consenso, GDPR) e il testo del bottone resta nel DOM con font-size 0: e' il nome
   accessibile dell'icona. Mentre il banner e' aperto la nascondo: sta nello stesso angolo
   e ne coprirebbe il bordo. */
body #cmplz-manage-consent .cmplz-manage-consent,
body #cmplz-manage-consent .cmplz-manage-consent:hover,
body #cmplz-manage-consent .cmplz-manage-consent:focus {
	right: auto;
	bottom: var(--cbn-space-sm);
	left: var(--cbn-space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--cbn-touch-target) + 4px);
	height: calc(var(--cbn-touch-target) + 4px);
	min-width: 0;
	padding: 0;
	font-size: 0;
	background-color: var(--cbn-charcoal);
	border: 2px solid var(--cbn-charcoal);
	border-top: 4px solid var(--cbn-orange-strong);
	color: var(--cbn-white);
	box-shadow: 3px 3px 0 var(--cbn-orange-strong);
	animation: none;
	transition: background-color var(--cbn-dur-ui), box-shadow var(--cbn-dur-ui);
}
body #cmplz-manage-consent .cmplz-manage-consent:hover {
	background-color: var(--cbn-orange-strong);
	box-shadow: 3px 3px 0 var(--cbn-charcoal);
}
body #cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	outline: 3px solid var(--cbn-orange);
	outline-offset: 3px;
}
/* Icona "cookie" come maschera: prende il colore del testo, nessun file in piu' */
/* Mobile: il minimo di tocco (44px) e un margine piu' stretto, per coprire meno contenuto a
   tutta larghezza (moduli, testo) */
@media (max-width: 768px) {
	body #cmplz-manage-consent .cmplz-manage-consent,
	body #cmplz-manage-consent .cmplz-manage-consent:hover,
	body #cmplz-manage-consent .cmplz-manage-consent:focus {
		bottom: var(--cbn-space-xs);
		left: var(--cbn-space-xs);
		width: var(--cbn-touch-target);
		height: var(--cbn-touch-target);
	}
}
body #cmplz-manage-consent .cmplz-manage-consent::before {
	--cbn-cookie-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5zM8.5 8.5a1.5 1.5 0 1 0 .01 0zM9 15a1.3 1.3 0 1 0 .01 0zM15 14.5a1.3 1.3 0 1 0 .01 0z'/%3E%3C/svg%3E");
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--cbn-cookie-icon) center / contain no-repeat;
	mask: var(--cbn-cookie-icon) center / contain no-repeat;
}
body:has(.cmplz-cookiebanner.cmplz-show) #cmplz-manage-consent .cmplz-manage-consent {
	display: none;
}

/* ---- Pulsanti ------------------------------------------------------------------ */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-height: 48px;
	border-width: 2px;
	font-family: var(--cbn-font-body);
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;   /* le etichette italiane sono piu' lunghe delle inglesi */
	transition: background-color var(--cbn-dur-ui), border-color var(--cbn-dur-ui), color var(--cbn-dur-ui);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	background-color: var(--cbn-orange-strong-hover);
	border-color: var(--cbn-orange-strong-hover);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	background-color: var(--cbn-paper-deep);
}

/* ---- Categorie (pannello "Gestisci preferenze") ---------------------------------- */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--cbn-paper);
	border: 1px solid var(--cbn-line-on-light);
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
	grid-template-columns: 1fr auto var(--cbn-touch-target);
}
body .cmplz-cookiebanner .cmplz-category-toggle {
	width: var(--cbn-touch-target);
	height: var(--cbn-touch-target);
}
/* Interruttore: il plugin lo disegna con label::before (visibile) e un input trasparente
   sopra (l'area di tocco reale, 40x20): lo porto ad almeno 44px di altezza. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox {
	height: var(--cbn-touch-target);
	margin-top: calc(var(--cbn-touch-target) / -2);
	top: 50%;
}

/* ---- Pulsante di chiusura e link: aree di tocco >= 44px -------------------------- */
body .cmplz-cookiebanner .cmplz-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cbn-touch-target);
	height: var(--cbn-touch-target);
	margin: -12px -12px -12px 0;
}
/* solo i link visibili: gli altri (Gestisci opzioni, venditori TCF) il plugin li nasconde
   con display:none e un display qui li farebbe riapparire */
body .cmplz-cookiebanner .cmplz-documents .cmplz-link,
body .cmplz-cookiebanner .cmplz-manage-third-parties {
	display: inline-flex;
	align-items: center;
	min-height: var(--cbn-touch-target);
	font-weight: 600;
}

/* ---- Mobile: pannello compatto in basso --------------------------------------------
   Il plugin impila tre pulsanti a tutta larghezza e tiene intestazione, divisori e
   link su righe separate (>50% dello schermo a 390px). Qui: Accetta a tutta larghezza,
   Rifiuta e Preferenze affiancati e di pari larghezza; la X sovrapposta all'angolo
   (non occupa una riga); divisori tolti. Il testo scorre dentro il pannello se serve,
   mentre i pulsanti restano sempre visibili. */
@media (max-width: 768px) {
	body .cmplz-cookiebanner {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 12px;
		row-gap: 6px;
		padding: 12px 16px calc(8px + env(safe-area-inset-bottom));
		max-height: var(--cbn-cookie-sheet-max);
		overflow: hidden;
		box-shadow: none;
		border-width: 0;
		border-top: 4px solid var(--cbn-orange-strong);
	}
	body .cmplz-cookiebanner .cmplz-header {
		display: block;
		position: absolute;
		top: 0;
		right: 4px;
		width: var(--cbn-touch-target);
		height: var(--cbn-touch-target);
		z-index: 1;
	}
	body .cmplz-cookiebanner .cmplz-header .cmplz-close {
		margin: 0;
	}
	body .cmplz-cookiebanner .cmplz-divider {
		display: none;
	}
	/* Righe: testo (scorre), pulsanti, poi "Gestisci servizi" e documenti sulla stessa riga.
	   Altezza del testo = massimo del pannello meno cio' che sta sotto (pulsanti, link,
	   spazi: ~190px), cosi' i pulsanti restano sempre visibili senza flex/fr imprevedibili. */
	body .cmplz-cookiebanner .cmplz-body {
		grid-row: 1;
		grid-column: 1 / -1;
		max-height: calc(var(--cbn-cookie-sheet-max) - 190px);
		min-width: 0;
	}
	body .cmplz-cookiebanner .cmplz-buttons {
		grid-row: 2;
		grid-column: 1 / -1;
	}
	body .cmplz-cookiebanner .cmplz-links.cmplz-information {
		grid-row: 3;
		grid-column: 1;
	}
	body .cmplz-cookiebanner .cmplz-links.cmplz-documents {
		grid-row: 3;
		grid-column: 2;
		justify-content: flex-end;
	}
	body .cmplz-cookiebanner .cmplz-message {
		width: auto;
		margin: 0;
		padding-right: 36px;   /* non finisce sotto la X */
		font-size: .8125rem;
		line-height: 1.45;
	}
	body .cmplz-cookiebanner .cmplz-categories {
		width: auto;
	}
	/* il plugin impila l'intestazione categoria a una colonna con !important (<= 425px): serve !important anche qui */
	body .cmplz-cookiebanner .cmplz-category .cmplz-category-header {
		grid-template-columns: 1fr auto var(--cbn-touch-target) !important;
	}
	body .cmplz-cookiebanner .cmplz-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		flex: 1 1 calc(50% - 4px);
		width: auto;
		min-height: var(--cbn-touch-target);
		padding: 8px;
		font-size: .875rem;
	}
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
		flex-basis: 100%;
	}
	body .cmplz-cookiebanner .cmplz-links,
	body .cmplz-cookiebanner .cmplz-links.cmplz-information {
		display: flex;
	}
	body .cmplz-cookiebanner .cmplz-links ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0 12px;
	}

	/* #scrollUp sta in basso a destra e il pannello e' a tutta larghezza: finche' il
	   pannello e' aperto lo alzo sopra il suo massimo (--cbn-cookie-sheet-max). Il
	   padre posiziona #scrollUp con selettore #id: serve la stessa specificita' + :has(). */
	body:has(.cmplz-cookiebanner.cmplz-show) #scrollUp {
		bottom: calc(var(--cbn-cookie-sheet-max) + 16px);
	}
}

/* ---- Segnaposto Google Maps (iframe bloccato prima del consenso) ------------------- */
.cmplz-blocked-content-container {
	border: 2px solid var(--cbn-charcoal);
	border-radius: 0;
	box-shadow: none;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice {
	max-width: 340px;
	padding: var(--cbn-space-sm);
	background-color: var(--cbn-charcoal);
	border-top: 4px solid var(--cbn-orange-strong);
	color: var(--cbn-on-dark);
	font-family: var(--cbn-font-body);
	font-size: .9375rem;
	line-height: 1.5;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a {
	color: var(--cbn-on-dark);
	text-decoration: underline;
}
.cmplz-blocked-content-container .cmplz-accept-service {
	min-height: var(--cbn-touch-target);
	padding: 10px var(--cbn-space-md);
	border: 2px solid var(--cbn-orange-strong);
	border-radius: 0;
	background: var(--cbn-orange-strong);
	color: var(--cbn-white);
	font: 700 .9375rem/1.2 var(--cbn-font-body);
	cursor: pointer;
}
.cmplz-blocked-content-container .cmplz-accept-service:hover {
	background: var(--cbn-orange-strong-hover);
	border-color: var(--cbn-orange-strong-hover);
}

/* ---- Pagina Cookie Policy (EU) --------------------------------------------------------
   La pagina la genera Complianz (shortcode [cmplz-document]) sul template di pagina del
   padre: l'H1 e' gia' nel corpo, dentro .itsoft-single-blog-title, e il testo della policy
   non va toccato. Per allinearla a Privacy e Contatti trasformo QUEL blocco in banner scuro
   a tutta larghezza, col punto arancio e il filetto di giunzione, invece di aggiungere un
   secondo banner (che duplicherebbe l'H1). Solo CSS, scoped a body.cmplz-document (la classe
   che il plugin mette sul body delle sue pagine documento; l'id/classe omonima del
   contenitore interno non c'entra), quindi sopravvive a un rebuild e vale anche in
   produzione dove l'ID pagina sara' diverso.
   Il fondo a tutta larghezza viene da box-shadow + clip-path: il blocco sta dentro un
   .container e non si puo' allargare senza toccare il template del padre. overflow-x:clip
   sul contenitore della pagina evita lo scroll orizzontale che l'ombra causerebbe. */
body.cmplz-document .itsoft-blog-page {
	padding-top: 0;   /* il padre da' 90px sopra il contenuto... */
	overflow-x: clip;
}
/* ...e 30px sopra il titolo: tra header e banner scuro resterebbe una fascia bianca */
body.cmplz-document .itsoft-single-blog-details {
	padding-top: 0;
}
body.cmplz-document .itsoft-single-blog-title {
	position: relative;
	margin-bottom: var(--cbn-space-xl);
	padding: var(--cbn-space-xl) 0;
	background: var(--cbn-charcoal);
	box-shadow: 0 0 0 100vmax var(--cbn-charcoal);
	clip-path: inset(0 -100vmax);
}
body.cmplz-document .itsoft-single-blog-title::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: var(--cbn-orange);
	box-shadow: 0 0 0 100vmax var(--cbn-orange);
	clip-path: inset(0 -100vmax);   /* senza, l'ombra si spande anche in verticale e copre il titolo */
}
body.cmplz-document .itsoft-single-blog-title h1 {
	margin: 0;
	padding: 0;
	color: var(--cbn-on-dark);
	font: 800 clamp(2.75rem, 7.5vw, 6.25rem)/.92 var(--cbn-font-display);
	letter-spacing: var(--cbn-tracking-display);
}
/* il punto e' decorativo: il testo alternativo vuoto lo toglie ai lettori di schermo */
body.cmplz-document .itsoft-single-blog-title h1::after {
	content: ".";
	content: "." / "";
	color: var(--cbn-orange);
}