/* CBN Informatica (IT-Tech) - CSS delle 5 sezioni di Contatti. Caricato SOLO su is_page('contatti')
   (functions.php, cbn_enqueue_identity_styles), DOPO cbn-chi-siamo.css, da cui riusa banner di testata,
   breadcrumb, .cbn-cs-lead, i fondi .cbn-cs-light / .cbn-cs-light-deep e il tono .cbn-sp-tone (le variabili
   --sp-*: una sezione funziona su chiaro, paper-deep e charcoal senza riscrivere i colori); da cbn-home.css
   .cbn-section-dark/-seam, .cbn-title-section, .cbn-eyebrow; da cbn-chrome.css i bottoni e
   .cbn-visually-hidden. Qui c'e' solo cio' che e' proprio di questa pagina (prefisso .cbn-ct-).
   Origine: design/proposte-2026-10-18/contatti.css (banner A, nessuna intro, modulo A, recapiti A, mappa C,
   eTicketing A). Solo token --cbn-* (cbn-tokens.css): nessun colore o misura nuovi.
   Ritmo: banner D | modulo L | recapiti D | mappa L (paper-deep) | eTicketing arancio | footer D. */

/* ===== Elementi condivisi ===== */
.cbn-ct-label {
	margin: 0;
	font: 500 var(--cbn-size-label)/1.3 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-ct-arrow {
	width: 20px;
	height: 20px;
	flex: none;
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
a:hover .cbn-ct-arrow {
	transform: translateX(5px);
}
.cbn-ct-section {
	padding: var(--cbn-section-pad) 0;
}
.cbn-ct-section > .cbn-container > .cbn-title-section {
	margin: 0 0 var(--cbn-space-lg);
}
/* Link di testo: sottolineatura arancio spessa, come nel resto del sito; area di tocco >= 44px
   grazie al min-height. */
.cbn-block .cbn-ct-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sp-fg, var(--cbn-text));
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--sp-accent, var(--cbn-orange-strong));
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: text-decoration-color var(--cbn-dur-ui);
}
.cbn-block .cbn-ct-link:hover {
	text-decoration-color: var(--sp-fg, var(--cbn-text));
}
.cbn-ct-body {
	max-width: 34em;
	color: var(--sp-muted, var(--cbn-text-muted));
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ===== 2. Modulo "Carta" =====
   Titolo e promessa a sinistra (restano visibili mentre si compila), scheda bianca con il modulo a destra. */
.cbn-ct-form-a__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--cbn-space-xl);
	align-items: start;
}
.cbn-ct-form-a__copy {
	position: sticky;
	top: calc(var(--cbn-header-height) + var(--cbn-space-md));
}
.cbn-ct-form-a__copy .cbn-title-section {
	margin: 0 0 var(--cbn-space-md);
	font-size: clamp(2.125rem, 4vw, 3.5rem);
}
.cbn-ct-form-a__card {
	padding: var(--cbn-space-lg);
	background: var(--cbn-white);
	border-top: 4px solid var(--cbn-orange);
	box-shadow: 0 0 0 1px var(--cbn-line-on-light);
}

/* ----- Modulo Contact Form 7 (id 1086) -----
   Lo stile si aggancia al markup che CF7 stampa da solo (div.wpcf7 > form.wpcf7-form, classi di stato
   init/invalid/sent/failed/spam/unaccepted sul form, wpcf7-not-valid sui campi): nessun JS.
   Il modulo e' una scheda su fondo chiaro; il blocco di variabili permette di rimetterlo su fondo scuro
   senza duplicare le regole. */
.cbn-ct-form {
	--ct-field-bg: var(--cbn-white);
	--ct-field-line: var(--cbn-text);          /* bordo 15:1: il campo si vede senza ombra */
	--ct-field-fg: var(--cbn-text);
	--ct-label: var(--cbn-text-muted);
	--ct-focus: var(--cbn-orange-strong);      /* 5,11:1 su paper, 5,62:1 su bianco */
	--ct-error: var(--cbn-orange-strong);
	--ct-panel-bg: var(--cbn-charcoal);        /* pannello di conferma: invertito rispetto al fondo */
	--ct-panel-fg: var(--cbn-on-dark);
}
.cbn-section-dark .cbn-ct-form {
	--ct-field-bg: var(--cbn-surface-raised);
	--ct-field-line: var(--cbn-on-dark-muted); /* 7,6:1 */
	--ct-field-fg: var(--cbn-on-dark);
	--ct-label: var(--cbn-on-dark-muted);
	--ct-focus: var(--cbn-orange);             /* 4,25:1, ok per un anello (>= 3:1) */
	--ct-error: var(--cbn-orange);
	--ct-panel-bg: var(--cbn-white);
	--ct-panel-fg: var(--cbn-text);
}
/* Il parent imposta border-box solo in parte: qui e' esplicito perche' le dimensioni minime
   (56px campi, 24px casella) includono padding e bordo. */
.cbn-ct-form input,
.cbn-ct-form textarea {
	box-sizing: border-box;
}
/* I wrapper del modulo demo (bootstrap .row/.col-md-12) diventano una colonna sola: il
   margine negativo di .row e il padding delle colonne spostavano i campi fuori dalla scheda. */
.cbn-ct-form .form-area,
.cbn-ct-form .form-inner {
	margin: 0;
	padding: 0;
}
.cbn-ct-form .form-controls.row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cbn-space-md);
	margin: 0;
}
.cbn-ct-form .form-controls > [class*="col-md-"] {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}
.cbn-ct-form .form-group {
	margin: 0;
}
/* CF7 avvolge ogni campo in un <p> (autop del modulo): il margine del tema farebbe un doppio vuoto. */
.cbn-ct-form .form-group p {
	margin: 0;
}
.cbn-ct-form label {
	display: block;
	margin: 0;
}
.cbn-ct-form .cbn-ct-label {
	display: block;
	margin-bottom: 10px;
	color: var(--ct-label);
}
.cbn-ct-form .wpcf7-form-control-wrap {
	display: block;
}
.cbn-ct-form .cbn-ct-required {
	margin: 0 0 var(--cbn-space-md);
	color: var(--ct-label);
	font: 500 var(--cbn-size-label)/1.4 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cbn-ct-form input[type="text"],
.cbn-ct-form input[type="email"],
.cbn-ct-form input[type="tel"],
.cbn-ct-form textarea {
	display: block;
	width: 100%;
	height: auto;
	min-height: 56px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--ct-field-line);
	border-radius: 0;
	background: var(--ct-field-bg);
	color: var(--ct-field-fg);
	font: 500 1rem/1.4 var(--cbn-font-body); /* 16px: sotto iOS ingrandirebbe la pagina al tocco */
	box-shadow: none;
	transition: border-color var(--cbn-dur-ui), box-shadow var(--cbn-dur-ui), background-color var(--cbn-dur-ui);
}
.cbn-ct-form textarea {
	min-height: 168px;
	resize: vertical;
}
/* Hover: il bordo si ispessisce a 2px senza spostare nulla. */
.cbn-ct-form input[type="text"]:hover,
.cbn-ct-form input[type="email"]:hover,
.cbn-ct-form input[type="tel"]:hover,
.cbn-ct-form textarea:hover {
	box-shadow: inset 0 0 0 1px var(--ct-field-line);
}
/* Focus: anello pieno a 3px + bordo nello stesso colore; visibile anche col mouse (e' un campo di testo).
   Gli !important servono: il tema padre (.form-control:focus, textarea:focus) e style.css del child
   (.wpcf7-form-control-wrap .wpcf7-form-control:focus) li impongono su bordo, ombra e sfondo, con
   outline:none; senza, l'anello sparirebbe. */
.cbn-ct-form input[type="text"]:focus,
.cbn-ct-form input[type="email"]:focus,
.cbn-ct-form input[type="tel"]:focus,
.cbn-ct-form textarea:focus {
	outline: 3px solid var(--ct-focus);
	outline-offset: 2px;
	border-color: var(--ct-focus) !important;
	background-color: var(--ct-field-bg) !important;
	box-shadow: inset 0 0 0 1px var(--ct-focus) !important;
	color: var(--ct-field-fg);
}
/* Errore: bordo 2px + barra a sinistra nel colore d'errore; il colore da solo non basta, c'e' sempre
   il messaggio con il segno "!". */
.cbn-ct-form input.wpcf7-not-valid,
.cbn-ct-form textarea.wpcf7-not-valid,
.cbn-ct-form input.wpcf7-not-valid:hover,
.cbn-ct-form textarea.wpcf7-not-valid:hover {
	border-color: var(--ct-error);
	box-shadow: inset 0 0 0 1px var(--ct-error), inset 6px 0 0 var(--ct-error);
}
.cbn-ct-form input[type="checkbox"].wpcf7-not-valid {
	border-color: var(--ct-error);
	box-shadow: 0 0 0 2px var(--ct-error);
}
.cbn-ct-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
	color: var(--ct-field-fg);
	font: 600 1rem/1.4 var(--cbn-font-body);
	text-align: left;
}
.cbn-ct-form .wpcf7-not-valid-tip::before,
.cbn-ct-form .wpcf7 form .wpcf7-response-output::before {
	content: "!";
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--cbn-orange-strong);
	color: var(--cbn-white); /* bianco su arancio scuro 5,62:1 */
	font: 700 .8125rem/1 var(--cbn-font-label);
}

/* Consenso privacy: casella 24px, la riga intera e' cliccabile (>= 48px). */
.cbn-ct-form .wpcf7-acceptance {
	display: block;
}
.cbn-ct-form .wpcf7-list-item {
	display: block;
	margin: 0;
}
.cbn-ct-form .wpcf7-list-item-label::before,
.cbn-ct-form .wpcf7-list-item-label::after {
	content: none; /* CF7 vi mette uno spazio: qui il distacco lo fa il gap */
}
.cbn-ct-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 48px;
	padding: 10px 0;
	color: var(--ct-field-fg);
	font: 400 1rem/1.5 var(--cbn-font-body);
	cursor: pointer;
}
.cbn-ct-form input[type="checkbox"] {
	appearance: none;
	flex: none;
	position: relative;
	width: 24px;
	height: 24px;
	margin: 1px 0 0;
	border: 2px solid var(--ct-field-line);
	border-radius: 0;
	background: var(--ct-field-bg);
	cursor: pointer;
	transition: background-color var(--cbn-dur-ui), border-color var(--cbn-dur-ui);
}
.cbn-ct-form input[type="checkbox"]:hover {
	border-color: var(--ct-focus);
}
.cbn-ct-form input[type="checkbox"]:checked {
	background: var(--cbn-orange-strong);
	border-color: var(--cbn-orange-strong);
}
.cbn-ct-form input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 1px;
	width: 7px;
	height: 13px;
	border: solid var(--cbn-white);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
.cbn-ct-form input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 3px;
}
.cbn-ct-form .wpcf7-list-item-label a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--cbn-orange-strong);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.cbn-ct-form .wpcf7-list-item-label a:hover {
	text-decoration-color: var(--ct-field-fg);
}

/* Invio: CF7 stampa <input type="submit" class="cbn-btn"> ([submit class:cbn-btn ...]): la grafica e'
   quella dei bottoni del sito (cbn-chrome.css), qui solo la riga. */
.cbn-ct-form .buttons {
	text-align: left; /* il tema padre centra .buttons */
}
.cbn-ct-form .wpcf7-submit {
	box-sizing: border-box;
	min-height: 56px;
}
/* Spinner di CF7 coi token del modulo (il plugin lo fa grigio fisso). */
.cbn-ct-form .wpcf7-spinner {
	margin: 0 0 0 var(--cbn-space-sm);
	vertical-align: middle;
	background-color: var(--ct-field-fg);
}
.cbn-ct-form .wpcf7-spinner::before {
	background-color: var(--ct-field-bg);
}

/* Messaggio di esito. Il selettore e' piu' specifico di quello del plugin (`.wpcf7 form .wpcf7-response-output`
   e le sue varianti per stato, che colorano il bordo di verde/giallo/rosso e danno margini propri):
   a parita' vincerebbe l'ordine di caricamento, e il CSS del plugin non e' sotto il nostro controllo. */
.cbn-ct-form .wpcf7 form.wpcf7-form .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: var(--cbn-space-md) 0 0;
	padding: var(--cbn-space-sm) var(--cbn-space-md);
	border: 2px solid var(--ct-error);
	background: transparent;
	color: var(--ct-field-fg);
	font: 600 1rem/1.5 var(--cbn-font-body);
}
/* Modulo vergine: nessun riquadro (il plugin lo nasconde con la stessa regola, qui ribadita perche' sopra
   il display:flex la batterebbe). */
.cbn-ct-form .wpcf7 form.wpcf7-form.init .wpcf7-response-output,
.cbn-ct-form .wpcf7 form.wpcf7-form.resetting .wpcf7-response-output,
.cbn-ct-form .wpcf7 form.wpcf7-form.submitting .wpcf7-response-output {
	display: none;
}
/* Invio riuscito: i campi lasciano il posto a un pannello a fondo invertito. Nel sistema di marca non
   c'e' il verde: l'esito lo dicono segno, testo e fondo, non solo il colore. */
.cbn-ct-form .wpcf7 form.wpcf7-form.sent .form-area,
.cbn-ct-form .wpcf7 form.wpcf7-form.sent .cbn-ct-required {
	display: none;
}
.cbn-ct-form .wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	margin: 0;
	padding: var(--cbn-space-lg);
	border-color: var(--ct-panel-bg);
	background: var(--ct-panel-bg);
	color: var(--ct-panel-fg);
	font: 700 clamp(1.25rem, 2.4vw, 1.75rem)/1.35 var(--cbn-font-display);
	letter-spacing: -.02em;
}
/* Spunta: SVG in data URI; il tratto bianco ('%23fff' = #fff) e' lo stesso --cbn-white, un url() non legge i token. */
.cbn-ct-form .wpcf7 form.wpcf7-form.sent .wpcf7-response-output::before {
	content: "";
	width: 28px;
	height: 28px;
	margin-top: 2px;
	background: var(--cbn-orange-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M7 14.5l5 5 9-11'/%3E%3C/svg%3E") center / 28px no-repeat;
}

/* ===== 3. Recapiti "Tavola dati" =====
   Titolo a sinistra, righe a destra; telefono ed email sono righe-link intere. Il telefono a corpo
   grande e' l'elemento firma della pagina. */
.cbn-ct-data-a__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--cbn-space-xl);
	align-items: start;
}
.cbn-ct-data-a__grid > div > .cbn-title-section {
	margin: 0;
	font-size: clamp(2.125rem, 4vw, 3.5rem);
}
/* Una riga = un'azione intera (link) o un dato (div). I colori vengono dal tono della sezione. */
.cbn-ct-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}
.cbn-ct-rows > li {
	border-bottom: 1px solid var(--sp-line);
}
.cbn-ct-row {
	display: grid;
	grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cbn-space-sm) var(--cbn-space-md);
	min-height: 72px;
	padding: var(--cbn-space-md) 0;
	color: var(--sp-fg);
	transition: padding var(--cbn-dur-ui) var(--cbn-ease-ui), background-color var(--cbn-dur-ui), box-shadow var(--cbn-dur-ui);
}
.cbn-ct-row .cbn-ct-label {
	color: var(--sp-muted);
}
.cbn-ct-row__value {
	font: 700 clamp(1.125rem, 1.8vw, 1.5rem)/1.25 var(--cbn-font-display);
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}
.cbn-ct-row__value small {
	display: block;
	margin-top: 4px;
	color: var(--sp-muted);
	font: 400 1rem/1.5 var(--cbn-font-body);
	letter-spacing: 0;
}
.cbn-ct-row__value--xl {
	font-size: clamp(1.5rem, 3.6vw, 3rem);
	letter-spacing: -.035em;
}
a.cbn-ct-row:hover {
	padding-left: var(--cbn-space-md);
	background: var(--sp-raised-hover);
	box-shadow: inset 4px 0 0 var(--sp-accent);
}
a.cbn-ct-row .cbn-ct-arrow {
	color: var(--sp-accent);
}
.cbn-block a.cbn-ct-row:focus-visible {
	outline-offset: -4px;
}
.cbn-ct-row__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--cbn-space-lg);
}

/* ===== 4. Dove siamo "Google Maps a filo" =====
   Mappa incorporata a tutta larghezza (tocca entrambi i bordi: elemento che esce dal contenitore), titolo
   con l'indirizzo e "Apri in Google Maps" sempre presente: e' l'alternativa accessibile, perche' l'iframe
   sta fuori dal giro di Tab (tabindex="-1" nel markup, WCAG 2.1.2). */
.cbn-ct-map-c {
	padding: var(--cbn-section-pad) 0 0;
}
.cbn-ct-map-c__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: var(--cbn-space-md) var(--cbn-space-xl);
	margin-bottom: var(--cbn-space-lg);
}
.cbn-ct-map-c__head .cbn-title-section {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3.5rem);
}
.cbn-ct-map-c__address {
	margin: var(--cbn-space-xs) 0 0;
}
/* Altezza fissa: nessun salto di layout al caricamento (o quando Complianz sostituisce l'iframe). */
.cbn-ct-map-c__frame {
	position: relative;
	height: clamp(340px, 38vw, 480px);
	border-top: 1px solid var(--sp-line);
	background: var(--cbn-paper-deep);
}
.cbn-ct-map-c__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.cbn-ct-map-c__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbn-space-xs) var(--cbn-space-xl);
	align-items: baseline;
	padding-top: var(--cbn-space-md);
	padding-bottom: var(--cbn-section-pad);
}
.cbn-ct-map-c__foot p {
	margin: 0;
}
/* Elenco con barre "/" che non restano mai orfane a inizio riga: ogni voce porta la propria
   barra nel padding sinistro (--cbn-ct-sep-width) e tira indietro il margine di pari misura,
   cosi' la prima voce di OGNI riga finisce con la barra fuori dal box del ul, tagliata da
   overflow:hidden. Il margin-right compensa il margine negativo tra voci della stessa riga. */
.cbn-ct-map-c__foot ul {
	--cbn-ct-sep-width: calc(2 * var(--cbn-space-md));
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbn-space-xs) 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	font-weight: 700;
}
.cbn-ct-map-c__foot li {
	position: relative;
	margin: 0 var(--cbn-ct-sep-width) 0 calc(-1 * var(--cbn-ct-sep-width));
	padding-left: var(--cbn-ct-sep-width);
}
.cbn-ct-map-c__foot li::before {
	content: "/";
	position: absolute;
	left: calc(var(--cbn-ct-sep-width) / 2 - .25em);
	color: var(--cbn-text-muted);
	font-weight: 400;
}

/* ===== 5. Clienti con contratto (eTicketing) "Fascia arancio" =====
   Una riga con bottone scuro: stessa famiglia della CTA delle altre pagine, ma bassa, perche' la pagina
   e' gia' una CTA (il modulo) e questa serve solo a chi ha gia' un contratto. */
.cbn-ct-ticket-a {
	position: relative;
	padding: var(--cbn-section-y-tight) 0;
	background: var(--cbn-orange-strong);
	color: var(--cbn-white);
	--cbn-btn-lift: var(--cbn-white);
}
.cbn-ct-ticket-a__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--cbn-space-lg) var(--cbn-space-xl);
}
.cbn-ct-ticket-a__title {
	max-width: 14em;
	margin: 0 0 var(--cbn-space-sm);
	font: 800 clamp(1.875rem, 4.2vw, 3.5rem)/1 var(--cbn-font-display);
	letter-spacing: -.04em;
	text-wrap: balance;
}
.cbn-ct-ticket-a__row > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cbn-space-sm) var(--cbn-space-xl);
}
/* Senza bottone (portale eTicketing non pubblico) la fascia mette titolo e testo affiancati: a destra restava un vuoto */
@media (min-width: 900px) {
	.cbn-ct-ticket-a__row > div {
		width: 100%;
		grid-template-columns: minmax(0, 1fr) minmax(0, 30em);
		align-items: center;
	}
	.cbn-ct-ticket-a__title {
		margin-bottom: 0;
	}
}
.cbn-ct-ticket-a p {
	max-width: 30em;
	margin: 0;
	color: var(--cbn-white);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.cbn-block.cbn-ct-ticket-a :focus-visible {
	outline-color: var(--cbn-white);
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
	.cbn-ct-form-a__grid,
	.cbn-ct-data-a__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cbn-space-lg);
	}
	.cbn-ct-form-a__copy {
		position: static;
	}
}
@media (max-width: 640px) {
	.cbn-ct-form-a__card {
		padding: var(--cbn-space-md);
	}
	.cbn-ct-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.cbn-ct-row .cbn-ct-label {
		grid-column: 1 / -1;
	}
	.cbn-ct-form .wpcf7-submit,
	.cbn-ct-ticket-a .cbn-btn {
		width: 100%;
		justify-content: center;
	}
	.cbn-ct-ticket-a .cbn-btn {
		box-sizing: border-box;
	}
	.cbn-ct-map-c__foot li::before {
		display: none;
	}
	.cbn-ct-map-c__foot ul {
		--cbn-ct-sep-width: 0px;
		column-gap: var(--cbn-space-md);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cbn-ct-row,
	.cbn-ct-arrow {
		transition: none;
	}
}