/* =====================================================================
   IIPM – base: caratteri, colori, testi, blocchi dell'editor, moduli.
   Usato sia sul sito sia nell'editor delle pagine.
   ===================================================================== */


@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cinzel-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); }

:root {
	/* Palette «verde inglese, crema e ottone». I nomi delle variabili restano quelli originari per compatibilità. */
	--inchiostro: #1e3a2f;        /* verde inglese: titoli, fasce scure */
	--inchiostro-scuro: #14261f;  /* verde molto scuro: piè di pagina, testo sui pulsanti oro */
	--testo: #1f2622;             /* grafite: testo corrente */
	--amaranto: #7a5c24;          /* ottone scuro: collegamenti e richiami su fondo chiaro */
	--amaranto-scuro: #5e4619;
	--oro: #c5a059;               /* ottone: pulsanti e dettagli su fondo scuro */
	--oro-chiaro: #d4b26f;
	--acciaio: #515c57;           /* grigio ardesia: testi secondari */
	--carta: #eee9de;             /* pergamena: aperture delle pagine */
	--crema: #f7f5f0;             /* fondo del sito */
	--bianco: #ffffff;
	--filo: #ded8cc;
	--bordo: #8a8575;             /* bordi dei campi dei moduli */
	--evidenzia: #fff1a8;
	--errore: #a40e26;

	--f-testo: "Lora", Georgia, "Times New Roman", serif;
	--f-titoli: "Cinzel", "Trajan Pro", Georgia, serif;
	--f-ui: "Lora", Georgia, serif;

	--margine: clamp(1rem, 4vw, 2.5rem);
	--larghezza: 1180px;
	--misura: 68ch;
	--fascia: clamp(3rem, 7vw, 5.5rem);
}

/* ---------- Testi ---------- */

body {
	margin: 0;
	background: var(--crema);
	color: var(--testo);
	font-family: var(--f-testo);
	font-size: 1.125rem;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.wp-block-heading {
	font-family: var(--f-ui);
	font-weight: 600;
	line-height: 1.2;
	color: var(--inchiostro);
	text-wrap: balance;
	margin: 0 0 0.5em;
}
/* Cinzel (maiuscolo romano, come le iscrizioni) solo per titoli di pagina e di sezione. */
h1, h2, h1.wp-block-heading, h2.wp-block-heading {
	font-family: var(--f-titoli);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.15;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.1; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
a { color: var(--amaranto); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--amaranto-scuro); text-decoration-thickness: 2px; }
strong { font-weight: 600; }
::selection { background: var(--inchiostro); color: var(--bianco); }

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

.iipm-lead { font-size: clamp(1.2rem, 2vw, 1.375rem); line-height: 1.5; max-width: 40em; }

mark.iipm-dc { background: var(--evidenzia); color: var(--inchiostro); padding: 0 0.15em; border-radius: 2px; }

.iipm-nota {
	border-left: 3px solid var(--inchiostro);
	padding: 0.25em 0 0.25em 1em;
	color: var(--acciaio);
	font-size: 1rem;
}

/* ---------- Elenchi ---------- */

.wp-block-list { padding-left: 1.2em; margin: 0 0 1.25em; }
.wp-block-list li { margin-bottom: 0.4em; }
.wp-block-list li::marker { color: var(--amaranto); }

/* Percorso in fasi numerate: un vero elenco ordinato, con la linea che collega le fasi. */
ol.iipm-passi { list-style: none; counter-reset: passo; padding: 0; margin: 0 0 2rem; max-width: 46em; }
ol.iipm-passi > li {
	counter-increment: passo;
	position: relative;
	padding: 0 0 1.4rem 3.6rem;
	margin: 0;
	min-height: 2.6rem;
}
ol.iipm-passi > li::before {
	content: counter(passo);
	position: absolute; left: 0; top: -0.1rem;
	width: 2.4rem; height: 2.4rem;
	display: grid; place-items: center;
	font-family: var(--f-titoli); font-weight: 600; font-size: 1.15rem;
	color: var(--oro); background: var(--inchiostro);
	border-radius: 50%; box-shadow: inset 0 0 0 2px var(--inchiostro), inset 0 0 0 3px rgba(197,160,89,0.55);
}
ol.iipm-passi > li:not(:last-child)::after {
	content: ""; position: absolute; left: 1.2rem; top: 2.5rem; bottom: 0.15rem;
	width: 2px; background: var(--filo);
}
ol.iipm-passi--piccoli > li { padding-left: 2.8rem; padding-bottom: 0.9rem; font-size: 1rem; }
ol.iipm-passi--piccoli > li::before { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
ol.iipm-passi--piccoli > li:not(:last-child)::after { left: 0.95rem; top: 2rem; }

ul.iipm-cronologia { list-style: none; padding: 0; border-left: 2px solid var(--inchiostro); max-width: 46em; }
ul.iipm-cronologia li { padding: 0 0 1em 1.5rem; position: relative; }
ul.iipm-cronologia li::before { content: ""; position: absolute; left: -7px; top: 0.55em; width: 12px; height: 12px; background: var(--bianco); border: 2px solid var(--amaranto); border-radius: 50%; }

/* ---------- Pulsanti ---------- */

.wp-block-button__link,
.iipm-pulsante {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: var(--f-ui); font-weight: 600; font-size: 1.02rem; line-height: 1.2; letter-spacing: 0.01em;
	padding: 0.85em 1.4em;
	background: var(--oro); color: var(--inchiostro-scuro);
	border: 2px solid var(--oro); border-radius: 2px;
	text-decoration: none; cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:hover, .iipm-pulsante:hover { background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: var(--inchiostro-scuro); }
.wp-block-button.is-style-outline .wp-block-button__link,
.iipm-pulsante--secondario { background: transparent; color: var(--inchiostro); border-color: var(--inchiostro); }
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.iipm-pulsante--secondario:hover { background: var(--inchiostro); color: var(--crema); border-color: var(--inchiostro); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }

/* ---------- Domande a comparsa ---------- */

.wp-block-details { border-top: 1px solid var(--filo); padding: 0; margin: 0 !important; max-width: 52em; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--filo); }
.wp-block-details summary {
	font-family: var(--f-ui); font-weight: 600; font-size: 1.25rem; line-height: 1.3;
	padding: 1rem 2.5rem 1rem 0; cursor: pointer; position: relative; list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; position: absolute; right: 0.25rem; top: 0.8rem;
	font-size: 1.6rem; line-height: 1; color: var(--amaranto);
}
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { padding-bottom: 0.5rem; }
h2 + .wp-block-details, h3 + .wp-block-details { margin-top: 0.5rem !important; }
.wp-block-details + h2, .wp-block-details + h3 { margin-top: 2.5rem !important; }

/* ---------- Voci (servizi, principi, destinatari) ---------- */

.iipm-voci {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: 2.25rem 3.5rem;
	margin-top: 1.5rem !important;
}
.iipm-voci > * { margin: 0 !important; }
.iipm-voci--tre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.iipm-voce { border-top: 2px solid var(--inchiostro); padding-top: 1rem; }
.iipm-voce h3 { margin: 0 0 0.4em; }
.iipm-voce h3 a { color: var(--inchiostro); text-decoration: none; }
.iipm-voce h3 a:hover { color: var(--amaranto); text-decoration: underline; }
.iipm-voce p { margin-bottom: 0.6em; }
.iipm-voce p:last-child { margin-bottom: 0; }
.iipm-voce__nota { font-size: 0.95rem; color: var(--acciaio); }

/* ---------- Moduli ---------- */

.iipm-modulo { max-width: 40em; }
.iipm-modulo__nota { font-size: 0.95rem; color: var(--acciaio); }
.iipm-campo { margin: 0 0 1.4rem; border: 0; padding: 0; min-width: 0; }
.iipm-campo > label, .iipm-campo > legend {
	display: block; margin-bottom: 0.35rem; padding: 0;
	font-family: var(--f-ui); font-weight: 600; font-size: 1.1rem; line-height: 1.3;
}
.iipm-campo__obbl { color: var(--amaranto); }
.iipm-campo__aiuto { font-size: 0.95rem; color: var(--acciaio); margin: -0.15rem 0 0.45rem; line-height: 1.45; }
.iipm-campo input[type=text], .iipm-campo input[type=email], .iipm-campo input[type=tel], .iipm-campo input[type=date],
.iipm-campo select, .iipm-campo textarea, .iipm-campo input[type=file] {
	width: 100%; max-width: 100%; box-sizing: border-box;
	font: inherit; font-size: 1.05rem; color: var(--inchiostro);
	background: var(--bianco);
	border: 1.5px solid var(--bordo); border-radius: 3px;
	padding: 0.65em 0.75em;
}
.iipm-campo input[type=file] { padding: 0.55em; border-style: dashed; }
.iipm-campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%), linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%); background-position: calc(100% - 1.2em) 55%, calc(100% - 0.85em) 55%; background-size: 0.35em 0.35em; background-repeat: no-repeat; padding-right: 2.5em; }
.iipm-campo textarea { min-height: 8em; resize: vertical; }
.iipm-campo input:focus, .iipm-campo select:focus, .iipm-campo textarea:focus { outline: 3px solid var(--amaranto); outline-offset: 1px; border-color: var(--inchiostro); }
.iipm-scelte { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.iipm-campo .iipm-scelta, .iipm-scelta { display: inline-flex; align-items: flex-start; gap: 0.5em; font-weight: 400; cursor: pointer; line-height: 1.4; }
.iipm-campo--radio .iipm-scelta, .iipm-campo--checkboxes .iipm-scelta {
	border: 1.5px solid var(--filo); border-radius: 3px; padding: 0.5em 0.8em; background: var(--bianco); font-size: 1rem;
}
.iipm-campo--radio .iipm-scelta:has(input:checked), .iipm-campo--checkboxes .iipm-scelta:has(input:checked) { border-color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.iipm-scelta input { width: 1.15em; height: 1.15em; margin: 0.15em 0 0; accent-color: var(--inchiostro); flex: none; }
.iipm-campo--consenso .iipm-scelta { font-size: 1rem; }
.iipm-campo__errore { color: var(--errore); font-weight: 600; font-size: 0.98rem; margin: 0.35rem 0 0; }
.iipm-campo__errore:empty { display: none; }
.iipm-campo--errato input:not([type=checkbox]):not([type=radio]), .iipm-campo--errato select, .iipm-campo--errato textarea { border-color: var(--errore); border-width: 2px; }
.iipm-modulo__errore { border-left: 4px solid var(--errore); background: #fbecee; padding: 0.9em 1.1em; margin-bottom: 1.5rem; font-weight: 600; }
.iipm-modulo__esperto { background: var(--carta); padding: 0.75em 1em; border-radius: 3px; }
.iipm-modulo__informativa { font-size: 0.92rem; color: var(--acciaio); line-height: 1.5; }
.iipm-modulo__invio { margin-top: 1.25rem; }
.iipm-passo { border: 0; padding: 0; margin: 0; min-width: 0; }
.iipm-passo__titolo { font-family: var(--f-ui); font-weight: 600; font-size: 1.5rem; padding: 0; margin-bottom: 1rem; }
.iipm-passo__titolo:focus { outline: none; }
.iipm-passo__navigazione { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.5rem 0 1.5rem; }
.iipm-modulo__avanzamento { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1.25rem; }
.iipm-tacca { width: 3rem; height: 5px; background: var(--filo); border-radius: 3px; }
.iipm-tacca--fatta { background: var(--inchiostro); }
.iipm-tacca--corrente { background: var(--oro); }
.iipm-avanzamento__testo { margin-left: 0.6rem; font-family: var(--f-ui); font-weight: 500; color: var(--acciaio); }
.iipm-trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}