/*
Theme Name: Cooperativa Bologna Integrazione
Theme URI: https://competent-lederberg.87-106-170-239.plesk.page/
Author: Sefora Impresa Sociale
Author URI: https://seforaimpresasociale.it/
Description: Tema custom per la Cooperativa Bologna Integrazione (BOINT). Sviluppato da zero, compatibile con Elementor, CSS e JS nativi (con jQuery). Senza framework esterni. Predisposto per gestione blog con ricerca avanzata e categorie per pagine progetto/news.
Version: 1.12.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boint
Tags: custom-theme, elementor, blog, accessibility-ready
*/

/* =========================================================
   0. FONT FACES — self-hosted (no CDN esterni)
   ========================================================= */

/* Athena — Light 300 */
@font-face {
	font-family: 'Athena';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/athena/Athena-Light.otf') format('opentype');
}
/* Athena — Regular 400 */
@font-face {
	font-family: 'Athena';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/athena/Athena-Regular.otf') format('opentype');
}
/* Athena — SemiBold 600 */
@font-face {
	font-family: 'Athena';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/athena/Athena-SemiBold.otf') format('opentype');
}
/* Athena — Bold 700 */
@font-face {
	font-family: 'Athena';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/athena/Athena-Bold.otf') format('opentype');
}

/* Nunito Sans — Variable font (range pesi 200-1000) */
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('assets/fonts/nunito-sans/NunitoSans-Variable.ttf') format('truetype-variations'),
	     url('assets/fonts/nunito-sans/NunitoSans-Variable.ttf') format('truetype');
}
/* Nunito Sans — Italic Variable */
@font-face {
	font-family: 'Nunito Sans';
	font-style: italic;
	font-weight: 200 1000;
	font-display: swap;
	src: url('assets/fonts/nunito-sans/NunitoSans-Italic-Variable.ttf') format('truetype-variations'),
	     url('assets/fonts/nunito-sans/NunitoSans-Italic-Variable.ttf') format('truetype');
}

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	/* Brand blue (logo: #294291) */
	--cbi-blue-50:  #F2F6FD;
	--cbi-blue-100: #E5ECFA;
	--cbi-blue-500: #3556B5;
	--cbi-blue-600: #2E4BA1;
	--cbi-blue-700: #294291;  /* PRIMARY BRAND — esatto del logo */
	--cbi-blue-800: #1F3478;
	--cbi-blue-900: #15265A;

	/* Brand teal (logo: #0090A9) */
	--cbi-teal-50:  #E6F5F8;
	--cbi-teal-100: #B8E5EC;
	--cbi-teal-200: #80D2DE;
	--cbi-teal-500: #0090A9;  /* TEAL BRAND — esatto del logo */
	--cbi-teal-600: #007890;
	--cbi-teal-700: #006578;
	--cbi-teal-800: #004F5F;

	/* Ink / neutral */
	--cbi-ink-50:  #F9FAFC;
	--cbi-ink-100: #F4F5F8;
	--cbi-ink-150: #ECEEF3;
	--cbi-ink-200: #E2E5EC;
	--cbi-ink-300: #C7CCD8;
	--cbi-ink-400: #9099AC;
	--cbi-ink-500: #6B7488;
	--cbi-ink-600: #475067;
	--cbi-ink-700: #2A3142;
	--cbi-ink-800: #1A2030;
	--cbi-ink-900: #0E1320;

	/* Semantic */
	--cbi-success: #16a34a;
	--cbi-warning: #d97706;
	--cbi-error:   #dc2626;
	--cbi-info:    #2E5BC9;

	/* Type */
	/* Type families */
	--font-sans:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-heading: 'Athena', 'Nunito Sans', system-ui, sans-serif;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(15,37,87,0.06), 0 1px 3px rgba(15,37,87,0.08);
	--shadow-md: 0 4px 12px rgba(15,37,87,0.08), 0 2px 4px rgba(15,37,87,0.06);
	--shadow-lg: 0 16px 40px rgba(15,37,87,0.12), 0 4px 12px rgba(15,37,87,0.08);

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;

	/* Layout */
	--container-max: 1600px; /* era 1360px — effetto boxed piu' aderente al mockup su schermi grandi (>=1920) */
	--container-pad: 24px;

	--header-h: 88px;        /* era 80px — alzato per ospitare il logo brand a 64px */
	--header-h-mobile: 64px;

	--transition-fast: .15s ease;
	--transition-base: .25s ease;

	/* ---------------------------------------------------------
	   Palette tematica complementare (Brand Book 2026, sez. 4).
	   Ogni "area" del sito ha un suo accento cromatico, da usare
	   sui titoli di sezione e sui dettagli decorativi per
	   differenziare l'area senza perdere coerenza col brand.
	   --------------------------------------------------------- */
	--cbi-events-gold:            #87744D; /* Eventi                 */
	--cbi-events-gold-hover:      #6F5E3D; /* Eventi · hover/dark    */
	--cbi-events-gold-50:         #F5F0E5; /* Eventi · superfici     */

	--cbi-laboratori:             #00AB8C; /* Laboratori — text safe */
	--cbi-laboratori-hover:       #008A71; /* Laboratori · hover     */
	--cbi-laboratori-50:          #E5F9F4; /* Laboratori · superfici */

	/* Per CSR diurni/residenziali il colore base del Brand Book
	   (panna #FFF5DA, lavanda #DAE2FF) e' troppo chiaro per il
	   testo su sfondo bianco. Manteniamo il colore base come
	   superficie morbida (badge/pill, sfondi soft) e definiamo
	   una variante "text" piu' scura per titoli/CTA leggibili. */
	--cbi-csr-diurni:             #FFF5DA; /* superficie soft   */
	--cbi-csr-diurni-text:        #7A6332; /* titoli/CTA        */
	--cbi-csr-diurni-hover:       #5F4D27; /* hover scuro       */

	--cbi-csr-residenziali:       #DAE2FF; /* superficie soft   */
	--cbi-csr-residenziali-text:  #3A4A8C; /* titoli/CTA        */
	--cbi-csr-residenziali-hover: #2C3A75; /* hover scuro       */

	--cbi-appartamento:           #AB4D00; /* Gruppi appartamento */
	--cbi-appartamento-hover:     #8A3E00;

	/* Progetti & Innovazione — non e' fra i 5 accenti complementari del Cosa
	   facciamo, e' una sezione del sito a se'. Uso il Blu Violaceo della
	   palette monocromatica del Brand Book (pag. 20): istituzionale, distinto
	   dal blu primario, contrast-safe per testo su bianco (~9:1). */
	--cbi-progetti:               #2E3B67; /* Blu Violaceo                  */
	--cbi-progetti-hover:         #1F2A4C; /* Blu Violaceo · hover scuro    */
	--cbi-progetti-50:            #EEF0F8; /* Blu Violaceo · superficie soft */

	/* ---------------------------------------------------------
	   Restyle 2026 (token esatti da Figma). Il gradiente firma e
	   il pattern "petalo" (un angolo squadrato) sono la cifra del
	   nuovo design: hero, footer, numeri, card, DONA ORA.
	   --------------------------------------------------------- */
	--cbi-gradient:      linear-gradient(135deg, #0091AA 0%, #294292 100%);
	--cbi-blue-50-new:   #EEF0F6; /* hover voci menu, pill "generica", superfici soft */
	--cbi-azure-soft:    #E4F1FB; /* celeste soft — sfondi sezione azzurri (.cbi-bg-azure / intro) */
	--cbi-teal-brand:    #0091AA; /* titoli card default (Figma esatto)             */
	--cbi-grey:          #878787; /* testo secondario/date/estratti card (Figma)    */
	--radius-petal:      20px 0 20px 20px; /* top-right squadrato — card/immagini/numeri */
	--radius-petal-btn:  20px 20px 20px 0; /* bottom-left squadrato — DONA ORA */
	--shadow-lift:       0 15px 35px rgba(0,0,0,.22); /* card "sollevata" al hover */
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cbi-ink-800);
	background: var(--cbi-ink-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
	color: var(--cbi-blue-700);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover { color: var(--cbi-teal-500); text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	font-style: normal;
	margin: 0 0 .5em;
	color: var(--cbi-blue-700);
	line-height: 1.2;
}
h1 { font-size: clamp(2rem, 2.4vw + 1.4rem, 3rem); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); font-weight: 700; line-height: 1.15; }
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--cbi-ink-900); }
h5 { font-size: 1.125rem; font-weight: 600; color: var(--cbi-ink-900); }
h6 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cbi-teal-700); }

p { margin: 0 0 1em; }

blockquote {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border-left: 4px solid var(--cbi-teal-500);
	background: var(--cbi-teal-50);
	color: var(--cbi-ink-700);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--cbi-ink-150); margin: 2em 0; }

pre, code, kbd, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
}
pre {
	overflow-x: auto;
	background: var(--cbi-ink-100);
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-sm);
	padding: 1em;
}
code {
	background: var(--cbi-ink-100);
	padding: .15em .4em;
	border-radius: 4px;
}
pre code { background: transparent; padding: 0; }

::selection { background: var(--cbi-teal-100); color: var(--cbi-blue-900); }

/* Focus states (accessibility) */
:focus-visible {
	outline: 3px solid var(--cbi-teal-100);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	background: var(--cbi-blue-700);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	z-index: 9999;
}
.skip-link:focus {
	left: 8px;
	color: #fff;
	text-decoration: none;
}

/* =========================================================
   3. LAYOUT — Container, sections
   ========================================================= */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--narrow { max-width: 880px; }
.container--wide   { max-width: 1400px; }

.section { padding-block: clamp(48px, 6vw, 96px); }
.section--tight { padding-block: clamp(32px, 4vw, 64px); }
.section--alt   { background: var(--cbi-ink-100); }
.section--blue  { background: var(--cbi-blue-50); }
.section--teal  { background: var(--cbi-teal-50); }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
	white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
	background: var(--cbi-blue-700);
	color: #fff;
	border-color: var(--cbi-blue-700);
}
.btn-primary:hover { background: var(--cbi-blue-800); border-color: var(--cbi-blue-800); color: #fff; }

.btn-secondary {
	background: transparent;
	color: var(--cbi-blue-700);
	border-color: var(--cbi-blue-700);
}
.btn-secondary:hover { background: var(--cbi-blue-50); color: var(--cbi-blue-800); }

.btn-accent {
	background: var(--cbi-teal-500);
	color: #fff;
	border-color: var(--cbi-teal-500);
}
.btn-accent:hover { background: var(--cbi-teal-600); border-color: var(--cbi-teal-600); color: #fff; }

.btn-on-dark {
	background: #fff;
	color: var(--cbi-blue-700);
	border-color: #fff;
}
.btn-on-dark:hover { background: var(--cbi-blue-50); color: var(--cbi-blue-800); }

.btn-ghost-dark {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.6);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.btn-sm { padding: 10px 16px; font-size: .9375rem; }
.btn-lg { padding: 18px 28px; font-size: 1.0625rem; }

/* ---------------------------------------------------------
   CTA globali del restyle 2026 (Figma: CTAblu / CTAbianca).
   Bottone outline che al hover si riempie. La freccia "→" va
   messa nel contenuto del link. `.btn-cta` per fondi chiari,
   `.btn-cta--white` per fondi gradiente/scuri.
   --------------------------------------------------------- */
.btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 15px;
	border: 1px solid #294292;
	border-radius: 10px;
	background: transparent;
	color: #294292;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-cta:hover {
	background: #294292;
	color: #fff;
	text-decoration: none;
}
.btn-cta--white {
	border-color: #fff;
	color: #fff;
}
.btn-cta--white:hover {
	background: #fff;
	color: #294292;
}
/* Quando `.btn-cta` / `.btn-cta--white` è applicata a un WIDGET Button
   Elementor (classe sul wrapper), lo stile va portato sull'`<a>` interno
   `.elementor-button`, che altrimenti resta col colore accent del kit. */
.btn-cta .elementor-button {
	background: transparent !important;
	border: 1px solid #294292 !important;
	border-radius: 10px !important;
	color: #294292 !important;
	fill: #294292 !important;
	font-family: var(--font-sans) !important;
	font-weight: 500 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase;
	padding: 6px 15px !important;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-cta .elementor-button:hover {
	background: #294292 !important;
	color: #fff !important;
	fill: #fff !important;
}
.btn-cta--white .elementor-button {
	border-color: #fff !important;
	color: #fff !important;
	fill: #fff !important;
}
.btn-cta--white .elementor-button:hover {
	background: #fff !important;
	color: #294292 !important;
	fill: #294292 !important;
}
/* Modificatore "large": CTA piu' grande (es. "SCOPRI I SERVIZI" home).
   Non tocca il .btn-cta base per non impattare le altre CTA della pagina. */
.btn-cta--lg { font-size: 17px; padding: 9px 22px; gap: 10px; }
.btn-cta--lg .elementor-button {
	font-size: 17px !important;
	padding: 9px 22px !important;
}

/* =========================================================
   5. FORMS
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select {
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	border: 1.5px solid var(--cbi-ink-200);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--cbi-ink-800);
	font-size: 1rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea { height: auto; min-height: 120px; resize: vertical; line-height: 1.5; }
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7488' d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--cbi-teal-500);
	box-shadow: 0 0 0 3px var(--cbi-teal-100);
}

input::placeholder,
textarea::placeholder { color: var(--cbi-ink-400); }

label {
	display: block;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--cbi-ink-700);
	margin-bottom: 6px;
}

.form-row { margin-bottom: 18px; }
.form-row--inline { display: flex; gap: 12px; align-items: stretch; }
.form-row--inline > * { flex: 1; }

.form-grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   6. SITE HEADER + NAV
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--cbi-ink-150);
	min-height: var(--header-h);
}

/* Quando l'utente e' loggato e WP mostra la admin bar fixed in cima,
   spostiamo lo sticky header sotto di essa (32px desktop, 46px mobile,
   come definito da WP core). Cosi' navbar e admin bar non si sovrappongono. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* WP core sotto i 600px imposta l'admin bar a `position: absolute`,
   cosi' scorre con la pagina. Sul nostro layout questo lascia un
   margine bianco in cima all'header `fixed` quando si scrolla.
   Forziamo `fixed` anche su mobile: la barra di admin resta sempre
   visibile in cima, l'header del tema sempre allineato sotto. */
@media screen and (max-width: 600px) {
	#wpadminbar { position: fixed !important; top: 0 !important; }
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}
.site-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
	/* Demarcazione destra: separa il brand dal menu con un gap significativo
	   (>= 40px). Il .site-header__inner e' flex, quindi qui viene aggiunto
	   uno spazio esplicito che si somma al `gap: 24px` del parent. */
	margin-right: 24px;
}
.site-header__brand:hover { text-decoration: none; }

/* Logo orizzontale ufficiale (marchio + wordmark in un unico SVG) */
.site-header__brand-logo {
	height: 64px;
	width: auto;
	object-fit: contain;
	display: block;
	flex: none;
}

.site-header__nav { flex: 1; }

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2px;                 /* era 4px — recupero orizzontale su 7 voci */
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
}
.primary-menu > li > a,
.primary-menu > li > span {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.5px;
	color: var(--cbi-blue-700);
	text-decoration: none;
	border-radius: 10px;
	transition: background var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;       /* previene che una singola voce vada su 2 righe */
}
.primary-menu > li > a:hover {
	background: var(--cbi-blue-50-new);
	color: var(--cbi-blue-700);
	text-decoration: none;
}
/* Pagina corrente — pill turchese pieno, testo bianco */
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a {
	background: #0091AA;
	color: #fff;
	text-decoration: none;
}

.primary-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23294292' d='M5 6L0 1l1-1 4 4 4-4 1 1z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Sub-menu (desktop dropdown) */
.primary-menu .sub-menu {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	min-width: 260px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	z-index: 110;
}
.primary-menu > li { position: relative; }
.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	color: var(--cbi-ink-800);
	font-size: .9375rem;
	text-decoration: none;
	border-radius: 6px;
}
.primary-menu .sub-menu a:hover {
	background: var(--cbi-teal-50);
	color: var(--cbi-teal-700);
}

/* Header CTA (Dona ora) */
.site-header__cta { flex-shrink: 0; }

/* Bottone DONA ORA — box "petalo" (angolo bottom-left squadrato).
   Marchio bianco sopra + testo su 2 righe. */
.btn-dona {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 64px;
	height: 64px;
	background: #0091AA;
	border-radius: var(--radius-petal-btn);
	text-decoration: none;
	transition: background var(--transition-fast);
}
.btn-dona:hover { background: #294292; text-decoration: none; }
.btn-dona__mark { width: 22px; height: 22px; object-fit: contain; display: block; }
.btn-dona__label {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
}

/* Mobile toggle (hamburger) */
.menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--cbi-ink-800);
	margin-left: auto;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	position: relative;
	margin: 0 auto;
	transition: transform var(--transition-fast), top var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}
.menu-toggle span::before,
.menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after  { top: 7px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Quando il menu mobile e' aperto, nascondiamo l'hamburger: la chiusura
   avviene tramite la X esplicita dentro l'overlay. Senza questa regola
   l'utente vede 2 "X" (una nell'header bar, una nell'overlay). */
.site-header.is-open .menu-toggle { display: none; }

/* Bottone "Chiudi menu" — vive dentro `.site-header__inner` (lo stesso
   flex container del logo e dell'hamburger) cosi' rimane sulla stessa
   riga del logo. Visibile solo quando il menu mobile e' aperto. */
.menu-close {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	margin-left: auto;
	background: transparent;
	border: 0;
	color: var(--cbi-ink-800);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.menu-close:hover { background: var(--cbi-blue-50); color: var(--cbi-blue-700); }
.site-header.is-open .menu-close { display: inline-flex; }

@media (max-width: 1023px) {
	:root { --header-h: var(--header-h-mobile); }
	/* Su mobile lo `position: sticky` su elementi dentro container flex/transform
	   risulta inaffidabile (es. Safari iOS). Forziamo `position: fixed` per avere
	   la testata sempre incollata al top dello schermo. Compensiamo con un
	   `padding-top` sul body cosi' il primo contenuto non finisce sotto. */
	.site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	/* Compensa `position: fixed` del nostro header (alto var(--header-h-mobile)).
	   Quando WP admin bar e' visibile, WP aggiunge gia' un inline style
	   `html { margin-top: 46px !important }` (sia sotto 782 che sotto 600),
	   quindi qui basta scalare il body dell'altezza del solo header. */
	body { padding-top: var(--header-h-mobile); }
	.site-header__brand-logo { height: 48px; }
	.site-header__brand { margin-right: 0; gap: 10px; }
	.menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-header__nav,
	.site-header__cta {
		position: fixed;
		inset: var(--header-h) 0 0 0;
		background: #fff;
		padding: 24px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 99;
	}
	.site-header.is-open .site-header__nav,
	.site-header.is-open .site-header__cta { transform: translateX(0); }

	/* Quando WP admin bar e' presente, fa partire il nav overlay sotto
	   l'header tema (header_h + admin_bar_h) cosi' il logo dell'header
	   resta visibile e l'overlay non lo copre. */
	.admin-bar .site-header__nav { top: calc(var(--header-h) + 46px); }
	.admin-bar .site-header__cta { /* gia' a bottom, non serve adjust */ }
	.site-header__cta {
		inset: auto 0 0 0;
		padding: 16px 24px;
		border-top: 1px solid var(--cbi-ink-150);
		transform: none;
	}
	/* DONA ORA in overlay mobile: barra full-width, marchio + testo su una riga,
	   stesso colore/hover del box desktop. */
	.site-header__cta .btn-dona {
		width: 100%;
		height: 56px;
		flex-direction: row;
		gap: 10px;
	}
	.site-header__cta .btn-dona__label { font-size: 15px; }
	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}
	/* Voci primarie mobile — piu' grandi e con touch target ≥48px (WCAG AA 2.5.5).
	   Erano 17px/14px padding (~52px altezza, pero' testo piccolo per il context
	   "overlay a tutto schermo" del menu mobile). Bumpate a 20px + padding 18px. */
	.primary-menu > li > a {
		padding: 18px 14px;
		font-size: 1.25rem;
		font-weight: 700;
		justify-content: space-between;
	}
	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 8px 16px;
		display: none;
		gap: 4px;
	}
	/* Voci secondarie mobile — erano 15px/10px (~42px, sotto la soglia touch).
	   Bumpate a 18px / padding 14px → altezza ~50px e leggibilita' migliore. */
	.primary-menu .sub-menu a {
		font-size: 1.125rem;
		padding: 14px 16px;
		font-weight: 500;
	}
	.primary-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
	.primary-menu .menu-item-has-children > a::after { transition: transform var(--transition-fast); }
	.primary-menu .menu-item-has-children.is-open > a::after { transform: rotate(180deg); }
	body.menu-open { overflow: hidden; }
}

/* =========================================================
   7. STUNNING HEADER (hero)
   ========================================================= */
.stunning {
	position: relative;
	color: #fff;
}
.stunning .container {
	position: relative;
	z-index: 2;
}
/* I titoli hero battono il blu di default degli h1-h6 del tema:
   `.stunning .stunning__title` (0,2,0) supera gia' `h1..h6` (0,0,1),
   quindi niente `!important` — bastano due classi. */
.stunning .stunning__title { color: #fff; }

/* ---------------------------------------------------------
   Restyle 2026 — hero "card inset".
   La sezione e' a tutta larghezza (gradiente firma per le pagine
   generiche, tinta piena per le aree tematiche). Dentro il container:
   breadcrumb in alto + card immagine arrotondata (raggio "petalo") con
   overlay blu e titolo bianco in basso a sinistra.
   --------------------------------------------------------- */
.stunning--card {
	background: var(--cbi-gradient);
	/* Niente padding-bottom: la card "sborda" sotto il box della sezione
	   (vedi --hero-overlap) creando il distacco con ombra del mockup. */
	padding-block: 26px 0;
}

/* Quanto la card fuoriesce dal fondo della sezione hero (mockup Noetica):
   lo sfondo della sezione termina e la card continua sopra il contenuto
   successivo, staccata dall'ombra. */
:root { --hero-overlap: clamp(36px, 4.5vw, 64px); }

/* flow-root = confine di margin-collapse: senza, il margin-bottom negativo
   della card "collassa attraverso" container e sezione (che hanno padding
   bottom 0) e finisce sotto la sezione invece di accorciarne lo sfondo. */
.stunning--card > .container,
.hero-carousel > .container { display: flow-root; }

/* Breadcrumb dentro l'hero (default: bianco su gradiente / tinte scure) */
.stunning .breadcrumb {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 1.3px;
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 16px;
	color: rgba(255,255,255,.85);
}
.stunning .breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.stunning .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.stunning .breadcrumb__sep { margin: 0 8px; color: rgba(255,255,255,.55); }
.stunning .breadcrumb__current { color: #fff; font-weight: 900; }

/* Tinte chiare (crema/lavanda): breadcrumb blu ANFFAS per contrasto */
.stunning--tint-light .breadcrumb,
.stunning--tint-light .breadcrumb a { color: #294292; }
.stunning--tint-light .breadcrumb a:hover { color: var(--cbi-blue-800); }
.stunning--tint-light .breadcrumb__sep { color: rgba(41,66,146,.5); }
.stunning--tint-light .breadcrumb__current { color: #294292; font-weight: 900; }

/* La card — margin-bottom negativo: il box della sezione (e il suo sfondo)
   si accorcia mentre la card resta a piena altezza → la parte bassa della
   card fuoriesce sopra il contenuto seguente. z-index alto per stare sopra. */
.stunning__card {
	position: relative;
	z-index: 3;
	display: flex;
	min-height: clamp(240px, 34vw, 360px);
	border-radius: var(--radius-petal); /* 20px 0 20px 20px */
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0,0,0,.30);
	background: var(--cbi-ink-200);
	margin-bottom: calc(-1 * var(--hero-overlap));
}

/* Il contenuto che segue l'hero deve lasciare spazio alla card sbordante.
   Sfondo bianco esplicito: main e' trasparente e senza questo nell'area di
   compensazione affiorava il grigio-azzurro del body (banda che "staccava"
   il blocco tinta dell'hero dal contenuto — bug segnalato dall'utente). */
.stunning--card + main,
.stunning--card + #site-content {
	padding-top: calc(var(--hero-overlap) + 32px);
	/* Pagine tematiche: il fondo sfuma verso la tinta area in basso
	   (--tint-page dalle body class is-*). Pagine generiche: tutto
	   bianco perché --tint-page vale #fff di default. */
	background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--tint-page, #fff) 100%);
}
.stunning__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	/* <img> reale (foto dalla Media Library, con srcset) oppure div con
	   background-image (placeholder SVG di fallback): entrambi coperti. */
	object-fit: cover;
	object-position: center;
	background-size: cover;
	background-position: center;
}
.stunning__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, #294292 0%, rgba(41,66,146,0) 84%);
}
.stunning__card-body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 28px 32px;
	max-width: 760px;
}
.stunning--card .stunning__eyebrow {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.9);
	margin-bottom: 10px;
}
.stunning--card .stunning__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.2vw, 3.75rem);
	letter-spacing: -1.2px;
	line-height: 1;
	color: #fff;
	margin: 0;
}
.stunning--card .stunning__subtitle {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: rgba(255,255,255,.92);
	margin: 12px 0 0;
	max-width: 56ch;
}

/* Box icona area (in alto a destra della card) — solo pagine tematiche.
   1.7.0: l'SVG e' l'icona Figma completa (box petalo + disegno, colori
   inclusi): lo span da' solo posizione, misura e ombra, con lo stesso
   raggio del box (42/295 del lato) e l'angolo in alto a destra squadrato. */
.stunning__area-icon {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	width: 70px;
	height: 70px;
	display: block;
	border-radius: 10px 0 10px 10px;
	box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.stunning__area-icon svg { width: 100%; height: 100%; display: block; }

/* Tinte piene di sezione, per area */
.stunning--area-csr-diurni       { background: #FFF5DA; }
.stunning--area-csr-residenziali { background: #DAE2FF; }
.stunning--area-laboratorio      { background: var(--cbi-laboratori); }
.stunning--area-progetto         { background: var(--cbi-progetti); }
.stunning--area-gruppi-appartamento { background: var(--cbi-appartamento); }
.stunning--area-evento           { background: var(--cbi-events-gold); }

/* ---------------------------------------------------------
   Home statica (fallback senza slide): stesso linguaggio card + gradiente.
   --------------------------------------------------------- */
.stunning--home {
	background: var(--cbi-gradient);
	padding-block: 32px 40px;
}
.stunning--home .stunning__card {
	min-height: clamp(340px, 44vw, 520px);
}
.stunning__card-body--home {
	max-width: 620px;
	padding: 36px 40px;
}
.stunning--home .stunning__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2.4rem, 4.6vw, 4rem);
	letter-spacing: -1.2px;
	line-height: 1.02;
	color: #fff;
	margin: 0 0 14px;
}
.stunning--home .stunning__subtitle {
	font-family: var(--font-sans);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.55;
	color: rgba(255,255,255,.92);
	max-width: 46ch;
	margin: 0;
}

/* ---------------------------------------------------------
   Variante "minimal" (ricerca / 404 / categorie): gradiente firma,
   breadcrumb + titolo bianco, nessuna card immagine.
   --------------------------------------------------------- */
.stunning--minimal {
	background: var(--cbi-gradient);
	color: #fff;
	padding-block: 26px 48px;
}
.stunning--minimal .stunning__minimal-body { max-width: 900px; }
.stunning--minimal .stunning__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.25rem);
	letter-spacing: -1px;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}
.stunning--minimal .stunning__subtitle {
	color: rgba(255,255,255,.9);
	margin: 14px 0 0;
	max-width: 66ch;
}

/* =========================================================
   Home carousel — card inset su gradiente firma.
   Frecce nel gutter del gradiente (fuori dalla card), dots sotto.
   Markup pilotato da assets/js/home-carousel.js (invariato).
   ========================================================= */
.hero-carousel {
	background: var(--cbi-gradient);
	/* Come per lo stunning interno: la card sborda dal fondo della sezione
	   (--hero-overlap) — lo sfondo gradiente termina prima della card. */
	padding-block: 32px 0;
}
.hero-carousel__stage {
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	z-index: 3;
	margin-bottom: calc(-1 * var(--hero-overlap));
}
/* Il contenuto della home sotto al carousel lascia spazio alla card
   (sfondo bianco esplicito: vedi nota sull'hero interno). */
.hero-carousel + main,
.hero-carousel + #site-content,
.stunning--home + main,
.stunning--home + #site-content {
	padding-top: calc(var(--hero-overlap) + 32px);
	background: #fff;
}
.hero-carousel__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: clamp(360px, 46vw, 540px);
	border-radius: var(--radius-petal);
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0,0,0,.30);
	background: var(--cbi-ink-200);
	/* Grid stacking: le slide si sovrappongono in 1/1 e il viewport prende
	   l'altezza della slide piu' alta → il testo lungo non viene mai
	   tagliato (bug visto su mobile con position:absolute + inset:0). */
	display: grid;
}

.hero-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease;
}
.hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.hero-slide__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* <img> reale (foto dalla Media Library, con srcset) oppure div con
	   background-image (placeholder SVG di fallback): entrambi coperti. */
	object-fit: cover;
	object-position: center;
	background-size: cover;
	background-position: center;
	background-color: var(--cbi-ink-200);
}
.hero-slide__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--cbi-ink-900);
}

/* Overlay gradient — sfumatura blu verso il lato del testo */
.hero-slide__overlay { position: absolute; inset: 0; }
.hero-slide__overlay[data-side="left"] {
	background: linear-gradient(90deg,
		rgba(21,38,90,.94) 0%,
		rgba(21,38,90,.85) 34%,
		rgba(21,38,90,.38) 62%,
		rgba(21,38,90,0)   88%);
}
.hero-slide__overlay[data-side="right"] {
	background: linear-gradient(270deg,
		rgba(21,38,90,.94) 0%,
		rgba(21,38,90,.85) 34%,
		rgba(21,38,90,.38) 62%,
		rgba(21,38,90,0)   88%);
}

/* Il .container interno alla card non deve reintrodurre max-width/padding
   del layout globale: qui fa solo da riga flessibile per il pannello. */
.hero-slide .container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding-inline: clamp(28px, 4vw, 56px);
	display: flex;
}
.hero-slide__panel {
	max-width: 560px;
	color: #fff;
	padding-block: 40px;
}
.hero-slide__panel[data-side="left"]  { margin-right: auto; }
.hero-slide__panel[data-side="right"] { margin-left: auto; text-align: right; }
.hero-slide__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	letter-spacing: -1px;
	line-height: 1.05;
	margin: 0 0 16px;
	color: #fff;
}
.hero-slide__subtitle {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.5;
	margin: 0 0 24px;
	color: rgba(255,255,255,.92);
}
.hero-slide__cta { margin-top: 4px; }

/* Pulsante audio video — angolo opposto al testo */
.hero-slide__audio {
	position: absolute;
	top: 18px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hero-slide__audio:hover { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.5); }
.hero-slide__audio[data-corner="right"] { right: 18px; }
.hero-slide__audio[data-corner="left"]  { left: 18px;  }
.hero-slide__audio-icon--on  { display: none; }
.hero-slide__audio.is-on .hero-slide__audio-icon--off { display: none; }
.hero-slide__audio.is-on .hero-slide__audio-icon--on  { display: inline-flex; }

/* Frecce prev/next — cerchi outline bianchi nel gutter del gradiente */
.hero-carousel__nav {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid rgba(255,255,255,.7);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hero-carousel__nav:hover { background: rgba(255,255,255,.18); border-color: #fff; }

/* Dots — sotto la card, sul gradiente */
.hero-carousel__dots {
	/* Mockup Noetica: niente indicatori sotto il carousel — solo le frecce.
	   Il markup e la logica JS restano (riattivabili togliendo questa riga). */
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}
.hero-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.7);
	background: transparent;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), width var(--transition-base);
}
.hero-carousel__dot:hover { background: rgba(255,255,255,.4); }
.hero-carousel__dot.is-active {
	background: #fff;
	border-color: #fff;
	width: 22px;
}

/* ---------------------------------------------------------
   Mobile — card piu' bassa, titoli scalati, frecce compatte.
   --------------------------------------------------------- */
@media (max-width: 767px) {
	.stunning__card { min-height: 240px; }
	.stunning__card-body { padding: 20px 22px; }
	.stunning--card .stunning__title { font-size: clamp(1.75rem, 8vw, 2.4rem); letter-spacing: -.6px; }
	.stunning__area-icon { width: 54px; height: 54px; top: 12px; right: 12px; border-radius: 8px 0 8px 8px; }
	.stunning--home .stunning__card { min-height: 300px; }
	.stunning__card-body--home { padding: 24px 22px; }

	.hero-carousel__viewport { min-height: clamp(320px, 76vw, 440px); }
	/* Frecce sovrapposte alla card invece che ai suoi lati: in flow si
	   mangiavano ~140px dei 390px di viewport e con le foto reali il
	   soggetto restava irriconoscibile (card larga 250px). Vanno in alto,
	   dove c'e' solo foto: a meta' altezza coprivano il sottotitolo. */
	.hero-carousel__stage { gap: 0; }
	.hero-carousel__nav {
		width: 38px;
		height: 38px;
		position: absolute;
		top: 12px;
		z-index: 2;
		background: rgba(21,38,90,.35);
		backdrop-filter: blur(2px);
	}
	.hero-carousel__nav--prev { left: 10px; }
	.hero-carousel__nav--next { right: 10px; }
	.hero-slide__panel { max-width: 100%; padding-block: 28px; }
	.hero-slide__title { font-size: 1.6rem; }
	.hero-slide__subtitle { font-size: .9375rem; margin-bottom: 18px; }
	.hero-slide__panel[data-side="right"] { text-align: left; margin-left: 0; margin-right: auto; }
	.hero-slide__overlay[data-side="left"],
	.hero-slide__overlay[data-side="right"] {
		background: linear-gradient(180deg,
			rgba(21,38,90,.30) 0%, rgba(21,38,90,.82) 58%, rgba(21,38,90,.94) 100%);
	}
}

/* =========================================================
   8. CARDS (post / news / project)
   ========================================================= */
.card {
	background: #fff;
	border-radius: var(--radius-petal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}
.card__media {
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--cbi-ink-100);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* Titolo: default turchese leggero → hover blu bold (pattern restyle) */
.card__title {
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--cbi-teal-brand);
}
.card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.card:hover .card__title a,
.card:focus-within .card__title a { color: var(--cbi-blue-700); font-weight: 700; text-decoration: none; }
.card__excerpt {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--cbi-grey);
	flex: 1;
}
/* Piede: divider blu sottile + data grigia + CTA "Leggi" */
.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--cbi-blue-700);
}
.card__date { font-size: 13px; font-weight: 500; color: var(--cbi-grey); }
.card__cta {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--cbi-blue-700);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.card__cta:hover { color: var(--cbi-teal-700); text-decoration: none; }
.card__cta::after { content: "→"; transition: transform var(--transition-fast); }
.card__cta:hover::after { transform: translateX(3px); }

/* Card grids */
.card-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  {
	.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------
   Restyle 2026 — Pill "area tematica" (news/centri/progetti).
   Un solo punto di verita' per i colori: il modificatore d'area
   sulla card imposta --pill-bg/--pill-fg, e il componente pill li
   legge. La classe d'area viaggia sulla CARD (non dipende dal
   body_class), cosi' la pill resta corretta anche fuori contesto
   (widget su una pagina di area diversa).
   Aree chiare → testo blu; aree scure (laboratori/gruppi/eventi)
   → testo bianco; "varia" (categorie generiche) → pill blu piena.
   --------------------------------------------------------- */
.struttura-card--area-csr-diurni,
.card--area-csr-diurni,
.related-card--area-csr-diurni,
.featured-card--area-csr-diurni          { --pill-bg: var(--cbi-csr-diurni);       --pill-fg: var(--cbi-blue-700); }
.struttura-card--area-csr-residenziali,
.card--area-csr-residenziali,
.related-card--area-csr-residenziali,
.featured-card--area-csr-residenziali    { --pill-bg: var(--cbi-csr-residenziali); --pill-fg: var(--cbi-blue-700); }
.struttura-card--area-laboratorio,
.card--area-laboratorio,
.related-card--area-laboratorio,
.featured-card--area-laboratorio         { --pill-bg: var(--cbi-laboratori);       --pill-fg: #fff; }
.struttura-card--area-gruppi-appartamento,
.card--area-gruppi-appartamento,
.related-card--area-gruppi-appartamento,
.featured-card--area-gruppi-appartamento { --pill-bg: var(--cbi-appartamento);     --pill-fg: #fff; }
.struttura-card--area-progetto,
.card--area-progetto,
.related-card--area-progetto,
.featured-card--area-progetto            { --pill-bg: var(--cbi-blue-50-new);      --pill-fg: var(--cbi-blue-700); }
.struttura-card--area-evento,
.card--area-evento,
.related-card--area-evento,
.featured-card--area-evento              { --pill-bg: var(--cbi-events-gold);      --pill-fg: #fff; }
.struttura-card--area-varia,
.card--area-varia,
.related-card--area-varia,
.featured-card--area-varia               { --pill-bg: var(--cbi-blue-700);         --pill-fg: #fff; }

/* Componente pill condiviso (categoria news / area centro) */
.struttura-card__pill,
.card__pill,
.related-card__pill,
.featured-card__pill {
	align-self: flex-start;
	display: inline-block;
	padding: 4px 14px;
	border-radius: 5px;
	background: var(--pill-bg, var(--cbi-blue-50-new));
	color: var(--pill-fg, var(--cbi-blue-700));
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: .2px;
	text-decoration: none;
	transition: filter var(--transition-fast);
}
a.card__pill:hover,
a.related-card__pill:hover,
a.featured-card__pill:hover { filter: brightness(.95); text-decoration: none; }

/* =========================================================
   9. ENTRY (single article content)
   ========================================================= */
.entry-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--cbi-ink-700);
}
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { margin-top: 2em; margin-bottom: .5em; color: var(--cbi-blue-700); }
.entry-content h3 { margin-top: 1.6em; margin-bottom: .4em; color: var(--cbi-blue-700); }
.entry-content h4 { color: var(--cbi-ink-900); }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content li + li { margin-top: .25em; }
.entry-content img,
.entry-content figure { border-radius: var(--radius-md); margin-block: 1.5em; }
.entry-content figcaption {
	font-size: .875rem;
	color: var(--cbi-ink-500);
	margin-top: 8px;
	text-align: center;
}
.entry-content a {
	color: var(--cbi-teal-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--cbi-teal-800); }
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--cbi-ink-200);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.entry-content th, .entry-content td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--cbi-ink-150);
}
.entry-content th { background: var(--cbi-ink-100); font-weight: 700; color: var(--cbi-ink-900); }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: .875rem;
	color: var(--cbi-ink-500);
	margin-bottom: 16px;
}
.entry-meta a { color: var(--cbi-teal-700); }
.entry-meta__item { display: inline-flex; align-items: center; gap: 6px; }

/* Article layout (single post + sidebar) */
.article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}
@media (min-width: 1024px) {
	.article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
}
.article-layout__main { min-width: 0; }
.article-layout__aside { font-size: .9375rem; }
.article-layout__aside .widget + .widget { margin-top: 32px; }
.widget__title {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cbi-teal-700);
	margin-bottom: 12px;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 6px 0; border-bottom: 1px solid var(--cbi-ink-150); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--cbi-ink-700); text-decoration: none; }
.widget a:hover { color: var(--cbi-teal-700); }

/* =========================================================
   10. BLOG / ARCHIVE / SEARCH
   ========================================================= */
.archive-header { margin-bottom: 32px; }
.archive-header__title {
	font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
	margin: 0 0 8px;
	color: var(--cbi-blue-700);
}
.archive-header__desc {
	color: var(--cbi-ink-600);
	font-size: 1.0625rem;
	margin: 0;
}

/* Advanced search form (blog) */
.search-advanced {
	background: #fff;
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 32px;
	box-shadow: var(--shadow-sm);
}
.search-advanced__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.search-advanced__grid {
		grid-template-columns: 2fr 1fr 1fr auto;
		align-items: end;
	}
}
.search-advanced__field { display: flex; flex-direction: column; }
.search-advanced__field label {
	font-size: .8125rem;
	margin-bottom: 4px;
	color: var(--cbi-ink-600);
}
.search-advanced__submit { height: 48px; padding-inline: 24px; }
.search-advanced__reset {
	display: inline-block;
	font-size: .8125rem;
	color: var(--cbi-ink-500);
	margin-top: 12px;
	text-decoration: underline;
}
.search-advanced__reset:hover { color: var(--cbi-ink-800); }

/* Active filter chips */
.search-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	font-size: .8125rem;
	align-items: center;
}
.search-active-filters__label {
	color: var(--cbi-ink-500);
	font-weight: 600;
}
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 12px;
	background: var(--cbi-teal-50);
	color: var(--cbi-teal-700);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.filter-chip:hover { background: var(--cbi-teal-100); text-decoration: none; color: var(--cbi-teal-800); }
.filter-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--cbi-teal-700);
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

/* === Blog index — 4 sezioni del mockup === */

/* Sezione comune: titolo + linea sotto */
.blog-page .blog-section {
	margin-block: 48px;
}
.blog-page .blog-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--cbi-ink-150);
}
.blog-page .blog-section__title {
	font-size: clamp(1.25rem, .8vw + 1rem, 1.5rem);
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cbi-ink-150);
	color: var(--cbi-blue-700);
}
.blog-page .blog-section--events .blog-section__title { border-bottom: 0; margin: 0; padding-bottom: 0; }
.blog-page .blog-section__cta {
	font-weight: 600;
	font-size: .9375rem;
	color: var(--cbi-blue-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.blog-page .blog-section__cta:hover { color: var(--cbi-teal-700); }
.blog-page .blog-section__placeholder {
	font-size: .875rem;
	color: var(--cbi-ink-500);
	padding: 18px 20px;
	border: 1px dashed var(--cbi-ink-200);
	border-radius: var(--radius-sm);
	background: var(--cbi-ink-50);
}
.blog-page .blog-section__placeholder a { color: var(--cbi-blue-700); }

/* 1. Filtri chip */
.blog-filters {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--cbi-ink-150);
}
.blog-filters__label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-ink-500);
}
.blog-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.blog-filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--cbi-ink-200);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--cbi-ink-700);
	text-decoration: none;
	background: #fff;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.blog-filter-chip:hover {
	background: var(--cbi-blue-50);
	border-color: var(--cbi-blue-100);
	color: var(--cbi-blue-700);
	text-decoration: none;
}
.blog-filter-chip.is-active {
	background: var(--cbi-blue-700);
	border-color: var(--cbi-blue-700);
	color: #fff;
}

/* 2. In evidenza — 1 big sopra full-width + 2 small affiancate sotto.
   Tutte con immagine 16:9 in cima (stesso pattern delle card listing,
   niente buchi: ogni card decide la propria altezza). */
.featured-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.featured-grid { grid-template-columns: 1fr 1fr; }
	.featured-card--big { grid-column: 1 / -1; }
}

.featured-card {
	background: #fff;
	border-radius: var(--radius-petal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.featured-card:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}
.featured-card__media {
	display: block;
	overflow: hidden;
	background: var(--cbi-ink-100);
	aspect-ratio: 16/9;
}
.featured-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.featured-card:hover .featured-card__media img { transform: scale(1.04); }
.featured-card__body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.featured-card--small .featured-card__body { padding: 16px 18px 18px; gap: 10px; }
.featured-card__title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0;
	font-family: var(--font-sans);
	color: var(--cbi-teal-brand);
	font-weight: 300;
}
.featured-card--small .featured-card__title { font-size: 1.1875rem; line-height: 1.25; }
.featured-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.featured-card:hover .featured-card__title a,
.featured-card:focus-within .featured-card__title a { color: var(--cbi-blue-700); font-weight: 700; text-decoration: none; }
.featured-card__excerpt {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--cbi-grey);
}
.featured-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	color: var(--cbi-ink-500);
	margin-top: auto;
}

/* 4. Prossimi appuntamenti */
.events-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }

.event-card {
	display: flex;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-md);
	background: #fff;
	text-decoration: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	align-items: center;
}
.event-card:hover {
	border-color: var(--cbi-teal-500);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
	text-decoration: none;
}
/* Restyle 2026: box data ORO come le altre card evento (era blu — creava
   incoerenza cromatica con l'accento eventi del Brand Book). */
.event-card__date {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--cbi-events-gold);
	color: #fff;
	border-radius: var(--radius-sm);
	font-weight: 700;
	line-height: 1;
}
.event-card__day   { font-size: 1.75rem; }
.event-card__month { font-size: .6875rem; letter-spacing: .08em; margin-top: 4px; color: rgba(255,255,255,.85); }
.event-card__body { flex: 1; min-width: 0; }
.event-card__title {
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 4px;
	color: #294292;
	font-weight: 300;
	transition: color var(--transition-fast), font-weight var(--transition-fast);
}
.event-card:hover .event-card__title,
.event-card:focus-within .event-card__title {
	color: var(--cbi-events-gold);
	font-weight: 700;
}
.event-card__meta {
	font-size: .8125rem;
	color: var(--cbi-ink-500);
}

.event-card--cta {
	align-items: center;
	justify-content: center;
	background: var(--cbi-ink-50);
	border-style: dashed;
	color: var(--cbi-blue-700);
	gap: 6px;
}
.event-card--cta:hover {
	background: var(--cbi-blue-50);
	border-color: var(--cbi-blue-700);
}
.event-card__cta-plus {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: var(--cbi-blue-700);
}
.event-card__cta-text {
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pagination */
.pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 48px;
}
.pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cbi-ink-150);
	background: #fff;
	color: var(--cbi-ink-700);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pagination .page-numbers:hover {
	background: var(--cbi-teal-50);
	border-color: var(--cbi-teal-100);
	color: var(--cbi-teal-700);
	text-decoration: none;
}
.pagination .page-numbers.current {
	background: var(--cbi-blue-700);
	border-color: var(--cbi-blue-700);
	color: #fff;
}

/* No results */
.no-results {
	text-align: center;
	padding: 64px 24px;
}
.no-results__title { font-size: 1.5rem; margin-bottom: 8px; }
.no-results__text { color: var(--cbi-ink-600); margin-bottom: 24px; }

/* =========================================================
   11. SITE FOOTER
   ========================================================= */
.site-footer {
	/* Gradiente firma a dominanza blu: blu a sinistra → teal a destra,
	   cosi' il logo stacked bianco (colonna 1, lato blu) risalta. */
	background: linear-gradient(120deg, #294292 0%, #0091AA 100%);
	color: rgba(255,255,255,.9);
	padding-top: 64px;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__cols {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	padding-bottom: 48px;
}
@media (min-width: 720px)  { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; } }
/* Senza la colonna newsletter (vedi $boint_footer_newsletter in footer.php). */
@media (min-width: 1024px) { .site-footer__cols--3 { grid-template-columns: 1.6fr 1fr 1fr; } }

.site-footer__heading {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}

.site-footer__menu { list-style: none; margin: 0; padding: 0; }
.site-footer__menu li + li { margin-top: 10px; }
/* Link colonne menu (LINK RAPIDI / LA COOPERATIVA): sottolineati di default
   e leggermente piu' marcati (mockup). Le righe contatti della col. 1 usano
   la classe .footer-info__text e restano SENZA underline. */
.site-footer__menu a { font-size: .9375rem; font-weight: 600; text-decoration: underline; }
.site-footer__menu .sub-menu { display: none; }

.site-footer__placeholder {
	font-size: .8125rem;
	color: rgba(255,255,255,.7);
	font-style: italic;
	margin: 0;
	padding: 12px;
	border: 1px dashed rgba(255,255,255,.15);
	border-radius: var(--radius-sm);
}
.site-footer__placeholder a { color: #C2CFE8; text-decoration: underline; }
.site-footer__placeholder a:hover { color: #fff; }

/* Widget area: reset margin tra widget */
.site-footer__col > .widget + .widget { margin-top: 24px; }

/* --- Widget: BOINT Info cooperativa --- */
/* Blocco brand del footer (mockup Homepage.png, col. 1): logo stacked bianco
   grande in alto, nome + sottotitolo SOTTO (layout verticale, non affiancati). */
.footer-info__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}
.footer-info__logo {
	width: 230px;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	flex-shrink: 0;
}
.footer-info__name-wrap { display: flex; flex-direction: column; }
.footer-info__name {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.footer-info__subtitle {
	font-size: .8125rem;
	color: rgba(255,255,255,.75);
	line-height: 1.2;
	margin-top: 2px;
}

.footer-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .875rem;
	line-height: 1.55;
	color: rgba(255,255,255,.9);
}
.footer-info__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-block: 6px;
}
.footer-info__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.85);
	flex-shrink: 0;
}
/* Glifi Figma (Sedi/Telefono/Email): riempiono il box 20×20. */
.footer-info__icon svg { width: 20px; height: 20px; }
.footer-info__text { color: rgba(255,255,255,.9); text-decoration: none; }
.footer-info__text:hover { color: #fff; text-decoration: underline; }
.footer-info__text p { margin: 0; }

/* --- Widget: BOINT Newsletter --- */
.footer-newsletter__intro {
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(255,255,255,.9);
	margin: 0 0 18px;
}
.footer-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.footer-newsletter__form input[type="email"] {
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: 1rem;
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.footer-newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.footer-newsletter__form input[type="email"]:focus {
	outline: none;
	background: rgba(255,255,255,.10);
	border-color: rgba(255,255,255,.45);
	box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.footer-newsletter__submit {
	height: 48px;
	padding: 0 22px;
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 10px;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.footer-newsletter__submit:hover { background: #fff; color: #294292; }
.footer-newsletter__submit:active { transform: translateY(1px); }

/* --- Newsletter widget in sidebar articolo (sfondo chiaro) --- */
.article-layout__aside .widget {
	background: var(--cbi-ink-50);
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-md);
	padding: 22px 22px 24px;
}
.article-layout__aside .widget__title,
.article-layout__aside .site-footer__heading {
	color: var(--cbi-blue-700);
	margin: 0 0 12px;
}
.article-layout__aside .footer-newsletter__intro {
	color: var(--cbi-ink-600);
}
.article-layout__aside .footer-newsletter__form input[type="email"] {
	background: #fff;
	border-color: var(--cbi-ink-200);
	color: var(--cbi-ink-800);
}
.article-layout__aside .footer-newsletter__form input[type="email"]::placeholder {
	color: var(--cbi-ink-400);
}
.article-layout__aside .footer-newsletter__form input[type="email"]:focus {
	background: #fff;
	border-color: var(--cbi-teal-500);
	box-shadow: 0 0 0 3px var(--cbi-teal-100);
}
/* Nel footer il bottone e' outline bianco (fondo gradiente); nella sidebar
   articolo il fondo e' chiaro, quindi qui torna a fondo blu pieno leggibile. */
.article-layout__aside .footer-newsletter__submit {
	background: var(--cbi-blue-700);
	color: #fff;
	border-color: var(--cbi-blue-700);
}
.article-layout__aside .footer-newsletter__submit:hover {
	background: var(--cbi-blue-600);
	color: #fff;
}

/* --- Widget: BOINT Categorie (lista nome + count + separator) --- */
.boint-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}
.boint-categories__item {
	border-bottom: 1px solid var(--cbi-ink-150);
}
.boint-categories__item:last-child { border-bottom: 0; }

.boint-categories__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	color: var(--cbi-ink-800);
	text-decoration: none;
	font-size: .9375rem;
	transition: color var(--transition-fast);
}
.boint-categories__link:hover {
	color: var(--cbi-blue-700);
	text-decoration: none;
}
.boint-categories__name {
	font-weight: 600;
	flex: 1;
	min-width: 0;
}
.boint-categories__count {
	flex-shrink: 0;
	font-size: .8125rem;
	color: var(--cbi-ink-500);
	font-variant-numeric: tabular-nums;
}
.boint-categories__item.is-active .boint-categories__link {
	color: var(--cbi-blue-700);
}
.boint-categories__item.is-active .boint-categories__count {
	color: var(--cbi-teal-700);
}

/* Reset stile widget container per il widget Categorie nella sidebar:
   ha aspetto "lista pulita", non box come la Newsletter. */
.article-layout__aside .widget_boint_categories {
	background: transparent;
	border: 0;
	padding: 0;
}
.article-layout__aside .widget_boint_categories .widget__title {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-ink-500);
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cbi-ink-200);
}

/* --- Subfooter ---
   Barra full-width (markup fuori dal .container) con fondo PIENO #294292:
   lo stop scuro del gradiente firma, come da mockup Noetica. */
.site-footer__subfooter {
	background: #294292;
	border-top: 1px solid rgba(255,255,255,.12);
	padding-block: 22px;
	font-size: .8125rem;
	color: rgba(255,255,255,.75);
	margin-top: 40px;
}
.site-footer__subfooter-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.site-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__legal a { color: rgba(255,255,255,.75); }
.site-footer__legal a:hover { color: #fff; }

/* =========================================================
   12. UTILITIES
   ========================================================= */
.eyebrow {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-teal-700);
	margin-bottom: 12px;
}
.section-title {
	font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
	font-weight: 700;
	color: var(--cbi-blue-700);
	margin: 0 0 16px;
	line-height: 1.15;
}
.section-lead {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--cbi-ink-600);
	margin: 0 0 32px;
	max-width: 62ch;
}

.text-teal { color: var(--cbi-teal-500); }
.text-blue { color: var(--cbi-blue-700); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: var(--cbi-blue-700);
	display: block;
	font-size: .875rem;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 18px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	border-radius: var(--radius-sm);
}

/* =========================================================
   13. ELEMENTOR COMPATIBILITY
   ========================================================= */
/* Quando Elementor è in editing dentro al body, lascia che gestisca il layout */
.page-body--elementor > .container { max-width: none; padding-inline: 0; }
.page-body--elementor { padding-block: 0; }

/* Armonizza i pulsanti default di Elementor con il font del tema */
.elementor-button { font-family: var(--font-sans); }

/* Stretched sections: assicura che vadano edge-to-edge */
.elementor-section.elementor-section-stretched { margin-inline: 0 !important; }

/* =========================================================
   14. WORDPRESS NATIVE CLASSES
   ========================================================= */
.aligncenter { margin-inline: auto; display: block; }
.alignleft   { float: left; margin: .5em 1.5em 1em 0; }
.alignright  { float: right; margin: .5em 0 1em 1.5em; }
.alignwide   { max-width: 1100px; margin-inline: auto; }
.alignfull   { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text {
	font-size: .875rem;
	color: var(--cbi-ink-500);
	text-align: center;
	margin-top: 8px;
}

.sticky { background: var(--cbi-teal-50); border-radius: var(--radius-md); padding: 16px; }

.gallery {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
	margin-block: 1.5em;
}
.gallery .gallery-item img { border-radius: var(--radius-md); }

/* Comments */
.comments-area { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--cbi-ink-150); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 16px 0; border-bottom: 1px solid var(--cbi-ink-150); }
.comment-author { font-weight: 600; }
.comment-meta { font-size: .8125rem; color: var(--cbi-ink-500); margin-bottom: 6px; }

/* --- Articoli correlati (sotto il contenuto del post singolo) --- */
.related-posts {
	margin-top: 56px;
	padding-top: 14px;
}
.related-posts__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cbi-ink-900);
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cbi-ink-150);
}

.related-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .related-grid { grid-template-columns: repeat(3, 1fr); } }

.related-card {
	background: #fff;
	border-radius: var(--radius-petal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.related-card:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}
.related-card__media {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--cbi-ink-100);
}
.related-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.related-card:hover .related-card__media img { transform: scale(1.04); }

.related-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.related-card__title {
	font-size: 1.125rem;
	line-height: 1.25;
	margin: 0;
	font-family: var(--font-sans);
	color: var(--cbi-teal-brand);
	font-weight: 300;
}
.related-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.related-card:hover .related-card__title a,
.related-card:focus-within .related-card__title a { color: var(--cbi-blue-700); font-weight: 700; text-decoration: none; }
.related-card__cta {
	margin-top: auto;
	align-self: flex-start;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--cbi-blue-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.related-card__cta::after { content: " →"; }
.related-card__cta:hover { color: var(--cbi-teal-700); }

/* --- Navigazione articolo precedente/successivo (sotto i correlati) --- */
.post-nav {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	margin-top: 32px;
}
@media (min-width: 640px) {
	.post-nav { grid-template-columns: 1fr 1fr; }
}
.post-nav__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--cbi-ink-800);
	text-decoration: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	min-height: 78px;
}
.post-nav__item:hover {
	border-color: var(--cbi-teal-500);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
	text-decoration: none;
	color: var(--cbi-ink-800);
}
.post-nav__item--next { flex-direction: row; text-align: right; }
.post-nav__item--next .post-nav__body { align-items: flex-end; }
.post-nav__item--empty { visibility: hidden; min-height: 0; pointer-events: none; border: 0; padding: 0; }

.post-nav__direction {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cbi-blue-50);
	color: var(--cbi-blue-700);
	font-size: 1.125rem;
	font-weight: 700;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.post-nav__item:hover .post-nav__direction {
	background: var(--cbi-teal-500);
	color: #fff;
}
.post-nav__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}
.post-nav__label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-ink-500);
}
.post-nav__title {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--cbi-ink-900);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Bottone submit del form commenti — stile bottone primario del tema. */
.comments-area .submit,
.comments-area input[type="submit"],
.comment-form .submit,
.comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	background: var(--cbi-blue-700);
	color: #fff;
	border: 1.5px solid var(--cbi-blue-700);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.comments-area .submit:hover,
.comments-area input[type="submit"]:hover,
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	background: var(--cbi-blue-800);
	border-color: var(--cbi-blue-800);
	color: #fff;
}
.comments-area .submit:active,
.comments-area input[type="submit"]:active,
.comment-form .submit:active,
.comment-form input[type="submit"]:active { transform: translateY(1px); }

/* =========================================================
   15. 404 PAGE
   ========================================================= */
.error-404 {
	text-align: center;
	padding: 96px 24px;
}
.error-404__code {
	font-size: clamp(4rem, 8vw, 7rem);
	font-weight: 800;
	color: var(--cbi-teal-500);
	line-height: 1;
	margin: 0 0 8px;
}
.error-404__title { font-size: 1.5rem; margin-bottom: 12px; color: var(--cbi-blue-700); }
.error-404__text { color: var(--cbi-ink-600); margin-bottom: 32px; max-width: 56ch; margin-inline: auto; }

/* =========================================================
   16. RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 480px) {
	body { font-size: 16px; }
	.section { padding-block: 40px; }
	.btn { padding: 12px 18px; }
}

@media print {
	.site-header, .site-footer, .menu-toggle, .breadcrumb { display: none; }
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: underline; }
}

/* =========================================================
   18. EVENTI — archivio + singolo + widget
   ========================================================= */

/* --- Archivio /eventi/ --- */
.events-archive__section { margin-block: 56px; }
.events-archive__section--past { margin-top: 64px; padding-top: 0; }
.events-archive__title {
	font-size: clamp(1.25rem, .8vw + 1rem, 1.5rem);
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cbi-ink-150);
	color: var(--cbi-blue-700);
}
.events-archive__placeholder {
	font-size: .9375rem;
	color: var(--cbi-ink-500);
	font-style: italic;
	padding: 20px 24px;
	background: var(--cbi-ink-50);
	border-radius: var(--radius-sm);
}

/* Prossimi eventi: grid 2 colonne alternate, card grande */
.events-upcoming-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 960px) { .events-upcoming-grid { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------
   Restyle 2026 — componenti condivisi delle card evento:
   barra data (fondo oro, icone SVG) e riga luogo (pin + oro).
   Usati da archivio (upcoming + past). Icone Figma in currentColor.
   --------------------------------------------------------- */
.event-datebar {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 4.2px;
	background: var(--cbi-events-gold);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
}
.event-datebar__part { display: inline-flex; align-items: center; gap: 6px; }
.event-datebar__sep  { opacity: .6; }
.event-location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--cbi-events-gold);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
/* Glifi Figma (Eventi/Orari/Sedi) in currentColor: misura esplicita, gli SVG
   del set non hanno width/height. */
.event-ico { flex-shrink: 0; width: 16px; height: 16px; }

.event-upcoming-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-petal);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.event-upcoming-card:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}
.event-upcoming-card__media {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--cbi-ink-100);
}
.event-upcoming-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.event-upcoming-card:hover .event-upcoming-card__media img { transform: scale(1.04); }

.event-upcoming-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.event-upcoming-card__title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 4px 0 0;
	font-family: var(--font-sans);
	color: var(--cbi-blue-700);
	font-weight: 300;
}
.event-upcoming-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.event-upcoming-card:hover .event-upcoming-card__title a,
.event-upcoming-card:focus-within .event-upcoming-card__title a { color: var(--cbi-events-gold); font-weight: 700; }
.event-upcoming-card__excerpt {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--cbi-ink-600);
}
.event-upcoming-card__contact {
	margin: 6px 0 0;
	font-size: .9375rem;
	color: var(--cbi-ink-700);
}
.event-upcoming-card__contact a {
	font-weight: 600;
	color: var(--cbi-blue-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.event-upcoming-card__contact a:hover { color: var(--cbi-teal-700); }

/* Eventi passati: grid 4 colonne, card compatta */
.events-past-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .events-past-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .events-past-grid { grid-template-columns: repeat(4, 1fr); } }

.event-past-card {
	background: #fff;
	border-radius: var(--radius-petal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.event-past-card:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}
.event-past-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--cbi-ink-100); }
.event-past-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.event-past-card:hover .event-past-card__media img { transform: scale(1.04); }
.event-past-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event-past-card .event-datebar { padding: 4px 10px; font-size: 13px; }
.event-past-card__title {
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0;
	font-family: var(--font-sans);
	color: var(--cbi-blue-700);
	font-weight: 300;
}
.event-past-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.event-past-card:hover .event-past-card__title a,
.event-past-card:focus-within .event-past-card__title a { color: var(--cbi-events-gold); font-weight: 700; }
.event-past-card__excerpt {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--cbi-ink-600);
}

/* --- Singolo evento --- */
.single-evento .event-details {
	background: var(--cbi-ink-50);
	border: 1px solid var(--cbi-ink-150);
	border-radius: var(--radius-md);
	padding: 22px 24px 24px;
	margin: 0 0 32px;
	display: grid;
	gap: 14px;
}
.event-details__row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
	align-items: start;
}
@media (max-width: 540px) {
	.event-details__row { grid-template-columns: 1fr; gap: 4px; }
}
.event-details__label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-ink-500);
	padding-top: 3px;
}
.event-details__value {
	font-size: .9375rem;
	color: var(--cbi-ink-800);
	line-height: 1.5;
}
.event-details__value a { color: var(--cbi-blue-700); font-weight: 600; }
.event-details__value a:hover { color: var(--cbi-teal-700); }
.event-details__end { font-size: .8125rem; color: var(--cbi-ink-500); font-style: italic; }
.single-evento__back { margin-top: 40px; font-size: .9375rem; font-weight: 600; }
.single-evento__back a { color: var(--cbi-blue-700); text-decoration: underline; text-underline-offset: 3px; }

/* --- Widget BOINT: Ultimi eventi --- */
.widget_boint_events { }
.boint-events-widget__list { list-style: none; margin: 0; padding: 0; }
.boint-events-widget__item { border-bottom: 1px solid var(--cbi-ink-150); }
.boint-events-widget__item:last-child { border-bottom: 0; }
.boint-events-widget__link {
	display: flex;
	gap: 14px;
	padding: 10px 0;
	color: var(--cbi-ink-800);
	text-decoration: none;
	align-items: center;
	transition: color var(--transition-fast);
}
.boint-events-widget__link:hover { color: var(--cbi-blue-700); text-decoration: none; }
.boint-events-widget__date {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--cbi-blue-50);
	color: var(--cbi-blue-700);
	border-radius: var(--radius-sm);
	line-height: 1;
	font-weight: 700;
}
.boint-events-widget__day   { font-size: 1.1875rem; }
.boint-events-widget__month { font-size: .625rem; letter-spacing: .08em; margin-top: 3px; color: var(--cbi-blue-600); }
.boint-events-widget__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.boint-events-widget__title { font-size: .9375rem; font-weight: 600; color: var(--cbi-ink-900); line-height: 1.3; }
.boint-events-widget__meta { font-size: .75rem; color: var(--cbi-ink-500); }
.boint-events-widget__cta {
	display: inline-block;
	margin-top: 12px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--cbi-blue-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.boint-events-widget__cta:hover { color: var(--cbi-teal-700); }
.boint-events-widget__placeholder {
	font-size: .8125rem;
	color: var(--cbi-ink-500);
	font-style: italic;
	padding: 12px;
	border: 1px dashed var(--cbi-ink-200);
	border-radius: var(--radius-sm);
	background: var(--cbi-ink-50);
}

/* ---------------------------------------------------------
   Eventi · accento cromatico (Brand Book 2026, armonia
   complementare). Tutta l'area eventi — archive, card,
   singolo, widget — vira sull'oro per dare un riconoscimento
   visivo immediato della sezione. La palette blu/teal del
   tema resta invariata altrove.
   --------------------------------------------------------- */

/* Titolo sezione archivio (i titoli card evento sono gestiti sopra:
   default blu → hover oro bold, pattern restyle 2026). */
.events-archive__title { color: var(--cbi-events-gold); }

/* Box data del widget (righe compatte): fondo oro pieno, testo bianco. */
.boint-events-widget__date {
	background: var(--cbi-events-gold);
	color: #fff;
}
.boint-events-widget__month { color: #fff; }

/* Link "info contatto" sulle card prossimi eventi */
.event-upcoming-card__contact a { color: var(--cbi-events-gold); }
.event-upcoming-card__contact a:hover { color: var(--cbi-events-gold-hover); }

/* Box dettagli del singolo evento + link "Tutti gli eventi" in fondo */
.event-details__value a,
.single-evento__back a { color: var(--cbi-events-gold); }
.event-details__value a:hover,
.single-evento__back a:hover { color: var(--cbi-events-gold-hover); }

/* Hover sul link riga del widget eventi */
.boint-events-widget__link:hover { color: var(--cbi-events-gold); }

/* CTA "Tutti gli eventi" in fondo al widget */
.boint-events-widget__cta { color: var(--cbi-events-gold); }
.boint-events-widget__cta:hover { color: var(--cbi-events-gold-hover); }

/* ---------------------------------------------------------
   Sezioni "Strutture" — accento cromatico per parent.
   Le classi `is-csr-diurni`, `is-csr-residenziali`,
   `is-laboratorio` vengono aggiunte al body dal filtro
   `boint_strutture_body_class` (inc/strutture.php) quando la
   pagina corrente e' il contenitore o una sua discendente.
   Qui applichiamo l'accento ai titoli e ai link "tematici"
   del contenuto (Elementor + entry-content), evitando lo
   Stunning Header (titolo sempre bianco su immagine).
   --------------------------------------------------------- */

/* CSR Diurni → panna/ocra */
body.is-csr-diurni .entry-content h1,
body.is-csr-diurni .entry-content h2,
body.is-csr-diurni .entry-content h3,
body.is-csr-diurni .elementor-widget-heading .elementor-heading-title {
	color: var(--cbi-csr-diurni-text);
}
body.is-csr-diurni .entry-content a,
body.is-csr-diurni .elementor-widget-text-editor a,
body.is-csr-diurni .elementor-widget-button .elementor-button {
	color: var(--cbi-csr-diurni-text);
}
body.is-csr-diurni .entry-content a:hover,
body.is-csr-diurni .elementor-widget-text-editor a:hover { color: var(--cbi-csr-diurni-hover); }

/* CSR Residenziali → lavanda */
body.is-csr-residenziali .entry-content h1,
body.is-csr-residenziali .entry-content h2,
body.is-csr-residenziali .entry-content h3,
body.is-csr-residenziali .elementor-widget-heading .elementor-heading-title {
	color: var(--cbi-csr-residenziali-text);
}
body.is-csr-residenziali .entry-content a,
body.is-csr-residenziali .elementor-widget-text-editor a,
body.is-csr-residenziali .elementor-widget-button .elementor-button {
	color: var(--cbi-csr-residenziali-text);
}
body.is-csr-residenziali .entry-content a:hover,
body.is-csr-residenziali .elementor-widget-text-editor a:hover { color: var(--cbi-csr-residenziali-hover); }

/* Laboratori → verde acqua */
body.is-laboratorio .entry-content h1,
body.is-laboratorio .entry-content h2,
body.is-laboratorio .entry-content h3,
body.is-laboratorio .elementor-widget-heading .elementor-heading-title {
	color: var(--cbi-laboratori);
}
body.is-laboratorio .entry-content a,
body.is-laboratorio .elementor-widget-text-editor a,
body.is-laboratorio .elementor-widget-button .elementor-button {
	color: var(--cbi-laboratori);
}
body.is-laboratorio .entry-content a:hover,
body.is-laboratorio .elementor-widget-text-editor a:hover { color: var(--cbi-laboratori-hover); }

/* Progetti & Innovazione → blu violaceo */
body.is-progetto .entry-content h1,
body.is-progetto .entry-content h2,
body.is-progetto .entry-content h3,
body.is-progetto .elementor-widget-heading .elementor-heading-title {
	color: var(--cbi-progetti);
}
body.is-progetto .entry-content a,
body.is-progetto .elementor-widget-text-editor a,
body.is-progetto .elementor-widget-button .elementor-button {
	color: var(--cbi-progetti);
}
body.is-progetto .entry-content a:hover,
body.is-progetto .elementor-widget-text-editor a:hover { color: var(--cbi-progetti-hover); }

/* Gruppi Appartamento → arancio scuro */
body.is-gruppi-appartamento .entry-content h1,
body.is-gruppi-appartamento .entry-content h2,
body.is-gruppi-appartamento .entry-content h3,
body.is-gruppi-appartamento .elementor-widget-heading .elementor-heading-title {
	color: var(--cbi-appartamento);
}
body.is-gruppi-appartamento .entry-content a,
body.is-gruppi-appartamento .elementor-widget-text-editor a,
body.is-gruppi-appartamento .elementor-widget-button .elementor-button {
	color: var(--cbi-appartamento);
}
body.is-gruppi-appartamento .entry-content a:hover,
body.is-gruppi-appartamento .elementor-widget-text-editor a:hover { color: var(--cbi-appartamento-hover); }

/* ---------------------------------------------------------
   Widget Strutture — griglia card per pagine CSR / laboratori.
   Default: palette neutra; accent per sezione applicato sotto
   tramite `body.is-csr-diurni|is-csr-residenziali|is-laboratorio`.
   --------------------------------------------------------- */
.strutture-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 24px 0;
}
@media (min-width: 720px)  { .strutture-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .strutture-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card "pulita" (no box bordato): immagine petalo + testo centrato sotto.
   L'ombra "sollevata" al hover va sull'immagine (la card e' trasparente).
   La tinta della pill viene dalla classe struttura-card--area-* (vedi
   sopra), cosi' funziona anche fuori dal contesto della sezione. */
.struttura-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	transition: transform var(--transition-base);
}
.struttura-card:hover { transform: translateY(-4px); }
.struttura-card__media {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	border-radius: var(--radius-petal);
	background: var(--cbi-ink-100);
	transition: box-shadow var(--transition-base);
}
.struttura-card:hover .struttura-card__media { box-shadow: var(--shadow-lift); }
.struttura-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.struttura-card:hover .struttura-card__media img { transform: scale(1.04); }

.struttura-card__body {
	padding: 20px 8px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	flex: 1;
}
/* Restyle 23-07 (punch pattern "pill full-width"): la pill area diventa
   a tutta larghezza della card, testo centrato (mockup "centri sul territorio").
   Height invariata. */
.struttura-card__pill {
	align-self: stretch;
	display: block;
	width: 100%;
	text-align: center;
}
.struttura-card__title {
	font-size: 2rem;
	line-height: 1.05;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--cbi-teal-brand);
}
.struttura-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.struttura-card:hover .struttura-card__title a,
.struttura-card:focus-within .struttura-card__title a { color: var(--cbi-blue-700); font-weight: 700; }
.struttura-card__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cbi-grey);
}
/* CTA = .btn-cta (outline blu → pieno) a tutta larghezza della colonna */
.struttura-card__cta {
	margin-top: auto;
	width: 100%;
	justify-content: center;
}

.strutture-grid__placeholder {
	font-style: italic;
	color: var(--cbi-ink-500);
	padding: 16px;
	border: 1px dashed var(--cbi-ink-200);
	border-radius: var(--radius-sm);
	background: var(--cbi-ink-50);
}

/* =========================================================
   17. ELEMENTOR — eredita la tipografia del tema
   I contenuti delle pagine costruite in Elementor devono usare gli
   stessi font del tema: Athena per i tag h1-h6 (e per i titoli dei
   widget Elementor che NON sono tag h ma elementi `.elementor-*-title`),
   Nunito Sans per tutto il resto. Niente Roboto / Roboto Slab di default.

   Override delle CSS variables del Kit Elementor: il kit imposta di
   default "Roboto" / "Roboto Slab" su `.elementor-kit-<id>` (= body
   class). Riassegnando le variabili su `body[class*="elementor-kit-"]`
   (specificity 0,1,1 vs 0,1,0) battiamo il kit per qualunque ID.
   ========================================================= */
body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family:   var(--font-heading) !important;
	--e-global-typography-primary-font-weight:   700 !important;
	--e-global-typography-secondary-font-family: var(--font-heading) !important;
	--e-global-typography-secondary-font-weight: 600 !important;
	--e-global-typography-text-font-family:      var(--font-sans) !important;
	--e-global-typography-text-font-weight:      400 !important;
	--e-global-typography-accent-font-family:    var(--font-sans) !important;
	--e-global-typography-accent-font-weight:    600 !important;
}

/* Base: tutto dentro Elementor eredita Nunito Sans */
.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap,
.elementor-element,
.e-con,
.e-con-inner {
	font-family: var(--font-sans);
}

/* Headings (tag h*) dentro contenuti Elementor: Athena
   `!important` per battere eventuali inline style dei widget */
.elementor h1, .elementor h2, .elementor h3,
.elementor h4, .elementor h5, .elementor h6,
.elementor-section h1, .elementor-section h2, .elementor-section h3,
.elementor-section h4, .elementor-section h5, .elementor-section h6,
.e-con h1, .e-con h2, .e-con h3,
.e-con h4, .e-con h5, .e-con h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-icon-box-title,
.elementor-icon-box-title > *,
.elementor-image-box-title,
.elementor-image-box-title > *,
.elementor-flip-box__layer__title,
.elementor-counter-title,
.elementor-price-table__heading,
.elementor-price-table__heading > *,
.elementor-tab-title,
.elementor-toggle-title,
.elementor-accordion .elementor-accordion-title,
.elementor-call-to-action__title,
.elementor-post__title,
.elementor-post__title > *,
.elementor-testimonial__name,
.elementor-team-member-name {
	font-family: var(--font-heading) !important;
}

/* Testi descrittivi / corpo widget: Nunito Sans */
.elementor-text-editor,
.elementor-text-editor p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-button,
.elementor-button-text,
.elementor-icon-box-description,
.elementor-image-box-description,
.elementor-counter-number,
.elementor-counter-number-prefix,
.elementor-counter-number-suffix,
.elementor-post__excerpt,
.elementor-post__meta-data,
.elementor-testimonial__cite,
.elementor-testimonial__text,
.elementor-tab-content {
	font-family: var(--font-sans) !important;
}


/* =========================================================
   18. A11Y WIDGET — pannello accessibilità (WCAG 2.2 AA)
   UX compatta a griglia di tile-button. Bootstrap inline in
   <head> applica le classi `a11y-*` su <html> per evitare flash
   di contenuto al caricamento.
   ========================================================= */
.a11y-widget {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	font-family: var(--font-sans);
}
/* Reset box-sizing per tutti i discendenti del widget: senza questo le tile
   in grid 1fr 1fr ereditavano `content-box` (default WP) → il padding di
   ogni tile si sommava alla width della colonna e le tile della 2a colonna
   uscivano dal bordo destro del pannello. */
.a11y-widget,
.a11y-widget *,
.a11y-widget *::before,
.a11y-widget *::after {
	box-sizing: border-box;
}
/* Necessario per i grid items: di default i blocchi grid hanno
   `min-width: auto` (largo quanto il contenuto), che puo' eccedere `1fr`. */
.a11y-tile { min-width: 0; }

@media (max-width: 720px) {
	.a11y-widget { right: 14px; bottom: 14px; }
}

/* ---- Trigger (FAB) ---- */
.a11y-widget__trigger {
	width: 58px; height: 58px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--cbi-blue-700);
	color: #fff;
	border: 3px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(41, 66, 146, .35);
	transition: background var(--transition-fast), transform var(--transition-fast);
	position: relative;
	flex: none;
}
.a11y-widget__trigger:hover  { background: var(--cbi-blue-800); }
.a11y-widget__trigger:focus-visible {
	outline: 3px solid var(--cbi-teal-500);
	outline-offset: 3px;
}

/* Spunta verde — visibile solo se almeno una preferenza non e' a default */
.a11y-widget__badge {
	position: absolute;
	top: -4px; right: -4px;
	width: 22px; height: 22px;
	color: #18A957;
	border-radius: 999px;
	display: none;
	align-items: center; justify-content: center;
	background: #fff;
	box-shadow: 0 0 0 2px #fff;
}
.a11y-widget__badge svg { width: 22px; height: 22px; }
.a11y-widget--has-changes .a11y-widget__badge { display: inline-flex; }

/* ---- Pannello ---- */
/* Fix specificita': l'attributo HTML `hidden` viene altrimenti sovrascritto
   dal `display: flex` qui sotto. */
.a11y-widget__panel[hidden] { display: none !important; }
.a11y-widget__panel {
	position: relative;
	width: 344px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border: 1px solid var(--cbi-ink-150);
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(20, 30, 70, .22);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Tail decorativo sotto il pannello (rotated square, lato trigger) */
.a11y-widget__panel::after {
	content: '';
	position: absolute;
	right: 26px;
	bottom: -7px;
	width: 14px; height: 14px;
	background: #fff;
	border-right: 1px solid var(--cbi-ink-150);
	border-bottom: 1px solid var(--cbi-ink-150);
	transform: rotate(45deg);
}

/* ---- Header ---- */
.a11y-widget__header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 2px 2px 14px;
	border-bottom: 1px solid var(--cbi-ink-150);
}
.a11y-widget__header-icon {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: #EEF2FB;
	color: var(--cbi-blue-700);
	border-radius: 12px;
	flex: none;
}
.a11y-widget__header-text {
	display: flex; flex-direction: column;
	gap: 1px;
	flex: 1; min-width: 0;
}
.a11y-widget__title {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--cbi-ink-900);
	margin: 0;
}
.a11y-widget__subtitle {
	font-size: .75rem;
	color: var(--cbi-ink-500);
}
.a11y-widget__close {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	border: 0;
	background: var(--cbi-ink-100);
	border-radius: 9px;
	cursor: pointer;
	color: var(--cbi-ink-600);
	flex: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.a11y-widget__close:hover { background: var(--cbi-ink-150); color: var(--cbi-ink-900); }
.a11y-widget__close:focus-visible { outline: 2px solid var(--cbi-blue-700); outline-offset: 2px; }

/* ---- Griglia 2 colonne ---- */
.a11y-widget__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

/* ---- Tile button ---- */
.a11y-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px;
	background: var(--cbi-ink-50);
	border: 1px solid var(--cbi-ink-150);
	border-radius: 14px;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-sans);
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.a11y-tile:hover { background: var(--cbi-ink-100); }
.a11y-tile:focus-visible {
	outline: 2px solid var(--cbi-blue-700);
	outline-offset: 2px;
}

.a11y-tile__icon {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	background: #fff;
	color: var(--cbi-blue-700);
	border: 1px solid var(--cbi-ink-150);
	border-radius: 10px;
	flex: none;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.a11y-tile__body {
	display: flex; flex-direction: column;
	gap: 3px;
	min-width: 0; flex: 1;
}
.a11y-tile__title {
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--cbi-ink-900);
	transition: color var(--transition-fast);
}
.a11y-tile__valuewrap {
	display: flex; align-items: center;
	gap: 6px;
	min-width: 0;         /* safety: permette al flex parent di ridimensionare */
	flex-wrap: wrap;      /* se serve, le steps vanno a capo sotto il testo */
	row-gap: 4px;
}
.a11y-tile__value {
	font-size: .6875rem;
	font-weight: 700;
	color: var(--cbi-ink-500);
	transition: color var(--transition-fast);
}
.a11y-tile__value--active { color: var(--cbi-teal-500); }
.a11y-tile__sub {
	font-size: .6875rem;
	font-weight: 600;
	color: var(--cbi-ink-500);
}

/* Indicatore a 3 barrette (per i cycle 3-step). Dimensioni ridotte
   (10×3 + 2×2 gap = 34px totali) per non sforare il bordo destro
   della tile nel layout grid 1fr 1fr del pannello. */
.a11y-tile__steps { display: inline-flex; gap: 2px; flex: none; }
.a11y-tile__step {
	width: 10px; height: 4px;
	border-radius: 2px;
	background: var(--cbi-ink-200);
	transition: background var(--transition-fast);
	flex: none;
}
.a11y-tile__step.is-on { background: var(--cbi-teal-500); }

/* Tile TOGGLE attiva → fondo blu pieno con testo bianco */
.a11y-tile--toggle.is-active {
	background: var(--cbi-blue-700);
	border-color: var(--cbi-blue-700);
	box-shadow: 0 8px 20px rgba(41, 66, 146, .25);
}
.a11y-tile--toggle.is-active .a11y-tile__icon {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .25);
	color: #fff;
}
.a11y-tile--toggle.is-active .a11y-tile__title { color: #fff; }
.a11y-tile--toggle.is-active .a11y-tile__value { color: rgba(255, 255, 255, .88); }

/* Tile RESET (dashed border, fondo bianco) */
.a11y-tile--reset {
	background: #fff;
	border: 1px dashed var(--cbi-ink-300);
}
.a11y-tile--reset:hover { background: var(--cbi-ink-50); }
.a11y-tile--reset .a11y-tile__icon {
	background: var(--cbi-ink-100);
	color: var(--cbi-ink-600);
	border-color: transparent;
}

/* Live region per screen reader — invisibile ma annunciata */
.a11y-widget__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   Stati `a11y-*` applicati a <html> dal bootstrap/JS
   ========================================================= */

/* 1. Mostra/nascondi immagini (esclude logo e icone strutturali) */
html.a11y-no-images img:not(.site-header__brand img),
html.a11y-no-images picture,
html.a11y-no-images figure img,
html.a11y-no-images .stunning__card-bg,
html.a11y-no-images .hero-slide__bg,
html.a11y-no-images .hero-slide__video,
html.a11y-no-images .struttura-card__media,
html.a11y-no-images .event-upcoming-card__media,
html.a11y-no-images .event-past-card__media { display: none !important; }

/* 2. Dimensione testo (scala base via html font-size) */
html.a11y-font-medium { font-size: 112.5%; } /* ~18px */
html.a11y-font-large  { font-size: 125%; }   /* ~20px */

/* 3. Spaziatura testo (letter/word spacing) — WCAG SC 1.4.12 */
html.a11y-spacing-medium { letter-spacing: 0.06em; word-spacing: 0.10em; }
html.a11y-spacing-large  { letter-spacing: 0.12em; word-spacing: 0.16em; }

/* 4. Altezza linea (line-height) — WCAG SC 1.4.12 */
html.a11y-line-medium body { line-height: 1.75; }
html.a11y-line-large  body { line-height: 2.1; }
html.a11y-line-medium p, html.a11y-line-medium li { line-height: 1.75; }
html.a11y-line-large  p, html.a11y-line-large  li { line-height: 2.1; }

/* 5. Allineamento testo */
html.a11y-align-left   p, html.a11y-align-left   li, html.a11y-align-left   h1, html.a11y-align-left   h2, html.a11y-align-left   h3, html.a11y-align-left   h4 { text-align: left   !important; }
html.a11y-align-right  p, html.a11y-align-right  li, html.a11y-align-right  h1, html.a11y-align-right  h2, html.a11y-align-right  h3, html.a11y-align-right  h4 { text-align: right  !important; }
html.a11y-align-center p, html.a11y-align-center li, html.a11y-align-center h1, html.a11y-align-center h2, html.a11y-align-center h3, html.a11y-align-center h4 { text-align: center !important; }

/* 6. Evidenzia link — alta visibilita' + sottolineatura forte */
html.a11y-highlight-links a:not(.a11y-widget__trigger):not(.a11y-widget__close):not(.a11y-tile) {
	background: #FFF59E !important;
	color: #000 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	box-shadow: 0 0 0 2px #FFF59E !important;
	border-radius: 2px;
}

/* 7. Stop animazioni — disattiva animation/transition/scroll-behavior */
html.a11y-no-animations,
html.a11y-no-animations *,
html.a11y-no-animations *::before,
html.a11y-no-animations *::after {
	animation-duration:  .01ms !important;
	animation-delay:     0s    !important;
	animation-iteration-count: 1 !important;
	transition-duration: .01ms !important;
	transition-delay:    0s    !important;
	scroll-behavior:     auto  !important;
}

/* =========================================================
   19. EASY-TO-READ (ETR) — WCAG 2.2 AAA
   Layer applicato sotto `body.etr-body`. Il template
   `etr-template.php` e' standalone (non condivide header/footer
   standard). Regole tipografiche: Nunito Sans ovunque, no Athena,
   no giustificato, colonna ~62ch centrata, palette ridotta.
   ========================================================= */

/* --- FAB "Facile da leggere" — floating in basso a destra, SOPRA il widget
       di accessibilita' (che e' a bottom: 28px / right: 28px, FAB 58px).
       Visibile solo se la pagina corrente ha counterpart ETR pubblicato
       (renderizzato da boint_etr_render_fab in inc/etr-frontend.php).
       Prima era inline nell'header CTA ma con primary menu pieno spaccava
       la nav su 2 righe → portato qui per zero impatto sul layout. --- */
.etr-fab {
	position: fixed;
	right: 28px;
	bottom: calc(28px + 58px + 14px); /* sopra al FAB accessibilita' (58px) + gap */
	z-index: 9998;                     /* sotto al pannello a11y (9999) per non coprirlo */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 18px 6px 6px;
	background: #fff;
	border: 2px solid var(--cbi-blue-700);
	border-radius: 999px;
	color: var(--cbi-blue-700);
	font-weight: 700;
	font-size: .875rem;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(41, 66, 146, .18);
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.etr-fab:hover {
	background: var(--cbi-blue-700);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.etr-fab:focus-visible {
	outline: 3px solid var(--cbi-teal-500);
	outline-offset: 3px;
}
.etr-fab__icon {
	width: 36px; height: 36px;
	border-radius: 999px;
	background: var(--cbi-ink-50);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 4px;
	flex: none;
	transition: background var(--transition-fast);
}
.etr-fab:hover .etr-fab__icon { background: #fff; }
.etr-fab__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.etr-fab__label { white-space: nowrap; }

@media (max-width: 720px) {
	.etr-fab {
		right: 14px;
		bottom: calc(14px + 58px + 10px);
		padding: 6px;
	}
	/* Su mobile solo l'icona, per non sovrapporsi al widget accessibilita' */
	.etr-fab__label { display: none; }
}

/* --- Skip link (a11y) --- */
.etr-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10000;
	padding: 12px 18px;
	background: var(--cbi-blue-700);
	color: #fff;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
}
.etr-skip-link:focus { top: 12px; }

/* =========================================================
   ETR BODY LAYER — il body delle pagine ETR (class `etr-body`)
   sovrascrive tutta la tipografia del tema standard.
   ========================================================= */
body.etr-body {
	font-family: var(--font-sans) !important;
	font-size: 1.25rem;          /* 20px */
	line-height: 1.6;
	color: var(--cbi-blue-700);
	background: #fff;
	padding-top: 0 !important;   /* annulla il padding aggiunto al body per il fixed header standard */
}

/* Header ETR — fisso, semplice, identico su ogni pagina */
.etr-header {
	background: #fff;
	border-bottom: 2px solid var(--cbi-ink-150);
	padding: 16px 24px;
	position: sticky;
	top: 0;
	z-index: 100;
}
.etr-header__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.etr-header__brand { display: inline-flex; align-items: center; }
.etr-header__brand img { height: 52px; width: auto; display: block; }
.etr-header__mark { display: inline-flex; align-items: center; margin-left: auto; }
.etr-header__mark img { height: 48px; width: auto; display: block; }

/* Navigation ETR — bottoni grandi (≥48px), bordo visibile, current con fondo blu */
.etr-header__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.etr-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.etr-nav li { list-style: none; }
.etr-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 18px;
	border: 2px solid var(--cbi-blue-700);
	border-radius: 12px;
	color: var(--cbi-blue-700);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	background: #fff;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.etr-nav a:hover { background: var(--cbi-ink-50); }
.etr-nav .current-menu-item a,
.etr-nav .current_page_item a,
.etr-nav a[aria-current="page"] {
	background: var(--cbi-blue-700);
	color: #fff;
}
.etr-nav__placeholder {
	font-size: .9375rem;
	color: var(--cbi-ink-500);
	font-style: italic;
}

/* Main area */
.etr-main {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 96px;
}

/* Articolo: titolo grande, immagine intera, contenuto a colonna stretta */
.etr-article__head { margin-bottom: 32px; }
.etr-article__title {
	font-family: var(--font-sans) !important;
	font-size: clamp(2rem, 3.6vw, 2.25rem); /* ~32-36px */
	font-weight: 800;
	line-height: 1.15;
	color: var(--cbi-blue-700);
	margin: 0;
	text-align: left;
}
.etr-article__media {
	margin: 0 0 32px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--cbi-ink-50);
}
.etr-article__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tipografia contenuto ETR */
.etr-article__content {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--cbi-blue-700);
}
.etr-article__content h1,
.etr-article__content h2,
.etr-article__content h3,
.etr-article__content h4 {
	font-family: var(--font-sans) !important;
	color: var(--cbi-blue-700);
	font-weight: 700;
	margin: 2rem 0 1rem;
	text-align: left;
}
.etr-article__content h2 { font-size: 1.625rem; } /* ~26px */
.etr-article__content h3 { font-size: 1.375rem; } /* ~22px */
.etr-article__content h4 { font-size: 1.125rem; }
.etr-article__content p,
.etr-article__content li {
	font-size: 1.25rem;
	line-height: 1.6;
	text-align: left !important;          /* mai giustificato */
	color: var(--cbi-blue-700);
	margin: 0 0 1.5rem;
	font-style: normal !important;        /* niente corsivi */
	text-transform: none !important;      /* niente maiuscoli forzati */
}
.etr-article__content ul, .etr-article__content ol {
	margin: 0 0 1.5rem 1.5rem;
	padding: 0;
}
.etr-article__content li { margin-bottom: 0.75rem; }

/* Link: solo sottolineatura (mai underline su body), font weight 700, colore brand */
.etr-article__content a {
	color: var(--cbi-blue-700);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.etr-article__content a:hover { color: var(--cbi-blue-800); }

/* Sfondi di sezione (lavanda / crema) — solo per blocchi container espliciti */
.etr-article__content .has-background-light { background: var(--cbi-csr-residenziali); padding: 24px; border-radius: 14px; }
.etr-article__content .has-background-cream { background: var(--cbi-csr-diurni);       padding: 24px; border-radius: 14px; }

/* Nessun corsivo / maiuscolo automatico nelle pagine ETR */
body.etr-body em,
body.etr-body i { font-style: normal !important; }

/* Switch alla versione completa */
.etr-article__switch {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid var(--cbi-ink-150);
	text-align: left;
}

/* CTA grande — sfondo Blu ANFFAS, testo bianco, angoli arrotondati */
.etr-cta {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: 14px 26px;
	background: var(--cbi-blue-700);
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	border-radius: 14px;
	transition: background var(--transition-fast);
}
.etr-cta:hover { background: var(--cbi-blue-800); color: #fff; text-decoration: none; }
.etr-cta--secondary {
	background: #fff;
	color: var(--cbi-blue-700);
	border: 2px solid var(--cbi-blue-700);
}
.etr-cta--secondary:hover { background: var(--cbi-ink-50); color: var(--cbi-blue-700); }

/* Pagina "Non disponibile" */
.etr-unavailable { background: var(--cbi-csr-residenziali); padding: 32px; border-radius: 18px; }
.etr-unavailable__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Footer ETR — contatti sempre visibili */
.etr-footer {
	background: var(--cbi-blue-700);
	color: #fff;
	padding: 40px 24px;
	margin-top: 64px;
}
.etr-footer__inner {
	max-width: 720px;
	margin: 0 auto;
}
.etr-footer__title {
	font-family: var(--font-sans) !important;
	font-size: 1.5rem;
	color: #fff;
	margin: 0 0 16px;
	font-weight: 700;
}
.etr-footer__row {
	margin: 0 0 10px;
	font-size: 1.125rem;
	color: #fff;
}
.etr-footer a { color: #fff; font-weight: 700; text-decoration: underline; }
.etr-footer a:hover { color: var(--cbi-csr-residenziali); }

/* Vietati in modalita' ETR: caroselli, animazioni, scroll orizzontale */
body.etr-body * {
	animation: none !important;
	scroll-behavior: auto !important;
}
body.etr-body .hero-carousel,
body.etr-body .hero-slide__video { display: none; }

/* Mobile: layout single column gia' rispettato; aggiusto header */
@media (max-width: 720px) {
	.etr-header { padding: 12px 16px; }
	.etr-header__brand img { height: 40px; }
	.etr-header__mark img { height: 36px; }
	.etr-main { padding: 32px 16px 64px; }
	.etr-article__title { font-size: 1.75rem; }
}

/* =========================================================
   20. POST TOC — indice degli argomenti dei post del blog.
   Renderizzato da `boint_inject_post_toc()` (inc/post-toc.php)
   come filter `the_content` priority 999 → funziona sia per
   post Elementor sia per Block/Classic editor.
   Voci: h1, h2, h3 del contenuto (livelli compattati dal PHP).
   1.7.0: selettori con prefisso `.post-toc` — l'indice sta dentro
   `.entry-content`, le cui regole generiche (`a` sottolineato teal,
   `ul` con rientro, `li + li` con margine) prima vincevano e
   rompevano l'impaginazione dell'indice.
   ========================================================= */
.post-toc {
	background: var(--cbi-ink-50);
	border: 1px solid var(--cbi-ink-200);
	border-radius: var(--radius-md);
	padding: 22px 28px 8px;
	margin: 0 0 40px;
}
.post-toc .post-toc__eyebrow {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-ink-500);
	margin-bottom: 8px;
}
.post-toc .post-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.post-toc .post-toc__item {
	margin: 0;
	border-bottom: 1px solid var(--cbi-ink-150);
}
.post-toc .post-toc__item:last-child { border-bottom: 0; }
.post-toc .post-toc__link {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	color: var(--cbi-ink-900);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--transition-fast);
}
.post-toc .post-toc__link:hover,
.post-toc .post-toc__link:focus-visible {
	color: var(--cbi-blue-700);
	text-decoration: none;
}
.post-toc .post-toc__link:hover .post-toc__text,
.post-toc .post-toc__link:focus-visible .post-toc__text {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.post-toc .post-toc__link:focus-visible { outline: 2px solid var(--cbi-teal-500); outline-offset: 2px; border-radius: 4px; }
.post-toc .post-toc__arrow {
	color: var(--cbi-ink-400);
	flex: none;
	font-size: .9375rem;
	line-height: 1;
}
.post-toc .post-toc__text { flex: 1; }

/* Indentazione per livelli di display (1 = top, 2/3 = nested).
   I livelli sono normalizzati dal PHP (`display_level`) — il livello
   piu' "alto" presente nel post diventa 1, gli altri scalano. */
.post-toc .post-toc__item--lvl2 { padding-left: 24px; }
.post-toc .post-toc__item--lvl2 .post-toc__link {
	font-weight: 400;
	color: var(--cbi-ink-700);
	font-size: .9375rem;
	padding: 10px 0;
}
.post-toc .post-toc__item--lvl3 { padding-left: 48px; }
.post-toc .post-toc__item--lvl3 .post-toc__link {
	font-weight: 400;
	color: var(--cbi-ink-600);
	font-size: .875rem;
	padding: 9px 0;
}
.post-toc .post-toc__item--lvl2 .post-toc__link:hover,
.post-toc .post-toc__item--lvl3 .post-toc__link:hover { color: var(--cbi-blue-700); }
/* Livelli 4-6: solo se il filtro `boint_post_toc_levels` li aggiunge. */
.post-toc .post-toc__item--lvl4,
.post-toc .post-toc__item--lvl5,
.post-toc .post-toc__item--lvl6 { padding-left: 72px; }
.post-toc .post-toc__item--lvl4 .post-toc__link,
.post-toc .post-toc__item--lvl5 .post-toc__link,
.post-toc .post-toc__item--lvl6 .post-toc__link {
	font-weight: 400;
	color: var(--cbi-ink-500);
	font-size: .8125rem;
	padding: 8px 0;
}

/* Scroll margin sui heading: quando l'utente clicca un link del TOC e il
   browser fa scroll, il fixed header non copre il titolo target. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4 {
	scroll-margin-top: calc(var(--header-h) + 24px);
}

@media (max-width: 720px) {
	.post-toc { padding: 18px 18px 4px; margin: 0 0 28px; }
	.post-toc .post-toc__item--lvl2 { padding-left: 16px; }
	.post-toc .post-toc__item--lvl3 { padding-left: 32px; }
	.post-toc .post-toc__item--lvl4,
	.post-toc .post-toc__item--lvl5,
	.post-toc .post-toc__item--lvl6 { padding-left: 48px; }
}

/* =========================================================
   21. IMAGE ZOOM HOVER per i widget Elementor
   Le card native del tema (.card, .featured-card, .related-card,
   .event-*-card, .struttura-card) hanno gia' il loro hover zoom
   nelle sezioni dedicate. Qui estendiamo il pattern alle immagini
   di copertina renderizzate dai widget Elementor "Image Box" e
   "Posts" (Pro), che il cliente usa nelle pagine costruite con
   Elementor (es. /servizi/csr-diurni/, /servizi/csr-residenziali/,
   /servizi/laboratori/, home).

   Quando l'utente attiva "Ferma animazioni" nel widget di
   accessibilita', la regola globale `html.a11y-no-animations *`
   in sez. 18 forza `transition-duration: .01ms` → effetto
   disattivato automaticamente, niente da fare qui.
   ========================================================= */
.elementor-image-box-img,
.elementor-post__thumbnail,
.elementor-post__thumbnail__link {
	overflow: hidden;
}
.elementor-image-box-img img,
.elementor-post__thumbnail img {
	display: block;
	transition: transform .35s ease;
	will-change: transform;
}
/* Hover sull'intero widget Image Box (la card servizi nella home e' un
   widget Image Box dentro a una column .cbi-services-card). Targetiamo:
     - .elementor-widget-image-box → classe corretta del widget (NB:
       Elementor NON emette `.elementor-image-box` standalone, solo
       `-wrapper`, `-img`, `-content`, `-title`, `-description`)
     - .cbi-services-card → la column custom "I nostri servizi" della home
       Cosi' lo zoom scatta passando ovunque sulla card, non solo sull'img.
     - .elementor-post → widget Posts Pro
     - .elementor-post__thumbnail__link → fallback se il link wrappa solo
       la thumbnail (alcuni layout Posts) */
.elementor-widget-image-box:hover .elementor-image-box-img img,
.cbi-services-card:hover .elementor-image-box-img img,
.elementor-post:hover .elementor-post__thumbnail img,
.elementor-post__thumbnail__link:hover img {
	transform: scale(1.06);
}

/* =========================================================
   22. BLOCCHI CONTENUTO RESTYLE (2026)
   Classi `.cbi-*` da applicare a section/column/widget Elementor
   (campo "CSS Classes" → `css_classes` nel JSON). Ogni blocco ha
   una libreria "Saved Template" corrispondente (post_type
   elementor_library, titoli "BOINT · …").

   Regole di robustezza:
   - i selettori agganciano SEMPRE le classi custom, mai la
     struttura interna di Elementor → funzionano sia con il layout
     legacy section/column (`.elementor-column`) sia con i Flex
     Container (`.e-con-inner`);
   - i colori usano `!important` dove devono battere gli inline
     style dei widget / il kit Elementor (sez. 17);
   - gli hover usano `transition` standard, quindi il widget a11y
     ("Stop animazioni") li azzera automaticamente.
   ========================================================= */

/* ---------------------------------------------------------
   22.1 · .cbi-block-numeri — griglia di card "Numero"
   Card = column con `.cbi-num`. Dentro: heading valore
   (`.cbi-num__value`) + heading label (`.cbi-num__label`).
   --------------------------------------------------------- */
/* Griglia dei numeri: gap orizzontale E verticale netto ~28px fra le card
   (restyle 23-07, mockup "mission e valori": card ben staccate). Grid robusto
   che ignora le width inline delle column Elementor. `--num-cols` sceglibile
   per contesto in Round 2 (2 = mission 2×2 · 4 = strip orizzontale home).
   Opt-in: la classe `.cbi-block-numeri` va sulla SEZIONE nei JSON. */
.cbi-block-numeri > .elementor-container,
.cbi-block-numeri > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(var(--num-cols, 2), 1fr);
	gap: 28px;
	align-items: stretch;
}
.cbi-block-numeri > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
}
/* Modificatore per la strip a 4 in riga (mockup LaCooperativa "Impatto
   sociale") — fix segnalato dal QA Round 2. */
.cbi-block-numeri--cols-4 { --num-cols: 4; }
@media (max-width: 900px) {
	.cbi-block-numeri--cols-4 { --num-cols: 2; }
}
@media (max-width: 600px) {
	.cbi-block-numeri > .elementor-container,
	.cbi-block-numeri > .e-con-inner { grid-template-columns: 1fr; }
}

.cbi-num {
	background: var(--cbi-gradient);
	border-radius: 20px 0 20px 20px;
	padding: 20px 24px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	overflow: hidden;
}
.cbi-num__value .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: 400 !important;
	font-size: clamp(3rem, 5vw, 4.7rem);
	line-height: 1;
	letter-spacing: -1.5px;
	color: #fff !important;
	margin: 0;
}
.cbi-num__label .elementor-heading-title {
	font-family: var(--font-sans) !important;
	font-weight: 500 !important;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 1.6px;
	color: #fff !important;
	margin: 0;
}

/* ---------------------------------------------------------
   22.2 · .cbi-band — banda full-width gradiente firma
   ("Per le famiglie", "Claim dona ora"). Watermark rosa in
   basso a destra. Testo bianco; le immagini prendono raggio
   petalo + ombra.
   --------------------------------------------------------- */
.cbi-band {
	position: relative;
	background: var(--cbi-gradient);
	overflow: hidden;
	color: #fff;
}
/* Watermark: marchio bianco scontornato (SVG) grande e semitrasparente,
   "croppato" sul lato destro. Il background è clippato alla box dello
   pseudo-elemento (background-clip default), quindi resta dentro anche
   quando la variante collage porta `overflow: visible` sulla banda. */
.cbi-band::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: min(620px, 55%);
	background: url("assets/images/marchio-white.svg") no-repeat;
	background-size: 720px auto;
	background-position: calc(100% + 130px) center;
	opacity: .13;
	pointer-events: none;
	z-index: 0;
}
/* Il contenuto resta sopra al watermark */
.cbi-band > .elementor-container,
.cbi-band > .e-con-inner {
	position: relative;
	z-index: 1;
}
.cbi-band .elementor-heading-title { color: #fff !important; }
.cbi-band .elementor-widget-text-editor,
.cbi-band .elementor-widget-text-editor * { color: rgba(255, 255, 255, .92) !important; }
.cbi-band img {
	border-radius: var(--radius-petal);
	box-shadow: var(--shadow-lift);
}

/* ---------------------------------------------------------
   22.2b · .cbi-band--collage — collage 3 foto flottanti
   Le foto ESCONO dalla banda (effetto 3D). La colonna media
   (`.cbi-band__media`) diventa un mini-grid 2 colonne: foto
   "tall" (portrait) a sinistra che sborda sopra e sotto, foto
   "top" e "bottom" impilate a destra. `overflow: visible` sulla
   banda; il watermark ::after resta clippato alla sua box.
   --------------------------------------------------------- */
/* Banda compatta: padding-block ridotto (era 64px inline) cosi' la foto
   "tall" con i suoi margin negativi ESCE sopra e sotto il bordo. Margin
   verticale sulla sezione = respiro perche' le foto sbordanti non tocchino
   i blocchi adiacenti. */
.cbi-band--collage {
	overflow: visible;
	padding-block: 22px !important;
	margin-block: 72px !important;
}
/* `display: grid !important`: Elementor imposta `.elementor-widget-wrap {
   display:flex }` con pari specificità ma caricato dopo, quindi vince il
   tie sul display — forziamo il grid. */
.cbi-band--collage .cbi-band__media > .elementor-widget-wrap,
.cbi-band--collage .cbi-band__media > .elementor-element-populated {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr;
	/* Righe asimmetriche: la piccola in alto (`--top`) piu' bassa di quella
	   sotto (`--bottom`); row-gap ampio per staccarle bene (mockup). */
	grid-template-rows: 150px 220px;
	column-gap: 16px;
	row-gap: 44px;
	align-content: center;
	width: 100%;
}
/* Ogni foto riempie la propria cella (righe di altezza fissa); l'img va
   forzata con !important perché Elementor imposta height:auto sull'img. */
.cbi-band__ph { margin: 0 !important; height: 100%; }
.cbi-band__ph .elementor-widget-container,
.cbi-band__ph figure,
.cbi-band__ph a { height: 100%; margin: 0; }
.cbi-band--collage .cbi-band__ph img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: var(--shadow-lift);
	display: block;
}
/* La foto "tall" occupa entrambe le righe (portrait). Sborda dal bordo SOLO
   dal lato TOP: margin-top negativo la alza sopra la banda, mentre l'altezza
   ridotta tiene il suo bordo inferiore DENTRO la banda (nessun overflow sotto).
   Non allarga la banda (le righe restano fisse). */
.cbi-band__ph--tall   { grid-column: 1; grid-row: 1 / span 2; align-self: start; height: 470px !important; margin: -95px 0 0 !important; }
.cbi-band__ph--top    { grid-column: 2; grid-row: 1; }
/* La foto "bottom" e' PIU' GRANDE della "top" e sborda dal bordo BOTTOM:
   ancorata in fondo alla cella (`align-self: end`) con altezza maggiore della
   riga e margin-bottom negativo che la spinge sotto il bordo della banda. */
.cbi-band__ph--bottom { grid-column: 2; grid-row: 2; align-self: end; height: 280px !important; margin: 0 0 -55px !important; }
@media (max-width: 767px) {
	.cbi-band--collage { overflow: hidden; }
	.cbi-band--collage .cbi-band__media > .elementor-widget-wrap,
	.cbi-band--collage .cbi-band__media > .elementor-element-populated {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 200px 130px;
		row-gap: 16px;
	}
	/* Su mobile il collage torna in flusso semplice: annulliamo le altezze/
	   margini negativi/align-self impostati per lo sfalsamento desktop. */
	.cbi-band__ph--tall   { grid-column: 1 / -1; grid-row: 1; align-self: stretch; height: auto !important; margin: 0 !important; }
	.cbi-band__ph--top    { grid-column: 1; grid-row: 2; }
	.cbi-band__ph--bottom { grid-column: 2; grid-row: 2; align-self: stretch; height: auto !important; margin: 0 !important; }
}

/* ---------------------------------------------------------
   22.2c · .cbi-mark-top — marchio ANFFAS sopra un titolo
   Blocco centrato 56×56 col marchio brand, come nei titoli di
   sezione del mockup ("I servizi"). Si applica alla heading.
   --------------------------------------------------------- */
.cbi-mark-top::before {
	content: "";
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	background: url("assets/images/marchio.svg") center / contain no-repeat;
}
/* Titolo di sezione col marchio (es. "I servizi"): pieno H2 Athena blu.
   Allineato a 48px max = H2 Figma (uniforme con gli altri titoli sezione). */
.cbi-mark-top .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: 400 !important;
	font-size: clamp(2.4rem, 3.3vw, 3rem);
	line-height: 1.02;
	letter-spacing: -1px;
	color: #294292 !important;
	text-align: center;
}

/* ---------------------------------------------------------
   22.3 · .cbi-block-text-centered — blocco testo centrato
   Titolo Athena blu, sottotitolo Nunito 300 teal (`.cbi-lead`),
   corpo grigio. Nessuno sfondo qui (lo dà `.cbi-tinted`).
   --------------------------------------------------------- */
.cbi-block-text-centered { text-align: center; }
/* Titolo sezione: Athena blu, ~48px (allineato spec Figma H2). Il :not()
   protegge il sotto-titolo teal (.cbi-lead) dall'ereditare questa taglia.
   NB selettore SENZA `.elementor-widget-container`: con l'Optimized DOM di
   Elementor 3.3x quel div non esiste nel markup (bug trovato dal QA:
   il selettore vecchio non agganciava mai i titoli). */
.cbi-block-text-centered > .elementor-heading-title,
.cbi-block-text-centered .elementor-widget-heading:not(.cbi-lead) .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: 400 !important;
	font-size: clamp(2.4rem, 3.3vw, 3rem); /* max 48px = H2 Figma */
	line-height: 1.02;
}
.cbi-block-text-centered .elementor-heading-title {
	color: #294292 !important;
	letter-spacing: -1px;
}
/* Sotto-titolo teal (.cbi-lead): Nunito 300, scale-up a ~28px (era ~24). */
.cbi-lead .elementor-heading-title,
.cbi-block-text-centered .cbi-lead .elementor-heading-title {
	font-family: var(--font-sans) !important;
	font-weight: 300 !important;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--cbi-teal-brand) !important;
}
/* Body dei blocchi testo: grigio 19px (restyle 23-07). */
.cbi-block-text-centered .elementor-text-editor,
.cbi-block-text-centered .elementor-text-editor p {
	color: var(--cbi-grey);
	font-size: 1.1875rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------
   22.4 · .cbi-tinted — sezione a tinta area con fade
   Lo sfondo "si ricongiunge": trasparente → tinta → trasparente.
   La variante imposta solo `--tint`; una sola regola disegna lo
   sfondo. Le immagini nelle colonne prendono raggio petalo.
   --------------------------------------------------------- */
.cbi-tinted {
	--tint: #ffffff;
	/* Le estremità del fade usano la tinta PASTELLO (--area-tint-soft, o la
	   --tint-fade specifica della variante) invece del trasparente: le tinte
	   sature (arancio, verde) che sfumavano verso il bianco passavano per
	   toni intermedi "fangosi" — alone sporco segnalato dal QA su
	   gruppi-appartamento. Con l'estremo pastello la transizione resta
	   nella stessa famiglia cromatica. Fallback: trasparente (comportamento
	   precedente) dove la soft non è definita. */
	background: linear-gradient(180deg,
		var(--tint-fade, var(--area-tint-soft, transparent)) 0%,
		var(--tint) 12%,
		var(--tint) 88%,
		var(--tint-fade, var(--area-tint-soft, transparent)) 100%);
}
.cbi-tinted--csr-diurni          { --tint: #FFF5DA;                    --tint-fade: #FFFCF4; }
.cbi-tinted--csr-residenziali    { --tint: #DAE2FF;                    --tint-fade: #F4F6FF; }
.cbi-tinted--laboratorio         { --tint: var(--cbi-laboratori);      --tint-fade: #DFF2ED; }
.cbi-tinted--gruppi-appartamento { --tint: var(--cbi-appartamento);    --tint-fade: #F8EADC; }
.cbi-tinted--progetto            { --tint: var(--cbi-progetti);        --tint-fade: #E6E9F2; }
.cbi-tinted--evento              { --tint: var(--cbi-events-gold);     --tint-fade: #F3EDDE; }

/* Variante area-neutra: la tinta arriva dalla body class dell'area
   corrente (`--area-tint`) invece di essere fissata dalla classe. Usata
   dai template condivisi tra piu' aree (scheda centro/laboratorio) dove
   la sezione non puo' hardcodare la variante. Il testo usa `--area-tint-fg`
   (blu sulle tinte chiare, bianco sulle scure) per restare leggibile
   quando la tinta piena copre lo sfondo (Laboratori/Progetti/Gruppi). */
.cbi-tinted--auto { --tint: var(--area-tint, #ffffff); }
.cbi-tinted--auto .elementor-heading-title,
.cbi-tinted--auto .elementor-widget-text-editor,
.cbi-tinted--auto .elementor-widget-text-editor p,
.cbi-tinted--auto .elementor-icon-list-text {
	color: var(--area-tint-fg, #294292) !important;
}
.cbi-tinted--auto .elementor-widget-text-editor a { color: var(--area-tint-fg, #294292) !important; }

.cbi-tinted img {
	border-radius: var(--radius-petal);
	box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------
   22.5 · .cbi-service-card — card servizio con HOVER FLIP
   Column Elementor con `.cbi-service-card .cbi-service-card--area-*`.
   Struttura interna (widget): immagine (`.cbi-service-card__img`)
   + icona pill (`.cbi-service-card__pill`) + heading
   (`.cbi-service-card__title`) + testo (`.cbi-service-card__desc`).
   Default: foto coprente + titolo bianco in basso.
   Hover: layer tinta area pieno (fade), titolo al colore area,
   compare la descrizione.
   --------------------------------------------------------- */
/* Griglia della sezione: 4 card equi-larghe con GAP netto. Sostituisce il
   layout flex/percentuali di Elementor classico con un grid robusto (le
   column diventano celle: ignorano le width inline). Cosi' il gap non manda
   in overflow e le card restano ~5:7. */
.cbi-block-servizi > .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	align-items: stretch;
}
.cbi-block-servizi > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
}
@media (max-width: 1024px) {
	.cbi-block-servizi > .elementor-container { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
	.cbi-block-servizi > .elementor-container { grid-template-columns: 1fr; }
}
.cbi-service-card {
	--area-tint: var(--cbi-blue-50-new);
	--area-title: #294292;
	position: relative;
	min-height: 400px;
	border-radius: var(--radius-petal);
	overflow: hidden;
	padding: 0 !important;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base);
}
.cbi-service-card:hover,
.cbi-service-card:focus-within { box-shadow: var(--shadow-lift); }
/* Il "populated wrap" della column è il vero contenitore flex dei widget:
   lì impiliamo tutto e ancoriamo veli + tinta (Optimized DOM: la column
   non ha `.elementor-column-wrap` intermedio). Stack ancorato in basso:
   pill → titolo → descrizione. Quando la descrizione si apre al hover,
   il blocco cresce e "spinge" pill e titolo verso l'alto. */
.cbi-service-card > .elementor-widget-wrap,
.cbi-service-card > .elementor-element-populated,
.cbi-service-card .elementor-widget-wrap {
	position: relative;
	min-height: 400px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Default: titolo/icona ancorati vicino al fondo (spazio sotto minimo). Il
	   margine "vero" lo crea la descrizione che appare da sotto al hover, senza
	   animazione, spingendo titolo e icona verso l'alto. */
	padding: 0 0 14px !important;
}
/* Velo scuro in basso per la leggibilità del titolo (stato default) */
.cbi-service-card > .elementor-widget-wrap::before,
.cbi-service-card > .elementor-element-populated::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .62) 100%);
	pointer-events: none;
}
/* Layer tinta area piena — appare al hover */
.cbi-service-card > .elementor-widget-wrap::after,
.cbi-service-card > .elementor-element-populated::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--area-tint);
	opacity: 0;
	transition: opacity var(--transition-base);
	pointer-events: none;
}
.cbi-service-card:hover > .elementor-widget-wrap::after,
.cbi-service-card:hover > .elementor-element-populated::after,
.cbi-service-card:focus-within > .elementor-widget-wrap::after,
.cbi-service-card:focus-within > .elementor-element-populated::after { opacity: 1; }
/* Immagine di fondo coprente */
.cbi-service-card .cbi-service-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0 !important;
	z-index: 0;
}
.cbi-service-card .cbi-service-card__img .elementor-widget-container,
.cbi-service-card .cbi-service-card__img figure,
.cbi-service-card .cbi-service-card__img a { height: 100%; margin: 0; }
.cbi-service-card .cbi-service-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Pill icona area GRANDE in flusso, appena sopra il titolo (in basso a
   sinistra). Il box tinta sta sull'.elementor-icon interno (70×70), il
   wrapper widget resta auto-width e allineato a sinistra. */
.cbi-service-card .cbi-service-card__pill {
	position: relative;
	z-index: 3;
	width: auto !important;
	margin: 0 0 12px !important;
	padding: 0 28px !important;
	background: transparent !important;
	text-align: left !important;
}
.cbi-service-card .cbi-service-card__pill .elementor-widget-container,
.cbi-service-card .cbi-service-card__pill .elementor-icon-wrapper { display: inline-flex; margin: 0; }
.cbi-service-card .cbi-service-card__pill .elementor-icon {
	width: 70px;
	height: 70px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--area-pill, var(--area-tint));
	border-radius: 15px 15px 15px 0;
	color: var(--area-title) !important;
	fill: var(--area-title) !important;
	font-size: 32px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
	transition: background var(--transition-base);
}
.cbi-service-card .cbi-service-card__pill .elementor-icon svg { width: 34px; height: 34px; fill: var(--area-title) !important; }
/* Al hover la card diventa tinta piena: la pill assume la tinta "hover"
   così resta distinguibile dal fondo (bianca sulle aree scure). */
.cbi-service-card:hover .cbi-service-card__pill .elementor-icon,
.cbi-service-card:focus-within .cbi-service-card__pill .elementor-icon {
	background: var(--area-pill-hover, #fff);
	color: var(--area-title) !important;
	fill: var(--area-title) !important;
}
/* Titolo */
.cbi-service-card .cbi-service-card__title {
	position: relative;
	z-index: 3;
	margin: 0 !important;
	padding: 0 28px !important;
}
.cbi-service-card .cbi-service-card__title .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: 400 !important;
	font-size: 33px;
	line-height: 1.05;
	color: #fff !important;
	transition: color var(--transition-base);
}
.cbi-service-card:hover .cbi-service-card__title .elementor-heading-title,
.cbi-service-card:focus-within .cbi-service-card__title .elementor-heading-title {
	color: var(--area-title) !important;
}
/* Descrizione — nascosta di default, compare al hover facendo salire
   pill+titolo. Reveal ISTANTANEO (nessuna transizione su grid-template-rows /
   opacity): titolo e icona "saltano" verso l'alto, come richiesto. Il figlio
   interno fa da riga collassabile (grid-template-rows 0fr → 1fr). */
.cbi-service-card .cbi-service-card__desc {
	position: relative;
	z-index: 3;
	margin: 0 !important;
	padding: 0 28px !important;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
}
.cbi-service-card .cbi-service-card__desc > .elementor-widget-container {
	min-height: 0;
	overflow: hidden;
}
.cbi-service-card .cbi-service-card__desc .elementor-widget-container { padding-top: 8px; }
.cbi-service-card .cbi-service-card__desc,
.cbi-service-card .cbi-service-card__desc .elementor-text-editor,
.cbi-service-card .cbi-service-card__desc p {
	font-family: var(--font-sans) !important;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.25;
	color: var(--area-title) !important;
	margin: 0;
}
.cbi-service-card:hover .cbi-service-card__desc,
.cbi-service-card:focus-within .cbi-service-card__desc {
	grid-template-rows: 1fr;
	opacity: 1;
}
/* Varianti d'area (stesse chiavi della Fase 3).
   `--area-pill-hover`: colore della pill quando la card è in tinta piena
   (aree chiare → pill bianca; aree scure → pill più chiara traslucida
   con icona bianca, così resta leggibile). */
.cbi-service-card--area-csr-diurni          { --area-tint: #FFF5DA;                --area-title: #294292; --area-pill-hover: #ffffff; }
.cbi-service-card--area-csr-residenziali    { --area-tint: #DAE2FF;                --area-title: #294292; --area-pill-hover: #ffffff; }
.cbi-service-card--area-laboratorio         { --area-tint: var(--cbi-laboratori);  --area-title: #ffffff; --area-pill-hover: rgba(255,255,255,.22); }
.cbi-service-card--area-gruppi-appartamento { --area-tint: var(--cbi-appartamento);--area-title: #ffffff; --area-pill-hover: rgba(255,255,255,.22); }
.cbi-service-card--area-progetto            { --area-tint: var(--cbi-progetti);    --area-title: #ffffff; --area-pill-hover: rgba(255,255,255,.22); }
.cbi-service-card--area-evento              { --area-tint: var(--cbi-events-gold); --area-title: #ffffff; --area-pill-hover: rgba(255,255,255,.22); }

/* ---------------------------------------------------------
   22.6 · .cbi-icon-card — card bianca con icona
   Column con `.cbi-icon-card`. Dentro (widget): icona
   (`.cbi-icon-card__icon`) + heading (`.cbi-icon-card__title`)
   + testo + button `.btn-cta`. Titolo teal → hover blu (pattern
   Fase 3). Hover: ombra sollevata.
   --------------------------------------------------------- */
.cbi-icon-card {
	background: #fff !important;
	border-radius: var(--radius-petal);
	padding: 28px !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cbi-icon-card:hover { box-shadow: var(--shadow-lift); }
.cbi-icon-card .cbi-icon-card__icon { margin: 0 !important; }
.cbi-icon-card .cbi-icon-card__icon .elementor-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cbi-teal-50);
	border-radius: 12px 12px 12px 0;
	color: var(--cbi-teal-500) !important;
	fill: var(--cbi-teal-500) !important;
	font-size: 22px;
}
.cbi-icon-card .cbi-icon-card__title { margin: 0 !important; }
/* Titolo icon-card: ATHENA 400 ~32px teal (componente Figma "BoxIcon" —
   fix da QA chi-siamo: prima era Nunito 300/24 in contrasto con la spec).
   Hover: solo cambio colore (il salto di peso su Athena stona). */
.cbi-icon-card .cbi-icon-card__title .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: 400 !important;
	font-size: clamp(1.625rem, 2.2vw, 2rem); /* fino a 32px */
	line-height: 1.1;
	color: var(--cbi-teal-brand) !important;
	transition: color var(--transition-base);
}
.cbi-icon-card:hover .cbi-icon-card__title .elementor-heading-title {
	color: var(--cbi-blue-700) !important;
}
.cbi-icon-card .elementor-text-editor,
.cbi-icon-card .elementor-text-editor p { color: var(--cbi-grey); margin: 0; }

/* .cbi-block-iconcards — griglia 3 col con gap AMPIO (~52px)
   per la sezione che ospita le .cbi-icon-card (mockup "Lavora
   con noi": card bianche ben staccate, il wash si vede TRA le
   card). Le .cbi-icon-card NON cambiano. Va sulla SEZIONE.
   Grid robusto che ignora le width inline delle column. */
.cbi-block-iconcards > .elementor-container,
.cbi-block-iconcards > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 52px;
	align-items: stretch;
}
.cbi-block-iconcards > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
}
/* Modificatori colonne (promossi da override di pagina Batch B1 al design
   system): 2 col (coppie card), 4 col (valori mission). */
.cbi-block-iconcards--cols-2 > .elementor-container,
.cbi-block-iconcards--cols-2 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
.cbi-block-iconcards--cols-4 > .elementor-container,
.cbi-block-iconcards--cols-4 > .e-con-inner { grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 1024px) {
	.cbi-block-iconcards--cols-4 > .elementor-container,
	.cbi-block-iconcards--cols-4 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.cbi-block-iconcards > .elementor-container,
	.cbi-block-iconcards > .e-con-inner { grid-template-columns: 1fr; gap: 28px; }
}
/* La variante 4 colonne resta a 2 fino a 600px: le card valori sono corte
   e impilarle tutte gia' a 900px allungava troppo la pagina su tablet.
   (comportamento che i CSS di pagina B1 avevano e che qui viene preservato) */
@media (max-width: 900px) and (min-width: 601px) {
	.cbi-block-iconcards--cols-4 > .elementor-container,
	.cbi-block-iconcards--cols-4 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   22.7 · .cbi-partner-strip — blocco partner / loghi
   Sfondo azzurro soft, titolo Athena blu centrato, loghi
   contenuti (max-height 60px, colori nativi), CTA centrata.
   --------------------------------------------------------- */
.cbi-partner-strip {
	background: var(--cbi-blue-50-new);
	text-align: center;
}
.cbi-partner-strip .elementor-heading-title { color: #294292 !important; }
.cbi-partner-strip img {
	max-height: 60px;
	width: auto;
	object-fit: contain;
}
.cbi-partner-strip .elementor-button-wrapper { text-align: center; }

/* ---------------------------------------------------------
   22.8 · Sfondi pagina per area
   Il main dopo l'hero (regola Fase 2) sfuma in basso verso la
   tinta dell'area, come i frame BackgroundImage_* del mockup.
   `--tint-page` è impostata dalle body class; tinte
   precalcolate (niente color-mix) per sicurezza cross-browser.
   Default `--tint-page: #fff` → gradiente tutto bianco
   (retro-compatibile con le pagine non tematiche).
   --------------------------------------------------------- */
/* `--area-tint`: tinta PIENA dell'area (per `.cbi-tinted--auto`);
   `--area-tint-fg`: colore testo leggibile su quella tinta. */
/* --area-tint-soft: versione SEMPRE chiara della tinta area, per superfici
   dove il testo scuro deve restare leggibile (es. stop sinistro del
   gradiente intro). Sulle aree chiare coincide con la tinta piena; su
   quelle scure e' la variante pastello. */
/* --area-wash: colore (rgba, gia' con alpha) della macchia
   "wash" sinistra a tinta area — spec Figma: laboratori ~.30,
   gruppi ~.40, residenziali lavanda ~1.0 (qui bilanciate per
   restare soffuse su bianco). */
body.is-csr-diurni          { --tint-page: #FFFCF4; --area-tint: #FFF5DA;                --area-tint-fg: #294292; --area-tint-soft: #FFF5DA; --area-wash: rgba(255, 245, 218, .60); }
body.is-csr-residenziali    { --tint-page: #F4F6FF; --area-tint: #DAE2FF;                --area-tint-fg: #294292; --area-tint-soft: #DAE2FF; --area-wash: rgba(218, 226, 255, .85); }
body.is-laboratorio         { --tint-page: #E1F5F0; --area-tint: var(--cbi-laboratori);  --area-tint-fg: #ffffff; --area-tint-soft: #DFF2ED; --area-wash: rgba(0, 171, 140, .28); }
body.is-progetto            { --tint-page: #EAECF3; --area-tint: var(--cbi-progetti);     --area-tint-fg: #ffffff; --area-tint-soft: #E6E9F2; --area-wash: rgba(46, 59, 103, .20); }
body.is-gruppi-appartamento { --tint-page: #FBF0E7; --area-tint: var(--cbi-appartamento); --area-tint-fg: #ffffff; --area-tint-soft: #F8EADC; --area-wash: rgba(171, 77, 0, .26); }
body.is-evento              { --tint-page: #F5F1E9; --area-tint: var(--cbi-events-gold);  --area-tint-fg: #ffffff; --area-tint-soft: #F3EDDE; --area-wash: rgba(135, 116, 77, .26); }

/* =========================================================
   22b. RESTYLE ROUND 1 (analisi 23-07-2026)
   Fondamenta tema (CSS) dei pattern richiesti: news card,
   layout featured eventi/progetti, sfondi azzurri, banda
   foto-top, collage riusabile, intro gradiente, photo card,
   partner, submit brandizzato. Le classi/utility sono OPT-IN:
   i JSON delle pagine le adotteranno in Round 2.
   ========================================================= */

/* ---------------------------------------------------------
   22b.1 · Sistema "wash" — macchie soffuse che FLUISCONO TRA
   le sezioni (analisi 24-07-2026). Sostituisce la vecchia
   banda lineare di .cbi-bg-azure: gli sfondi non sono piu'
   "righe" per-sezione ma spot radiali organici che nascono in
   una sezione e sfumano in quella successiva ("lo sfondo
   accompagna tra le sezioni").

   STACKING (verificato): la sezione .cbi-wash/.cbi-bg-azure
   diventa un PROPRIO contesto di impilamento (position:
   relative; z-index:0) con sfondo trasparente. Gli pseudo
   ::before/::after portano la macchia a z-index:-1 → sopra lo
   sfondo (trasparente) della sezione ma DIETRO il suo
   contenuto (leggibilita' intatta). Gli pseudo SBORDANO oltre
   i bordi (--wash-top / --wash-height): la macchia bleed-a
   nella riga sotto. Poiche' la sezione e' un'unita' a
   z-index:0, il bleed VERSO IL BASSO passa DIETRO la sezione
   seguente (dipinta dopo, in tree-order): se questa e'
   trasparente il wash traspare, se ha uno sfondo proprio (es.
   banda .cbi-band blu) il wash SPARISCE dietro di essa. Il
   bleed verso l'alto e' tenuto minimo (--wash-top ~ -12%, e 0
   su --azure-top) per non velare bande piene precedenti (es.
   la crema "Destinatari").
   ::before = layer AZZURRO (ciano) · ::after = layer TINTA
   AREA. Combinabili. pointer-events:none → nessuna
   interferenza col contenuto ne' con i click.
   --------------------------------------------------------- */
.cbi-wash,
.cbi-bg-azure {
	position: relative;
	z-index: 0;
	background: transparent;
}
.cbi-wash::before, .cbi-wash::after,
.cbi-bg-azure::before, .cbi-bg-azure::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--wash-top, -12%);
	height: var(--wash-height, 150%);
	z-index: -1;
	pointer-events: none;
	background: transparent;
}

/* Colore ciano della macchia azzurra (tarato sul render
   bg-generico). --area-wash = tinta area precalcolata (rgba)
   per la macchia sinistra; default = pale lavanda neutro
   (pagine senza area, es. home). Override per area piu' sotto
   nel blocco body.is-* (pattern del progetto: niente color-mix). */
:root { --cbi-wash-cyan: #D4EFFB; }
body   { --area-wash: rgba(210, 224, 255, .55); }

/* Layer ::before = AZZURRO. .cbi-bg-azure porta un default
   organico (ciano largo a destra). I modificatori --azure-*
   lo ridefiniscono (stessa specificita' → devono venire DOPO). */
.cbi-bg-azure::before {
	background: radial-gradient(ellipse 58% 66% at 80% 28%,
		var(--cbi-wash-cyan) 0%, rgba(212, 239, 251, .45) 36%, transparent 70%);
}
.cbi-wash--azure-right::before {
	background: radial-gradient(ellipse 58% 66% at 82% 30%,
		var(--cbi-wash-cyan) 0%, rgba(212, 239, 251, .45) 36%, transparent 70%);
}
.cbi-wash--azure-left::before {
	background: radial-gradient(ellipse 56% 62% at 14% 20%,
		var(--cbi-wash-cyan) 0%, rgba(212, 239, 251, .45) 36%, transparent 70%);
}
.cbi-wash--azure-top::before {
	--wash-top: 0%;
	--wash-height: 138%;
	/* Centro ellisse DENTRO la sezione (42%): al bordo superiore l'alpha è
	   ~0 → niente riga netta contro la banda crema precedente (difetto
	   trovato dal QA: col centro al 2% il ciano pieno toccava il confine).
	   La macchia culmina a metà sezione e si dissolve prima delle card. */
	background: radial-gradient(ellipse 80% 62% at 44% 42%,
		var(--cbi-wash-cyan) 0%, rgba(212, 239, 251, .42) 38%, transparent 72%);
}

/* Layer ::after = TINTA AREA (macchia sinistra soffusa).
   .cbi-bg-azure la porta di default (pale); .cbi-wash--area-left
   e' l'opt-in esplicito. Usa --area-wash (body.is-*). */
.cbi-bg-azure::after,
.cbi-wash--area-left::after {
	background: radial-gradient(ellipse 40% 66% at 12% 40%,
		var(--area-wash) 0%, transparent 70%);
}

/* ---------------------------------------------------------
   22b.2 · .cbi-featured + .cbi-fcard — layout "in evidenza"
   1 card GRANDE + colonna con 2 card piccole impilate.
   Condiviso da eventi ([boint_events layout="featured"]) e
   progetti ([boint_strutture layout="featured"]). Il titolo
   di sezione + bottone stanno in una colonna Elementor a sx
   (NON li rende lo shortcode).
   --------------------------------------------------------- */
.cbi-featured {
	display: grid;
	grid-template-columns: 1.75fr 1fr;
	gap: 32px;
	align-items: start;
}
.cbi-featured__side {
	display: grid;
	gap: 32px;
	align-content: start;
}
@media (max-width: 900px) {
	.cbi-featured { grid-template-columns: 1fr; }
	.cbi-featured__side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.cbi-featured__side { grid-template-columns: 1fr; }
}

/* Card "boxless": immagine petalo + elementi impilati sotto (no box bianco). */
.cbi-fcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform var(--transition-base);
}
.cbi-fcard:hover { transform: translateY(-4px); }
.cbi-fcard__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-petal);
	background: var(--cbi-ink-100);
	aspect-ratio: 16/10;
	transition: box-shadow var(--transition-base);
}
.cbi-fcard--big .cbi-fcard__media { aspect-ratio: 16/11; }
.cbi-fcard:hover .cbi-fcard__media,
.cbi-fcard:focus-within .cbi-fcard__media { box-shadow: var(--shadow-lift); }
.cbi-fcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.cbi-fcard:hover .cbi-fcard__media img { transform: scale(1.04); }

/* Pill full-width (progetti): usa --pill-bg/--pill-fg del modificatore
   d'area (.struttura-card--area-*). */
.cbi-fcard__pill {
	align-self: stretch;
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
}

/* Titolo: default teal 300 → hover blu 700 sottolineato (pattern Fase 3).
   L'hover si aggancia alla CARD, non al link. */
.cbi-fcard__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--cbi-teal-brand);
	line-height: 1.15;
	font-size: 1.5rem;
	transition: color var(--transition-base), font-weight var(--transition-base);
}
.cbi-fcard--big .cbi-fcard__title { font-size: 2rem; }
.cbi-fcard__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.cbi-fcard:hover .cbi-fcard__title a,
.cbi-fcard:focus-within .cbi-fcard__title a {
	color: var(--cbi-blue-700);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cbi-fcard__excerpt {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--cbi-grey);
}

/* --- Varianti EVENTO: colore per categoria dell'evento --- */
/* La card evento usa la barra data full-width + riga luogo (helper PHP
   condivisi). Il colore area imposta: barra (bg + testo leggibile), luogo,
   hover titolo. Fallback = ORO (classe base .evt-card). */
.evt-card {
	--evt-bar-bg: var(--cbi-events-gold);
	--evt-bar-fg: #fff;
	--evt-accent: var(--cbi-events-gold);
}
.evt-card .event-datebar {
	display: flex;
	width: 100%;
	justify-content: center;
	align-self: stretch;
	background: var(--evt-bar-bg);
	color: var(--evt-bar-fg);
}
.evt-card .event-location {
	align-self: center;
	color: var(--evt-accent);
}
/* Titolo evento: default BLU #294292 (Figma) → hover accento area 700. */
.evt-card .cbi-fcard__title { color: #294292; }
.evt-card:hover .cbi-fcard__title a,
.evt-card:focus-within .cbi-fcard__title a { color: var(--evt-accent); }

/* Mappa aree → (barra bg, barra testo, accento leggibile su bianco).
   Aree chiare: barra tinta pastello + testo blu, accento = variante "text"
   scura. Aree scure: barra piena + testo bianco, accento = tinta stessa. */
.evt-card--area-csr-diurni       { --evt-bar-bg: var(--cbi-csr-diurni);       --evt-bar-fg: var(--cbi-blue-700); --evt-accent: var(--cbi-csr-diurni-text); }
.evt-card--area-csr-residenziali { --evt-bar-bg: var(--cbi-csr-residenziali); --evt-bar-fg: var(--cbi-blue-700); --evt-accent: var(--cbi-csr-residenziali-text); }
.evt-card--area-laboratorio      { --evt-bar-bg: var(--cbi-laboratori);       --evt-bar-fg: #fff;                --evt-accent: var(--cbi-laboratori); }
.evt-card--area-gruppi-appartamento { --evt-bar-bg: var(--cbi-appartamento);  --evt-bar-fg: #fff;                --evt-accent: var(--cbi-appartamento); }
.evt-card--area-progetto         { --evt-bar-bg: var(--cbi-progetti);         --evt-bar-fg: #fff;                --evt-accent: var(--cbi-progetti); }

/* ---------------------------------------------------------
   22b.3 · .boint-news-grid / .boint-news-card — news text-only
   Card BIANCHE senza immagine, pill categoria FULL WIDTH
   colorata per area, titolo teal→hover blu, estratto, divider,
   data. Grid 3×2 (limit default 6), gap 28px, lift al hover.
   --------------------------------------------------------- */
.boint-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 900px)  { .boint-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .boint-news-grid { grid-template-columns: 1fr; } }

.boint-news-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
	border-radius: var(--radius-petal);
	padding: 18px 22px 22px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.boint-news-card:hover,
.boint-news-card:focus-within {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}
/* Pill categoria full-width (compatta ~30px, radius 5, colore per area). */
.boint-news-card__pill {
	align-self: stretch;
	display: block;
	width: 100%;
	text-align: center;
	padding: 5px 12px;
	line-height: 1.4;
}
.boint-news-card__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--cbi-teal-brand);
	transition: color var(--transition-base), font-weight var(--transition-base);
}
.boint-news-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
.boint-news-card:hover .boint-news-card__title a,
.boint-news-card:focus-within .boint-news-card__title a {
	color: var(--cbi-blue-700);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.boint-news-card__excerpt {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--cbi-grey);
	flex: 1;
}
.boint-news-card__divider {
	border: 0;
	border-top: 1px solid rgba(41, 66, 146, .18);
	margin: 4px 0 0;
	width: 100%;
}
.boint-news-card__date {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	color: var(--cbi-grey);
}
.boint-news__placeholder {
	font-style: italic;
	color: var(--cbi-ink-500);
	padding: 16px;
	border: 1px dashed var(--cbi-ink-200);
	border-radius: var(--radius-sm);
	background: var(--cbi-ink-50);
}

/* ---------------------------------------------------------
   22b.4 · .cbi-band--photo-top — banda bassa con UNA foto sx
   che sborda SOLO dal bordo TOP (mockup "donazioni",
   "inserimento"). Riusa la meccanica overlap della collage:
   overflow visibile, foto con margin-top negativo + altezza
   fissa così il bordo inferiore resta DENTRO la banda.
   --------------------------------------------------------- */
.cbi-band--photo-top {
	overflow: visible;
	padding-block: 40px !important;
	margin-block: 72px !important;
}
/* La colonna foto (`.cbi-band__photo`) contiene un widget immagine. */
.cbi-band--photo-top .cbi-band__photo { margin: 0 !important; }
.cbi-band--photo-top .cbi-band__photo img {
	display: block;
	width: 100%;
	/* -88px: col padding-block 40 della banda lo sbordo VISIBILE dal top è
	   ~32px, come misurato sul frame Figma (col vecchio -64 erano ~9px). */
	margin-top: -88px !important;
	border-radius: var(--radius-petal);
	box-shadow: var(--shadow-lift);
}
@media (max-width: 767px) {
	.cbi-band--photo-top { overflow: hidden; }
	.cbi-band--photo-top .cbi-band__photo img { margin-top: 0 !important; }
}

/* ---------------------------------------------------------
   22b.5 · .cbi-collage — collage 3 foto riusabile (standalone)
   Stessa meccanica di .cbi-band--collage ma INDIPENDENTE dalla
   banda gradiente: usabile dentro le sezioni tinta
   (.cbi-tinted--auto) per il claim "destinatari e accesso".
   Qui la foto "tall" sborda sopra E sotto la sezione tinta.
   --------------------------------------------------------- */
.cbi-collage { overflow: visible; }
.cbi-collage .cbi-band__media > .elementor-widget-wrap,
.cbi-collage .cbi-band__media > .elementor-element-populated {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: 150px 220px;
	column-gap: 16px;
	row-gap: 44px;
	align-content: center;
	width: 100%;
}
.cbi-collage .cbi-band__ph { margin: 0 !important; height: 100%; }
.cbi-collage .cbi-band__ph .elementor-widget-container,
.cbi-collage .cbi-band__ph figure,
.cbi-collage .cbi-band__ph a { height: 100%; margin: 0; }
.cbi-collage .cbi-band__ph img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: var(--shadow-lift);
	display: block;
}
/* Tall: sborda SOPRA e SOTTO (destinatari su tinta). Occupa 2 righe e si
   estende oltre entrambi i bordi con margini negativi simmetrici. */
.cbi-collage .cbi-band__ph--tall {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: stretch;
	height: calc(100% + 112px) !important;
	margin: -56px 0 !important;
}
.cbi-collage .cbi-band__ph--top    { grid-column: 2; grid-row: 1; }
.cbi-collage .cbi-band__ph--bottom { grid-column: 2; grid-row: 2; }
@media (max-width: 767px) {
	.cbi-collage { overflow: hidden; }
	.cbi-collage .cbi-band__media > .elementor-widget-wrap,
	.cbi-collage .cbi-band__media > .elementor-element-populated {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 200px 130px;
		row-gap: 16px;
	}
	.cbi-collage .cbi-band__ph--tall   { grid-column: 1 / -1; grid-row: 1; align-self: stretch; height: auto !important; margin: 0 !important; }
	.cbi-collage .cbi-band__ph--top    { grid-column: 1; grid-row: 2; }
	.cbi-collage .cbi-band__ph--bottom { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------
   22b.6 · .cbi-intro-gradient — intro sotto hero CSR
   Sezione intro con gradiente diagonale tinta-area (sx) →
   azzurrino (dx). Il gradiente si estende ANCHE dietro la
   card hero sbordante: annulliamo lo sfondo/padding di
   compensazione del main (`.stunning--card + main`) e la
   sezione "riprende" lo spazio come proprio padding-top, così
   la card "atterra" sul gradiente invece che sul bianco.
   Usa --area-tint (dalla body class is-*) per lo stop sinistro.
   --------------------------------------------------------- */
.cbi-intro-gradient {
	/* Stop sinistro = tinta area SOFT (sempre chiara): sulle aree scure
	   (laboratori/gruppi/progetti) la tinta piena rendeva illeggibile il
	   paragrafo grigio — fix segnalato dal QA Round 2. */
	background: linear-gradient(105deg,
		var(--area-tint-soft, var(--area-tint, var(--cbi-csr-diurni))) 0%,
		var(--cbi-azure-soft) 60%,
		var(--cbi-azure-soft) 100%);
	text-align: center;
	padding-block: 56px;
}
/* Quando l'intro è nel main sotto la card hero: il gradiente sale sotto
   la card. Neutralizza la compensazione bianca del main e trasferiscila
   come padding-top della sezione. */
.stunning--card + main:has(.cbi-intro-gradient),
.stunning--card + #site-content:has(.cbi-intro-gradient) {
	padding-top: 0;
	background: none;
}
.stunning--card + main:has(.cbi-intro-gradient) > .cbi-intro-gradient,
.stunning--card + main:has(.cbi-intro-gradient) > .elementor > .cbi-intro-gradient:first-child,
.stunning--card + #site-content:has(.cbi-intro-gradient) > .cbi-intro-gradient,
.stunning--card + #site-content:has(.cbi-intro-gradient) > .elementor > .cbi-intro-gradient:first-child {
	padding-top: calc(var(--hero-overlap) + 88px);
}
/* Titolo grande Athena blu · sotto-titolo teal (.cbi-lead) · paragrafo grigio.
   Riusa gli stili tipografici di .cbi-lead già definiti sopra. */
.cbi-intro-gradient .elementor-heading-title {
	color: #294292 !important;
	letter-spacing: -1px;
}
/* Selettore senza `.elementor-widget-container` (Optimized DOM — vedi nota
   su .cbi-block-text-centered). */
.cbi-intro-gradient > .elementor-heading-title,
.cbi-intro-gradient .elementor-widget-heading:not(.cbi-lead) .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: 400 !important;
	font-size: clamp(2.4rem, 3.8vw, 3.25rem);
	line-height: 1.02;
}
.cbi-intro-gradient .elementor-widget-text-editor,
.cbi-intro-gradient .elementor-widget-text-editor p {
	color: var(--cbi-grey);
	font-size: 1.1875rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------
   22b.7 · .cbi-photo-card — card foto semplice (no box)
   Foto arrotondata sopra (~16px), titolo teal 2 righe ~24px,
   testo grigio sotto (mockup "cosa offrono i centri"). Column
   level. `.cbi-block-photocards` = griglia 4 col con gap.
   --------------------------------------------------------- */
.cbi-block-photocards > .elementor-container,
.cbi-block-photocards > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	align-items: start;
}
.cbi-block-photocards > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
}
/* Modificatore 3 colonne (promosso da override di pagina Batch B1). */
.cbi-block-photocards--cols-3 > .elementor-container,
.cbi-block-photocards--cols-3 > .e-con-inner { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .cbi-block-photocards > .elementor-container,
	.cbi-block-photocards > .e-con-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 600px)  { .cbi-block-photocards > .elementor-container,
	.cbi-block-photocards > .e-con-inner { grid-template-columns: 1fr; } }

.cbi-photo-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: transparent !important;
	padding: 0 !important;
}
.cbi-photo-card .cbi-photo-card__img { margin: 0 !important; }
.cbi-photo-card .cbi-photo-card__img img {
	width: 100%;
	border-radius: 16px;
	display: block;
}
.cbi-photo-card .cbi-photo-card__title { margin: 0 !important; }
.cbi-photo-card .cbi-photo-card__title .elementor-heading-title,
.cbi-photo-card__title .elementor-heading-title {
	font-family: var(--font-sans) !important;
	font-weight: 300 !important;
	font-size: 24px;
	line-height: 1.15;
	color: var(--cbi-teal-brand) !important;
}
.cbi-photo-card .elementor-widget-text-editor,
.cbi-photo-card .elementor-widget-text-editor p,
.cbi-photo-card__text {
	color: var(--cbi-grey);
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0;
}

/* ---------------------------------------------------------
   22b.8 · Partner — classi di supporto
   Titolo sezione in TEAL; coppia loghi Anffas | Bologna
   Integrazione sopra il titolo con separatore verticale.
   (markup completo nei JSON Round 2)
   --------------------------------------------------------- */
.cbi-partner-strip__title .elementor-heading-title {
	color: var(--cbi-teal-brand) !important;
}
.cbi-partner-strip__logos-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4vw, 56px);
	flex-wrap: wrap;
}
.cbi-partner-strip__logos-top img { max-height: 92px; }
/* Separatore verticale tra i due loghi (elemento Divider Elementor con
   questa classe, oppure pseudo su .cbi-partner-strip__sep). */
.cbi-partner-strip__sep {
	width: 1px;
	align-self: stretch;
	min-height: 72px;
	background: var(--cbi-ink-200);
}

/* ---------------------------------------------------------
   22b.9 · Bottone submit dei form Elementor — brandizzato
   (era verde default del kit). Blu pieno #294292, hover teal
   #0091AA, radius 10, uppercase — coerente coi .btn-cta.
   --------------------------------------------------------- */
.elementor-form .elementor-button[type="submit"],
.elementor-form button.elementor-button,
.elementor-field-type-submit .elementor-button {
	background-color: #294292 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.elementor-form .elementor-button[type="submit"]:hover,
.elementor-form button.elementor-button:hover,
.elementor-field-type-submit .elementor-button:hover {
	background-color: #0091AA !important;
	color: #fff !important;
}
.elementor-form .elementor-button[type="submit"] .elementor-button-text,
.elementor-field-type-submit .elementor-button .elementor-button-text { color: #fff !important; }

/* =========================================================
   23. COMPONENTI PROMOSSI DAI CSS DI PAGINA (batch B1/B2)
   + STILI DEI WIDGET ELEMENTOR CUSTOM "BOINT"

   Tutto quello che sta qui sotto viveva come `custom_css` nelle
   page settings Elementor delle singole pagine. Essendo pezzi
   del design system (e non rifiniture di una pagina sola) e'
   stato promosso nel tema e RIMOSSO dalle pagine.

   NB Elementor Optimized DOM: nel frontend NON esiste
   `.elementor-widget-container`, quindi nessun selettore qui
   sotto lo usa.
   ========================================================= */

/* ---------------------------------------------------------
   23.1 · Reset del WIDGET Button quando porta .btn-cta
   Il wrapper del widget eredita bordo/padding dal kit: lo
   azzeriamo e lasciamo che sia l'<a>.elementor-button (gia'
   stilato in sez. 4) a disegnare il bottone.
   Era duplicato in tutte e 18 le pagine B1/B2.
   --------------------------------------------------------- */
.elementor-widget-button.btn-cta,
.elementor-widget-button.btn-cta--white {
	display: block !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.elementor-widget-button.btn-cta .elementor-button,
.elementor-widget-button.btn-cta--white .elementor-button {
	display: inline-flex !important;
	width: auto !important;
}
/* Il gemello .cbi-partner-strip .elementor-button-wrapper e' gia' in 22.7 */
.cbi-block-text-centered .elementor-button-wrapper { text-align: center; }

/* ---------------------------------------------------------
   23.2 · .cbi-eyebrow — occhiello sopra un titolo
   (era in partnership / donazioni / contatti, con due misure
   leggermente diverse: unificato su .72rem)
   --------------------------------------------------------- */
.cbi-eyebrow {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cbi-blue-700);
	margin: 0 0 2px;
}

/* ---------------------------------------------------------
   23.3 · .cbi-tag-bar / .cbi-tag — chip normativa
   Base = chip su fondo teal-50, allineate a sinistra (variante
   di "Cosa facciamo" / "Supporto e orientamento"). Le pagine
   che le vogliono bianche e centrate su fondo azzurro tengono
   nel proprio custom_css solo le due righe di override.
   --------------------------------------------------------- */
.cbi-tag-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cbi-tag {
	display: inline-block;
	background: var(--cbi-teal-50);
	color: var(--cbi-blue-700);
	padding: 9px 16px;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.1;
	border-radius: 999px;
}

/* ---------------------------------------------------------
   23.4 · .cbi-value-num — numero ordinale nelle card valori
   --------------------------------------------------------- */
.cbi-value-num .elementor-heading-title {
	font-family: 'Athena', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 44px;
	line-height: 1;
	color: rgba(41, 66, 146, .22) !important;
}

/* ---------------------------------------------------------
   23.5 · .cbi-iter-* — iter numerato a fasi
   (era solo in "Come accedere"; e' un componente di sistema,
   riusabile su qualunque pagina di processo)
   --------------------------------------------------------- */
.cbi-iter-num .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 16px 16px 16px 0;
	background: var(--cbi-gradient);
	color: #fff !important;
	font-family: 'Athena', Georgia, serif !important;
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
}
.cbi-iter-body {
	border-left: 2px solid rgba(41, 66, 146, .18);
	padding-left: 28px !important;
	padding-bottom: 34px !important;
	margin-left: -28px;
}
.cbi-iter-row:last-of-type .cbi-iter-body { border-left-color: transparent; }
.cbi-iter-kicker .elementor-heading-title {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cbi-blue-700);
}
.cbi-iter-body h4.elementor-heading-title {
	font-family: var(--font-sans) !important;
	font-weight: 300 !important;
	font-size: 26px;
	line-height: 1.15;
	color: var(--cbi-teal-brand) !important;
	margin: 6px 0 8px;
}
.cbi-iter-body .elementor-text-editor,
.cbi-iter-body .elementor-text-editor p {
	color: var(--cbi-grey);
	font-size: 1.0625rem;
}
@media (max-width: 767px) {
	.cbi-iter-body { border-left: 0; padding-left: 0 !important; margin-left: 0; }
}

/* ---------------------------------------------------------
   23.6 · .cbi-doc-list — elenco documenti scaricabili
   --------------------------------------------------------- */
.cbi-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.cbi-doc-list li {
	background: #fff;
	border-radius: 16px 16px 16px 0;
	box-shadow: 0 2px 10px rgba(15, 23, 48, .06);
	padding: 18px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.cbi-doc-list__name {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--cbi-teal-brand);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.2;
}
.cbi-doc-list__name svg { flex: 0 0 auto; color: var(--cbi-blue-700); }
.cbi-doc-list__dl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cbi-blue-700);
	text-decoration: none;
	border: 1px solid rgba(41, 66, 146, .3);
	border-radius: 999px;
	padding: 9px 18px;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.cbi-doc-list__dl:hover { background: var(--cbi-blue-700); color: #fff; text-decoration: none; }

/* ---------------------------------------------------------
   23.7 · .cbi-info-list — coppie etichetta/valore in card
   --------------------------------------------------------- */
.cbi-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.cbi-info-list li { padding: 14px 0; border-top: 1px solid rgba(41, 66, 146, .14); }
.cbi-info-list li:first-child { border-top: 0; padding-top: 0; }
.cbi-info-list b {
	display: block;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-blue-700);
	margin-bottom: 3px;
}
.cbi-info-list a { color: var(--cbi-teal-brand); text-decoration: none; font-weight: 600; }
.cbi-info-list a:hover { color: var(--cbi-blue-700); text-decoration: underline; }

/* ---------------------------------------------------------
   23.8 · .cbi-form-card — card bianca che ospita un form
   --------------------------------------------------------- */
.cbi-form-card {
	background: #fff !important;
	border-radius: 20px 0 20px 20px;
	padding: 36px !important;
	box-shadow: 0 2px 12px rgba(15, 23, 48, .07);
}
.cbi-form-card .cbi-form-section-title {
	font-family: 'Athena', Georgia, serif;
	font-weight: 700;
	color: var(--cbi-blue-700);
	font-size: 1.125rem;
	margin: 0 0 4px;
}
.cbi-form-card .cbi-form-section-title.cbi-mt {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(41, 66, 146, .14);
}
@media (max-width: 767px) { .cbi-form-card { padding: 24px !important; } }

/* ---------------------------------------------------------
   23.9 · .cbi-contact-card — il valore e' un dato, non un
   titolo di sezione: scende di corpo e va a capo se lungo.
   --------------------------------------------------------- */
.cbi-contact-card .cbi-icon-card__title .elementor-heading-title {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	line-height: 1.2;
	word-break: break-word;
}

/* ---------------------------------------------------------
   23.10 · .cbi-newsletter-form — form Elementor su una riga
   NB la riga flex va sul .elementor-form-fields-wrapper: i
   field-group sono figli di quello, non di .elementor-form.
   --------------------------------------------------------- */
.cbi-newsletter-form .elementor-form-fields-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}
.cbi-newsletter-form .elementor-field-group {
	flex: 1 1 240px;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cbi-newsletter-form .elementor-field-type-submit { flex: 0 0 auto; width: auto !important; }
.cbi-newsletter-form input[type="email"] {
	border-radius: 10px !important;
	border: 0 !important;
	padding: 14px 16px !important;
	width: 100%;
}
/* Dentro la banda gradiente il submit si inverte (bianco su blu). */
.cbi-band .cbi-newsletter-form .elementor-button[type="submit"] {
	background-color: #fff !important;
	color: #294292 !important;
	border-radius: 10px !important;
}
.cbi-band .cbi-newsletter-form .elementor-button[type="submit"]:hover {
	background-color: #0091AA !important;
	color: #fff !important;
}
.cbi-band .cbi-newsletter-form .elementor-button[type="submit"] .elementor-button-text { color: inherit !important; }

/* ---------------------------------------------------------
   23.11 · .cbi-admin-hint — avviso di configurazione mostrato
   SOLO alla redazione (current_user_can('edit_posts')).
   Il pubblico anonimo non lo vede mai: il guard e' in PHP.
   --------------------------------------------------------- */
.cbi-admin-hint {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 12px 12px 12px 0;
	background: #FFF6E0;
	border: 1px dashed rgba(41, 66, 146, .35);
	color: var(--cbi-blue-700);
	font-size: .85rem;
	line-height: 1.45;
}

/* =========================================================
   23b. WIDGET ELEMENTOR CUSTOM — vedi inc/elementor-widgets/
   ========================================================= */

/* ---------------------------------------------------------
   23b.1 · Widget `boint-faq` — accordion accessibile.
   Progressive enhancement: finche' il JS non ha marcato il
   contenitore con data-boint-accordion-ready, i pannelli
   restano APERTI (niente JS = contenuto comunque leggibile).
   --------------------------------------------------------- */
.cbi-accordion {
	max-width: 1040px;
	margin: 0 auto;
	display: grid;
	gap: 14px;
	text-align: left;
}
.cbi-accordion__item {
	background: #fff;
	border-radius: 16px 16px 16px 0;
	box-shadow: 0 2px 10px rgba(15, 23, 48, .06);
	border-left: 3px solid transparent;
	overflow: hidden;
}
.cbi-accordion.is-animated .cbi-accordion__item { transition: border-color var(--transition-base); }
.cbi-accordion__item.is-open { border-left-color: var(--cbi-teal-500); }

.cbi-accordion__head {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
.cbi-accordion__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
	padding: 20px 26px;
	background: #fff;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 21px;
	line-height: 1.25;
	color: var(--cbi-teal-brand);
	transition: color var(--transition-fast);
}
.cbi-accordion__btn:hover { color: var(--cbi-blue-700); }
.cbi-accordion__btn:focus-visible { outline: 2px solid var(--cbi-blue-700); outline-offset: -4px; }
.cbi-accordion__item.is-open .cbi-accordion__btn { color: var(--cbi-blue-700); font-weight: 600; }
.cbi-accordion__title { flex: 1 1 auto; }

/* Icona + / − disegnata con due barre (niente Font Awesome). */
.cbi-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--cbi-blue-700);
}
.cbi-accordion__icon::before,
.cbi-accordion__icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
	border-radius: 2px;
	transform: translate(-50%, -50%);
}
.cbi-accordion__icon::before { width: 16px; height: 2px; }
.cbi-accordion__icon::after  { width: 2px;  height: 16px; }
.cbi-accordion.is-animated .cbi-accordion__icon::after { transition: transform .25s ease, opacity .25s ease; }
.cbi-accordion__item.is-open .cbi-accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.cbi-accordion__panel {
	display: grid;
	grid-template-rows: 1fr;
	visibility: visible;
}
.cbi-accordion.is-animated .cbi-accordion__panel {
	transition: grid-template-rows .3s ease, visibility 0s;
}
.cbi-accordion[data-boint-accordion-ready="1"] .cbi-accordion__item:not(.is-open) .cbi-accordion__panel {
	grid-template-rows: 0fr;
	visibility: hidden;
}
.cbi-accordion.is-animated .cbi-accordion__item:not(.is-open) .cbi-accordion__panel {
	transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
/* Il padding sta su __content, NON su __inner: se stesse su __inner il
   box collassato resterebbe alto quanto il padding (24px) invece di 0. */
.cbi-accordion__inner { overflow: hidden; min-height: 0; }
.cbi-accordion__content {
	padding: 0 26px 24px;
	color: var(--cbi-grey);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.cbi-accordion__content > *:first-child { margin-top: 0; }
.cbi-accordion__content > *:last-child  { margin-bottom: 0; }
.cbi-accordion__content a { color: var(--cbi-teal-brand); }
.cbi-accordion__content a:hover { color: var(--cbi-blue-700); }

@media (max-width: 600px) {
	.cbi-accordion__btn     { padding: 16px 18px; font-size: 19px; }
	.cbi-accordion__content { padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.cbi-accordion.is-animated .cbi-accordion__panel,
	.cbi-accordion.is-animated .cbi-accordion__item:not(.is-open) .cbi-accordion__panel,
	.cbi-accordion.is-animated .cbi-accordion__icon::after { transition: none; }
}

/* ---------------------------------------------------------
   23b.2 · Widget `boint-glossario` — ricerca live + filtro
   alfabetico (le lettere FILTRANO, non fanno scroll).
   --------------------------------------------------------- */
.cbi-gloss {
	max-width: 980px;
	margin: 0 auto;
	text-align: left;
	display: grid;
	gap: 28px;
}
.cbi-gloss__tools { display: grid; gap: 16px; justify-items: center; }

.cbi-gloss__search { width: 100%; max-width: 460px; }
.cbi-gloss__input {
	width: 100%;
	border: 1px solid var(--cbi-ink-150);
	border-radius: 999px;
	padding: 13px 46px 13px 22px;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--cbi-ink-900);
	background-color: #fff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%23294292' stroke-width='1.7'/><path d='M12.8 12.8L17 17' stroke='%23294292' stroke-width='1.7' stroke-linecap='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
	box-shadow: var(--shadow-sm);
}
.cbi-gloss__input:focus {
	outline: 2px solid var(--cbi-blue-700);
	outline-offset: 1px;
	border-color: var(--cbi-blue-700);
}

.cbi-gloss__nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cbi-gloss__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	border: 0;
	border-radius: 999px;
	background: var(--cbi-teal-50);
	color: var(--cbi-blue-700);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.cbi-gloss__letter:hover:not(:disabled) { background: var(--cbi-blue-700); color: #fff; }
.cbi-gloss__letter:focus-visible { outline: 2px solid var(--cbi-blue-700); outline-offset: 2px; }
.cbi-gloss__letter.is-active { background: var(--cbi-blue-700); color: #fff; }
.cbi-gloss__letter.is-empty,
.cbi-gloss__letter:disabled {
	background: var(--cbi-ink-100);
	color: var(--cbi-grey);
	cursor: default;
	opacity: .6;
}

.cbi-gloss__list { margin: 0; display: grid; gap: 22px; }
.cbi-gloss__entry {
	display: grid;
	gap: 4px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(0, 145, 170, .16);
}
.cbi-gloss__entry[hidden] { display: none; }
.cbi-gloss__term {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	color: var(--cbi-teal-brand);
}
.cbi-gloss__def {
	margin: 0;
	color: var(--cbi-grey);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.cbi-gloss__def p { margin: 0 0 8px; }
.cbi-gloss__def p:last-of-type { margin-bottom: 0; }
.cbi-gloss__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cbi-blue-700);
	text-decoration: none;
	border-bottom: 1px solid rgba(41, 66, 146, .35);
	padding-bottom: 2px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cbi-gloss__more:hover {
	color: var(--cbi-teal-500);
	border-bottom-color: var(--cbi-teal-500);
	text-decoration: none;
}
.cbi-gloss__empty {
	margin: 0;
	text-align: center;
	color: var(--cbi-grey);
	font-size: 1.0625rem;
}

/* ---------------------------------------------------------
   23b.3 · Widget `boint-dona-importi` — card importo petalo.
   Senza URL base le card restano <span> non cliccabili.
   --------------------------------------------------------- */
.cbi-dona-importi { margin-top: 18px; width: 100%; }
.cbi-dona-importi__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cbi-dona-amount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 68px;
	min-height: 48px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid rgba(41, 66, 146, .28);
	border-radius: 20px 0 20px 20px;
	color: var(--cbi-blue-700);
	font-family: 'Athena', Georgia, serif;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.cbi-dona-amount__cur { font-size: .78em; opacity: .85; margin-right: 1px; }
a.cbi-dona-amount:hover {
	background: var(--cbi-blue-700);
	border-color: var(--cbi-blue-700);
	color: #fff;
	text-decoration: none;
}
a.cbi-dona-amount:focus-visible { outline: 2px solid var(--cbi-teal-500); outline-offset: 2px; }
.cbi-dona-amount--other {
	font-family: var(--font-sans);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 8px 20px;
}
/* Card statiche (URL non ancora configurato): nessun hover. */
.cbi-dona-importi--static .cbi-dona-amount { cursor: default; }

/* ---------------------------------------------------------
   23b.4 · Documenti — shortcode [boint_documenti] e widget
   Elementor `boint-documenti` (inc/documenti.php).
   Riproduce valore per valore la tabella scritta a mano di
   Amministrazione trasparente (CSS di pagina Elementor, post 37):
   filtri con chevron, card bianca 20/0/20/20, testata grigia,
   righe anno, badge "PDF", titolo teal 300, "↓ Apri" blu, riga
   "… e precedenti". Il markup porta anche le vecchie classi
   (.cbi-doc-table, .cbi-pdf-icon…): sulla pagina migrata le due
   regole coincidono. Prefisso `.boint-docs`: batte le regole
   `.entry-content a/table/td` quando lo shortcode sta in una
   pagina senza Elementor.
   Spaziature dell'elenco completo = quelle delle sezioni
   Elementor originali (filtri→tabella 54px, tabella→riga
   precedenti 38px); nelle parti separate le danno le sezioni.
   --------------------------------------------------------- */
.boint-docs { width: 100%; }
.boint-docs [hidden] { display: none !important; }

/* Filtri */
.boint-docs .boint-docs__filters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: end;
	margin: 0 0 54px;
}
.boint-docs .boint-docs__label {
	display: block;
	margin: 0 0 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbi-blue-700, #294292);
}
.boint-docs .boint-docs__select {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 12px 36px 12px 16px;
	border: 1px solid var(--cbi-ink-150, #e3e6ee);
	border-radius: 10px;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%23294292' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14px center;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 48, .06));
	color: var(--cbi-ink-900, #0f1730);
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.boint-docs .boint-docs__select:focus {
	outline: 2px solid var(--cbi-blue-700, #294292);
	outline-offset: 1px;
	border-color: var(--cbi-blue-700, #294292);
}
/* Il bottone serve solo senza JS (form GET): col JS i filtri sono istantanei. */
.boint-docs .boint-docs__submit { justify-self: start; }
.boint-docs--tabella .boint-docs__form { margin: 0 0 16px; }
.boint-docs.is-ready .boint-docs__submit,
.boint-docs.is-ready .boint-docs__form { display: none; }

/* Tabella */
.boint-docs .boint-docs__wrap {
	background: #fff;
	border-radius: 20px 0 20px 20px;
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 48, .06));
}
.boint-docs .boint-docs__table {
	width: 100%;
	/* -1px: il bordo dell'ultima riga visibile finisce sotto l'overflow
	   della card, come nella tabella originale (una sola tbody). */
	margin: 0 0 -1px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: .95rem;
}
.boint-docs .boint-docs__table th,
.boint-docs .boint-docs__table td {
	border: 0;
	background: none;
}
.boint-docs .boint-docs__table thead th {
	padding: 14px 20px;
	background: var(--cbi-ink-100, #eef0f6);
	color: var(--cbi-blue-700, #294292);
	text-align: left;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.boint-docs .boint-docs__table thead th:last-child { text-align: right; }
.boint-docs .boint-docs__table .boint-docs__year-row th {
	padding: 9px 20px;
	border-bottom: 1px solid var(--cbi-ink-150, #e3e6ee);
	background: rgba(41, 66, 146, .06);
	color: var(--cbi-blue-700, #294292);
	text-align: left;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
/* Specificita' come nell'originale: la regola generica delle celle perde
   contro quelle di nome, anno, area e "Apri" (colori e padding). */
.boint-docs .boint-docs__row td {
	padding: 15px 20px;
	border-bottom: 1px solid var(--cbi-ink-150, #e3e6ee);
	color: var(--cbi-ink-900, #0f1730);
	vertical-align: middle;
}
.boint-docs .boint-docs__table .boint-docs__name {
	font-family: var(--font-sans);
	font-size: 1.15rem;
	font-weight: 300;
	color: var(--cbi-teal-brand, #0091AA);
}
.boint-docs .boint-docs__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}
.boint-docs .boint-docs__link:hover,
.boint-docs .boint-docs__link:focus-visible {
	color: var(--cbi-blue-700, #294292);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.boint-docs .boint-docs__link:focus-visible { outline: 2px solid var(--cbi-teal-500, #0091AA); outline-offset: 3px; border-radius: 4px; }
.boint-docs .boint-docs__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 7px 9px;
	border-radius: 8px 8px 8px 0;
	background: var(--cbi-teal-50, #e4f1fb);
	color: var(--cbi-teal-500, #0091AA);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}
.boint-docs .boint-docs__desc {
	margin: 4px 0 0 51px; /* sotto il titolo: badge 39px + spazio 12px */
	max-width: 70ch;
	color: var(--cbi-grey, #878787);
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.45;
}
.boint-docs .boint-docs__table .boint-docs__year,
.boint-docs .boint-docs__table .boint-docs__cat {
	color: var(--cbi-grey, #878787);
	font-size: .9rem;
}
.boint-docs .boint-docs__table .boint-docs__open {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}
.boint-docs .boint-docs__open a {
	color: var(--cbi-blue-700, #294292);
	text-decoration: none;
}
.boint-docs .boint-docs__open a:hover { color: var(--cbi-teal-500, #0091AA); text-decoration: underline; }

.boint-docs .boint-docs__empty {
	margin: 0;
	padding: 28px 24px;
	background: #fff;
	border-radius: 20px 0 20px 20px;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 48, .06));
	color: var(--cbi-grey, #878787);
	text-align: center;
}

/* Riga "{anno} e precedenti — clicca per espandere →" */
.boint-docs .boint-docs__more-wrap {
	margin: 38px 0 0;
	padding: 18px 0;
	color: var(--cbi-grey, #878787);
	font-size: .95rem;
	text-align: center;
}
.boint-docs--precedenti .boint-docs__more-wrap { margin-top: 0; }
.boint-docs .boint-docs__more {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--cbi-blue-700, #294292);
	font: inherit;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
.boint-docs .boint-docs__more:hover { background: none; color: var(--cbi-teal-500, #0091AA); }
.boint-docs .boint-docs__more:focus-visible { outline: 2px solid var(--cbi-teal-500, #0091AA); outline-offset: 2px; border-radius: 4px; }
.boint-docs .boint-docs__more-text::after { content: " \2192"; }
.boint-docs .boint-docs__more[aria-expanded="true"] .boint-docs__more-text::after { content: " \2191"; }

@media (max-width: 768px) {
	.boint-docs .boint-docs__filters { grid-template-columns: 1fr; }
	.boint-docs .boint-docs__table thead { display: none; }
	.boint-docs .boint-docs__table tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--cbi-ink-150, #e3e6ee);
	}
	.boint-docs .boint-docs__table tr.boint-docs__year-row { padding: 8px 20px; }
	.boint-docs .boint-docs__table .boint-docs__year-row th { display: block; border: 0; }
	.boint-docs .boint-docs__row td {
		display: block;
		padding: 4px 20px;
		border: 0;
	}
	.boint-docs .boint-docs__table .boint-docs__open { padding-top: 8px; text-align: left; }
}

/* ---------------------------------------------------------
   23b.5 · Icone Figma nei widget Icona di Elementor
   Strumenti → BOINT: Icone Figma (inc/admin-icone-figma.php)
   le imposta come "SVG caricato"; i file hanno sulla radice la
   classe `.boint-icon--box` (icona completa: box petalo + disegno)
   o `.boint-icon--glifo` (solo disegno, in currentColor).
   Il box e' gia' nell'SVG: i contenitori che lo disegnavano via CSS
   (card icona, pill delle card servizio) lo tolgono e lasciano
   all'SVG misura, colori e angolo squadrato. Il glifo invece eredita
   box e colore del contesto, come le icone Font Awesome di prima.
   --------------------------------------------------------- */
.elementor-icon:has(> svg.boint-icon--box),
.cbi-icon-card .cbi-icon-card__icon .elementor-icon:has(> svg.boint-icon--box),
.cbi-service-card .cbi-service-card__pill .elementor-icon:has(> svg.boint-icon--box) {
	display: inline-flex;
	width: auto;
	height: auto;
	padding: 0;
	background: none !important;
	border-radius: 0;
	box-shadow: none;
}
.elementor-icon > svg.boint-icon--box {
	display: block;
	width: 1em;
	height: 1em;
	max-width: none;
}
/* Card con icona e pill delle card servizio: box Figma a 70px, come il box
   area dell'hero. L'ombra della pill segue il raggio del box (42/295). */
.cbi-icon-card .cbi-icon-card__icon .elementor-icon > svg.boint-icon--box,
.cbi-service-card .cbi-service-card__pill .elementor-icon > svg.boint-icon--box {
	width: 70px;
	height: 70px;
}
.cbi-service-card .cbi-service-card__pill .elementor-icon:has(> svg.boint-icon--box) {
	border-radius: 10px 0 10px 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}
/* Card girata (tinta piena): anello bianco per staccare il box dal fondo. */
.cbi-service-card:hover .cbi-service-card__pill .elementor-icon:has(> svg.boint-icon--box),
.cbi-service-card:focus-within .cbi-service-card__pill .elementor-icon:has(> svg.boint-icon--box) {
	background: none !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 12px rgba(0, 0, 0, .14);
}
.elementor-icon-list-icon svg.boint-icon--glifo { width: 1.2em; height: 1.2em; }

/* Elenchi documenti scritti a mano nei widget HTML (.cbi-doc-list, es.
   "Centri e laboratori: come accedere"): l'icona file generica del markup
   lascia il posto all'icona PDF del set Figma, la stessa del widget
   Documenti. Solo CSS: il contenuto delle pagine non cambia. */
.cbi-doc-list .cbi-doc-list__name > svg:first-child { display: none; }
.cbi-doc-list .cbi-doc-list__name::before {
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: url("assets/icons/box/pdf-chiaro.svg") center / contain no-repeat;
}
@media (max-width: 768px) {
	.cbi-doc-list .cbi-doc-list__name::before { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------
   23b.6 · Équipe — shortcode [boint_equipe] e widget Elementor
   `boint-equipe` (inc/equipe.php).
   Stessa resa della sezione "Personale" composta a mano con
   .cbi-block-photocards / .cbi-photo-card (sez. 22b.7): griglia
   4 colonne (2 sotto i 1024px, 1 sotto i 600px), foto con angoli
   16px, nome teal 300 24px, ruolo maiuscolo spaziato, testo
   grigio 17px. Margine -15px sulla griglia + padding 15px sulle
   card = il padding delle colonne Elementor originali: bordi,
   spazi tra le card e larghezza delle foto restano identici.
   --------------------------------------------------------- */
.boint-equipe { width: 100%; }
.boint-equipe .boint-equipe__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;
	align-items: start;
	margin: -15px;
	padding: 0;
	list-style: none;
}
.boint-equipe--cols-3 .boint-equipe__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.boint-equipe--cols-2 .boint-equipe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
	.boint-equipe .boint-equipe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 600px) {
	.boint-equipe .boint-equipe__grid { grid-template-columns: minmax(0, 1fr); }
}
.boint-equipe .boint-equipe__card {
	margin: 0;
	padding: 15px;
	list-style: none;
}
.boint-equipe .boint-equipe__card::before,
.boint-equipe .boint-equipe__card::marker { content: none; }
.boint-equipe .boint-equipe__foto {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 16px;
}
.boint-equipe .boint-equipe__foto--vuota {
	aspect-ratio: 1709 / 2560; /* come le foto del personale */
	background: var(--cbi-ink-100, #f4f5f8) url("assets/images/marchio.svg") center / 34% no-repeat;
}
.boint-equipe .boint-equipe__nome {
	margin: 0;
	padding: 0;
	/* !important: nei contenuti Elementor i titoli h* sono forzati in Athena
	   (sez. Elementor "Headings"); il nome resta Nunito Sans come prima. */
	font-family: var(--font-sans) !important;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cbi-teal-brand, #0091AA);
}
.boint-equipe .boint-equipe__ruolo,
.boint-equipe .boint-equipe__desc {
	margin: 0;
	color: var(--cbi-grey, #878787);
	font-size: 1.0625rem;
	line-height: 1.55;
}
.boint-equipe .boint-equipe__ruolo {
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.boint-equipe .boint-equipe__desc { font-weight: 400; }

/* ---------------------------------------------------------
   23b.7 · Documenti di struttura — sezione "Documenti" in
   fondo alla pagina di un centro/laboratorio/progetto
   (inc/documenti-strutture.php).
   La tabella e' la stessa dell'Amministrazione trasparente
   (sez. 23b.4): qui c'e' solo la cornice. La larghezza utile
   e' quella delle sezioni Elementor della pagina: il PHP passa
   --boint-struttura-max dal kit di Elementor (impostazione
   "Larghezza contenuto"), il container ci aggiunge il suo
   padding. Senza Elementor resta il container del tema
   (1552 + 24*2 = --container-max).
   --------------------------------------------------------- */
.boint-docs-struttura > .container {
	max-width: calc(var(--boint-struttura-max, 1552px) + var(--container-pad, 24px) * 2);
}
.boint-docs-struttura .boint-docs-struttura__titolo { margin: 0 0 24px; }
.boint-docs-struttura .cbi-admin-hint { margin-top: 0; }
/* Il riquadro dei documenti sta in alto, accanto al modulo: se la sezione
   Elementor centra le colonne (`elementor-section-items-middle`, come su
   qualche pagina scritta a mano) la card piu' corta finirebbe a meta'
   altezza. Vale per tutte le colonne di quella riga, cosi' i due riquadri
   partono sempre insieme, come nelle sezioni dei template. */
.elementor-container:has(.elementor-widget-boint-documenti-struttura) > .elementor-column {
	align-self: flex-start;
}

/* Aria tra il modulo "Contattaci" e il riquadro: le sezioni dei template
   hanno gia' il gap "esteso" (30px), quelle senza gap impostato no. */
.elementor-column-gap-default:has(.elementor-widget-boint-documenti-struttura) > .elementor-column,
.elementor-column-gap-no:has(.elementor-widget-boint-documenti-struttura) > .elementor-column {
	padding-inline: 15px;
}

/* Senza cornice (shortcode, o pagina dell'editor classico che ha gia'
   sezione e container del tema): solo lo stacco dal contenuto sopra. */
div.boint-docs-struttura { width: 100%; margin-top: clamp(32px, 4vw, 56px); }
/* Dentro la card "Scarica i materiali" (widget Elementor "Documenti della
   struttura") il blocco e' gia' al suo posto: nessun margine in piu'. */
.info-card-box div.boint-docs-struttura,
.elementor-widget-boint-documenti-struttura div.boint-docs-struttura { margin-top: 0; }

/* Variante "card": mezza pagina, dentro un riquadro bianco che ha gia'
   il suo titolo. Via la cornice della tabella (sarebbe una card dentro una
   card), spaziature piu' strette e, quando il riquadro si fa stretto,
   l'impaginazione a blocchi del mobile — decisa sulla larghezza del
   riquadro (@container), non della finestra: nel riquadro accanto al
   modulo la tabella si stringe gia' su tablet. */
.boint-docs--card { container-type: inline-size; }
.boint-docs--card .boint-docs__wrap {
	background: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.boint-docs--card .boint-docs__table { font-size: .9rem; }
.boint-docs--card .boint-docs__table thead th { padding: 10px 12px; }
.boint-docs--card .boint-docs__table .boint-docs__year-row th { padding: 8px 12px; }
.boint-docs--card .boint-docs__row td { padding: 12px; }
.boint-docs--card .boint-docs__title { font-size: 1.0625rem; }
.boint-docs--card .boint-docs__desc { margin-top: 2px; font-size: .85rem; }
.boint-docs__empty--struttura {
	margin: 0;
	color: var(--cbi-ink-600, #5a6275);
	font-size: .95rem;
	line-height: 1.55;
}

@container (max-width: 560px) {
	.boint-docs--card .boint-docs__table thead { display: none; }
	.boint-docs--card .boint-docs__table tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--cbi-ink-150, #e3e6ee);
	}
	.boint-docs--card .boint-docs__table tr.boint-docs__year-row { padding: 8px 12px; }
	.boint-docs--card .boint-docs__table .boint-docs__year-row th { display: block; border: 0; }
	.boint-docs--card .boint-docs__row td {
		display: block;
		padding: 2px 12px;
		border: 0;
	}
	.boint-docs--card .boint-docs__table .boint-docs__open { padding-top: 8px; text-align: left; }
}

/* =========================================================
   23c. PAGINE LEGALI — informativa privacy & co.
   Widget Testo di Elementor con classe `cbi-legal`
   (inc/admin-privacy.php crea cosi' /privacy-policy/).
   Colonna di lettura stretta anche quando la sezione e'
   larga, titoli di paragrafo blu, tabelle leggibili che
   scorrono da sole sui telefoni.
   ========================================================= */
.cbi-legal {
	max-width: 74ch;
	color: var(--cbi-ink-800, #1d2536);
	font-size: 1.0625rem;
	line-height: 1.7;
}
.cbi-legal p { margin: 0 0 16px; }
.cbi-legal h2 {
	margin: 40px 0 12px;
	color: var(--cbi-blue-700, #294292);
	font-size: clamp(1.25rem, .6vw + 1.1rem, 1.5rem);
	line-height: 1.25;
}
.cbi-legal h2:first-child { margin-top: 0; }
.cbi-legal h3 {
	margin: 28px 0 10px;
	color: var(--cbi-blue-700, #294292);
	font-size: 1.125rem;
}
.cbi-legal ul { margin: 0 0 16px; padding-left: 22px; }
.cbi-legal li { margin: 0 0 8px; }
.cbi-legal a { color: var(--cbi-teal-700, #007c90); text-decoration: underline; }
.cbi-legal a:hover { color: var(--cbi-blue-700, #294292); }
.cbi-legal .cbi-legal__data {
	margin: 0 0 28px;
	color: var(--cbi-ink-600, #5a6275);
	font-size: .9rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Tabelle: possono essere piu' larghe della colonna di testo. */
.cbi-legal .cbi-legal__tabella {
	max-width: min(100%, 1000px);
	margin: 0 0 24px;
	padding: 0;
	overflow-x: auto;
	background: #fff;
	border-radius: 16px 0 16px 16px;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 48, .06));
}
.cbi-legal .cbi-legal__tabella table {
	width: 100%;
	min-width: 540px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .95rem;
}
.cbi-legal .cbi-legal__tabella th,
.cbi-legal .cbi-legal__tabella td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--cbi-ink-150, #e3e6ee);
	text-align: left;
	vertical-align: top;
}
.cbi-legal .cbi-legal__tabella thead th {
	background: var(--cbi-ink-100, #eef0f6);
	color: var(--cbi-blue-700, #294292);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cbi-legal .cbi-legal__tabella tbody tr:last-child td { border-bottom: 0; }