/*
Theme Name:   Impreza Child — Ferrere Miele
Theme URI:    https://www.ferreremiele.it
Description:  Tema figlio di Impreza per il sito Ferrere Miele. Contiene le personalizzazioni del progetto: palette e tipografia del prototipo, instradamento del modulo contatti, consenso privacy. Non modificare mai il tema padre.
Author:       Comitato Fiera del Miele
Template:     Impreza
Version:      1.1.0
Text Domain:  ferrere-miele-child
*/

/* ==========================================================================
   1. PALETTE
   Convertita dal prototipo (app/globals.css, valori OKLCH) in sRGB.
   L'arancio era fuori gamma: la croma e' stata ridotta al massimo valore
   rappresentabile, la tinta resta quella.
   ========================================================================== */

:root {
	--fm-fondo:            #fefaed; /* crema */
	--fm-testo:            #441b06;
	--fm-scheda:           #ffffff;

	--fm-primario:         #571f05; /* marrone miele scuro */
	--fm-primario-testo:   #fefaed;

	--fm-secondario:       #ffde0b; /* giallo del volantino */
	--fm-secondario-testo: #441b06;

	--fm-tenue:            #f9f0da;
	--fm-tenue-testo:      #7e5a42;

	--fm-accento:          #dc7100; /* arancio del claim */
	--fm-accento-testo:    #fefaed;

	--fm-teal:             #1b7d82; /* la mascotte, con parsimonia */
	--fm-errore:           #cc272e;
	--fm-successo:         #308639;

	--fm-bordo:            #e7d9bd;
	--fm-focus:            #ed9235;

	--fm-raggio:           0.875rem;
	--fm-raggio-s:         calc(var(--fm-raggio) * 0.6);
	--fm-raggio-l:         calc(var(--fm-raggio) * 1.4);

	--fm-sans:   "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	--fm-script: "Yellowtail", "Brush Script MT", cursive;

	/*
	 * ATTENZIONE ALL'ARANCIO. Su fondo crema il contrasto e' 3.14: passa per
	 * titoli grandi, bordi e icone, NON per il testo corrente (serve 4.5).
	 * Per il testo si usa --fm-primario, che sta a 12.5.
	 */
}

/* ==========================================================================
   2. TIPOGRAFIA

   I due caratteri del prototipo sono Nunito e Yellowtail. I file .woff2
   vanno in questa cartella sotto fonts/ — li carica functions.php, che
   emette le @font-face solo se i file ci sono davvero (niente 404 finche'
   non li metti, e si accende da solo appena li metti).

   Self-hosting e non CDN di Google: caricarli dai server di Google manda
   l'IP di ogni visitatore a Google, cosa che va dichiarata nell'informativa
   e gestita nel banner cookie. Qui sul server il problema non esiste, e la
   pagina carica pure prima.
   ========================================================================== */

/*
 * Impreza espone la propria tipografia come variabili CSS: sovrascrivendo
 * queste si cambiano titoli, testo, bottoni e campi in un colpo solo,
 * invece di rincorrere i suoi selettori uno per uno.
 *
 * Il doppio :root non e' un refuso. Impreza emette le stesse variabili su
 * :root; con :root:root la specificita' e' maggiore e vinciamo comunque,
 * senza dipendere dall'ordine di caricamento dei fogli di stile.
 */
:root:root {
	--font-family: var(--fm-sans);
	--h1-font-family: var(--fm-sans);
	--h2-font-family: var(--fm-sans);
	--h3-font-family: var(--fm-sans);
	--h4-font-family: var(--fm-sans);
	--h5-font-family: var(--fm-sans);
	--h6-font-family: var(--fm-sans);
	--inputs-font-family: var(--fm-sans);
}

body,
.l-body {
	font-family: var(--fm-sans);
	background-color: var(--fm-fondo);
	color: var(--fm-testo);
}

h1, h2, h3, h4, h5, h6,
.w-post-elm.post_title {
	font-family: var(--fm-sans);
	color: var(--fm-primario);
	letter-spacing: -0.01em;
}

/* Il claim in corsivo, come nel prototipo. */
.fm-claim {
	font-family: var(--fm-script);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--fm-accento);
	margin: 0 0 .5rem;
}

.fm-sottotitolo {
	font-size: 1.15rem;
	color: var(--fm-tenue-testo);
}

.fm-hero__meta {
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .9rem;
	color: var(--fm-tenue-testo);
}

a {
	color: var(--fm-primario);
	text-decoration-color: var(--fm-focus);
	text-underline-offset: .15em;
}

/* Teal, non arancio: l'arancio su crema sta a 3.14 e al passaggio del
   mouse la leggibilita' PEGGIORAREBBE. Il teal sta a 4.67 ed e' comunque
   un colore del prototipo. Stessa scelta fatta nelle opzioni di Impreza. */
a:hover {
	color: var(--fm-teal);
}

:focus-visible {
	outline: 3px solid var(--fm-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   3. BOTTONI

   Sono elementi us_btn di Impreza (classe .w-btn): il tema disattiva i
   bottoni di WPBakery. I COLORI arrivano dalle opzioni tema, gia' impostate
   con la palette del prototipo — qui si tocca solo cio' che le opzioni non
   coprono, per non combattere il CSS che il tema genera da se'.
   ========================================================================== */

.w-btn,
input[type="submit"],
button[type="submit"] {
	font-family: var(--fm-sans);
	font-weight: 700;
	border-radius: var(--fm-raggio-s);
	transition: transform .12s ease, box-shadow .12s ease;
}

.w-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(87, 31, 5, .18);
}

/* I moduli non passano dal tema: quelli restano a carico nostro. */
input[type="submit"],
button[type="submit"] {
	background-color: var(--fm-primario);
	color: var(--fm-primario-testo);
	border: 0;
	padding: .85rem 1.5rem;
	cursor: pointer;
}

/* ==========================================================================
   4. TRAMA A NIDO D'APE
   Come nel prototipo: decorativa, da usare sullo sfondo di una Row
   aggiungendo la classe fm-honeycomb nelle impostazioni della Row.
   ========================================================================== */

.fm-honeycomb {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='%23c99a2e' stroke-opacity='0.28' stroke-width='1.5'%3E%3Cpath d='M28 0 L52 14 L52 42 L28 56 L4 42 L4 14 Z'/%3E%3Cpath d='M28 48 L52 62 L52 90 L28 104 L4 90 L4 62 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 56px 96px;
	background-color:#fdf2ac !important;
}

.fm-fondo-tenue {
	background-color: var(--fm-tenue);
}

/* Le sezioni con sfondo hanno bisogno di respiro, altrimenti il colore
   stringe il contenuto invece di separarlo. */
.fm-fondo-tenue,
.fm-honeycomb,
.fm-fondo-scuro {
	padding-top: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.fm-fondo-scuro {
	background-color: var(--fm-primario);
	color: var(--fm-primario-testo);
}

.fm-fondo-scuro h1,
.fm-fondo-scuro h2,
.fm-fondo-scuro h3,
.fm-fondo-scuro a {
	color: var(--fm-secondario);
}

/* ==========================================================================
   5. CONTENUTI
   ========================================================================== */

blockquote {
	border-left: 4px solid var(--fm-secondario);
	background: var(--fm-tenue);
	border-radius: 0 var(--fm-raggio-s) var(--fm-raggio-s) 0;
	padding: 1rem 1.25rem;
	font-style: italic;
}

blockquote cite {
	display: block;
	margin-top: .5rem;
	font-style: normal;
	font-weight: 700;
	font-size: .9rem;
	color: var(--fm-tenue-testo);
}

blockquote:before{
	display:none !important;
}

/* Immagini inserite nei blocchi di testo (vedi fm-ripara-immagini.php). */
.fm-immagine {
	max-width: 100%;
	height: auto;
	border-radius: var(--fm-raggio-s);
}

.fm-immagine--center {
	display: block;
	margin-inline: auto;
}

.fm-immagine--right {
	display: block;
	margin-inline-start: auto;
}

.fm-ente__nome {
	margin: .5rem 0 0;
	text-align: center;
	font-weight: 700;
	font-size: .95rem;
	color: var(--fm-tenue-testo);
}

/* Le tabelle devono poter scorrere da sole sul telefono. */
.fm-tabella {
	margin: 1.25rem 0;
	overflow-x: auto;
}

.fm-tabella table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fm-scheda);
	border-radius: var(--fm-raggio-s);
	overflow: hidden;
}

.fm-tabella th {
	background: var(--fm-primario);
	color: var(--fm-primario-testo);
	text-align: left;
	padding: .75rem 1rem;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.fm-tabella td {
	padding: .75rem 1rem;
	border-top: 1px solid var(--fm-bordo);
}

.fm-tabella tr:nth-child(even) td {
	background: var(--fm-tenue);
}

/* ==========================================================================
   6. GLI ELEMENTI DEL SITO
   Le classi fm-* generate dagli shortcode delle viste e dal plugin coupon.
   Qui ridefiniscono solo i colori: la struttura sta nei rispettivi file.
   ========================================================================== */

.fm-scheda {
	background: var(--fm-scheda);
	border-color: var(--fm-bordo);
	border-radius: var(--fm-raggio);
}

.fm-scheda__titolo {
	color: var(--fm-primario);
}

.fm-scheda__luogo,
.fm-scheda__etichetta {
	color: var(--fm-tenue-testo);
}

.fm-badge {
	background: var(--fm-tenue);
	color: var(--fm-primario);
	border: 1px solid var(--fm-bordo);
	font-weight: 700;
}

.fm-badge--shop {
	background: var(--fm-secondario);
	color: var(--fm-secondario-testo);
	border-color: var(--fm-secondario);
}

.fm-programma__ora {
	color: var(--fm-accento);
}

.fm-programma__voce {
	border-bottom-color: var(--fm-bordo);
}

.fm-programma__prenota {
	color: var(--fm-teal);
}

.fm-area__titolo,
.fm-partner-gruppo__titolo {
	border-bottom: 2px solid var(--fm-secondario);
	padding-bottom: .35rem;
}

.fm-faq__voce {
	border-bottom-color: var(--fm-bordo);
}

.fm-faq__domanda {
	color: var(--fm-primario);
}

.fm-documento {
	border-color: var(--fm-accento);
	background: var(--fm-scheda);
	color: var(--fm-primario);
}

.fm-documento:hover {
	background: var(--fm-tenue);
}

.fm-vuoto {
	background: var(--fm-tenue);
	color: var(--fm-tenue-testo);
}

/* Coupon e scanner */

.fm-coupon {
	background: var(--fm-scheda);
	border-color: var(--fm-secondario);
}

.fm-coupon__titolo,
.fm-coupon__codice {
	color: var(--fm-primario);
}

.fm-coupon__stato--valido {
	background: var(--fm-successo);
	color: #fff;
}

.fm-coupon__stato--usato {
	background: var(--fm-errore);
	color: #fff;
}

.fm-scanner__esito--valido {
	background: var(--fm-successo);
}

.fm-scanner__esito--usato {
	background: var(--fm-accento);
}

.fm-scanner__esito--errore {
	background: var(--fm-errore);
}

.fm-scanner button {
	background: var(--fm-primario);
}

.fm-copie--poche {
	color: var(--fm-accento);
}

.fm-copie--esaurite {
	color: var(--fm-errore);
}

/* ==========================================================================
   6bis. FOOTER
   Il footer e' un Page Block di Impreza con la classe fm-footer.
   Fondo e colori arrivano dalle opzioni tema; qui la disposizione.
   ========================================================================== */

.fm-footer {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Il marchio sta dentro una targa chiara, come nel mockup: il logo a
   colori ha il marrone nel proprio disegno e sul fondo del footer lo
   perderebbe. */
.fm-footer .w-image {
	margin: 0 0 1.5rem;
}

.fm-footer .w-image-h {
	display: inline-block;
	padding: .625rem .875rem;
	background-color: var(--fm-fondo);
	border-radius: var(--fm-raggio);
}

.fm-footer img {
	max-width: 8.5rem;
	height: auto;
	display: block;
}

.fm-footer__claim {
	font-family: var(--fm-script);
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--fm-secondario);
	margin: 0 0 .35rem;
}

.fm-footer__quando {
	font-size: .9rem;
	line-height: 1.6;
	opacity: .85;
	margin: 0;
}

/* I recapiti riusano l'elenco con le icone del box contatti: stesso
   disegno, stesso segno crema smorzato sul marrone. */
.fm-footer__recapiti {
	margin: 0;
	gap: .875rem;
}

.fm-footer__recapiti > li {
	line-height: 1.55;
}

.fm-footer__recapiti .ic-mail a {
	font-weight: 700;
	text-decoration: none;
}

/* Finche' gli account non esistono la riga resta, ma smorzata: e' un
   segnaposto, non un recapito. */
.fm-footer__recapiti .ic-social {
	opacity: .7;
}

.fm-footer__titolo {
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fm-secondario);
	margin: 0 0 .75rem;
}

.fm-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.9;
}

/* Nel mockup i link del footer sono crema e solo i titoletti sono gialli:
   il giallo su tutte le voci fa sembrare tutto un avviso. Il colore dei
   link arriva dalle opzioni tema, quindi va scavalcato qui. */
.fm-footer__menu a,
.fm-footer__recapiti a,
.fm-footer__legale a {
	color: var(--fm-primario-testo);
	text-decoration: none;
}

.fm-footer__menu a:hover,
.fm-footer__menu a:focus-visible,
.fm-footer__recapiti a:hover,
.fm-footer__recapiti a:focus-visible,
.fm-footer__legale a:hover,
.fm-footer__legale a:focus-visible {
	color: var(--fm-secondario);
	text-decoration: underline;
}

.fm-footer--legale {
	padding-top: 0;
	padding-bottom: 1.5rem;
}

.fm-footer__legale {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(254, 250, 237, .18);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	font-size: .85rem;
	opacity: .8;
}

.fm-footer__legale a {
	text-decoration: none;
}

@media (max-width: 600px) {

	.fm-footer {
		text-align: center;
	}

	.fm-footer img {
		margin-inline: auto;
	}
}

/* ==========================================================================
   7. MODULI
   ========================================================================== */

/* L'input sta DENTRO la label: se la label tiene il margine sotto, lo
   spazio finisce fra campo e campo storto. Lo spazio lo danno i <p>. */
.wpcf7 label {
	display: block;
	font-weight: 700;
	font-size: .9375rem;
	margin-bottom: 0;
	color: var(--fm-primario);
}

/* Impreza mette line-height e min-height a 48px sugli input: sommati al
   nostro padding facevano campi alti 76px, che sembravano caselle di
   testo. Qui l'altezza torna quella di un campo. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	min-height: 3rem;
	padding: .6875rem .875rem;
	margin-top: .375rem;
	border: 2px solid var(--fm-bordo);
	border-radius: var(--fm-raggio-s);
	background: var(--fm-scheda);
	color: var(--fm-testo);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--fm-tenue-testo);
	opacity: .75;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--fm-accento);
	box-shadow: 0 0 0 3px rgba(237, 146, 53, .28);
	outline: none;
}

/* Il consenso e' una riga a se': deve leggersi come una scelta, non come
   una postilla in fondo al modulo. */
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: .95rem;
	color: var(--fm-testo);
}

.wpcf7-acceptance input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"] {
	margin-top: .15rem;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--fm-primario);
	flex: 0 0 auto;
	border:1px solid  var(--fm-primario);
}

/* La seconda casella (la newsletter) non e' una acceptance ma una
   checkbox normale: senza questo restava allineata in un altro modo. */
.wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

.wpcf7-checkbox .wpcf7-list-item label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: .95rem;
	color: var(--fm-testo);
}

/* Il bottone resta disabilitato finche' non si spunta il consenso: deve
   sembrare disabilitato, non rotto. */
.wpcf7 .wpcf7-submit {
	min-height: 3rem;
	font-weight: 700;
}

.wpcf7 .wpcf7-submit[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.wpcf7-not-valid-tip {
	color: var(--fm-errore);
	font-weight: 600;
	font-size: .9rem;
}

.wpcf7-response-output {
	border-radius: var(--fm-raggio-s);
	border-width: 2px !important;
	padding: 1rem !important;
}

/* ==========================================================================
   8. RIDUZIONE DEL MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.w-btn,
	.vc_btn3,
	input[type="submit"],
	button[type="submit"] {
		transition: none;
	}

	.w-btn:hover,
	.vc_btn3:hover {
		transform: none;
	}
}

/* ==========================================================================
   9. ELENCHI A CARD, ICONE E BOX CONTATTI
   Le voci degli elenchi del concorso (requisiti, campioni, premi) diventano
   schede bianche su fondo crema. Il pallino/icona e' il segno che distingue
   una colonna dall'altra: arancio, oro, trofeo.
   ========================================================================== */

/* Icone decorative come data-URI. Colorate con mask, non con il fill dell'SVG:
   cosi' il colore resta una variabile e la stessa icona serve su fondo chiaro
   e su fondo scuro. Lo stroke nero dentro l'SVG serve solo all'alfa. */
:root {
	--fm-ico-trofeo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M7 5H5a2 2 0 0 0 0 4h2M17 5h2a2 2 0 0 1 0 4h-2'/%3E%3C/svg%3E");
	--fm-ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--fm-ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
	--fm-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
	--fm-ico-ora: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   9.1 Elenchi a card
   -------------------------------------------------------------------------- */

.fm-elenco {
	--fm-segno: var(--fm-accento); /* arancio: e' il default */
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

/* Il giallo del volantino su bianco sparisce (contrasto 1.2): per il segno
   serve un oro piu' carico, che resta nella stessa famiglia. */
.fm-elenco--oro {
	--fm-segno: #c8930a;
}

.fm-elenco > li {
	margin: 0;
	padding: 1.125rem 1.625rem;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background-color: var(--fm-scheda);
	border-radius: var(--fm-raggio-l);
	box-shadow: 0 2px 6px rgba(68, 27, 6, 0.06);
	color: var(--fm-tenue-testo);
	line-height: 1.55;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.fm-elenco > li::marker {
	content: none;
}

/* Il segno di default e' un pallino; i modificatori lo sostituiscono. */
.fm-elenco > li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.55em; /* allinea alla prima riga di testo */
	border-radius: 50%;
	background-color: var(--fm-segno);
}

.fm-elenco > li:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(68, 27, 6, 0.12);
}

/* Trofeo al posto del pallino: per i premi. */
.fm-elenco--trofeo > li::before {
	width: 1.1875rem;
	height: 1.1875rem;
	margin-top: 0.05em;
	border-radius: 0;
	-webkit-mask: var(--fm-ico-trofeo) no-repeat center / contain;
	        mask: var(--fm-ico-trofeo) no-repeat center / contain;
}

/* Sulle Row con sfondo scuro le schede restano bianche ma il testo del
   contorno e' chiaro: l'elenco non deve ereditare il colore della sezione. */
.fm-fondo-scuro .fm-elenco > li {
	color: var(--fm-tenue-testo);
}

/* --------------------------------------------------------------------------
   9.2 Box contatti (classe fm-box sulla colonna)
   -------------------------------------------------------------------------- */

.fm-box > .vc_column-inner {
	background-color: var(--fm-primario);
	color: var(--fm-primario-testo);
	border-radius: var(--fm-raggio-l);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.fm-box h2,
.fm-box h3 {
	color: var(--fm-primario-testo);
	margin-top: 0;
}

.fm-box__ente {
	font-weight: 700;
	margin: 0 0 1.375rem;
	color: var(--fm-primario-testo);
}

.fm-box a {
	color: var(--fm-primario-testo);
	text-decoration: none;
	border-bottom: 1px solid rgba(254, 250, 237, 0.35);
}

.fm-box a:hover,
.fm-box a:focus-visible {
	border-bottom-color: var(--fm-primario-testo);
}

.fm-contatti {
	/* Crema smorzata: sul marrone sta a 8.6, resta decorativa senza sparire. */
	--fm-segno: rgba(254, 250, 237, 0.72);
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fm-contatti > li {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	line-height: 1.5;
}

.fm-contatti > li::marker {
	content: none;
}

.fm-contatti > li::before {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.12em;
	background-color: var(--fm-segno);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.fm-contatti > li.ic-pin::before  { -webkit-mask-image: var(--fm-ico-pin);  mask-image: var(--fm-ico-pin); }
.fm-contatti > li.ic-tel::before  { -webkit-mask-image: var(--fm-ico-tel);  mask-image: var(--fm-ico-tel); }
.fm-contatti > li.ic-mail::before { -webkit-mask-image: var(--fm-ico-mail); mask-image: var(--fm-ico-mail); }
.fm-contatti > li.ic-ora::before  { -webkit-mask-image: var(--fm-ico-ora);  mask-image: var(--fm-ico-ora); }
.fm-contatti > li.ic-social::before { -webkit-mask-image: var(--fm-ico-chiocciola); mask-image: var(--fm-ico-chiocciola); }

/* --------------------------------------------------------------------------
   9.3 Correzioni di contorno
   -------------------------------------------------------------------------- */

/* wpautop lascia un paragrafo vuoto quando uno shortcode che restituisce un
   <ul> sta da solo su una riga del Text Block. */
.wpb_text_column p:empty {
	display: none;
}

.fm-elenco + p:empty,
.fm-contatti + p:empty {
	display: none;
}

/* Il paragrafo che chiude un elenco a card: dentro i Text Block del builder
   i margini sono azzerati, e senza questo la frase resta incollata
   all'ultima scheda come se fosse parte sua. */
.fm-elenco + p:not(:empty) {
	margin-top: 1.5rem;
}

@media (max-width: 767px) {

	.fm-elenco {
		gap: 0.625rem;
	}

	.fm-elenco > li {
		padding: 0.875rem 1.125rem;
	}

	/* Impreza impila le colonne: serve aria fra i due blocchi. */
	.fm-elenco-cols .wpb_column + .wpb_column,
	.fm-box {
		margin-top: 2rem;
	}
}

/* ==========================================================================
   10. SCHEDE DEGLI ENTI
   Due loghi affiancati come schede bianche, non a tutta larghezza: i loghi
   sono di proporzioni diverse (uno orizzontale, uno quadrato) e senza un
   tetto all'altezza uno schiaccia l'altro.
   Classe fm-enti nell'Extra class della ROW.
   ========================================================================== */

/* Le schede devono finire alla stessa altezza anche se un nome va a capo:
   la Row di Impreza allinea in alto, qui serve lo stiramento. */
.fm-enti .g-cols,
.g-cols.fm-enti {
	align-items: stretch;
}

.fm-enti .wpb_column {
	display: flex;
	flex-direction: column;
}

.fm-enti .wpb_column > .vc_column-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 21rem;
	padding: 1.75rem;
	background-color: var(--fm-scheda);
	border-radius: var(--fm-raggio-l);
	box-shadow: 0 2px 6px rgba(68, 27, 6, 0.06);
}

/* Le due schede si stringono verso il centro invece di galleggiare
   ognuna in mezzo alla propria colonna. */
.fm-enti .wpb_column:nth-child(odd) > .vc_column-inner {
	margin-inline: auto 0;
}

.fm-enti .wpb_column:nth-child(even) > .vc_column-inner {
	margin-inline: 0 auto;
}

.fm-enti .w-image {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9.5rem;
}

.fm-enti .w-image img {
	max-height: 9rem;
	width: auto;
	object-fit: contain;
}

/* Il nome scende in fondo alla scheda: due loghi di altezza diversa non
   fanno ballare le due didascalie. */
.fm-enti .wpb_text_column {
	margin-top: auto;
}

.fm-enti .fm-ente__nome {
	color: var(--fm-primario);
	margin-top: 1rem;
	line-height: 1.35;
}

@media (max-width: 767px) {

	.fm-enti .wpb_column > .vc_column-inner,
	.fm-enti .wpb_column:nth-child(odd) > .vc_column-inner,
	.fm-enti .wpb_column:nth-child(even) > .vc_column-inner {
		margin-inline: auto;
	}

	.fm-enti .wpb_column + .wpb_column {
		margin-top: 1.25rem;
	}
}

/* ==========================================================================
   11. SCHEDA DELLA GUIDA
   Immagine a sinistra, testo a destra, tutto dentro un'unica scheda bianca.
   Classe fm-guida nell'Extra class della ROW; le colonne si mettono a
   1/5 + 4/5 dal builder invece di forzare le tracce da qui, cosi'
   l'impilamento su telefono resta quello del tema.
   ========================================================================== */

.fm-guida .g-cols {
	align-items: center;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: var(--fm-scheda);
	border-radius: 1.5rem;
	box-shadow: 0 2px 6px rgba(68, 27, 6, 0.06);
}

.fm-guida .w-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--fm-raggio);
}

/* L'occhiello sopra il titolo. Il giallo del volantino su bianco sta a 1.2:
   qui serve l'oro carico, lo stesso dei segni degli elenchi. */
.fm-occhiello {
	margin: 0 0 .35rem;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #c8930a;
}

/* Il maiuscolo lo fa il CSS: nel contenuto il titolo resta scritto normale,
   cosi' resta leggibile nell'editor e chi ascolta la pagina non si sente
   compitare le lettere. */
.fm-guida__titolo {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--fm-primario);
}

.fm-guida .fm-sottotitolo {
	margin: 0;
}

.fm-tag {
	list-style: none !important;
	margin: 1rem 0 0;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.fm-tag > li {
	margin: 0;
	padding: .3rem .75rem;
	border-radius: 999px;
	/* Il giallo pieno e' troppo acceso per cinque pillole di fila. */
	background-color: #fff091;
	background-color: color-mix(in srgb, var(--fm-secondario) 45%, #fff);
	color: var(--fm-primario);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
}

.fm-tag > li::marker {
	content: none;
}

/* Sul fondo crema il giallo pieno si confonde: pillole bianche con un filo
   di bordo, come nel blocco degli apicoltori. */
.fm-tag--contorno > li {
	background-color: var(--fm-scheda);
	border: 1px solid var(--fm-bordo);
}

@media (max-width: 767px) {

	.fm-guida .w-image img {
		max-width: 16rem;
	}
}

/* ==========================================================================
   12. PASSI NUMERATI
   Una sequenza di passaggi e' una lista ordinata: i numeri li mette il
   contatore CSS, non il contenuto. Aggiungere o spostare un passo nel
   builder non richiede di rinumerare niente a mano.
   ========================================================================== */

.fm-passi {
	counter-reset: fm-passo;
	list-style: none !important;
	margin: 1.5rem 0 0;
	padding: 0 !important;
	display: grid;
	gap: 1.5rem;
	/* 15.5rem invece di 18: quattro passi devono stare su una riga sola,
	   perche' un quarto riquadro da solo sotto agli altri tre sembra un
	   errore. Con tre passi non cambia niente, perche' auto-fit non crea
	   colonne che nessuno riempie. */
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

.fm-passi > li {
	counter-increment: fm-passo;
	margin: 0;
	padding: 1.5rem;
	background-color: var(--fm-scheda);
	border: 1px solid var(--fm-bordo);
	border-radius: var(--fm-raggio-l);
}

.fm-passi > li::marker {
	content: none;
}

.fm-passi > li::before {
	content: counter(fm-passo);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1.125rem;
	border-radius: 50%;
	background-color: var(--fm-secondario);
	color: var(--fm-secondario-testo);
	font-size: .9375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fm-passo__titolo {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fm-primario);
}

.fm-passi > li p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--fm-tenue-testo);
}

/* ==========================================================================
   13. OCCHIELLO SULLE SEZIONI SCURE
   L'oro dell'occhiello e' tarato sul bianco: sul marrone serve il giallo
   pieno. E dove c'e' un occhiello il titolo che segue va in chiaro, per non
   avere due righe gialle una sopra l'altra.
   ========================================================================== */

.fm-fondo-scuro .fm-occhiello {
	color: var(--fm-secondario);
}

.fm-fondo-scuro .fm-occhiello + h2 {
	color: var(--fm-primario-testo);
}

/* ==========================================================================
   14. RITRATTO CON TARGA E CITAZIONE
   Colonna sinistra: foto + targa gialla col nome. Colonna destra: occhiello,
   testo e citazione. Classi fm-ritratto e fm-citazione nell'Extra class
   delle due COLONNE.
   ========================================================================== */

.fm-ritratto .w-image img {
	width: 100%;
	height: auto;
	border-radius: var(--fm-raggio-l);
}

/* La targa e' il Text Block sotto la foto: sta nel builder come testo
   normale, cosi' il nome del sindaco si cambia senza toccare il CSS. */
.fm-ritratto .wpb_text_column {
	margin-top: 1.25rem;
	padding: .875rem 1.5rem 1rem;
	background-color: var(--fm-secondario);
	border-radius: var(--fm-raggio-l);
}

.fm-ritratto__nome {
	display: block;
	margin: 0;
	font-family: var(--fm-script);
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--fm-secondario-testo);
}

.fm-ritratto__ruolo {
	display: block;
	margin: .25rem 0 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--fm-secondario-testo);
}

/* --------------------------------------------------------------------------
   La citazione
   -------------------------------------------------------------------------- */

.fm-citazione .fm-occhiello + h2 {
	margin-top: 0;
}

.fm-citazione > .vc_column-inner > .wpb_text_column > .wpb_wrapper > p {
	color: var(--fm-tenue-testo);
}

/* Il blockquote del sito ha fondo crema e filetto giallo: qui serve nudo,
   con il filetto arancio e senza corsivo, che su quattro righe stanca. */
.fm-citazione blockquote {
	margin: 1.75rem 0 0;
	padding: .25rem 0 .25rem 1.25rem;
	background: none;
	border-left: 3px solid var(--fm-accento);
	border-radius: 0;
	font-style: normal;
}

.fm-citazione blockquote p {
	margin: 0;
	font-weight: 600;
	line-height: 1.55;
	color: var(--fm-primario);
}

.fm-citazione blockquote cite {
	margin-top: .875rem;
	font-weight: 400;
	font-size: .8125rem;
}

@media (max-width: 767px) {

	.fm-citazione {
		margin-top: 2rem;
	}
}

/* La postilla sotto il titolo del programma. */
.fm-nota {
	margin: .25rem 0 0;
	font-size: .9375rem;
	font-style: italic;
	color: var(--fm-tenue-testo);
}

/* ==========================================================================
   15. PANNELLO DEI PROMOTORI
   Classe fm-promotori nell'Extra class della COLONNA. Dentro ci vanno, in
   ordine, un elemento Immagine e un Text Block per ogni ente: la colonna e'
   una griglia a due tracce, quindi gli elementi si impaginano da soli a
   coppie logo + nome, senza wrapper da scrivere a mano.
   ========================================================================== */

.fm-promotori > .vc_column-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem 1.25rem;
	padding: 1.75rem;
	background-color: var(--fm-tenue);
	border-radius: var(--fm-raggio-l);
}

.fm-promotori .w-image {
	width: 4rem;
}

.fm-promotori .w-image img {
	width: 100%;
	height: auto;
	background-color: var(--fm-scheda);
	border-radius: var(--fm-raggio-s);
}

.fm-promotori .wpb_text_column p {
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fm-primario);
}

@media (max-width: 767px) {

	.fm-promotori {
		margin-top: 2rem;
	}
}

/* La riga che conta i partecipanti sopra la griglia. */
.fm-conteggio {
	margin: 0 0 1.25rem;
	font-size: .875rem;
	color: var(--fm-tenue-testo);
}


/* ==========================================================================
   17. PAGINA CONTATTI
   Tre blocchi: le schede dei recapiti (colonna sinistra), le mattonelle
   delle informazioni pratiche (colonna destra) e la scheda "come
   raggiungerci" con la foto affiancata al percorso.
   Le classi stanno nel contenuto della pagina, non nelle impostazioni delle
   Row, cosi' restano modificabili dal Text Block del builder.
   ========================================================================== */

/* Icone con il colore gia' dentro l'SVG: qui il segno sta dentro un disco
   giallo, quindi non serve la mask che colora dall'esterno. */
:root {
	--fm-ico-b-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23571f05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
	--fm-ico-b-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23571f05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--fm-ico-b-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23571f05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
	--fm-ico-b-ente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23571f05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
	--fm-ico-chiocciola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
	--fm-ico-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Il testo di apertura sotto il titolo di sezione: a tutta larghezza
   diventa una riga lunghissima, difficile da rileggere. */
.fm-intro {
	max-width: 50rem;
}

/* --------------------------------------------------------------------------
   17.1 Schede dei recapiti
   Disco giallo a sinistra, etichetta piccola sopra e dato sotto. Il disco
   e' un ::before che occupa due righe della griglia: cosi' resta centrato
   anche quando l'indirizzo va a capo.
   -------------------------------------------------------------------------- */

.fm-recapiti {
	list-style: none !important;
	margin: 1.5rem 0 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.fm-recapiti > li {
	margin: 0;
	padding: .9375rem 1.25rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	gap: .125rem .875rem;
	background-color: var(--fm-scheda);
	border: 1px solid var(--fm-bordo);
	border-radius: var(--fm-raggio-l);
	line-height: 1.45;
}

.fm-recapiti > li::marker {
	content: none;
}

.fm-recapiti > li::before {
	content: "";
	grid-row: span 2;
	align-self: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background-color: #fdf0a8;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.1875rem;
}

.fm-recapiti > li.ic-mail::before       { background-image: var(--fm-ico-b-mail); }
.fm-recapiti > li.ic-pin::before        { background-image: var(--fm-ico-b-pin); }
.fm-recapiti > li.ic-calendario::before { background-image: var(--fm-ico-b-calendario); }
.fm-recapiti > li.ic-ente::before       { background-image: var(--fm-ico-b-ente); }

.fm-recapito__voce {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fm-tenue-testo);
}

.fm-recapito__dato {
	color: var(--fm-testo);
}

.fm-recapito__dato a {
	text-decoration: none;
}

/* wp_date restituisce il giorno minuscolo ("domenica 18 ottobre"): la
   maiuscola la mette il CSS, cosi' il dato nel campo resta uno solo. */
/* ::first-letter vale solo sui box di blocco: su uno span in mezzo a una
   frase non farebbe niente. */
.fm-maiuscola {
	display: inline-block;
}

.fm-recapito__dato--data::first-letter,
.fm-maiuscola::first-letter {
	text-transform: uppercase;
}

/* La riga dei social non e' una scheda: solo l'icona e il testo. */
.fm-recapiti + .fm-occhiello {
	margin-top: 1.75rem;
}

.fm-recapiti--nudo {
	margin-top: .5rem;
}

.fm-recapiti--nudo > li {
	padding: 0;
	background: none;
	border: 0;
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	color: var(--fm-tenue-testo);
}

.fm-recapiti--nudo > li::before {
	grid-row: auto;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 0;
	background-color: var(--fm-tenue-testo);
	background-image: none;
	-webkit-mask: var(--fm-ico-chiocciola) no-repeat center / contain;
	        mask: var(--fm-ico-chiocciola) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   17.2 Mattonelle delle informazioni pratiche
   -------------------------------------------------------------------------- */

.fm-info {
	margin: 1.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.fm-info > div {
	padding: .9375rem 1.125rem;
	background-color: var(--fm-tenue);
	border-radius: var(--fm-raggio);
}

.fm-info dt {
	margin: 0 0 .1875rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fm-tenue-testo);
}

.fm-info dd {
	margin: 0;
	line-height: 1.4;
	color: var(--fm-testo);
}

/* La postilla sotto le mattonelle: informativa, non un'altra voce. */
.fm-info + p {
	margin-top: 1.25rem;
	font-size: .875rem;
	color: var(--fm-tenue-testo);
}

/* --------------------------------------------------------------------------
   17.3 Scheda "come raggiungerci"
   Classe fm-mappa nell'Extra class della Row interna: foto a sinistra,
   percorso a destra, un solo rettangolo crema con gli angoli tondi.
   -------------------------------------------------------------------------- */

/* La Row interna di Impreza E' essa stessa la griglia (.g-cols), non un
   contenitore che ne racchiude una: il selettore deve stare sullo stesso
   elemento, non discendere. */
.g-cols.fm-mappa {
	align-items: stretch;
	margin: 1.75rem 0 0;
	background-color: var(--fm-tenue);
	border-radius: var(--fm-raggio-l);
	overflow: hidden;
}

.fm-mappa > .wpb_column > .vc_column-inner {
	padding: 0;
	height: 100%;
}

.fm-mappa > .wpb_column:last-child > .vc_column-inner {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* La foto e' verticale: lasciata nel flusso deciderebbe lei l'altezza
   della scheda e il percorso resterebbe sperduto in mezzo. Sganciata dal
   flusso, e' la colonna del testo a dare la misura e la foto riempie il
   riquadro ritagliandosi. */
.fm-mappa > .wpb_column:first-child > .vc_column-inner {
	position: relative;
	min-height: 15rem;
}

.fm-mappa .w-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.fm-mappa .w-image,
.fm-mappa .w-image-h,
.fm-mappa .w-image img {
	width: 100%;
	height: 100%;
}

.fm-mappa .w-image img {
	object-fit: cover;
	object-position: center 40%;
	border-radius: 0;
}

.fm-percorso {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.fm-percorso dt {
	margin: 0 0 .1875rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fm-tenue-testo);
}

.fm-percorso dd {
	margin: 0;
	line-height: 1.4;
	color: var(--fm-testo);
}

/* Il segnaposto davanti alla scritta del bottone: l'icona resta un
   dettaglio del tema, non un elemento da inserire nel builder. */
.fm-mappa .w-btn {
	margin-top: 1.25rem;
}

.fm-mappa .w-btn .w-btn-label::before {
	content: "";
	display: inline-block;
	vertical-align: -.15em;
	width: 1em;
	height: 1em;
	margin-right: .5em;
	background-color: currentColor;
	-webkit-mask: var(--fm-ico-pin) no-repeat center / contain;
	        mask: var(--fm-ico-pin) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   17.4 Domande frequenti a fisarmonica
   Il plugin stampa <details>: qui diventano schede bianche con la freccia
   che gira. Selettore con il contenitore davanti perche' il CSS del plugin
   viene caricato PRIMA di questo foglio e a parita' di peso vincerebbe lui.
   -------------------------------------------------------------------------- */

.fm-faq-sezione .wpb_text_column {
	max-width: 46rem;
	margin-inline: auto;
}

.fm-faq .fm-faq__voce {
	margin: 0;
	padding: 0 1.25rem;
	background-color: var(--fm-scheda);
	border: 1px solid var(--fm-bordo);
	border-bottom: 1px solid var(--fm-bordo);
	border-radius: var(--fm-raggio-l);
}

.fm-faq {
	margin: 1.5rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.fm-faq .fm-faq__domanda {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.0625rem 0;
	font-weight: 700;
	color: var(--fm-primario);
}

.fm-faq .fm-faq__domanda::-webkit-details-marker {
	display: none;
}

.fm-faq .fm-faq__domanda::after {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--fm-tenue-testo);
	-webkit-mask: var(--fm-ico-freccia) no-repeat center / contain;
	        mask: var(--fm-ico-freccia) no-repeat center / contain;
	transition: transform .2s ease;
}

.fm-faq .fm-faq__voce[open] .fm-faq__domanda::after {
	transform: rotate(180deg);
}

.fm-faq .fm-faq__risposta {
	padding: 0 0 1.125rem;
	font-size: .9375rem;
	color: var(--fm-tenue-testo);
}

.fm-faq .fm-faq__risposta p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {

	.fm-info {
		grid-template-columns: minmax(0, 1fr);
	}

	.fm-mappa .w-image img {
		min-height: 11rem;
	}

	/* Impreza impila le colonne: la seconda ha bisogno di stacco. */
	.fm-contatti-cols .wpb_column + .wpb_column {
		margin-top: 2.5rem;
	}
}

/* ==========================================================================
   18. PAGINA GUIDA — LA ZONA DEL MODULO
   Classe fm-modulo nell'Extra class della ROW, accanto a fm-fondo-tenue.
   Il modulo sta in una scheda bianca e a fianco c'e' il pannello scuro con
   il riepilogo: le stesse due forme della pagina del concorso, cosi' la
   zona che raccoglie i dati sembra parte del sito e non un modulo incollato.
   ========================================================================== */

:root {
	--fm-ico-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
	--fm-ico-libro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E");
	--fm-ico-regalo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M2 9h20v4H2zM12 9v12'/%3E%3Cpath d='M12 9C10 9 7 8.5 7 6a2 2 0 0 1 4-1c1 1 1 4 1 4ZM12 9c2 0 5-.5 5-3a2 2 0 0 0-4-1c-1 1-1 4-1 4Z'/%3E%3C/svg%3E");
}

.fm-modulo .wpb_column > .vc_column-inner {
	height: 100%;
}

/* La scheda bianca che contiene il modulo. */
.fm-modulo .wpb_column:first-child > .vc_column-inner {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background-color: var(--fm-scheda);
	border-radius: var(--fm-raggio-l);
	box-shadow: 0 2px 6px rgba(68, 27, 6, .06);
}

.fm-modulo h2 {
	margin-top: 0;
}

/* Il conteggio delle copie e' un'informazione, non un paragrafo: sta in
   una pillola sopra il modulo come i tag del resto del sito. */
/* inline-block e non inline-flex: dentro c'e' uno <strong> e con il flex
   diventava un elemento a se', andando a capo. */
.fm-copie {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: .375rem .875rem;
	background-color: var(--fm-tenue);
	border-radius: 999px;
	font-size: .875rem;
	color: var(--fm-tenue-testo);
}

.fm-copie::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: .5rem;
	height: .5rem;
	margin-right: .5rem;
	border-radius: 50%;
	background-color: currentColor;
}

.fm-copie strong {
	color: var(--fm-primario);
}

.fm-copie--poche {
	color: var(--fm-accento);
}

.fm-copie--esaurite {
	color: var(--fm-errore);
}

/* --------------------------------------------------------------------------
   18.1 Il modulo su due tracce
   Nome e cognome sono due dati corti: su una colonna sola facevano due
   campi larghi mezzo schermo per tre parole.
   -------------------------------------------------------------------------- */

.fm-modulo .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
	align-items: start;
}

.fm-modulo .wpcf7-form > * {
	grid-column: 1 / -1;
	margin: 0 0 1.125rem;
}

.fm-modulo .wpcf7-form > p:nth-of-type(1),
.fm-modulo .wpcf7-form > p:nth-of-type(2) {
	grid-column: span 1;
}

/* Le due spunte stanno su una fascia crema: si leggono come una scelta da
   fare, non come una postilla in fondo. */
.fm-modulo .wpcf7-acceptance,
.fm-modulo .wpcf7-checkbox {
	display: block;
	padding: .75rem .9375rem;
	background-color: var(--fm-tenue);
	border-radius: var(--fm-raggio-s);
}

.fm-modulo .wpcf7-form > p:has(.wpcf7-acceptance) {
	margin-bottom: .625rem;
}

.fm-modulo .wpcf7-response-output {
	margin: .5rem 0 0;
}

/* --------------------------------------------------------------------------
   18.2 Il pannello del riepilogo
   -------------------------------------------------------------------------- */

.fm-riepilogo > .vc_column-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.fm-riepilogo h3 {
	font-size: 1.125rem;
	margin-bottom: 1.25rem;
}

.fm-contatti > li.ic-data::before   { -webkit-mask-image: var(--fm-ico-data);   mask-image: var(--fm-ico-data); }
.fm-contatti > li.ic-libro::before  { -webkit-mask-image: var(--fm-ico-libro);  mask-image: var(--fm-ico-libro); }
.fm-contatti > li.ic-regalo::before { -webkit-mask-image: var(--fm-ico-regalo); mask-image: var(--fm-ico-regalo); }

@media (max-width: 767px) {

	.fm-modulo .wpcf7-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.fm-modulo .wpb_column + .wpb_column {
		margin-top: 2rem;
	}
}

/* ==========================================================================
   19. APPUNTAMENTI SENZA ORARIO FISSO
   Classe fm-libere nell'Extra class della ROW (accanto a fm-honeycomb).
   Dentro, una Row interna a tre colonne: ogni colonna e' una scheda con
   foto sopra e testo sotto. Prima era un elenco puntato: il cliente li
   voleva piu' visibili, e con la foto si capisce al volo di cosa si tratta.
   ========================================================================== */

/* La Row interna E' la griglia; quella esterna e' .l-section-h, che non
   porta wpb_row: per questo il selettore lo richiede. */
.fm-libere .wpb_row.g-cols {
	align-items: stretch;
	margin-top: 1.75rem;
}

.fm-libere .wpb_row.g-cols > .wpb_column > .vc_column-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--fm-scheda);
	border-radius: var(--fm-raggio-l);
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(68, 27, 6, .06);
}

.fm-libere .w-image {
	margin: 0;
}

.fm-libere .w-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.fm-libere .wpb_text_column {
	padding: 1.125rem 1.25rem 1.375rem;
}

.fm-libere .fm-occhiello {
	margin-bottom: .25rem;
}

.fm-libere h3 {
	margin: 0 0 .375rem;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--fm-primario);
}

.fm-libere .wpb_text_column p:last-child {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--fm-tenue-testo);
}

@media (max-width: 767px) {

	.fm-libere .wpb_row.g-cols > .wpb_column + .wpb_column {
		margin-top: 1.25rem;
	}
}

/* ==========================================================================
   20. RECAPITI NELLE SCHEDE DEGLI APICOLTORI
   Le stesse icone del box contatti, ma su fondo chiaro: qui il segno deve
   essere il marrone tenue, non la crema.
   ========================================================================== */

:root {
	--fm-ico-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18Z'/%3E%3C/svg%3E");
}

.fm-recapiti-scheda {
	list-style: none !important;
	margin: .75rem 0 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: .375rem;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--fm-tenue-testo);
}

.fm-recapiti-scheda > li {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}

.fm-recapiti-scheda > li::marker {
	content: none;
}

.fm-recapiti-scheda > li::before {
	content: "";
	flex: 0 0 auto;
	width: .9375rem;
	height: .9375rem;
	margin-top: .18em;
	background-color: var(--fm-accento);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.fm-recapiti-scheda > li.ic-pin::before { -webkit-mask-image: var(--fm-ico-pin); mask-image: var(--fm-ico-pin); }
.fm-recapiti-scheda > li.ic-tel::before { -webkit-mask-image: var(--fm-ico-tel); mask-image: var(--fm-ico-tel); }
.fm-recapiti-scheda > li.ic-web::before { -webkit-mask-image: var(--fm-ico-web); mask-image: var(--fm-ico-web); }

.fm-recapiti-scheda a {
	color: var(--fm-primario);
	text-decoration: none;
}

.fm-recapiti-scheda a:hover,
.fm-recapiti-scheda a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   21. IL NASTRO DEGLI SPONSOR
   Tutti uguali e in movimento: il cliente ha chiesto che nessuno stia
   fisso in cima e nessuno fisso in fondo. La pista contiene la fila due
   volte e scorre di meta' larghezza: al termine dell'animazione la
   seconda copia si trova esattamente dove stava la prima, quindi il
   ritorno a zero non si vede.
   ========================================================================== */

.fm-nastro {
	/* Valore di scorta: quello vero lo calcola il PHP sul numero di
	   sponsor, perche' la velocita' percepita dipende da quanta pista
	   c'e' da percorrere, non dal tempo di un giro. */
	--fm-nastro-durata: 180s;
	margin: 1.5rem 0 0;
	/* Spazio sopra e sotto: senza, la scheda ingrandita al passaggio del
	   mouse verrebbe tranciata dall'overflow. */
	padding-block: 1rem;
	overflow: hidden;
	/* Le due estremita' sfumano, cosi' i loghi non vengono tranciati. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.fm-nastro__pista {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	width: max-content;
	animation: fm-scorri var(--fm-nastro-durata) linear infinite;
}
.fm-nastro--js {
	overflow-x: auto;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.fm-nastro--js::-webkit-scrollbar {
	display: none;
}

.fm-nastro--presa {
	cursor: grabbing;
	user-select: none;
}

.fm-nastro--js .fm-sponsor a,
.fm-nastro--js .fm-sponsor img {
	-webkit-user-drag: none;
	user-select: none;
}

.fm-nastro--presa .fm-sponsor:hover {
	transform: none;
	border-color: var( --fm-bordo );
	box-shadow: none;
}

.fm-nastro--js .fm-nastro__pista {
	animation: none;
}
@keyframes fm-scorri {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Chi passa sopra o arriva con il tab sta guardando un logo: il nastro
   si ferma e gli lascia il tempo di leggerlo e di cliccarlo. */
.fm-nastro:hover .fm-nastro__pista,
.fm-nastro:focus-within .fm-nastro__pista {
	animation-play-state: paused;
}

/* La cassetta e' tagliata sulla misura delle inserzioni dell'anno scorso
   (258x153 px): a quella misura si leggono, rimpicciolite no. Un logo
   normale, piu' piccolo, ci sta comodo dentro senza sgranarsi. */
.fm-sponsor {
	margin: 0 1rem 0 0;
	flex: 0 0 auto;
	width: 16.125rem;
	height: 9.5625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .25rem;
	overflow: hidden;
	background-color: var(--fm-scheda);
	border: 1px solid var(--fm-bordo);
	border-radius: var(--fm-raggio);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/*
 * Al passaggio del mouse la scheda si ingrandisce. Funziona perche' il
 * nastro e' gia' fermo: la regola qui sopra mette in pausa l'animazione
 * appena il puntatore entra, quindi il logo non scappa mentre lo si
 * guarda. Vale anche per chi arriva con il tab, che e' l'unico modo di
 * raggiungere i link da tastiera.
 */
.fm-sponsor:hover,
.fm-sponsor:focus-within {
	position: relative;
	z-index: 2;
	transform: scale(1.08);
	border-color: var(--fm-accento);
	box-shadow: 0 8px 22px rgba(68, 27, 6, .18);
}

.fm-sponsor::marker {
	content: none;
}

.fm-sponsor a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* La cassetta e' la stessa per tutti: il logo ci sta dentro intero,
   grande quanto glielo permette la sua forma. Nessuno risulta piu'
   grande di un altro perche' ha il file piu' grande. */
.fm-sponsor img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

/* Senza logo resta il nome, che e' meglio di una cassetta vuota. */
.fm-sponsor__nome {
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--fm-primario);
}

.fm-lente {
	position: fixed;
	z-index: 90;
	width: 32.25rem;
	max-width: calc(100vw - 2rem);
	aspect-ratio: 258 / 153;
	padding: .5rem;
	background-color: var(--fm-scheda);
	border: 1px solid var(--fm-accento);
	border-radius: var(--fm-raggio-l);
	box-shadow: 0 16px 44px rgba(68, 27, 6, .3);
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s ease;
}

.fm-lente--vista {
	opacity: 1;
}

.fm-lente img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fm-lente__nome {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--fm-primario);
}

@media (prefers-reduced-motion: reduce) {

	.fm-lente {
		transition: none;
	}
}

/* A chi ha chiesto meno animazioni il nastro si presenta fermo: diventa
   una fila che si puo' scorrere a mano. */
@media (prefers-reduced-motion: reduce) {

	.fm-nastro {
		overflow-x: auto;
	}

	.fm-nastro__pista {
		animation: none;
	}

	/* Senza movimento la copia di servizio e' solo roba da scorrere. */
	.fm-nastro__pista .fm-sponsor[aria-hidden="true"] {
		display: none;
	}

	/* Chi ha chiesto meno animazioni non vuole nemmeno una scheda che si
	   gonfia sotto il puntatore: resta l'evidenziazione, che dice la
	   stessa cosa senza muovere niente. */
	.fm-sponsor {
		transition: box-shadow .2s ease, border-color .2s ease;
	}

	.fm-sponsor:hover,
	.fm-sponsor:focus-within {
		transform: none;
	}
}

@media (max-width: 600px) {

	.fm-sponsor {
		width: 13rem;
		height: 7.75rem;
	}
}