/**
 * Quiz "Che coppia di sposi siete?" — Ex Lanificio Carotti
 *
 * Mobile first: la gran parte del traffico arriva da Instagram.
 * Tutto è prefissato `lq-` per non entrare in conflitto col tema.
 */

.lanificio-quiz {
	/* Valori rilevati dal sito (Hello Elementor + kit): bottoni #890a30 con
	   raggio 3px e Roboto 600, titoli Roboto 600 in ardesia #7993a8, testo
	   #212121. Tenerli allineati se il tema cambia. */
	--lq-bordeaux: #890a30;
	--lq-ardesia: #7993a8;
	--lq-azzurro: #6ec1e4;
	--lq-bianco: #fcffff;
	--lq-inchiostro: #212121;
	--lq-bordo: rgba( 121, 147, 168, 0.35 );
	--lq-raggio: 3px;
	--lq-font-titoli: Roboto, -apple-system, 'Segoe UI', sans-serif;

	/* Il quiz occupa tutta la larghezza che il tema gli concede: sono le
	   singole parti a restare strette. Così apertura e chiusura si leggono
	   come sezioni della pagina invece che come un riquadro appiccicato. */
	max-width: none;
	margin: 0 auto;
	padding: 2.5rem 0 4rem;
	color: var( --lq-inchiostro );
	font-size: 1rem;
	line-height: 1.5;
}

.lq-guscio {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	/* Aria sopra il quiz quando il cambio schermata lo riporta in vista. */
	scroll-margin-top: 1.5rem;
}

/* Barra, avanzamento, errori e bottoni restano nella colonna leggibile.
   Serve `align-self`: dentro un flex-column, `margin: auto` restringerebbe
   i figli al loro contenuto invece di centrarli. */
.lq-guscio > * {
	width: 100%;
	max-width: 40rem;
	align-self: center;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

/* Il corpo fa da tela piena: sono le schermate a decidere la propria misura. */
.lq-corpo {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.lq-corpo > .lq-schermata {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

/* La D9 è la domanda visiva: le foto meritano più respiro del testo.
   Senza `:has()` resta la misura di lettura, che va bene lo stesso. */
.lq-corpo > .lq-schermata:has( .lq-opzioni--immagini ) {
	max-width: 52rem;
}

/* `hidden` deve vincere sui `display` dichiarati qui sotto: il JS lo usa per
   togliere di mezzo barra e bottoni nell'introduzione e nel ringraziamento. */
.lanificio-quiz [hidden] {
	display: none !important;
}

/* --- Avanzamento --- */

.lq-barra {
	height: 4px;
	background: var( --lq-bordo );
	border-radius: 999px;
	overflow: hidden;
}

.lq-barra-riempimento {
	width: 0;
	height: 100%;
	background: var( --lq-bordeaux );
	transition: width 0.3s ease;
}

.lq-avanzamento {
	margin: -0.75rem 0 0;
	color: var( --lq-ardesia );
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/* --- Testi --- */

.lq-titolo {
	margin: 0;
	font-family: var( --lq-font-titoli );
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 600;
	color: var( --lq-ardesia );
}

.lq-titolo:focus {
	outline: none;
}

/* Il focus sul titolo è tecnico: serve ai lettori di schermo per annunciare
   la schermata nuova, ma disegnare l'anello attorno al titolo della hero
   sembrava un errore grafico. Resta raggiungibile, non si vede. */
.lq-titolo:focus-visible {
	outline: none;
}

.lq-testo {
	margin: 0.5rem 0 0;
}

.lq-testo--minore {
	color: var( --lq-ardesia );
	font-size: 0.875rem;
}

.lq-schermata {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* --- Introduzione: hero in stile sito --- */

/* Apertura e chiusura condividono l'impianto (variante scelta da Linda):
   l'introduzione ha la foto della pagina location molto scurita, la
   schermata finale è bordeaux pieno. */
.lq-corpo > .lq-schermata--grazie,
.lq-corpo > .lq-schermata--intro {
	justify-content: center;
	/* A tutta pagina: escono dalla colonna del tema e vanno da bordo a bordo,
	   come le hero del sito. Sono le uniche due schermate che si comportano
	   da sezione invece che da colonna di lettura. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	min-height: 82vh;
	padding: 3rem 1.5rem;
	border-radius: 0;
	color: #fff;
	text-align: center;
	align-items: center;
}

/* `100vw` conta anche la barra di scorrimento: senza questo, su Windows
   comparirebbe una barra orizzontale. Vincolato alle pagine col quiz. */
body:has( .lanificio-quiz ) {
	overflow-x: hidden;
}

/* Quando è in mostra una schermata a tutta pagina non deve restarci aria
   attorno; sulle domande invece il respiro serve. */
.lanificio-quiz:has( .lq-schermata--intro ),
.lanificio-quiz:has( .lq-schermata--grazie ) {
	padding-top: 0;
	padding-bottom: 0;
}

.lq-schermata--intro {
	background:
		linear-gradient( rgba( 40, 46, 52, 0.55 ), rgba( 24, 28, 32, 0.92 ) ),
		url( 'intro.jpg' ) center 30% / cover no-repeat #33373d;
}

.lq-schermata--grazie {
	background: var( --lq-bordeaux );
}

.lq-occhiello {
	margin: 0;
	color: var( --lq-azzurro );
	font-family: var( --lq-font-titoli );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lq-schermata--grazie .lq-titolo,
.lq-schermata--intro .lq-titolo {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
}

.lq-schermata--grazie .lq-testo,
.lq-schermata--intro .lq-testo {
	max-width: 28rem;
	margin: 0;
	font-size: 1.0625rem;
	color: rgba( 255, 255, 255, 0.92 );
	/* Il testo può contenere un a-capo voluto (\n). */
	white-space: pre-line;
}

/* I tre passi dopo l'invio: lista numerata, essenziale. */
.lq-passi {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 24rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: lq-passo;
	text-align: left;
}

.lq-passo {
	counter-increment: lq-passo;
	font-size: 0.9375rem;
	color: rgba( 255, 255, 255, 0.92 );
}

.lq-passo::before {
	content: counter( lq-passo ) '.';
	margin-right: 0.5rem;
	color: var( --lq-azzurro );
	font-family: var( --lq-font-titoli );
	font-weight: 700;
}

.lq-promesse {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

/* Niente "bolli": testo semplice, richiesta esplicita di Linda. */
.lq-promessa {
	font-size: 0.9375rem;
	color: rgba( 255, 255, 255, 0.85 );
	white-space: nowrap;
}

.lq-bottone--grande {
	padding: 1.05rem 2.6rem;
	font-size: 1.3125rem;
	letter-spacing: 0.01em;
}

/* Invito a proseguire dalla schermata finale: su fondo bordeaux il bottone
   pieno sparirebbe, quindi si inverte (bianco con testo bordeaux). */
.lq-azioni-finali {
	margin-top: 1.75rem;
}

/* È un link, non un <button>: senza flex il testo resterebbe in alto,
   perché `min-height` non centra da solo. */
.lq-bottone--chiaro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --lq-bianco );
	color: var( --lq-bordeaux );
	text-decoration: none;
}

.lq-bottone--chiaro:hover,
.lq-bottone--chiaro:focus {
	background: #fff;
	color: var( --lq-bordeaux );
}

/* Il regalo: badge caldo sopra la CTA, deve saltare all'occhio senza
   sembrare una pubblicità incollata. */
.lq-regalo {
	display: block;
	max-width: 34rem;
	margin: 1.25rem auto 0.25rem;
	padding: 0.85rem 1.5rem;
	/* Nessuna cornice: un filo sopra e sotto, così il regalo si stacca dalla
	   foto senza sembrare un banner incollato sulla hero. */
	border-top: 1px solid rgba( 255, 255, 255, 0.28 );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.28 );
	background: none;
	color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
}

.lq-regalo strong {
	font-family: var( --lq-font-titoli );
	font-weight: 700;
	letter-spacing: 0.01em;
}

.lq-regalo-icona {
	font-size: 1.15rem;
	vertical-align: -0.1em;
}

.lq-nota-intro {
	margin: -0.25rem 0 0;
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, 0.75 );
}

/* --- Opzioni di risposta --- */

.lq-opzioni {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.lq-opzione {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.875rem 1rem;
	border: 1px solid var( --lq-bordo );
	border-radius: var( --lq-raggio );
	background: var( --lq-bianco );
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lq-opzione:hover {
	border-color: var( --lq-ardesia );
}

.lq-opzione.is-scelta {
	border-color: var( --lq-bordeaux );
	box-shadow: inset 0 0 0 1px var( --lq-bordeaux );
}

/* Il radio resta nel DOM e raggiungibile da tastiera: solo invisibile. */
.lq-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Il focus del radio deve vedersi sull'intera opzione, non sul solo testo. */
.lq-opzione:has( .lq-radio:focus-visible ) {
	outline: 2px solid var( --lq-azzurro );
	outline-offset: 2px;
	border-color: var( --lq-bordeaux );
}

/* Ripiego per i browser senza `:has()`. */
.lq-radio:focus-visible + .lq-opzione-testo,
.lq-radio:focus-visible + .lq-immagine {
	outline: 2px solid var( --lq-azzurro );
	outline-offset: 4px;
}

.lq-opzione-testo {
	display: block;
}

/* --- Domanda visiva (D9) --- */

.lq-opzioni--immagini {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.625rem;
}

.lq-opzioni--immagini .lq-opzione {
	padding: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

/* Ripiego finché i media_id non sono popolati: senza foto resta il testo,
   che però ha bisogno del suo margine. */
.lq-opzioni--immagini .lq-opzione--senza-immagine {
	padding: 0.875rem 1rem;
}

.lq-immagine {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Campi --- */

.lq-campi {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.lq-campo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.lq-etichetta {
	font-size: 0.875rem;
	color: var( --lq-ardesia );
}

.lq-input {
	width: 100%;
	min-height: 3rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var( --lq-bordo );
	border-radius: var( --lq-raggio );
	background: var( --lq-bianco );
	color: inherit;
	/* Sotto i 16px iOS ingrandisce la pagina al focus. */
	font: inherit;
	font-size: 1rem;
}

.lq-input:focus-visible {
	outline: 2px solid var( --lq-azzurro );
	outline-offset: 2px;
	border-color: var( --lq-bordeaux );
}

/* --- Consensi --- */

.lq-consensi {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lq-consenso {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.9375rem;
	cursor: pointer;
}

.lq-checkbox {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	accent-color: var( --lq-bordeaux );
}

.lq-checkbox:focus-visible {
	outline: 2px solid var( --lq-azzurro );
	outline-offset: 2px;
}

.lq-link {
	color: var( --lq-bordeaux );
	text-decoration: underline;
}

/* Honeypot: invisibile ma non `display: none`, che alcuni bot riconoscono. */
.lq-trappola-guscio {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Azioni --- */

.lq-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.lq-bottone {
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var( --lq-raggio );
	font: inherit;
	font-family: var( --lq-font-titoli );
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.lq-bottone:focus-visible {
	outline: 2px solid var( --lq-azzurro );
	outline-offset: 2px;
}

.lq-bottone--primario {
	flex: 1 1 auto;
	background: var( --lq-bordeaux );
	color: var( --lq-bianco );
}

.lq-bottone--primario:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Sul sito il secondario è bianco con testo bordeaux; qui, su fondo bianco,
   serve anche un bordo perché il bottone non scompaia. */
.lq-bottone--secondario {
	background: var( --lq-bianco );
	border-color: var( --lq-bordeaux );
	color: var( --lq-bordeaux );
}

.lq-bottone--testo {
	padding: 0.75rem 0;
	background: none;
	color: var( --lq-ardesia );
	font-weight: 400;
	text-decoration: underline;
}

/* --- Errori --- */

.lq-errore {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var( --lq-raggio );
	background: rgba( 137, 10, 48, 0.08 );
	color: var( --lq-bordeaux );
	font-size: 0.9375rem;
}

/* --- Da tablet in su --- */

@media ( min-width: 40rem ) {
	.lq-titolo {
		font-size: 1.75rem;
	}

	.lq-opzioni--immagini {
		grid-template-columns: repeat( 3, 1fr );
	}

	.lq-bottone--primario {
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* Nell'introduzione è l'unico bottone e la schermata è centrata. */
	.lq-schermata--intro .lq-bottone--primario {
		margin-left: 0;
	}

	/* Stessa specificità della regola base, altrimenti non la sovrascrive.
	   Il tetto in rem evita che su schermi molto alti la hero diventi
	   sproporzionata. */
	.lq-corpo > .lq-schermata--grazie,
	.lq-corpo > .lq-schermata--intro {
		min-height: min( 82vh, 45rem );
		padding: 4rem 2.5rem;
	}

	.lq-schermata--intro .lq-titolo {
		font-size: 2.625rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lq-barra-riempimento,
	.lq-bottone,
	.lq-opzione {
		transition: none;
	}
}