/* CalendarFDL — frontend.
   Linguaggio grafico della home del sito: card evento con blocco data
   colorato, tag pill, titoli Newsreader, testi Mulish, raggio 18px.
   I font li carica già il kit del sito: qui solo gli stack. */

.cfdl {
	--cfdl-crema: #FFFDF8;
	--cfdl-crema-scuro: #FBF6EC;
	--cfdl-crema-att: #E3D8C9;
	--cfdl-testo: #3B2F26;
	--cfdl-testo-att: #5E5044;
	--cfdl-senape: #C8954A;
	--cfdl-senape-scuro: #A9762E;
	--cfdl-rosa-scuro: #9A5D5F;
	--cfdl-oliva-scuro: #5E6E55;
	--cfdl-marrone: #5C3E40;
	--cfdl-linea: #4A3A2E1F;
	--cfdl-tinta-oliva: #8E9C7C24;
	--cfdl-tinta-senape: #C8954A1A;
	--cfdl-tinta-rosa: #BE808229;
	--cfdl-serif: 'Newsreader', Georgia, serif;
	--cfdl-sans: 'Mulish', 'Helvetica Neue', Arial, sans-serif;

	font-family: var(--cfdl-sans);
	color: var(--cfdl-testo);

	/* Dentro un contenitore flex che centra i figli il blocco non deve
	   restringersi alla larghezza del contenuto. */
	width: 100%;
}

/* Il widget Elementor che ospita lo shortcode: stessa difesa (un
   contenitore con «allinea al centro» lo farebbe collassare). */
.elementor-widget:has(.cfdl) { width: 100% !important; }

.cfdl, .cfdl * { box-sizing: border-box; }
.cfdl h2, .cfdl h3, .cfdl p { margin: 0; }

/* ------------------------------------------------------------ navigatore */

/* Senza JS il navigatore e i filtri non servono: restano nascosti
   e l'elenco completo dei mesi è visibile. */
.cfdl-nav, .cfdl-filtri { display: none; }

.cfdl-js .cfdl-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}
.cfdl-nav-titolo {
	font-family: var(--cfdl-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.55rem + 0.63vw, 2rem);
	line-height: 1.3;
	text-align: center;
	flex: 1;
}
/* I bottoni e i link stanno dentro pagine il cui tema/kit stila `button`,
   `a`, `h2`, `h3` con selettori tipo «.elementor-kit-N button:hover»:
   ogni stato qui è dichiarato per intero e con specificità maggiore. */
.cfdl .cfdl-freccia {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--cfdl-linea);
	background: var(--cfdl-crema-scuro);
	color: var(--cfdl-testo);
	font-size: 22px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.cfdl .cfdl-freccia:hover:not(:disabled),
.cfdl .cfdl-freccia:focus-visible {
	background: var(--cfdl-senape);
	color: var(--cfdl-testo);
}
.cfdl .cfdl-freccia:disabled { opacity: .5; cursor: default; }

/* Focus esplicito: molti temi azzerano l'outline globalmente. */
.cfdl .cfdl-freccia:focus-visible,
.cfdl .cfdl-filtro:focus-visible,
.cfdl .cfdl-cella:focus-visible,
.cfdl .cfdl-link:focus-visible {
	outline: 2px solid var(--cfdl-testo);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- filtri */

.cfdl-js .cfdl-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.cfdl .cfdl-filtro {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--cfdl-linea);
	background: transparent;
	color: var(--cfdl-testo-att);
	font-family: var(--cfdl-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .2px;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
/* Hover in Rosa antico scuro con scritta crema (5,03:1). */
.cfdl .cfdl-filtro:hover,
.cfdl .cfdl-filtro:focus-visible {
	background: var(--cfdl-rosa-scuro);
	border-color: var(--cfdl-rosa-scuro);
	color: var(--cfdl-crema);
}
.cfdl .cfdl-filtro.cfdl-attivo,
.cfdl .cfdl-filtro.cfdl-attivo:hover,
.cfdl .cfdl-filtro.cfdl-attivo:focus-visible {
	background: var(--cfdl-senape);
	border-color: var(--cfdl-senape);
	color: var(--cfdl-testo);
}

/* ------------------------------------------------------------------ mesi */

.cfdl-mese { margin: 0 0 32px; }
.cfdl-mese:last-child { margin-bottom: 0; }
.cfdl-js .cfdl-mese { display: none; margin: 0; }
.cfdl-js .cfdl-mese.cfdl-mese-attivo { display: block; }

.cfdl .cfdl-mese-titolo {
	font-family: var(--cfdl-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.55rem + 0.63vw, 2rem);
	line-height: 1.3;
	color: var(--cfdl-testo);
	margin: 0 0 20px;
}
/* Con JS il titolo del mese sta nel navigatore; l'intestazione resta
   nell'albero di accessibilità (visually hidden, non display:none). */
.cfdl.cfdl-js .cfdl-mese-titolo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cfdl-vuoto {
	font-family: var(--cfdl-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.313rem, 1.25rem + 0.31vw, 1.5rem);
	line-height: 1.4;
	color: var(--cfdl-testo-att);
	padding: 24px 0;
}

/* -------------------------------------------------------------- la card */

.cfdl-evento {
	display: flex;
	background: var(--cfdl-tinta-oliva);
	border: 1px solid var(--cfdl-linea);
	border-radius: 18px;
	overflow: hidden;
	margin: 0 0 20px;
}
.cfdl-evento:last-child { margin-bottom: 0; }
.cfdl-evento.cfdl-nascosto { display: none; }

.cfdl-data {
	flex: 0 0 108px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 18px 12px;
	color: var(--cfdl-crema);
}
.cfdl-giorno {
	font-family: var(--cfdl-serif);
	font-weight: 400;
	font-size: clamp(2.5rem, 2.386rem + 0.57vw, 2.813rem);
	line-height: 1.15;
}
.cfdl-mese-breve {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.cfdl-corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 20px 24px;
	min-width: 0;
}

.cfdl-tag {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--cfdl-testo-att);
	padding: 5px 12px;
	border-radius: 999px;
}

.cfdl .cfdl-titolo {
	font-family: var(--cfdl-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.35rem + 0.63vw, 1.8rem);
	line-height: 1.3;
	color: var(--cfdl-testo);
	margin: 0;
}

.cfdl-quando {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -.3px;
	color: var(--cfdl-testo-att);
}

.cfdl-descrizione {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -.3px;
	color: var(--cfdl-testo-att);
	max-width: 620px;
}

/* Dentro la card i colori link del kit (#A9762E / #9A5D5F) non raggiungono
   il 4,5:1: si usa il Marrone del kit (8,2:1); la freccia nel testo del link
   resta il segnale non cromatico. */
.cfdl .cfdl-link {
	font-family: var(--cfdl-sans);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: .2px;
	color: var(--cfdl-marrone);
	text-decoration: none;
	background: none;
}
.cfdl .cfdl-link:hover,
.cfdl .cfdl-link:focus-visible {
	color: var(--cfdl-testo);
	text-decoration: underline;
	background: none;
}

/* ------------------------------------------------- colori per categoria */
/* Varianti scure del kit: il testo crema sul blocco data resta leggibile
   (contrasti ≥ 5:1; le tinte medie della home non superano le soglie). */

.cfdl-cat-rosa    .cfdl-data { background: var(--cfdl-rosa-scuro); }
.cfdl-cat-oliva   .cfdl-data { background: var(--cfdl-oliva-scuro); }
.cfdl-cat-marrone .cfdl-data { background: var(--cfdl-marrone); }
.cfdl-cat-neutro  .cfdl-data { background: var(--cfdl-testo-att); }
.cfdl-cat-chiaro  .cfdl-data { background: var(--cfdl-crema-att); color: var(--cfdl-testo); }

.cfdl-cat-rosa    .cfdl-tag { background: var(--cfdl-tinta-rosa); }
.cfdl-cat-oliva   .cfdl-tag { background: var(--cfdl-tinta-oliva); }
.cfdl-cat-marrone .cfdl-tag { background: var(--cfdl-tinta-senape); }
.cfdl-cat-neutro  .cfdl-tag,
.cfdl-cat-chiaro  .cfdl-tag { background: var(--cfdl-crema-att); }

/* La card «vacanze» ha il blocco chiaro: il bordo la tiene distinta. */
.cfdl-cat-chiaro .cfdl-data { border-right: 1px solid var(--cfdl-linea); }

/* --------------------------------------------------------- vista griglia */

/* Testo presente solo per gli screen reader. */
.cfdl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cfdl-tab {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 6px;
	margin: 0;
}
.cfdl-tab th {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--cfdl-testo-att);
	text-align: center;
	padding: 0 0 6px;
}
.cfdl-cella-td {
	background: var(--cfdl-crema-scuro);
	border: 1px solid var(--cfdl-linea);
	border-radius: 12px;
	height: 100px;
	vertical-align: top;
	padding: 8px;
}
.cfdl-fuori { background: transparent; }
.cfdl-oggi {
	background: var(--cfdl-tinta-senape);
	border: 2px solid var(--cfdl-senape-scuro);
}
.cfdl-oggi .cfdl-cella-num { font-weight: 700; }

.cfdl .cfdl-cella {
	display: block;
	width: 100%;
	height: 100%;
	background: none;
	border: 0;
	border-radius: 8px;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.cfdl .cfdl-cella:hover:not(:disabled) { background: var(--cfdl-tinta-senape); }
.cfdl .cfdl-cella:disabled { cursor: default; background: none; }
.cfdl-cella-num {
	display: block;
	font-family: var(--cfdl-sans);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--cfdl-testo);
	margin: 0 0 8px;
}

.cfdl-chips {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cfdl-chip {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cfdl-testo-att);
	padding: 2px 9px;
	border-radius: 999px;
}
.cfdl-chip-extra {
	font-family: var(--cfdl-sans);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cfdl-testo-att);
	padding: 0 2px;
}
.cfdl-chip.cfdl-nascosto,
.cfdl-chip-extra.cfdl-nascosto { display: none; }

/* Le chip usano le tinte di categoria, come i tag delle card. */
.cfdl-chip.cfdl-cat-rosa    { background: var(--cfdl-tinta-rosa); }
.cfdl-chip.cfdl-cat-oliva   { background: var(--cfdl-tinta-oliva); }
.cfdl-chip.cfdl-cat-marrone { background: var(--cfdl-tinta-senape); }
.cfdl-chip.cfdl-cat-neutro,
.cfdl-chip.cfdl-cat-chiaro  { background: var(--cfdl-crema-att); }

/* Il pannello del giorno (popolato dal JS clonando le card del mese). */
.cfdl-pannello { margin: 16px 0 0; outline: none; }
.cfdl-pannello-titolo {
	font-family: var(--cfdl-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.313rem, 1.25rem + 0.31vw, 1.5rem);
	line-height: 1.4;
	color: var(--cfdl-testo-att);
	margin: 0 0 12px;
}

/* Le card del mese sotto la griglia: fallback senza JS e sorgente del
   pannello. Con JS restano nel DOM ma non si vedono. */
.cfdl-mese-lista { margin: 20px 0 0; }
.cfdl-js .cfdl-mese-lista { display: none; }

/* ---------------------------------------------------------- vista elenco */

.cfdl-paginazione { display: none; }
.cfdl-js .cfdl-paginazione {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}
.cfdl-pagina-info {
	font-family: var(--cfdl-serif);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.1rem + 0.42vw, 1.4rem);
	line-height: 1.2;
	text-align: center;
	flex: 1;
}
.cfdl .cfdl-passati-titolo {
	font-family: var(--cfdl-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.55rem + 0.63vw, 2rem);
	line-height: 1.3;
	color: var(--cfdl-testo);
	margin: 28px 0 20px;
}
.cfdl-evento.cfdl-fuori-pagina { display: none; }

/* Anno nel blocco data (solo elenco): come .evento .anno della home,
   ma in Crema pieno — il crema attenuato non regge i 4,5:1 a 14px. */
.cfdl-anno {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.2px;
}

.cfdl-tag-riga {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
/* «In corso»: l'identità senape del filtro attivo (4,85:1). */
.cfdl-in-corso {
	font-family: var(--cfdl-sans);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .8px;
	text-transform: uppercase;
	background: var(--cfdl-senape);
	color: var(--cfdl-testo);
	padding: 5px 12px;
	border-radius: 999px;
}

/* --------------------------------------------------------------- tablet */

@media (min-width: 768px) and (max-width: 1024px) {
	.cfdl-cella-td { height: 84px; padding: 6px; }
	.cfdl-chip { font-size: 11px; padding: 2px 7px; }
	.cfdl-chip-extra { font-size: 11px; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	/* Come in home (.evento a 767px): card impilata, blocco data in riga,
	   stesse misure. Nessuna spaziatura verticale sopra i 32px. */
	.cfdl-evento { flex-direction: column; }
	.cfdl-data {
		flex: none;
		flex-direction: row;
		gap: 10px;
		padding: 10px 12px;
	}
	.cfdl-cat-chiaro .cfdl-data {
		border-right: 0;
		border-bottom: 1px solid var(--cfdl-linea);
	}
	.cfdl-js .cfdl-nav { margin-bottom: 20px; gap: 10px; }
	.cfdl-js .cfdl-filtri { margin-bottom: 20px; gap: 8px; }
	.cfdl .cfdl-filtro { padding: 8px 14px; }
	.cfdl-mese { margin-bottom: 28px; }
	.cfdl .cfdl-mese-titolo { margin-bottom: 16px; }
	.cfdl-vuoto { padding: 16px 0; }

	/* Griglia compatta: 7 colonne restano, le chip diventano puntini
	   colorati (varianti scure: le tinte non si vedono a 8px). */
	.cfdl-tab { border-spacing: 4px; }
	.cfdl-cella-td { height: 48px; padding: 4px; border-radius: 10px; }
	.cfdl-cella-num { font-size: 12px; margin: 0 0 3px; }
	.cfdl-chips { flex-direction: row; flex-wrap: wrap; gap: 3px; }
	.cfdl-chip {
		font-size: 0;
		width: 8px;
		height: 8px;
		padding: 0;
		border-radius: 50%;
	}
	.cfdl-chip.cfdl-cat-rosa    { background: var(--cfdl-rosa-scuro); }
	.cfdl-chip.cfdl-cat-oliva   { background: var(--cfdl-oliva-scuro); }
	.cfdl-chip.cfdl-cat-marrone { background: var(--cfdl-marrone); }
	.cfdl-chip.cfdl-cat-neutro  { background: var(--cfdl-testo-att); }
	.cfdl-chip.cfdl-cat-chiaro {
		background: var(--cfdl-crema-att);
		border: 1px solid var(--cfdl-testo-att);
	}
	.cfdl-chip-extra { font-size: 10px; line-height: 10px; padding: 0; }
	.cfdl-pannello-titolo { margin-bottom: 10px; }
	.cfdl-mese-lista { margin-top: 16px; }
	.cfdl-js .cfdl-paginazione { margin-top: 20px; gap: 10px; }
	.cfdl .cfdl-passati-titolo { margin: 24px 0 16px; }
}