/* ==========================================================================
   Ardea Casa UX8
   Un solo file, quattro blocchi, tutto commentato:

   1. TOKEN      — l'unica fonte di verità di colori, spazi, raggi, ombre.
   2. TIPOGRAFIA — la scala tipografica del portale.
   3. PERCORSO   — il componente guidato "una domanda alla volta".
   4. QUALITÀ    — focus visibile, motion ridotto, breakpoint.

   Regola d'oro per il futuro: non si scrive mai un colore in esadecimale
   dentro un componente. Si usa un token. Se il token non esiste, si aggiunge
   qui in cima. È l'unico modo per non ritrovarsi con sette generazioni di CSS
   sovrapposte.
   ========================================================================== */


/* ==========================================================================
   1. TOKEN
   ========================================================================== */

:root {

	/* --- Colore -----------------------------------------------------------
	   Cinque valori. Non di più.
	   inchiostro : il nero del portale, con una punta di verde pino.
	   verde      : il colore di lavoro — link, conferme, dati verificati.
	   carta      : il fondo pagina, freddo come la carta di un modulo.
	   riga       : la linea sottile, come su una planimetria catastale.
	   bordo      : il bordo di un elemento CLICCABILE. È più scuro di "riga"
	                perché deve superare 3:1 (WCAG 1.4.11): se un riquadro si
	                può premere, il suo perimetro deve vedersi davvero.
	   arancio    : UNA sola azione per schermata. Se ce ne sono due, è un bug.
	   lime       : l'evidenziatore. Solo per "fatto / verificato".            */

	--ux8-inchiostro: #0C2A2C;
	--ux8-verde:      #14685C;
	--ux8-carta:      #F1F3EF;
	--ux8-riga:       #DBE2DA;   /* divisori         — decorativo      */
	--ux8-bordo:      #7E8F7E;   /* bordi cliccabili — 3.07:1 su carta */
	--ux8-arancio:    #FF5C35;   /* testo inchiostro sopra — 4.94:1    */
	--ux8-lime:       #DCF26B;

	--ux8-bianco:     #FFFFFF;
	--ux8-fumo:       #5E706E;   /* testo secondario, contrasto 5.2:1 su carta */

	/* --- Spazio -----------------------------------------------------------
	   Scala a passo costante: niente più margini a caso.                     */

	--ux8-1:  4px;
	--ux8-2:  8px;
	--ux8-3:  12px;
	--ux8-4:  16px;
	--ux8-5:  24px;
	--ux8-6:  32px;
	--ux8-7:  48px;
	--ux8-8:  72px;
	--ux8-9:  112px;

	/* --- Forma ------------------------------------------------------------ */

	--ux8-r-s:  10px;
	--ux8-r-m:  18px;
	--ux8-r-l:  28px;
	--ux8-linea: 1px solid var(--ux8-riga);

	--ux8-ombra:     0 1px 2px rgba(12, 42, 44, .05);
	--ux8-ombra-alta: 0 24px 60px -20px rgba(12, 42, 44, .30);

	/* --- Movimento -------------------------------------------------------- */

	--ux8-tempo: 220ms;
	--ux8-curva: cubic-bezier(.22, .8, .3, 1);

	/* --- Carattere --------------------------------------------------------
	   Nessun font viene caricato da domini esterni: su un portale collegato a
	   un ente pubblico i Google Fonts in CDN sono un problema GDPR reale.
	   Per dare al portale una voce propria, scarica Bricolage Grotesque e
	   Instrument Sans, mettili in /assets/fonts/ e dichiara qui le @font-face:
	   la personalità arriva dalla scala e dal peso, il file lo aggiungi dopo. */

	--ux8-display: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ux8-testo:   "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ux8-mono:    ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}


/* --- Allineamento con i token già esistenti --------------------------------
   Il plugin Suite e il tema usano già --ac-* e --acw-*. Ridefinendoli qui
   (questo foglio si carica per ultimo) tutto il portale adotta la nuova
   palette senza toccare una riga dei template.
   Se preferisci congelare l'aspetto attuale, commenta questi due blocchi:
   il Percorso continua a funzionare.                                       */

:root {
	--ac-navy:      var(--ux8-inchiostro);
	--ac-navy-2:    #123F41;
	--ac-ink:       #17302F;
	--ac-muted:     var(--ux8-fumo);
	--ac-line:      var(--ux8-riga);
	--ac-bg:        var(--ux8-carta);
	--ac-white:     var(--ux8-bianco);
	--ac-teal:      var(--ux8-verde);
	--ac-teal-soft: #E4F0EB;
	--ac-coral:     var(--ux8-arancio);
	--ac-coral-soft:#FDEAE3;
	--ac-cream:     #F6F1E7;
	--ac-shadow:    var(--ux8-ombra-alta);
}

:root {
	--acw-navy:      var(--ux8-inchiostro);
	--acw-ink:       #17302F;
	--acw-muted:     var(--ux8-fumo);
	--acw-line:      var(--ux8-riga);
	--acw-bg:        var(--ux8-carta);
	--acw-teal:      var(--ux8-verde);
	--acw-teal-soft: #E4F0EB;
	--acw-coral:     var(--ux8-arancio);
	--acw-coral-soft:#FDEAE3;
	--acw-shadow:    var(--ux8-ombra-alta);
}


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

.ux8-display {
	margin: 0;
	font-family: var(--ux8-display);
	font-size: clamp(2.6rem, 7.5vw, 5.4rem);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.04em;
	text-wrap: balance;
	color: var(--ux8-inchiostro);
}

.ux8-lead {
	max-width: 46ch;
	margin: var(--ux8-4) 0 0;
	font-family: var(--ux8-testo);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.55;
	color: var(--ux8-fumo);
}

/* L'etichetta di servizio: numero di pratica, non decorazione.
   È monospaziata perché nel mondo del geometra i codici lo sono. */
.ux8-protocol {
	margin: 0;
	font-family: var(--ux8-mono);
	font-size: .72rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ux8-verde);
}

.ux8-help {
	margin: var(--ux8-3) 0 0;
	font-family: var(--ux8-testo);
	font-size: .85rem;
	line-height: 1.5;
	color: var(--ux8-fumo);
}


/* ==========================================================================
   3. PERCORSO
   ========================================================================== */

.ux8-percorso {
	font-family: var(--ux8-testo);
	color: var(--ux8-inchiostro);
	padding: var(--ux8-8) 0;
}

.ux8-percorso *,
.ux8-percorso *::before,
.ux8-percorso *::after { box-sizing: border-box; }

.ux8-percorso--compatto { padding: var(--ux8-6) 0; }

.ux8-percorso__intro {
	max-width: 30ch;
	margin-bottom: var(--ux8-7);
}
.ux8-percorso__intro .ux8-protocol { margin-bottom: var(--ux8-4); }
.ux8-percorso__intro .ux8-lead { max-width: 46ch; }


/* --- I quattro riquadri ----------------------------------------------------
   Sono alternative, non una sequenza: nessuna numerazione 01/02/03.
   Ogni riquadro dice cosa vuole l'utente, non cosa fa il sistema.            */

.ux8-slabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ux8-3);
}

.ux8-slab {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 230px;
	padding: var(--ux8-5);
	border: 1px solid var(--ux8-bordo);
	border-radius: var(--ux8-r-l);
	background: var(--ux8-bianco);
	color: var(--ux8-inchiostro);
	text-decoration: none;
	overflow: hidden;
	transition:
		transform var(--ux8-tempo) var(--ux8-curva),
		background-color var(--ux8-tempo) var(--ux8-curva),
		color var(--ux8-tempo) var(--ux8-curva),
		border-color var(--ux8-tempo) var(--ux8-curva);
}

/* La riga lime entra da sinistra: è l'unico movimento "gratuito" della
   pagina, e serve a dire quale riquadro sta per essere scelto. */
.ux8-slab::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: var(--ux8-lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ux8-tempo) var(--ux8-curva);
}

.ux8-slab:hover,
.ux8-slab:focus-visible {
	transform: translateY(-4px);
	background: var(--ux8-inchiostro);
	border-color: var(--ux8-inchiostro);
	color: var(--ux8-carta);
}
.ux8-slab:hover::after,
.ux8-slab:focus-visible::after { transform: scaleX(1); }

.ux8-slab__label {
	font-family: var(--ux8-display);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.ux8-slab__promise {
	margin-top: var(--ux8-3);
	font-size: .88rem;
	line-height: 1.45;
	color: var(--ux8-fumo);
	transition: color var(--ux8-tempo) var(--ux8-curva);
}
.ux8-slab:hover .ux8-slab__promise,
.ux8-slab:focus-visible .ux8-slab__promise { color: rgba(241, 243, 239, .75); }

.ux8-slab__go {
	position: absolute;
	top: var(--ux8-5);
	right: var(--ux8-5);
	width: 34px;
	height: 34px;
	border: 1px solid var(--ux8-bordo);
	border-radius: 50%;
	transition: border-color var(--ux8-tempo) var(--ux8-curva), background-color var(--ux8-tempo) var(--ux8-curva);
}
.ux8-slab__go::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}
.ux8-slab:hover .ux8-slab__go,
.ux8-slab:focus-visible .ux8-slab__go { border-color: rgba(241, 243, 239, .35); }

/* Stato pilotato dal JavaScript: gli altri obiettivi si ritirano. */
.ux8-slabs[data-ux8-collapsed="1"] { display: none; }


/* --- Il flusso: una domanda alla volta ------------------------------------
   Senza JavaScript tutte le domande restano visibili e il form funziona
   comunque: è un normale <form method="get">.                              */

.ux8-flow {
	margin-top: var(--ux8-5);
	padding: var(--ux8-6);
	border: var(--ux8-linea);
	border-radius: var(--ux8-r-l);
	background: var(--ux8-bianco);
	box-shadow: var(--ux8-ombra);
}
.ux8-flow[hidden] { display: none; }

.ux8-flow__bar {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--ux8-3) var(--ux8-5);
	padding-bottom: var(--ux8-5);
	margin-bottom: var(--ux8-6);
	border-bottom: var(--ux8-linea);
}

.ux8-flow__quit {
	justify-self: start;
	padding: var(--ux8-2) 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ux8-fumo);
	cursor: pointer;
	border-radius: var(--ux8-r-s);
}
.ux8-flow__quit:hover { color: var(--ux8-inchiostro); }

.ux8-flow__bar .ux8-protocol { justify-self: end; }

.ux8-progress {
	grid-column: 1 / -1;
	height: 4px;
	border-radius: 99px;
	background: var(--ux8-riga);
	overflow: hidden;
}
.ux8-progress i {
	display: block;
	height: 100%;
	background: var(--ux8-lime);
	transition: width var(--ux8-tempo) var(--ux8-curva);
}

.ux8-step {
	margin: 0;
	padding: 0;
	border: 0;
}
.ux8-step[hidden] { display: none; }
.ux8-step + .ux8-step { margin-top: var(--ux8-7); }

.ux8-question {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 var(--ux8-5);
	font-family: var(--ux8-display);
	font-size: clamp(1.7rem, 4vw, 2.9rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
	text-wrap: balance;
	color: var(--ux8-inchiostro);
}

.ux8-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ux8-2);
}

.ux8-choice { position: relative; display: block; }

/* Il radio resta nel DOM e resta focalizzabile: niente display:none. */
.ux8-choice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ux8-choice__box {
	display: block;
	padding: var(--ux8-4) var(--ux8-5);
	border: 1px solid var(--ux8-bordo);
	border-radius: var(--ux8-r-m);
	background: var(--ux8-carta);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ux8-inchiostro);
	transition:
		border-color var(--ux8-tempo) var(--ux8-curva),
		background-color var(--ux8-tempo) var(--ux8-curva),
		color var(--ux8-tempo) var(--ux8-curva);
}

.ux8-choice input:hover + .ux8-choice__box { border-color: var(--ux8-verde); }

.ux8-choice input:checked + .ux8-choice__box {
	border-color: var(--ux8-inchiostro);
	background: var(--ux8-inchiostro);
	color: var(--ux8-carta);
}

.ux8-choice input:focus-visible + .ux8-choice__box {
	outline: 3px solid var(--ux8-verde);
	outline-offset: 2px;
}

/* Campo libero (metri quadri): grande, con l'unità di misura accanto. */
.ux8-field {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ux8-3);
	padding: var(--ux8-3) var(--ux8-5);
	border: 1px solid var(--ux8-bordo);
	border-radius: var(--ux8-r-m);
	background: var(--ux8-carta);
}
.ux8-field input {
	width: 5ch;
	border: 0;
	background: none;
	font-family: var(--ux8-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--ux8-inchiostro);
	outline: none;
	-moz-appearance: textfield;
}
.ux8-field input::-webkit-outer-spin-button,
.ux8-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ux8-field:focus-within { border-color: var(--ux8-verde); box-shadow: 0 0 0 3px rgba(20, 104, 92, .12); }
.ux8-field__suffix {
	font-family: var(--ux8-mono);
	font-size: 1rem;
	color: var(--ux8-fumo);
}

.ux8-next {
	margin-top: var(--ux8-5);
	padding: var(--ux8-3) var(--ux8-5);
	border: 1px solid var(--ux8-inchiostro);
	border-radius: 99px;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--ux8-inchiostro);
	cursor: pointer;
	transition: background-color var(--ux8-tempo) var(--ux8-curva), color var(--ux8-tempo) var(--ux8-curva);
}
.ux8-next:hover { background: var(--ux8-inchiostro); color: var(--ux8-carta); }
.ux8-next[hidden] { display: none; }

.ux8-flow__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ux8-4) var(--ux8-6);
	margin-top: var(--ux8-7);
	padding-top: var(--ux8-5);
	border-top: var(--ux8-linea);
}
.ux8-flow__end[hidden] { display: none; }

/* L'unica azione arancione della schermata.
   Testo inchiostro su arancio: 4.94:1, sopra la soglia AA anche per il testo
   normale. Il bianco sull'arancio si fermerebbe a 3.6:1, quindi non si usa. */
.ux8-cta {
	padding: var(--ux8-4) var(--ux8-6);
	border: 0;
	border-radius: 99px;
	background: var(--ux8-arancio);
	font: inherit;
	font-family: var(--ux8-display);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ux8-inchiostro);
	cursor: pointer;
	transition: transform var(--ux8-tempo) var(--ux8-curva), box-shadow var(--ux8-tempo) var(--ux8-curva);
}
.ux8-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(255, 92, 53, .85);
}

.ux8-aside {
	margin: 0;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--ux8-fumo);
}
.ux8-aside a {
	color: var(--ux8-verde);
	font-weight: 700;
	text-underline-offset: 3px;
}


/* ==========================================================================
   4. QUALITÀ
   ========================================================================== */

/* Focus sempre visibile, su tutto il layer. */
.ux8-percorso :focus-visible {
	outline: 3px solid var(--ux8-verde);
	outline-offset: 2px;
	border-radius: var(--ux8-r-s);
}

/* Chi ha chiesto meno animazioni non deve vedere nulla muoversi. */
@media (prefers-reduced-motion: reduce) {
	.ux8-percorso *,
	.ux8-percorso *::before,
	.ux8-percorso *::after {
		animation: none !important;
		transition: none !important;
	}
	.ux8-slab:hover,
	.ux8-cta:hover { transform: none; }
}

/* Contrasto elevato: le superfici piene restano piene. */
@media (prefers-contrast: more) {
	.ux8-slab,
	.ux8-choice__box,
	.ux8-flow { border-width: 2px; }
}

@media (max-width: 1000px) {
	.ux8-slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ux8-slab { min-height: 190px; }
}

@media (max-width: 680px) {
	.ux8-percorso { padding: var(--ux8-7) 0; }
	.ux8-percorso__intro { max-width: none; margin-bottom: var(--ux8-6); }
	.ux8-slabs { grid-template-columns: 1fr; }
	.ux8-slab { min-height: 0; padding: var(--ux8-5) var(--ux8-5) var(--ux8-6); }
	.ux8-slab__go { top: auto; bottom: var(--ux8-5); }
	.ux8-flow { padding: var(--ux8-5) var(--ux8-4); border-radius: var(--ux8-r-m); }
	.ux8-choices { grid-template-columns: 1fr; }
	.ux8-flow__end { flex-direction: column; align-items: stretch; }
	.ux8-cta { width: 100%; }
}

/* Il portale ha una barra fissa in basso su mobile: il Percorso non ci finisce sotto. */
@media (max-width: 820px) {
	.acasa-ux8 .ux8-percorso:last-child { padding-bottom: var(--ux8-9); }
}