/* CBN Informatica (IT-Tech) - componenti condivisi e "cornice" del sito: header, footer,
   bottoni. Caricato su TUTTO il sito (header e footer compaiono in ogni pagina).
   Tutte le classi hanno prefisso cbn- per non collidere con bootstrap/ITSoft (.container,
   .btn, .site-footer...). I token stanno in cbn-tokens.css. */

/* ---- Base dei blocchi cbn-* -------------------------------------------------
   Il tema padre dà a h1-h6, p, ul, a margini, colori e transizioni propri
   (theme-default.css) e rimuove l'outline su a:focus (specificità 0,1,1). Ogni
   blocco nostro porta la classe .cbn-block e riparte da zero, cosi' i mockup
   (che non avevano il padre) si riproducono uguali. Queste regole stanno qui, prima
   di cbn-home.css, perche' le classi dei componenti hanno la stessa specificità e
   devono vincere per ordine. */
.cbn-block :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address) {
	margin: 0;
	padding: 0;
}
.cbn-block :where(h1, h2, h3, h4) {
	color: inherit;
	font-family: var(--cbn-font-display);
	font-weight: 800;
	font-size: inherit;
	line-height: inherit;
	transition: none;
}
.cbn-block :where(ul, ol) {
	list-style: none;
}
.cbn-block :where(img) {
	display: block;
	max-width: 100%;
}
/* 0,1,1 come "a:hover" di bootstrap (che colora il link di blu): a parita' vince
   l'ordine di caricamento, quindi anche al passaggio il colore resta quello ereditato.
   Conseguenza: ogni link-componente che ha un colore proprio lo dichiara come
   ".cbn-block .cbn-xxx" (0,2,0), mai ".cbn-xxx" da solo (0,1,0) che questa regola batterebbe. */
.cbn-block a,
.cbn-block a:hover {
	color: inherit;
	text-decoration: none;
}
/* Specificità 0,2,1: batte "a:focus {outline:none}" del padre (0,1,1), senza !important.
   Arancio 4,25:1 su charcoal (>= 3:1 per un elemento non testuale); sulle superfici
   chiare l'arancio scuro (2,9:1 dell'arancio pieno non basterebbe). */
/* Elementi FUORI dai blocchi cbn-* (back-to-top #scrollUp, breadcrumb, tab e CTA del
   corpo delle pagine interne, che sono ancora del parent): il parent toglie l'outline
   su a:focus e il fondo cambia (bianco, navy, charcoal del footer), quindi un anello
   di un solo colore non reggerebbe 3:1 ovunque. Anello a due toni: tacca charcoal a
   contatto (visibile su fondo chiaro, 13,8:1 su paper) e filo bianco all'esterno
   (visibile su fondo scuro, 15,15:1 su charcoal); su qualunque fondo almeno uno dei
   due supera 3:1. ":not(.cbn-block *)" lascia fuori i nostri blocchi, che hanno
   l'anello arancio qui sotto, e fa vincere questa regola sull'a:focus del parent. */
a:focus-visible:not(.cbn-block *),
button:focus-visible:not(.cbn-block *),
[tabindex]:focus-visible:not(.cbn-block *) {
	outline: 3px solid var(--cbn-white);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--cbn-charcoal);
}
.cbn-block :focus-visible {
	outline: 3px solid var(--cbn-orange);
	outline-offset: 3px;
}
.cbn-block .cbn-on-light :focus-visible,
.cbn-block.cbn-on-light :focus-visible {
	outline-color: var(--cbn-orange-strong);
}

.cbn-container {
	max-width: var(--cbn-container-max);
	margin: 0 auto;
	padding: 0 var(--cbn-gutter);
}
.cbn-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Bottoni -----------------------------------------------------------------
   Angoli netti (come le terminazioni quadrate del logo) e un'ombra dura, senza
   sfumatura, come unico effetto: il bottone "si stacca" di 3px. Pieno arancio scuro
   con bianco >= 4,5:1. */
.cbn-block .cbn-btn {
	--cbn-btn-lift: var(--cbn-charcoal);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 20px 32px;
	border: 2px solid var(--cbn-orange-strong);
	border-radius: 0;
	background: var(--cbn-orange-strong);
	color: var(--cbn-white);
	font: 700 .9375rem/1 var(--cbn-font-display);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui), box-shadow var(--cbn-dur-ui) var(--cbn-ease-ui), background-color var(--cbn-dur-ui), border-color var(--cbn-dur-ui), color var(--cbn-dur-ui);
}
.cbn-block .cbn-btn:hover {
	background: var(--cbn-orange-strong-hover);
	border-color: var(--cbn-orange-strong-hover);
	color: var(--cbn-white);
	transform: translate(-3px, -3px);
	box-shadow: 3px 3px 0 var(--cbn-btn-lift);
}
.cbn-block .cbn-btn:active {
	transform: none;
	box-shadow: none;
}
.cbn-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-btn:hover svg {
	transform: translateX(4px);
}
.cbn-block .cbn-btn--dark {
	background: var(--cbn-charcoal);
	border-color: var(--cbn-charcoal);
}
/* sul fondo arancio della CTA il bottone si inverte: bianco con testo charcoal 15,15:1 */
.cbn-block .cbn-btn--dark:hover {
	background: var(--cbn-white);
	border-color: var(--cbn-white);
	color: var(--cbn-charcoal);
}
.cbn-block .cbn-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.cbn-block .cbn-btn--ghost:hover {
	background: var(--cbn-white);
	border-color: var(--cbn-white);
	color: var(--cbn-charcoal);
}

/* ---- Header ------------------------------------------------------------------
   Charcoal pieno, filetto che lo separa dall'hero (anch'esso charcoal). Sotto
   1100px (valore scritto nei media query: le custom property non funzionano dentro @media;
   a 1100px stanno 4-6 voci + CTA) il menu diventa un pannello a tendina comandato dal pulsante. */
/* Sticky (non fixed): resta nel flusso, quindi l'altezza dell'hero (100svh - header)
   e il layout non cambiano. Funziona solo se nessun antenato ha overflow diverso da
   visible: html, body e .wrapper del parent non ne hanno (verificato). L'ombra compare
   solo sopra contenuto che scorre sotto, il filetto resta anche a pagina ferma. */
.cbn-header {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
	background: var(--cbn-charcoal);
	color: var(--cbn-on-dark);
	border-bottom: 1px solid var(--cbn-line-on-dark);
	--cbn-btn-lift: var(--cbn-white);
}
.cbn-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cbn-space-lg);
	min-height: var(--cbn-header-height);
}
.cbn-header__logo {
	flex: none;
	line-height: 0;
	/* il logo e' alto 36px: padding verticale per un'area di tocco da 44px senza cambiare l'altezza dell'header */
	padding-block: 4px;
}
.cbn-header__logo img {
	height: 46px;
	width: auto;
}
.cbn-header__panel {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.cbn-header__nav {
	display: flex;
	gap: clamp(20px, 2.6vw, 40px);
}
.cbn-block .cbn-header__nav a {
	display: block;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	/* a riposo grigio chiaro (7,6:1), al passaggio e sulla pagina corrente bianco con
	   filetto arancio: il cambio di colore rende lo stato hover evidente anche a chi
	   non coglie il filetto di 2px */
	color: var(--cbn-on-dark-muted);
	font: 600 .9375rem/1 var(--cbn-font-body);
	transition: border-color var(--cbn-dur-ui), color var(--cbn-dur-ui);
}
/* "pagina corrente": WordPress mette la classe sul <li> e (da 6.x) aria-current sul link */
.cbn-block .cbn-header__nav a:hover,
.cbn-block .cbn-header__nav a[aria-current="page"],
.cbn-block .cbn-header__nav .current-menu-item > a {
	border-bottom-color: var(--cbn-orange);
	color: var(--cbn-on-dark);
}
.cbn-block .cbn-header__cta {
	flex: none;
	padding: 14px 24px;
}
/* due istanze della CTA (barra e pannello, stessa funzione PHP): quella del pannello
   serve solo dove la barra non ha spazio per mostrarla */
.cbn-block .cbn-header__cta--panel {
	display: none;
}
.cbn-header__toggle {
	display: none;
}

@media (max-width: 1099px) {
	/* il pulsante compare solo se il JS è attivo (classe .cbn-js su <html>, vedi header.php):
	   senza JS il menu resta visibile in colonna, nessuna voce nascosta */
	.cbn-js .cbn-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 48px;
		height: 48px;
		margin-left: var(--cbn-space-sm);
		padding: 0;
		border: 2px solid var(--cbn-line-on-dark);
		background: transparent;
		color: inherit;
		cursor: pointer;
		transition: border-color var(--cbn-dur-ui);
	}
	.cbn-js .cbn-header__toggle:hover,
	.cbn-js .cbn-header__toggle[aria-expanded="true"] {
		border-color: var(--cbn-orange);
	}
	.cbn-header__toggle-icon,
	.cbn-header__toggle-icon::before,
	.cbn-header__toggle-icon::after {
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
		transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui), background-color var(--cbn-dur-ui);
	}
	.cbn-header__toggle-icon {
		position: relative;
	}
	.cbn-header__toggle-icon::before,
	.cbn-header__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.cbn-header__toggle-icon::before {
		top: -6px;
	}
	.cbn-header__toggle-icon::after {
		top: 6px;
	}
	/* aperto: le tre barre diventano una X */
	.cbn-header__toggle[aria-expanded="true"] .cbn-header__toggle-icon {
		background: transparent;
	}
	.cbn-header__toggle[aria-expanded="true"] .cbn-header__toggle-icon::before {
		transform: translateY(6px) rotate(45deg);
	}
	.cbn-header__toggle[aria-expanded="true"] .cbn-header__toggle-icon::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Il pannello esce dalla barra e occupa tutta la larghezza; senza JS ricade in
	   colonna sotto la barra (la barra va a capo). */
	.cbn-header__bar {
		flex-wrap: wrap;
		gap: var(--cbn-space-sm);
	}
	/* ordine visivo nella barra: logo, CTA, pulsante (nel DOM il pulsante viene prima del
	   pannello per l'ordine del Tab, la CTA di barra e' l'ultima) */
	.cbn-block .cbn-header__cta--bar {
		order: 1;
		margin-left: auto;
	}
	.cbn-js .cbn-header__toggle {
		order: 2;
	}
	.cbn-header__panel {
		order: 3;
		flex: 1 0 100%;
		flex-direction: column;
		align-items: stretch;
		margin: 0 calc(var(--cbn-gutter) * -1);
		padding: 0 var(--cbn-gutter) var(--cbn-space-md);
		border-top: 1px solid var(--cbn-line-on-dark);
	}
	.cbn-js .cbn-header__bar {
		flex-wrap: nowrap;
	}
	.cbn-js .cbn-header__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		background: var(--cbn-charcoal);
		border-bottom: 1px solid var(--cbn-line-on-dark);
		box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
		/* con la barra sticky un pannello piu' alto dello schermo non sarebbe raggiungibile: scorre al suo interno */
		max-height: calc(100svh - var(--cbn-header-height));
		overflow-y: auto;
	}
	.cbn-js .cbn-header__panel:not(.is-open) {
		display: none;
	}
	.cbn-header__nav {
		flex-direction: column;
		gap: 0;
	}
	.cbn-header__nav li + li {
		border-top: 1px solid var(--cbn-line-on-dark);
	}
	/* ".cbn-block" davanti: senza, questa regola (0,1,1) perdeva contro ".cbn-block .cbn-header__nav a" (0,2,1)
	   di sopra e le voci mobili restavano con padding 8px (righe ~31px, sotto i 44px di area di tocco) e senza
	   la barra a sinistra delle voci correnti (correzione 2026-10-15). */
	.cbn-block .cbn-header__nav a {
		padding: var(--cbn-space-sm) 0;
		border-bottom: 0;
		border-left: 3px solid transparent;
		padding-left: var(--cbn-space-sm);
		font-size: 1.0625rem;
	}
	.cbn-block .cbn-header__nav a:hover,
	.cbn-block .cbn-header__nav a[aria-current="page"],
	.cbn-block .cbn-header__nav .current-menu-item > a {
		border-left-color: var(--cbn-orange);
		border-bottom-color: transparent;
	}
	.cbn-block .cbn-header__cta--panel {
		justify-content: center;
		margin-top: var(--cbn-space-md);
	}
}
/* la CTA resta nella barra finche' c'e' spazio, poi passa nel pannello */
@media (max-width: 719px) {
	.cbn-block .cbn-header__cta--bar {
		display: none;
	}
	.cbn-block .cbn-header__cta--panel {
		display: inline-flex;
	}
	.cbn-header {
		--cbn-header-height: 72px;
	}
	.cbn-header__logo img {
		height: 36px;
	}
}

/* Telefono in orizzontale (667x375, 844x390): 72-96px di header sticky erano il 20-25% dello
   schermo e spingevano il titolo della Home sotto la piega. Il token sta anche su :root perche' la
   hero (fuori dall'header) lo legge per calcolare la propria altezza. Toggle (48px) e CTA (>=44px)
   restano sopra la soglia di tocco: la barra scende a 56px, non oltre. */
@media (orientation: landscape) and (max-height: 500px) {
	:root,
	.cbn-header {
		--cbn-header-height: 56px;
	}
	.cbn-header__logo {
		/* 32px di logo + 2x6 = area di tocco di 44px */
		padding-block: 6px;
	}
	.cbn-header__logo img {
		height: 32px;
	}
}

/* Le ancore (#id) non finiscono sotto l'header sticky; */
html {
	scroll-padding-top: var(--cbn-header-height);
}

/* ---- Pulsante "torna su" (#scrollUp, creato dal JS del parent, fuori dai blocchi cbn-*) ----
   Arancio scuro con bianco >= 4,5:1; il bordo bianco serve sul footer charcoal, dove
   l'arancio scuro da solo (2,7:1) non si staccherebbe dal fondo. Il parent imposta
   colore e sfondo con selettore #id: stessa specificita', vince l'ordine di caricamento. */
#scrollUp {
	border: 2px solid var(--cbn-white);
	background: var(--cbn-orange-strong);
	color: var(--cbn-white);
}
#scrollUp:hover {
	background: var(--cbn-orange-strong-hover);
}
#scrollUp i {
	color: var(--cbn-white);
}

/* ---- Footer ------------------------------------------------------------------
   4 colonne reali (marca, link utili, contatti, area operativa). Niente orari: non
   confermati dal cliente. Il markup sta nel post elementor-hf "Main Footer" (7567),
   in un widget HTML (content/home-sections/footer.html). */
.cbn-footer {
	background: var(--cbn-charcoal);
	color: var(--cbn-on-dark-muted);
	padding: var(--cbn-section-y-tight) 0 var(--cbn-space-xl);
	/* filetto arancio come le altre giunzioni (.cbn-section-seam): il footer segue il CTA arancio o una sezione scura */
	border-top: 4px solid var(--cbn-orange);
}
.cbn-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr);
	gap: var(--cbn-space-xl);
}
.cbn-footer__brand img {
	height: 46px;
	width: auto;
	margin-bottom: var(--cbn-space-md);
}
.cbn-footer__brand p {
	max-width: 26em;
	font-size: .9375rem;
}
/* etichetta di colonna in bianco con filetto arancio: l'arancio come testo da 12px su
   charcoal (4,25:1) non passa AA, come non-testo si */
.cbn-footer__label {
	width: fit-content;
	margin-bottom: var(--cbn-space-md);
	padding-bottom: var(--cbn-space-sm);
	border-bottom: 2px solid var(--cbn-orange);
	color: var(--cbn-on-dark);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-footer ul {
	display: grid;
	gap: var(--cbn-space-xs);
}
.cbn-footer address {
	display: grid;
	gap: var(--cbn-space-xs);
	font-style: normal;
}
.cbn-footer p,
.cbn-footer a {
	font-size: .9375rem;
	line-height: 1.6;
}
.cbn-footer a {
	color: var(--cbn-on-dark);
	transition: color var(--cbn-dur-ui);
}
/* Area di tocco >= 44px senza spostare nulla: il link e' alto quanto il tocco e il margine
   negativo riporta l'ingombro alla riga di testo (1.6em di line-height). Le aree di righe
   vicine si sovrappongono di pochi px: vince l'ultima nel DOM. */
.cbn-footer a {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	min-height: var(--cbn-touch-target);
	margin-block: calc((1.6em - var(--cbn-touch-target)) / 2);
}
.cbn-block.cbn-footer a:hover {
	color: var(--cbn-on-dark);
	text-decoration: underline;
	text-decoration-color: var(--cbn-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* Il footer e' un post elementor-hf ("Main Footer") reso dentro .footer-width-fixer: una
   sezione Elementor boxed (container 1140px, padding di colonna, margine dei widget) che
   stringeva il fondo charcoal in un riquadro centrato su tutte le pagine tranne la Home
   (li' lo azzerava la regola .cbn-home di cbn-home.css, che per questo non e' globale).
   Il fondo e il padding sono del widget .cbn-footer, quindi qui la sezione deve solo
   non limitare la larghezza. */
.footer-width-fixer .elementor-section.elementor-top-section {
	margin: 0;
	padding: 0;
}
.footer-width-fixer .elementor-section.elementor-top-section > .elementor-container {
	max-width: none;
	padding: 0;
}
.footer-width-fixer .elementor-top-section .elementor-column > .elementor-element-populated {
	padding: 0;
}
.footer-width-fixer .elementor-top-section .elementor-widget {
	margin: 0;
}
/* Riga dei dati legali: filetto come separatore e mono come le etichette del sito. Solo i dati
   verificati (denominazione e P.IVA): niente forma giuridica, REA o sede legale finche' il
   cliente non li conferma (docs/go-live.md voce 7). */
.cbn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbn-space-xs) var(--cbn-space-md);
	margin-top: var(--cbn-space-lg);
	padding-top: var(--cbn-space-md);
	border-top: 1px solid var(--cbn-line-on-dark);
}
.cbn-footer .cbn-footer__legal p {
	font: 400 var(--cbn-size-label)/1.6 var(--cbn-font-label);
	letter-spacing: .06em;
}
@media (max-width: 900px) {
	.cbn-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--cbn-space-lg);
	}
	.cbn-footer__brand {
		grid-column: 1 / -1;
	}
}
@media (max-width: 480px) {
	.cbn-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cbn-block *,
	.cbn-block *::before,
	.cbn-block *::after {
		transition: none !important;
		animation: none !important;
	}
	.cbn-block .cbn-btn:hover {
		transform: none;
		box-shadow: none;
	}
}