/**
 * Prequel — stile del form pubblico.
 *
 * Neutro di suo: i colori arrivano dalle impostazioni del plugin (Questionari →
 * Impostazioni → Aspetto) come regola in linea, e i valori qui sotto sono solo
 * il fallback per quando l'opzione non è ancora stata salvata.
 *
 * Dalle impostazioni si scelgono TRE colori: accento, fondo e testo. Tutto il
 * resto — la seconda superficie, le due righe di bordo, il testo attenuato, il
 * colore che va sopra l'accento e lo schema chiaro/scuro dei controlli nativi —
 * lo calcola il plugin da quei tre. Tre manopole che non possono litigare fra
 * loro sono meglio di nove che possono.
 *
 * La tipografia non la impone: la eredita dal tema che ospita il form. Un
 * plugin che porta i propri caratteri si vede da lontano che è un plugin.
 *
 * Radius: 12px card, 8px badge e pill, 4px input.
 * Spaziatura: 4/8/16/24/32/48/64/96.
 */

.innq {
	--innq-accent: #2f6fed;
	--innq-accent-text: #ffffff;
	--innq-surface: #ffffff;
	--innq-surface-2: #f4f5f7;
	--innq-line: rgba(26, 26, 26, 0.12);
	--innq-line-strong: rgba(26, 26, 26, 0.28);
	--innq-text: #1a1a1a;
	--innq-text-muted: rgba(26, 26, 26, 0.62);
	--innq-text-fioco: rgba(26, 26, 26, 0.42);
	--innq-accent-soft: rgba(47, 111, 237, 0.25);
	--innq-accent-line: rgba(47, 111, 237, 0.28);
	--innq-accent-shadow: rgba(47, 111, 237, 0.35);
	--innq-surface-velo: rgba(255, 255, 255, 0.92);
	--innq-velo: rgba(26, 26, 26, 0.06);
	--innq-velo-forte: rgba(26, 26, 26, 0.1);
	--innq-velo-lieve: rgba(26, 26, 26, 0.03);

	--innq-font-display: inherit;
	--innq-font-body: inherit;

	/* I controlli nativi (tendina della select, scrollbar, spunte) li disegna il
	   sistema operativo, non il CSS. Senza questa riga, su un form scuro macOS
	   apre il menu della select in versione chiara e il testo chiaro su fondo
	   chiaro diventa illeggibile. È l'unica dichiarazione che quel menu ascolta,
	   e il plugin la scrive da sé leggendo quanto è chiaro il fondo scelto. */
	color-scheme: light;

	max-width: 820px;
	margin: 0 auto;
	padding: 0 0 32px;
	font-family: var(--innq-font-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--innq-text);
}

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

/* ─── Intestazione interna ──────────────────────────────────────────
   Serve solo quando lo shortcode gira fuori dal template questionario,
   che ha già la sua intestazione. Con intestazione="no" non viene stampata. */

.innq .innq__header {
	margin: 0 0 32px;
	padding: 48px 32px;
	border-radius: 12px;
	background: var(--innq-surface);
	border: 1px solid var(--innq-line);
	text-align: center;
}

.innq .innq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--innq-accent);
}

.innq .innq__title {
	margin: 0 0 16px;
	font-family: var(--innq-font-display);
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--innq-text);
}

.innq .innq__intro {
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	color: var(--innq-text-muted);
}

/* ─── Barra di progresso ────────────────────────────────────────── */

.innq .innq__progress {
	position: sticky;
	top: 8px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--innq-surface-velo);
	backdrop-filter: blur(10px);
	border: 1px solid var(--innq-line);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.innq .innq__progress-track {
	flex: 1;
	height: 8px;
	border-radius: 8px;
	background: var(--innq-velo-forte);
	overflow: hidden;
}

.innq .innq__progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: 8px;
	background: var(--innq-accent);
	transition: width 0.3s ease;
}

.innq .innq__progress-label {
	font-size: 13px;
	font-weight: 600;
	min-width: 40px;
	text-align: right;
	color: var(--innq-text);
}

/* ─── Card sezione ──────────────────────────────────────────────── */

.innq .innq__section {
	margin-bottom: 24px;
	padding: 32px;
	border-radius: 12px;
	background: var(--innq-surface);
	border: 1px solid var(--innq-line);
}

.innq .innq__section-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--innq-line);
}

.innq .innq__section-num {
	flex: none;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--innq-accent);
	color: var(--innq-accent-text);
	font-family: var(--innq-font-display);
	font-size: 15px;
	letter-spacing: 0.02em;
}

.innq .innq__section-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--innq-text);
}

.innq .innq__section-sub {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--innq-text-muted);
}

/* ─── Griglia campi ─────────────────────────────────────────────── */

.innq .innq__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 16px;
}

.innq .innq-field {
	grid-column: 1 / -1;
	min-width: 0;
}

.innq .innq-field--half {
	grid-column: auto / span 1;
}

.innq .innq-field__set {
	margin: 0;
	padding: 0;
	border: 0;
}

.innq .innq-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--innq-text);
}

.innq .innq-field__req {
	color: var(--innq-accent);
	margin-left: 2px;
}

.innq .innq-field__hint {
	margin: -4px 0 8px;
	font-size: 14px;
	color: var(--innq-text-muted);
}

.innq .innq-field__control {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--innq-line);
	border-radius: 4px;
	background: var(--innq-surface-2);
	font-family: var(--innq-font-body);
	font-size: 16px;
	color: var(--innq-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.innq .innq-field__control:hover {
	border-color: var(--innq-line-strong);
}

.innq .innq-field__control:focus {
	outline: none;
	border-color: var(--innq-accent);
	box-shadow: 0 0 0 3px var(--innq-accent-soft);
}

.innq .innq-field__control::placeholder {
	color: var(--innq-text-fioco);
}

/* Windows e Linux rispettano i colori sulle option: qui glieli diamo espliciti.
   macOS li ignora e segue color-scheme, dichiarato sopra su .innq.
   Valori in chiaro e non variabili: dentro il menu nativo l'ereditarietà
   delle custom property non è garantita. */
/* Il tema porta con sé una regola del vecchio "hello-animation" che veste ogni
   <select> del sito: `.hello-animation-base select` con testo blu (#072032),
   bordo chiaro, text-transform capitalize e una freccia SVG quasi nera.
   Su fondo scuro il testo sparisce e la freccia pure. Quel selettore vale 0,1,1:
   la sola classe del campo (0,1,0) perde, quindi qui si scende con
   `.innq select.innq-field__control` (0,2,1). */
.innq select.innq-field__control {
	color-scheme: dark;
	color: var(--innq-text);
	border: 1px solid var(--innq-line);
	border-radius: 4px;
	padding: 12px 44px 12px 16px;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--innq-surface-2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b9b6af'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}

.innq select.innq-field__control:hover {
	border-color: var(--innq-line-strong);
}

.innq select.innq-field__control:focus {
	border-color: var(--innq-accent);
	box-shadow: 0 0 0 3px var(--innq-accent-soft);
	outline: none;
}

.innq .innq-field--invalid select.innq-field__control {
	border-color: #ff6b5e;
}

.innq select.innq-field__control option {
	background-color: var(--innq-surface-2);
	color: var(--innq-text);
}

.innq select.innq-field__control option:checked,
.innq select.innq-field__control option:hover {
	background-color: var(--innq-accent);
	color: var(--innq-accent-text);
}

/* La prima voce è il segnaposto "Seleziona…": va spenta come un placeholder. */
.innq select.innq-field__control option[value=""] {
	color: var(--innq-text-fioco);
}

.innq textarea.innq-field__control {
	resize: vertical;
	min-height: 96px;
}

.innq .innq-field--invalid .innq-field__control,
.innq .innq-field--invalid .innq-pills {
	border-color: #ff6b5e;
	box-shadow: 0 0 0 3px rgba(255, 107, 94, 0.18);
	border-radius: 4px;
}

/* ─── Pill per radio e checkbox ─────────────────────────────────── */

.innq .innq-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.innq .innq-pills--stack {
	flex-direction: column;
	align-items: stretch;
}

.innq .innq-pill {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.innq .innq-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.innq .innq-pill span {
	display: block;
	width: 100%;
	padding: 9px 16px;
	border: 1px solid var(--innq-line);
	border-radius: 8px;
	background: var(--innq-surface-2);
	font-size: 15px;
	line-height: 1.4;
	color: var(--innq-text);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.innq .innq-pill:hover span {
	border-color: var(--innq-line-strong);
	background: var(--innq-velo);
}

.innq .innq-pill input:focus-visible + span {
	outline: 2px solid var(--innq-accent);
	outline-offset: 2px;
}

.innq .innq-pill input:checked + span {
	background: var(--innq-accent);
	border-color: var(--innq-accent);
	color: var(--innq-accent-text);
	font-weight: 600;
}

.innq .innq-pill:hover input:checked + span {
	background: var(--innq-accent);
}

/* ─── Honeypot: fuori schermo, mai display:none (i bot se ne accorgono) ─ */

.innq .innq__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─── Blocco finale ─────────────────────────────────────────────── */

.innq .innq__final {
	margin-top: 32px;
	padding: 48px 32px;
	border-radius: 12px;
	border: 1px solid var(--innq-accent-line);
	text-align: left;
}

/* Con chiusura="no" il riquadro perde titolo e frase, e i 48px sopra e sotto
   erano l'aria che serviva a loro: senza, resta un vuoto che sembra un errore. */
.innq .innq__final--nudo {
	padding: 32px;
}

.innq .innq__final-title {
	margin: 0 0 8px;
	font-family: var(--innq-font-display);
	font-size: 26px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--innq-text);
}

.innq .innq__final-sub {
	max-width: 480px;
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--innq-text-muted);
}

/* ─── Consenso privacy ──────────────────────────────────────────── */

.innq .innq__privacy {
	max-width: 620px;
	margin: 0 0 24px;
	text-align: left;
}

/* Senza la scatola l'errore non puo' piu' farsi vedere col bordo rosso: lo
   dicono il testo e l'anello intorno alla spunta, che e' anche il punto dove
   la persona deve agire. Un errore che si segnala dove si ripara. */
.innq .innq__privacy.is-invalid .innq__privacy-label {
	color: #ff8a80;
}

.innq .innq__privacy.is-invalid .innq__privacy-label input {
	outline: 2px solid #ff6b5e;
	outline-offset: 2px;
}

.innq .innq__privacy-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	color: var(--innq-text-muted);
}

.innq .innq__privacy-label input {
	flex: none;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--innq-accent);
	cursor: pointer;
}

.innq .innq__privacy-label a {
	color: var(--innq-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.innq .innq__submit {
	display: inline-block;
	padding: 16px 48px;
	border: 0;
	border-radius: 8px;
	background: var(--innq-accent);
	color: var(--innq-accent-text);
	font-family: var(--innq-font-body);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.innq .innq__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px var(--innq-accent-shadow);
}

.innq .innq__submit:focus-visible {
	outline: 2px solid var(--innq-accent-text);
	outline-offset: 3px;
}

.innq .innq__submit:disabled {
	opacity: 0.6;
	cursor: wait;
	transform: none;
	box-shadow: none;
}

.innq .innq__response {
	margin: 24px 0 0;
	font-size: 15px;
	min-height: 1.5em;
}

/* Finché non c'è niente da dire, non occupa niente. Lo spazio era riservato
   per non far saltare il riquadro quando compare l'esito, ma sotto il pulsante
   restava un vuoto di ottanta pixel, e l'esito e' l'ultima cosa della pagina:
   quando arriva puo' spingere in giu' quello che viene dopo senza disturbare
   nessuno. Un buco permanente per evitare uno scatto che nessuno guarda e' un
   cattivo affare. */
.innq .innq__response:empty {
	margin: 0;
	min-height: 0;
}

.innq .innq__response.is-success {
	color: var(--innq-accent);
	font-weight: 600;
}

.innq .innq__response.is-error {
	color: #ff8a80;
}

/* ─── Chi preferisce meno movimento ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.innq *,
	.innq *::before,
	.innq *::after {
		transition-duration: 0.01ms !important;
	}

	.innq .innq__submit:hover {
		transform: none;
	}
}

/* ─── Responsive: le due colonne collassano sotto i 600px ───────── */

@media (max-width: 600px) {
	.innq .innq__grid {
		grid-template-columns: 1fr;
	}

	.innq .innq-field--half {
		grid-column: 1 / -1;
	}

	.innq .innq__section {
		padding: 24px 16px;
	}

	.innq .innq__header {
		padding: 32px 16px;
	}

	.innq .innq__final {
		padding: 32px 16px;
	}

	.innq .innq__submit {
		width: 100%;
	}
}