@import url("6+.css");

.page-title-parallax { --cnvs-page-title-padding: 2rem; }

/* Navigazione secondaria stagione */
.stagione-nav { margin: 0; }
.stagione-nav-filter { justify-content: center; }
.stagione-nav-filter li a,
.stagione-nav-filter li.activeFilter a { border-color: #D8A21A !important; }
.stagione-nav-filter li.activeFilter a,
.stagione-nav-filter li.activeFilter a:hover { background-color: #D8A21A !important; color: #000 !important; }

/* Foto float sx con testo che scorre attorno */
.cb-float-img { display:block; width:100%; margin-bottom:1rem; }
@media (min-width: 768px) {
  .cb-float-img { width:50%; float:left; margin-right:1.5rem; margin-bottom:0.5rem; }
  .cb-float-img.cb-float-sm { width:33.333%; }
}

/* Gallery masonry quadrata */
.masonry-thumbs .grid-item img,
.masonry-thumbs a img { aspect-ratio:1/1; object-fit:cover; width:100%; display:block; }
/* CSS FONTS */
/*@font-face {
  font-family: 'HighTide';
  src:  url('fonts/HighTide.otf')  format('opentype'), url('fonts/HighTide.woff') format('woff'), url('fonts/HighTide.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
.HighTide {
	 font-family: 'HighTide';
	 color: #816252;
	 font-size: 55px;
}*/

.barlow-thin {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.barlow-extralight {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-bold {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-extrabold {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.barlow-thin-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.barlow-extralight-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.barlow-light-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.barlow-regular-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-medium-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-semibold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.barlow-bold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.barlow-extrabold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.barlow-black-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: italic;
}



/* CSS UNIVERSALI */
.solodesktop {
	display: inline;
	}
.solomobile {
	display: none;
	}
	
#logo {
		padding: 8px 2px;
	}
#slide-video {
		 width: 100%;
		 margin-top: -40px;
	}	
.slide-prodotto {
		 margin-top: -30px;
	}	
.header-extras li .he-text span {
		display: block;
		font-weight: 600;
		color: #ffbb00;
	}	
.flip-card-front::after {
		opacity: 0;
	}
/* indice+box: flip card quadrate */
.flip-card-square-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.flip-card-square-wrap .flip-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.flip-card-square-wrap .flip-card-front,
.flip-card-square-wrap .flip-card-back {
  height: 100%;
}
/* flipcard con foto sul fronte: altezza del formato delle img1 (default template: 280px) */
.flip-card-foto .flip-card-front,
.flip-card-foto .flip-card-back {
  height: 167px;
}
.flip-card-back::after {
		opacity: 0.5;
	}
.footer-logo {
		margin-bottom: 0px;
	}
/* ---- Bottoni di pagamento ----
   I due bottoni sono gemelli: stessa struttura, stessa altezza delle icone,
   contenuto bianco. Cambia solo il colore di fondo, che per Satispay è il loro.
   --icona regola l'altezza dei marchi in un punto solo.
   Le icone Font Awesome disegnano il glifo più piccolo della dimensione del
   carattere, mentre un SVG occupa tutta l'altezza dichiarata: senza compensare,
   il logo Satispay risultava più basso. Il fattore 0.9 non è a occhio — è
   misurato su uno screenshot: con quello entrambe le icone vengono 27 px. */
.btn-pagamento {
		--h-icona: 15px;
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		color: #fff;
	}
.btn-pagamento:hover { color: #fff; }
.btn-pagamento .marchi {
		display: inline-flex;
		align-items: center;
		gap: .35rem;
	}
/* Il glifo Font Awesome è alto circa 0.89 volte la dimensione del carattere
   (misurato, non stimato): si divide per quel fattore così viene alto quanto
   l'SVG, che invece occupa esattamente l'altezza dichiarata. */
.btn-pagamento .marchi i {
		font-size: calc(var(--h-icona) / 0.89);
		line-height: 1;
		display: block;
	}
.btn-pagamento .logo-pagamento {
		height: var(--h-icona);
		width: auto;
		display: block;
	}
/* Carta: fondo scuro, perché i marchi e la scritta sono bianchi. */
.button.button-carta {
		--cnvs-btn-color: #17160f;
	}
.button.button-carta:hover {
		--cnvs-btn-color: #3a3728;
	}
/* Satispay: il rosso del marchio (#FF3D00) fa parte della loro identità. */
.button.button-satispay {
		--cnvs-btn-color: #FF3D00;
	}
.button.button-satispay:hover {
		--cnvs-btn-color: #c72f00;
	}

/* Footer: elenco Informazioni con icona a sinistra e testo allineato */
.footer-info li {
		display: flex;
		gap: 0.6rem;
		margin-bottom: 0.5rem;
		line-height: 1.5;
	}
.footer-info li i {
		flex: 0 0 18px;
		margin-top: 0.2rem;
		text-align: center;
		opacity: 0.75;
	}
/* Voci legali separate da una barra, come nel sito storico */
#copyrights .copyright-links a {
		border-bottom: 0;
	}
#copyrights .copyright-links a:not(:last-child) {
		border-right: 1px solid rgba(255, 255, 255, 0.25);
		padding-right: 0.75rem;
		margin-right: 0.4rem;
	}
.btn-primary {
		--bs-btn-color: #000;
		--bs-btn-bg: #D8A21A;
		--bs-btn-border-color: #D8A21A;
		--bs-btn-hover-color: #fff;
		--bs-btn-hover-bg: #6c5610;
		--bs-btn-hover-border-color: #0a58ca;
		--bs-btn-focus-shadow-rgb: 49, 132, 253;
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: #0a58ca;
		--bs-btn-active-border-color: #0a53be;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: #0d6efd;
		--bs-btn-disabled-border-color: #0d6efd;
	}	

/* Bottoni Canvas (.button) in giallo brand invece del verde theme.
   Vale per i verdi dei form (.button-green) e per i .button-primary
   (download file, tickets, schede team). Doppia classe = specificità
   sufficiente a battere le varianti .button-dark / .button-black. */
.button.button-primary,
.button.button-green {
		--cnvs-btn-color: #D8A21A;
		color: #000;
		text-shadow: none;
	}
.button.button-primary:hover,
.button.button-green:hover {
		color: #fff;
	}
.entry-meta .button.button-primary {
		background-color: #D8A21A !important;
		border-color: #D8A21A !important;
		color: #000 !important;
		text-shadow: none !important;
	}
.entry-meta .button.button-primary:hover {
		background-color: #000 !important;
		border-color: #000 !important;
		color: #D8A21A !important;
	}

#copyrights {
		padding: 15px;
	}
	
.content-wrap {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.fbox-icon a, .fbox-icon i, .fbox-icon img {
	display: block;
	position: relative;
	width: auto; 
	height: auto; 
	color: #fff;
}

.umidity{
	background-color: #17b9dc;
}
.corrosion{
	background-color: #56a332;
}
.handling{
	background-color: #ee7201;
}
.monitoring{
	background-color: #0055a2;
}
.copyright-links a {
	display: inline-block;
	margin: 0 0.25rem;
	color: #fff;
}
#demo-interior-tab.nav-tabs {
	--bs-nav-tabs-border-width: 0px;
	--bs-nav-link-color: #111;
	--bs-nav-link-hover-color: var(--cnvs-themecolor);
}

#demo-interior-tab.nav-tabs .nav-item .nav-link {
	position: relative;
	font-size: 19px;
	font-weight: 600;
	padding: 0 0 20px 0;
}

#demo-interior-tab.nav-tabs .nav-item .nav-link i {
	display: block;
	font-size: 38px;
	margin: 0 0 10px 0;
	color: var(--bs-nav-link-hover-color);
}

#demo-interior-tab.nav-tabs .nav-item .nav-link.active {
	top: 0;
}

#demo-interior-tab.nav-tabs .nav-item .nav-link.active i {
	color: var(--bs-nav-link-hover-color);
}

#demo-interior-tab.nav-tabs .nav-item .nav-link.active::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--bs-nav-link-hover-color);
}
.fbox-content h3 {
	color: #ffbb00;
	font-weight: bold;
	font-size: 24px;
}
.text-lg-right {
	text-align: right;
}
.heading-block::after {
	display: none;
}

.heading-block h1, .heading-block .h1 {
	font-size: 1.9rem
}
.ins-categories .nav-link.active {
	color: #FFF;
	background-color: #17b9dc;
	max-height: 200px;
}
.ins-categories .nav-link {
	color: #17b9dc;
}

.ins-categories .nav-link {
	padding: 6px 30px;
}
.portfolio-desc span {
	font-size: 16px;
	line-height: 1;
}
/* ----- | Story-Box | ----- */
.story-box {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: inherit;
	cursor: pointer;
}

.story-box .story-box-image {
	width: 70%;
	height: 500px;
	z-index: 2;
	overflow: hidden;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}

.story-box .story-box-image img {
	display: block;
	height: auto;
	width: 100%;
	opacity: 1;
	transition: opacity .3s ease;
}

.story-box:hover .story-box-image img {
	opacity: .9;
}

.story-box .story-box-info {
	box-sizing: border-box;
	width: 60%;
	height: 430px;
	padding: 60px;
	margin: 35px 0 0 -20%;
	background: #fff;
	z-index: 4;
	box-shadow: 0 10px 45px rgba(0,0,0,.1);
	transition: all ease-in .3s;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}

.story-box.description-left .story-box-info {
	-ms-flex-order: -1;
	order: -1;
	margin: 35px -30% 0 0;
}

.story-box .story-box-info .story-title {
	font-size: 25px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0;
}

.story-box .story-box-info .story-box-content p {
	font-size: 15px;
	font-weight: 300;
	color: #666;
	line-height: 16px;
}

.story-box .story-box-info .story-box-content a {
	font-size: 16px;
	text-decoration: underline !important;
}
.story-box .story-box-info {
	border: 8px solid #e9858c;
}
.story-box .story-box-info .story-title {
	color: #e30514;
}



#top-bar {
	--cnvs-topbar-height: 45px;
	--cnvs-topbar-font-size: 1rem;
	--cnvs-topbar-font-weight: 500;
	--cnvs-topbar-font-transform: none;
	--cnvs-topbar-color: #101010;
	--cnvs-topbar-border-size: 1px;
	--cnvs-topbar-border-color: rgba(var(--cnvs-contrast-rgb), 0.1);
	--cnvs-topbar-social-icon-color: #000;
	--cnvs-topbar-submenu-padding: 0.625rem;
	--cnvs-topbar-submenu-font-size: 0.75rem;
	position: relative;
	border-bottom: var(--cnvs-topbar-border-size) solid var(--cnvs-topbar-border-color);
	font-size: var(--cnvs-topbar-font-size);
	/* Restyling 09-09-2026: la topbar non è più gialla. */
	background-color: #292e33;
	--cnvs-topbar-color: #f2f2f2;
	--cnvs-topbar-social-icon-color: #f2f2f2;
}











/* ----- Story-Box Responsive ----- */
@media (max-width: 991px) {

	.story-box .story-box-image {
		height: auto;
		width: 100%;
		height: 400px;
		-ms-flex-order: -1;
		order: -1;
	}

	.story-box.description-left .story-box-info {
		-ms-flex-order: -1;
		order: -1;
		margin: 35px -20% 0 0;
	}

	.story-box.description-left .story-box-info { margin: -40px 5% 0; }

	.story-box .story-box-info {
		max-width: 90%;
		height: auto;
		-ms-flex-preferred-size: 90%;
		flex-basis: 90%;
		margin: -40px 5% 0;
	}
}


@media (max-width: 767px) {

	.story-box.description-left .story-box-info { margin: -100px 5% 0; }
	.story-box .story-box-info {
		padding: 35px;
		text-align: center;
		margin: -100px 5% 0;
	}
	.customers-count { border-right: none }
}

@media (max-width: 479px) {

	.story-box .story-box-info {
		width: 100%;
		padding: 15px;
		text-align: center;
		margin: -200px 5% 0;
	}
	.story-box.description-left .story-box-info { margin: -200px 5% 0; }

	ul.tab-nav:not(.tab-nav-lg) li a i {display: none;}
}

.icon-tab {
	width: 120px;
}

.entry-title span {
	color: #e30514;
}
.color-theme h1 {
	color: #e30514;
}
.slide-cat {
	padding-top: 4rem !important;
}
.product-title {
	margin-bottom: -3px;
}

* CSS DESKTOP */
@media (min-width: 1200px) {

}


/* CSS RESPONSIVE TABLET PRO */
@media (min-width: 768px) and (max-width: 991px) {

}


/* CSS RESPONSIVE   TABLET PRO*/
@media (min-width: 992px) and (max-width: 1199px) {



}


/* CSS RESPONSIVE TABLET */
@media (max-width: 767px) {


}


/* CSS RESPONSIVE SMARTPHONE */
@media (max-width: 480px) {
	.solodesktop {
	display: none;
	}
.solomobile {
	display: inline;
	}
	.section {
		padding-bottom: 10px;
	}
	#slide-video {
		 width: 100%;
		 margin-top: 0px;
	}	
#header-wrap #logo img {
		height: 60px;
	}	
.offset-1{
	margin-left:0px;
}
#side-tab{
	margin-top:25px;
	}
	
}
/* Flip card: right-to-left */
.right-to-left .flip-card-back {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.right-to-left .flip-card-front,
.right-to-left:hover .flip-card-back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.right-to-left:hover .flip-card-front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Gallery evento set1: foto quadrate */
.single-event .masonry-thumbs .grid-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto;
  width: 100%;
}

p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form {
	margin-bottom: 0;
}

/* Mappa contatti.
   fitVids di Canvas incapsula anche gli iframe di Google Maps e ne calcola
   il rapporto dagli attributi HTML: width="100%" viene letto come 100, quindi
   height/width = 450/100 = 450% di padding-top sul wrapper. La classe .no-fv
   sull'iframe lo esclude (opzione ignore in fn.fitvids.js); le regole sul
   wrapper reggono l'altezza anche se venisse incapsulato lo stesso. */
.mappa-contatti { display: block; width: 100%; line-height: 0; }
.mappa-contatti iframe { display: block; width: 100%; height: 450px; border: 0; }
.mappa-contatti .fluid-width-video-wrapper { padding: 0 !important; height: 450px !important; }
.mappa-contatti .fluid-width-video-wrapper iframe { position: static !important; height: 450px !important; }

@media (max-width: 767px) {
  .mappa-contatti iframe,
  .mappa-contatti .fluid-width-video-wrapper,
  .mappa-contatti .fluid-width-video-wrapper iframe { height: 300px !important; }
}

/* ============================================================
   Restyling 09-09-2026 — intestazione grigia
   Header e topbar sono gli unici due elementi che NON cambiano colore
   da una sezione allaltra: sono il punto fermo su cui scorrono le
   tinte delle sezioni.
   ============================================================ */
#header, #header-wrap, #header.sticky-header #header-wrap {
	background-color: #343a40;
}
/* Colori del menu — si passa dalle VARIABILI di Canvas, non dai selettori.
   ⚠️ Ci ho sbattuto la testa: avevo scritto `.primary-menu > div > ul > …`,
   ma fra `.primary-menu` e la lista non c'è nessun div (è
   `.primary-menu > ul.menu-container`), quindi la regola non faceva presa e le
   voci restavano del colore di serie.
   ⚠️ RETTIFICA 11-09-2026: un div c'è, ma PIÙ SOTTO — dentro il link, cioè
   `.menu-link > div`, e contiene l'etichetta. Conta quando si imposta un colore
   di testo sulla voce: va messo anche su quel div, o l'etichetta non lo eredita.
   Verificato sull'HTML servito dal sito, non sul template.
   Le variabili sono il meccanismo che il template usa davvero: non dipendono
   dalla forma esatta dell'albero e reggono agli aggiornamenti di Canvas. */
#header {
	--cnvs-primary-menu-color: #f2f2f2;
	--cnvs-primary-menu-hover-color: #D8A21A;
	--cnvs-primary-menu-active-color: #D8A21A;

	/* Il dropdown si veste come l'header invece di restare bianco: così non c'è
	   un rettangolo chiaro appeso a una barra scura. */
	--cnvs-primary-menu-submenu-bg: #343a40;
	--cnvs-primary-menu-submenu-color: #f2f2f2;
	--cnvs-primary-menu-submenu-hover-bg: #292e33;
	--cnvs-primary-menu-submenu-hover-color: #D8A21A;
}

/* Le icone e i testi di servizio dell'header non passano da quelle variabili. */
#header .header-extras, #header .header-extras a,
#header #top-search a {
	color: #f2f2f2;
}

/* ⚠️ L'hamburger del menu mobile era sfuggito a questa schiaritura perché non si
   colora con `color` ma con `background-color`: le tre stanghette sono tre
   rettangoli che Canvas dipinge con --cnvs-contrast-900, cioè quasi nero. Su
   questo header (#343a40) il risultato è nero su grigio scuro: il bottone c'è,
   funziona, e non si vede — quindi sembra che non funzioni.
   Segnalato da Eddy il 17-09-2026 come «hamburger non cliccabile da mobile». */
#header .cnvs-hamburger .cnvs-hamburger-inner,
#header .cnvs-hamburger .cnvs-hamburger-inner::before,
#header .cnvs-hamburger .cnvs-hamburger-inner::after {
	background-color: #f2f2f2;
}
/* Da aperto l'hamburger diventa una X sopra il menu a tendina, che è scuro:
   il bianco va tenuto anche lì. */
#header .primary-menu-trigger .cnvs-hamburger.is-active .cnvs-hamburger-inner,
#header .primary-menu-trigger .cnvs-hamburger.is-active .cnvs-hamburger-inner::before,
#header .primary-menu-trigger .cnvs-hamburger.is-active .cnvs-hamburger-inner::after {
	background-color: #f2f2f2;
}

/* Menu mobile: fuori da .is-expanded-menu il sottomenu è in linea, senza il
   fondo del dropdown — eredita quello dell'header, che è già scuro. Basta il
   colore del testo. */
#header .sub-menu-container .menu-item > .menu-link { color: #f2f2f2; }

/* ============================================================
   Restyling 11-09-2026 — i fondi scuri (riunione del 10 settembre)
   Il sito aveva un `content-wrap` colorato per sezione e dentro un riquadro
   BIANCO con il testo nero. Il committente ha scelto l'impostazione della
   pagina Produzioni, dove lo sfondo è interamente scuro: i riquadri bianchi
   spariscono e i testi vanno in bianco su tutto il sito.

   Il riquadro era scritto a mano in 44 punti come
   `bg-white p-4 p-md-5 rounded shadow-sm`. Ora è la classe `.adf-box`, così
   un'eventuale marcia indietro si fa da qui e non riaprendo 24 template.

   ⚠️ UNICA ECCEZIONE: `block_partner.php` («Abbiamo lavorato con») resta
   CHIARO (`.adf-partner`, in fondo al file). Non è una dimenticanza — i loghi dei
   partner hanno porzioni bianche e su fondo scuro sparirebbero. Chi ripassa di
   qui non lo "uniformi".
   ============================================================ */
.adf-box {
	background: transparent;
	box-shadow: none !important;
	padding: 3rem 0;
	color: #f2f2f2;
}
@media (max-width: 767.98px) { .adf-box { padding: 2rem 0; } }

/* I titoli dentro il box. Canvas li lascia al colore di serie (scuro): senza
   questa riga sarebbero neri su fondo scuro — illeggibili e senza alcun errore
   che lo segnali. `.adf-box` e non un selettore globale: fuori dal box ci sono
   ancora zone chiare (i partner, le mail, il pannello). */
.adf-box h1, .adf-box h2, .adf-box h3,
.adf-box h4, .adf-box h5, .adf-box h6,
.adf-box .heading-block h1, .adf-box .heading-block h2,
.adf-box .heading-block h3, .adf-box .heading-block h4 { color: #ffffff; }

/* I sottotitoli e i testi di servizio: bianco pieno stanca, un grigio chiaro
   mantiene la gerarchia che prima davano i grigi su bianco. */
.adf-box p, .adf-box li, .adf-box td, .adf-box th,
.adf-box .entry-meta, .adf-box .entry-meta li,
.adf-box .heading-block > span { color: #e6e6e6; }

/* ⚠️ I bottoni vanno ESCLUSI qui con :not(), non "rimessi a posto" dopo.
   Avevo scritto `.adf-box .button { color: inherit }` per evitare che i bottoni
   prendessero il giallo dei link e finissero giallo-su-giallo. Ma `inherit`
   eredita dal box, che è bianco: il risultato era BIANCO SU GIALLO, contrasto
   2,0 — il testo "Approfondisci" c'era e non si vedeva, e un bottone che pare
   vuoto sembra un dato mancante, non un problema di colore.
   ⚠️ E i bottoni di Canvas sono `<button class="button">`, non `<a>`: una
   regola scritta solo su `a.button` non li avrebbe presi comunque. Escludendoli
   di qui, tengono il colore che hanno già (nero sul giallo del brand). */
.adf-box a:not(.button):not(.btn) { color: #D8A21A; }
.adf-box a:not(.button):not(.btn):hover { color: #ffffff; }

/* ⚠️ Le classi Bootstrap che fissano un colore SCURO non si adattano al tema e
   restano nere sul fondo nuovo. `text-dark` veste le etichette dei form di
   Contatti e dell'Area soci ("Nome", "Email", i consensi): senza queste due
   righe l'utente si troverebbe davanti dei campi senza etichetta — il testo
   c'è, è solo nero su nero, quindi nessun errore e nessun campo vuoto da
   notare. `text-muted` non sparisce ma scende sotto la soglia di leggibilità.
   ⚠️ L'eccezione `:not(.bg-light)`: in it_calendario l'icona dell'overlay è
   `bg-light text-dark`, cioè scuro su chiaro — lì il nero è giusto. */
.adf-box .text-dark:not(.bg-light) { color: #ffffff !important; }
.adf-box .text-muted              { color: #c9c9c9 !important; }

/* Bordi e separatori: sul chiaro erano grigi appena accennati, sullo scuro
   sparivano del tutto. Si riusa il bianco a bassa opacità, che funziona su
   qualunque delle sei tinte di sezione senza doverne scrivere una per una. */
.adf-box hr,
.adf-box .divider,
.adf-box table, .adf-box th, .adf-box td,
.adf-box .accordion-header, .adf-box .acctitle,
.adf-box .nav-tabs, .adf-box .tab-content { border-color: rgba(255,255,255,.18) !important; }

/* ⚠️ I titoli delle card portfolio (Produzioni, Scuola, Calendario, Stagioni).
   Il markup è `.portfolio-desc h3 > a`, e Canvas colora quell'`a` con una
   regola sua più specifica della mia sui link: sul fondo scuro restavano
   grigio-su-marrone, leggibili solo di sbieco. Non bastava la regola generale
   dei titoli, perché qui il testo sta dentro un link, non nell'h3.
   Il testo di servizio sotto il titolo (`.portfolio-desc span`) ha lo stesso
   problema in tono minore: Canvas lo mette in grigio chiaro, che sul marrone
   scuro perde troppo. */
.adf-box .portfolio-desc h3 a,
.adf-box .portfolio-desc h3,
.portfolio-desc h3 a { color: #ffffff; }
.adf-box .portfolio-desc h3 a:hover,
.portfolio-desc h3 a:hover { color: #D8A21A; }
.adf-box .portfolio-desc span,
.portfolio-desc span { color: #d8d8d8; }

/* ⚠️ Le `.card` di Bootstrap portano con sé `background-color: var(--bs-card-bg)`,
   che è BIANCO: non basta che nel markup non ci sia `bg-white`, perché il fondo
   arriva dalla variabile e non da una classe. È il motivo per cui i riquadri
   della pagina Aziende erano rimasti chiari pur non avendo nessun `bg-white`
   addosso — la sostituzione globale cercava una classe che lì non c'era.
   Si azzera la variabile invece del `background`, così la card resta
   configurabile e non serve un `!important`. */
.adf-box .card,
.adf-box .card-body { --bs-card-bg: transparent; background-color: transparent; }
.adf-box .card .card-title,
.adf-box .card h1, .adf-box .card h2, .adf-box .card h3,
.adf-box .card h4, .adf-box .card h5, .adf-box .card h6 { color: #ffffff; }
.adf-box .card .card-text,
.adf-box .card p, .adf-box .card li { color: #d8d8d8; }

/* Le schede interne (archivio, convenzioni, righe corso) erano esse stesse
   bianche: diventano un velo chiaro sul colore della sezione, così restano
   distinte dal fondo senza reintrodurre il riquadro bianco. */
.adf-box .archivio-card,
.adf-box .convenzione-card,
.adf-box .corso-row,
.archivio-card, .convenzione-card, .corso-row {
	background: rgba(255,255,255,.07) !important;
	color: #f2f2f2;
}
.archivio-card h1, .archivio-card h2, .archivio-card h3, .archivio-card h4,
.convenzione-card h1, .convenzione-card h2, .convenzione-card h3, .convenzione-card h4,
.corso-row h1, .corso-row h2, .corso-row h3, .corso-row h4 { color: #ffffff; }

/* ⚠️ L'eccezione al contrario — una sezione che usasse il GIALLO come fondo, dove
   il testo bianco non si leggerebbe — NON sta qui: la emette page_title.php, che
   è l'unico punto che sa quale colore ha la pagina corrente. */

/* ── Il fondo neutro delle pagine senza colore di sezione ───────────────────
   Le schede di evento, produzione e corso (it_set1 / it_set3 / it_set4) hanno
   un hero parallax proprio e NON includono page_title.php: non ricevono quindi
   lo <style> che tinge `.content-wrap`, e restavano sul `bg-dark` di Bootstrap,
   che è #212529 — un terzo grigio, diverso sia dal fondo delle altre pagine sia
   dal footer.

   ⚠️ Serve `!important` perché `.bg-dark` è una utility di Bootstrap e ce l'ha
   a sua volta. Le pagine CON un colore di sezione continuano a vincere lo
   stesso: page_title.php emette la sua regola nel <body>, quindi dopo questo
   foglio, e a parità di specificità e !important vince l'ultima dichiarata. */
#content .content-wrap,
#content .content-wrap.bg-dark { background-color: #292e33 !important; }

/* ── I bottoni a contorno (.button-border) ──────────────────────────────────
   Canvas li costruisce con `--cnvs-btn-border-color: var(--cnvs-btn-color-dark)`,
   cioè bordo E testo nel grigio scuro di serie: sul fondo nuovo diventano
   grigio su grigio. Il bottone c'è, si clicca, e non si legge — come
   "Scheda completa dello spettacolo" sulla scheda di un evento.

   Non è un caso isolato: `button-border` compare in 10 punti (le schede evento
   e corso, i blocchi testo/foto/slider di una one_page), quindi la correzione
   sta qui e non nei singoli template.

   ⚠️ `:not(.button-light)` esclude i bottoni dello slider della home, che sono
   già bianchi apposta perché stanno sopra una fotografia.
   ⚠️ L'hover di Canvas riempie di colore e mette il testo BIANCO: sul giallo
   non si leggerebbe, quindi qui va scuro. */
#content .button.button-border:not(.button-light) {
	--cnvs-btn-border-color: #D8A21A;
	color: #D8A21A;
}
#content .button.button-border:not(.button-light):hover {
	background-color: #D8A21A !important;
	border-color: #D8A21A !important;
	color: #17160f !important;
}

/* ⚠️ Il TITOLO di pagina quando non c'è la scritta PNG.
   Le sezioni con il bollone mostrano un'immagine e il problema non si vede; le
   altre — "Accademia dei Folli – Compagnia teatrale di Torino", le news, le
   schede — scrivono il titolo in testo, e Canvas lo colora con
   `var(--cnvs-page-title-color)`, che sul tema chiaro è scuro: sul bordeaux
   risultava quasi invisibile, leggibile solo in controluce.
   ⚠️ Il sottotitolo è un caso a parte: `.page-title-content span` ha
   `color: #000` scritto a mano nel CSS di Canvas, quindi la variabile non lo
   tocca e va sovrascritto a parte. */
.adf-page-title { --cnvs-page-title-color: #ffffff; }
.adf-page-title .page-title-content h1,
.adf-page-title .page-title-content .h1 { color: #ffffff; }
.adf-page-title .page-title-content span { color: #e6e6e6; }

/* Breadcrumb: da grigio a bianco (decisione della riunione). Stanno dentro il
   page-title, che è colorato come la sezione. */
.adf-page-title .breadcrumb,
.adf-page-title .breadcrumb a,
.adf-page-title .breadcrumb-item,
.adf-page-title .breadcrumb-item.active,
.adf-page-title .breadcrumb-item + .breadcrumb-item::before { color: #ffffff !important; }
.adf-page-title .breadcrumb a:hover { color: #D8A21A !important; }

/* ============================================================
   Correzioni dopo il primo check con Eddy — 11-09-2026
   ============================================================ */

/* ── Il logo: si ancora alla LARGHEZZA, non all'altezza ──────────────────────
   Canvas fa `#header-wrap #logo img { height: var(--cnvs-header-height) }`,
   cioè stira il logo all'altezza INTERA dell'header (100px). Finché il logo era
   quello vecchio — due righe, 306×53, rapporto 5,8:1 — l'ingombro restava
   contenuto. Il logo nuovo è su UNA riga sola (7,6:1): a parità di altezza
   esce largo un terzo in più, ed è per questo che sembrava gigantesco.

   ⚠️ Non è il file a essere "troppo grande": ridimensionarlo non cambierebbe
   nulla, perché il CSS lo stira comunque all'altezza dell'header. Il file resta
   a 900px di larghezza apposta, per restare nitido sugli schermi retina.

   Invece di scrivere una larghezza fissa in pixel si CORREGGE il fattore, così
   la regola continua a valere a qualunque altezza dell'header — compreso lo
   sticky rimpicciolito e le altezze diverse di tablet e telefono, che Canvas
   gestisce già con la sua variabile. Una misura fissa avrebbe funzionato solo
   sul desktop e si sarebbe rotta in silenzio altrove.

   Il fattore è misurato sui due file, non scelto a occhio. Contando solo
   l'INCHIOSTRO (il logo vecchio ha un margine trasparente attorno):
     vecchio  306×53   inchiostro 292×37  → largo 5,48 volte la sua altezza resa
     nuovo    900×119  inchiostro 867×88  → largo 7,26 volte la sua altezza resa
   Per ottenere lo stesso ingombro orizzontale: 5,48 / 7,26 = 0,755. */
   ⚠️ Misure ASSOLUTE e non `calc(var(--cnvs-header-height) * 0.755)`, che pure
   sarebbe stato più elegante: se quella variabile non risolve nel punto in cui
   la regola si applica, l'intero `calc()` viene scartato e l'altezza torna a
   `auto` — cioè ai 119px naturali del file, che rendono il logo ANCORA più
   grande di prima. Un fallimento che peggiora il difetto che stava correggendo
   non vale l'eleganza. Con i px la regola o si applica o non c'è.

   306px è la larghezza del logo vecchio, che è l'ingombro a cui l'occhio è
   abituato; `!important` perché la regola di Canvas ha la stessa specificità e
   qui non si vuole dipendere dall'ordine dei fogli di stile. */
#header-wrap #logo img,
#header #logo img,
.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
	height: auto !important;
	width: 306px !important;
	max-width: 100% !important;
	max-height: none !important;
}
/* Sullo sticky rimpicciolito il logo si riduce, come faceva di serie. */
.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
	width: 240px !important;
}
@media (max-width: 991.98px) {
	#header-wrap #logo img,
	#header #logo img,
	.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
		width: 210px !important;
	}
}

/* ── TOP MENU (la barra in alto): hover giallo con scritta nera ──────────────
   ⚠️ È questo il "top menù" della richiesta: la barra con Contatti, News,
   Multimedia, Press, Calendario, Archivio, Area Allievi — che NON è il menu
   principale. Sono due menu diversi, con markup diverso: la barra in alto è
   `#top-bar .top-links-container > .top-links-item > a`, il menu principale
   è `.primary-menu .menu-link`. Al primo giro avevo corretto il secondo, e
   la barra in alto era rimasta com'era (hover su fondo bianco). */
#top-bar .top-links-container > .top-links-item > a:hover,
#top-bar .top-links-container > .top-links-item:hover > a,
#top-bar .top-links-container > .top-links-item > a:focus {
	background-color: #D8A21A !important;
	color: #17160f !important;
}

/* ── Menu principale: hover giallo con scritta nera ──────────────────────────
   ⚠️ Qui NON bastano le variabili di Canvas: per il primo livello esiste solo
   `--cnvs-primary-menu-hover-color` (il colore del testo), mentre lo sfondo
   dell'hover è previsto dalle variabili solo per il DROPDOWN
   (`--cnvs-primary-menu-submenu-hover-bg`). Per lo sfondo del primo livello
   serve per forza un selettore.

   ⚠️ Il `>` diretto su `.menu-container` è quello che tiene fuori il dropdown:
   senza, la regola scenderebbe anche sulle voci del sottomenu, che stanno su
   fondo scuro e hanno già il loro hover.

   ⚠️ Il colore va messo ANCHE sul `div` interno: il markup è
   `.menu-link > div` (un div dentro il link — il commento più su in questo
   file diceva il contrario, verificato sull'HTML servito l'11-09-2026), e
   basta che quel div erediti male perché la scritta resti chiara sul giallo. */
#header .primary-menu > .menu-container > .menu-item > .menu-link:hover,
#header .primary-menu > .menu-container > .menu-item:hover > .menu-link {
	background-color: #D8A21A;
	color: #17160f;
}
#header .primary-menu > .menu-container > .menu-item > .menu-link:hover div,
#header .primary-menu > .menu-container > .menu-item:hover > .menu-link div {
	color: #17160f;
}

/* ============================================================
   Striscia loghi partner (block_partner.php) — home e Aziende
   Grigio chiarissimo invece del bianco (richiesta di Eddy, 14-09-2026).

   ⚠️ 29 loghi su 30 sono JPG con il fondo BIANCO: su un grigio, anche lieve,
   comparirebbero come rettangoli bianchi. `mix-blend-mode: multiply` fa
   sparire il bianco nel fondo (bianco × grigio = grigio) lasciando intatti i
   colori del logo, che su un grigio così chiaro scuriscono in modo invisibile.
   ============================================================ */
/* ⚠️ Il grigio va ripetuto sulle celle del carosello: Owl muove lo stage con una
   `transform`, che crea un livello isolato, e dentro quel livello il multiply si
   fonde col TRASPARENTE invece che col grigio — i rettangoli bianchi restano.
   Verificato su screenshot: con il solo fondo sul contenitore non cambiava nulla. */
.adf-partner,
.adf-partner .oc-item { background-color: #f4f4f2; }
.adf-partner { color: #212529; }
.adf-partner .fancy-title h3 { color: #212529; }
.adf-partner img { mix-blend-mode: multiply; }

/* ============================================================
   Fondo di riserva per le sezioni con immagine parallax
   ============================================================
   Canvas tiene l'immagine nascosta finché il plugin non è caricato:
   `body:not(.has-plugin-parallax) .parallax-bg { opacity:0; display:none }`.
   Se quel caricamento non va a buon fine — rete lenta, un blocco, un percorso
   sbagliato dopo uno spostamento di cartella — la sezione resta senza sfondo, e
   `.section` di Canvas ne dichiara uno CHIARO: risultato, testi chiari su fondo
   bianco, illeggibili. È così che si è presentato il box newsletter della home
   (segnalato da Eddy il 17-09-2026, e solo su alcuni browser perché dipende da
   una corsa contro il tetto di 10 s con cui Canvas attende il plugin).

   Con un fondo dichiarato il peggio che può capitare è vedere la sezione sul
   grigio del sito invece che sulla fotografia. Il selettore ha due classi per
   battere `.section`, che è a specificità 0,1,0 come `.parallax`. */
.section.parallax,
.entry-image.parallax {
	background-color: #292e33;   /* = COLORE_FONDO in config_data.php */
}