/*
 * Fisiosalus UI Kit
 * Un solo posto in cui vivono spaziature, gerarchia e componenti delle pagine
 * editoriali. I valori nascono dal tema Divi gia in uso: colore #2cbee3,
 * Poppins per i titoli, Montserrat per il testo.
 */

:root {
	--fs-accento: #2cbee3;
	--fs-accento-scuro: #1a8fad;
	--fs-inchiostro: #1f3d47;
	--fs-testo: #33474e;
	--fs-tenue: #5a6b70;
	--fs-chiaro: #f4fafb;
	--fs-bordo: #d6eaf0;
	--fs-raggio: 10px;
	--fs-ombra: 0 1px 3px rgba(31, 61, 71, .07), 0 6px 18px rgba(31, 61, 71, .06);
	--fs-ombra-alta: 0 3px 8px rgba(31, 61, 71, .10), 0 14px 32px rgba(31, 61, 71, .10);
}

/* ---------------------------------------------------------------- gerarchia */

.fs-contenuto {
	color: var(--fs-testo);
	font-size: 17px;
	line-height: 1.75;
}

.fs-contenuto h2 {
	font-family: Poppins, Montserrat, sans-serif;
	font-weight: 600;
	font-size: clamp(25px, 3.1vw, 31px);
	line-height: 1.25;
	color: var(--fs-inchiostro);
	margin: 2.6em 0 .85em;
	padding-bottom: .42em;
	border-bottom: 2px solid var(--fs-bordo);
}

.fs-contenuto > h2:first-child {
	margin-top: 0;
}

.fs-contenuto h3 {
	font-family: Poppins, Montserrat, sans-serif;
	font-weight: 600;
	font-size: clamp(19px, 2.2vw, 21px);
	line-height: 1.35;
	color: var(--fs-inchiostro);
	margin: 1.9em 0 .5em;
}

.fs-contenuto p { margin: 0 0 1.15em; }
.fs-contenuto ul,
.fs-contenuto ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.fs-contenuto li { margin-bottom: .5em; }

.fs-contenuto a {
	color: var(--fs-accento-scuro);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.fs-contenuto a:hover { color: var(--fs-inchiostro); }

/* Un'introduzione piu grande separa il primo respiro dal corpo del testo. */
.fs-occhiello {
	font-size: clamp(18px, 2.3vw, 20px);
	line-height: 1.65;
	color: var(--fs-inchiostro);
	margin-bottom: 1.8em;
}

/* ------------------------------------------------------- criteri numerati */

.fs-criteri { counter-reset: fs-n; list-style: none; padding: 0; margin: 0 0 1em; }

.fs-criteri > li {
	counter-increment: fs-n;
	position: relative;
	padding: 0 0 0 3.5rem;
	margin-bottom: 1.7em;
}

.fs-criteri > li::before {
	content: counter(fs-n);
	position: absolute;
	left: 0;
	top: .1em;
	width: 2.4rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--fs-accento);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
}

.fs-criteri h3 { margin: 0 0 .3em; }

/* ------------------------------------------------------------ griglia schede */

.fs-gruppo { margin-bottom: 2.6em; }

.fs-gruppo > h3 {
	font-size: clamp(17px, 2vw, 19px);
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--fs-accento-scuro);
	border-bottom: 1px solid var(--fs-bordo);
	padding-bottom: .45em;
	margin: 0 0 1.4em;
}

.fs-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 1.5rem;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

/* Divi rimette il marcatore agli <li> dentro il contenuto: va tolto sul figlio. */
.fs-griglia > li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fs-griglia > li::marker { content: none; }
.fs-criteri > li::marker { content: none; }

.fs-scheda {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fs-bordo);
	border-radius: var(--fs-raggio);
	box-shadow: var(--fs-ombra);
	overflow: hidden;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fs-scheda:hover,
.fs-scheda:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--fs-ombra-alta);
	border-color: var(--fs-accento);
}

.fs-scheda:focus-visible { outline: 3px solid var(--fs-accento); outline-offset: 2px; }

.fs-scheda__foto {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	background: var(--fs-chiaro);
}

/* Chi non ha una fotografia riceve le iniziali, non un riquadro vuoto. */
.fs-scheda__iniziali {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(140deg, #2cbee3 0%, #7fd6e9 100%);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 2.4rem;
	letter-spacing: .04em;
}

.fs-scheda__testo { padding: .95rem 1.05rem 1.15rem; }

.fs-scheda__nome {
	display: block;
	font-family: Poppins, Montserrat, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: var(--fs-inchiostro);
	margin-bottom: .3em;
}

.fs-scheda__ruolo {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--fs-accento-scuro);
}

.fs-scheda__nota {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fs-tenue);
	margin-top: .4em;
}

/* --------------------------------------------------------------- richiami */

.fs-nota {
	background: var(--fs-chiaro);
	border: 1px solid var(--fs-bordo);
	border-left: 4px solid var(--fs-accento);
	border-radius: var(--fs-raggio);
	padding: 1.15rem 1.35rem;
	margin: 1.9em 0;
}

.fs-nota > :last-child { margin-bottom: 0; }

.fs-nota--attenzione { border-left-color: #e0a63c; }

/* ------------------------------------------------------------------- faq */

.fs-faq { margin: 0; }

.fs-faq > div {
	border-bottom: 1px solid var(--fs-bordo);
	padding: 1.25em 0;
}

.fs-faq > div:first-child { border-top: 1px solid var(--fs-bordo); }

.fs-faq h3 { margin: 0 0 .5em; font-size: 18px; }
.fs-faq p { margin: 0; color: var(--fs-testo); }

/* ------------------------------------------------------------------ fonti */

.fs-fonti {
	background: var(--fs-chiaro);
	border-radius: var(--fs-raggio);
	padding: 1.3rem 1.5rem;
	font-size: 15px;
	line-height: 1.6;
}

.fs-fonti ol,
.fs-fonti ul { margin: 0; padding-left: 1.2em; }
.fs-fonti li { margin-bottom: .75em; color: var(--fs-tenue); }
.fs-fonti li:last-child { margin-bottom: 0; }

/* ------------------------------------------------- blocchi gia esistenti */

.fisio-recensioni,
.fisio-revisione-medica {
	border-radius: var(--fs-raggio) !important;
	border: 1px solid var(--fs-bordo) !important;
	background: var(--fs-chiaro) !important;
	padding: 1.2rem 1.4rem !important;
	margin: 2.4em 0 0 !important;
}

.fisio-revisione-medica { border-left: 4px solid var(--fs-accento) !important; }

.fisio-recensioni p,
.fisio-revisione-medica p { line-height: 1.6; }

/* ------------------------------------------------------------ chiamata */

.fs-cta {
	background: linear-gradient(135deg, #2cbee3 0%, #56cfe6 100%);
	border-radius: var(--fs-raggio);
	padding: 2.1rem 1.9rem;
	color: #fff;
	text-align: center;
	margin: 2.6em 0 0;
}

.fs-cta h2 {
	color: #fff !important;
	border: 0 !important;
	margin: 0 0 .45em !important;
	padding: 0 !important;
}

.fs-cta p { margin: 0 0 1.3em; font-size: 16.5px; line-height: 1.65; }
.fs-cta a:not(.fs-bottone) { color: #fff; text-decoration: underline; }

.fs-bottone {
	display: inline-block;
	background: #fff;
	color: var(--fs-accento-scuro) !important;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: .85em 2.1em;
	border-radius: 6px;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
}

.fs-bottone:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

/* -------------------------------------------- mappa del sito (generata) */

.fs-mappa__gruppo { margin: 0 0 2.6em; }

.fs-mappa__gruppo h2 {
	font-family: Poppins, Montserrat, sans-serif;
	font-weight: 600;
	font-size: clamp(20px, 2.3vw, 24px);
	color: var(--fs-inchiostro);
	margin: 0 0 1em;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--fs-bordo);
	display: flex;
	align-items: baseline;
	gap: .6rem;
}

.fs-mappa__conta {
	font-size: 13px;
	font-weight: 600;
	color: var(--fs-accento-scuro);
	background: var(--fs-chiaro);
	border: 1px solid var(--fs-bordo);
	border-radius: 999px;
	padding: .1em .7em;
	line-height: 1.6;
}

.fs-mappa__elenco {
	columns: 3 250px;
	column-gap: 2.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-mappa__elenco li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	list-style: none;
	margin: 0 0 .55em;
	padding: 0 0 0 .9rem;
	position: relative;
	line-height: 1.45;
}

.fs-mappa__elenco li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--fs-bordo);
}

.fs-mappa__elenco a {
	color: var(--fs-testo);
	text-decoration: none;
	font-size: 15px;
}

.fs-mappa__elenco a:hover,
.fs-mappa__elenco a:focus-visible {
	color: var(--fs-accento-scuro);
	text-decoration: underline;
}

.fs-mappa__nota {
	margin: 2.2em 0 0;
	padding-top: 1.1em;
	border-top: 1px solid var(--fs-bordo);
	color: var(--fs-tenue);
}

/* ----------------------------------------------- mappa del sito (wsp-*) */
/*
 * La pagina /mappa-del-sito/ e' generata da uno shortcode che interroga il
 * database a ogni caricamento: resta aggiornata da sola. Qui si interviene
 * solo sull'aspetto, senza toccare l'elenco.
 */

.wsp-container {
	font-size: 15.5px;
	line-height: 1.55;
}

.wsp-container h2,
.wsp-pages-title,
.wsp-posts-title,
.wsp-category-title,
.wsp-archive-title {
	font-family: Poppins, Montserrat, sans-serif;
	font-weight: 600;
	font-size: clamp(21px, 2.4vw, 25px);
	color: var(--fs-inchiostro);
	margin: 2.4em 0 1em;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--fs-bordo);
}

.wsp-container > :first-child { margin-top: 0; }

/* L'elenco di primo livello va in colonne: 400 voci in fila sola sono illeggibili. */
.wsp-container > ul {
	columns: 3 260px;
	column-gap: 2.2rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
}

.wsp-container > ul > li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 .85em;
	padding: 0;
	list-style: none;
}

.wsp-container > ul > li > a {
	font-weight: 600;
	color: var(--fs-inchiostro);
	text-decoration: none;
}

.wsp-container > ul > li > a:hover { color: var(--fs-accento-scuro); text-decoration: underline; }

.wsp-container ul.children {
	list-style: none;
	margin: .4em 0 0;
	padding: 0 0 0 .9rem;
	border-left: 2px solid var(--fs-bordo);
}

.wsp-container ul.children li { margin: 0 0 .3em; list-style: none; }

.wsp-container ul.children a {
	color: var(--fs-tenue);
	text-decoration: none;
	font-size: 14.5px;
}

.wsp-container ul.children a:hover { color: var(--fs-accento-scuro); text-decoration: underline; }

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

@media (max-width: 767px) {
	.fs-contenuto { font-size: 16.5px; }
	.fs-griglia { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1rem; }
	.fs-scheda__testo { padding: .8rem .85rem 1rem; }
	.fs-scheda__nome { font-size: 15px; }
	.fs-scheda__ruolo { font-size: 13px; }
	.fs-criteri > li { padding-left: 3rem; }
	.fs-cta { padding: 1.7rem 1.2rem; }
	.wsp-container > ul { columns: 1; }
	.fs-mappa__elenco { columns: 1; }
}

/* ------------------------------------------------ convenzioni: allineamento */
/*
 * Le 32 pagine convenzione hanno un loro impianto. Qui si allineano i due
 * dettagli che le facevano sembrare di un altro sito: il filetto sotto i
 * titoli di sezione e il respiro fra un blocco e l'altro.
 */

/* Gli h2 stavano dentro contenitori diversi e solo una parte prendeva il
   filetto: la regola vale su tutti, esclusi quelli dentro le card. */
.fisio-conv-page h2 {
	padding-bottom: .42em;
	border-bottom: 2px solid var(--fs-bordo);
	margin-bottom: .85em;
}

.fisio-conv-page .fisio-conv-hero h2,
.fisio-conv-page .fisio-conv-card h2,
.fisio-conv-page .fisio-conv-info-panel h2,
.fisio-conv-page .fisio-conv-service-links h2 {
	border-bottom: 0;
	padding-bottom: 0;
}

.fisio-conv-page .fisio-conv-section { margin-bottom: 2.6em; }

.fisio-conv-page .fisio-conv-info-panel {
	border-radius: var(--fs-raggio);
	border: 1px solid var(--fs-bordo);
}

.fisio-conv-page .fisio-conv-button { border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
	.fs-scheda, .fs-bottone { transition: none; }
	.fs-scheda:hover, .fs-bottone:hover { transform: none; }
}