/* =========================================================================
   Moduli.

   Contact Form 7 e WPForms arrivano praticamente senza stile: il bottone
   d'invio era alto 21 px e largo 44, e i campi stavano uno sotto l'altro in
   una colonna stretta. Un modulo di contatto e' il punto in cui una scuola
   raccoglie le richieste: vale la pena che si veda che e' della stessa mano
   del resto del sito.
   ========================================================================= */

.wpcf7 { margin-block: var(--s6); }

.wpcf7-form p { margin: 0 0 var(--s5); }

.wpcf7-form label {
	display: block;
	margin-bottom: var(--s2);
	font-size: var(--t-picc);
	font-weight: var(--peso-forte);
	color: var(--navy);
}

.wpcf7-form-control {
	font: inherit;
	width: 100%;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--filo-scuro);
	border-radius: var(--raggio);
	background: var(--carta);
	color: inherit;
	transition: border-color var(--transizione), box-shadow var(--transizione);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--rosso);
	box-shadow: 0 0 0 3px rgba(237, 28, 36, .14);
	outline: none;
}

/* Il messaggio non ha bisogno di trecento pixel per invitare a scrivere. */
.wpcf7-form textarea { min-height: 9rem; height: auto; resize: vertical; }

/* --- consenso --------------------------------------------------------------
   La casella era 13x13: sul telefono e' un bersaglio che si sbaglia. Qui la
   riga intera e' cliccabile e la casella e' grande abbastanza. */

.wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
	font-weight: var(--peso-normale);
	font-size: var(--t-picc);
	line-height: 1.5;
	color: var(--inchiostro-2);
	cursor: pointer;
	padding-block: var(--s2);
}

.wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.12rem;
	accent-color: var(--rosso);
}

/* --- invio ------------------------------------------------------------------ */

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 12rem;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: var(--raggio-pil);
	background: var(--rosso);
	color: #fff;
	font: var(--peso-forte) var(--t-base)/1.2 var(--carattere);
	cursor: pointer;
	transition: background var(--transizione), transform var(--transizione);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover { background: var(--rosso-scuro); transform: translateY(-1px); }

/* --- messaggi di risposta ---------------------------------------------------- */

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--s2);
	font-size: var(--t-picc);
	font-weight: var(--peso-forte);
	color: var(--rosso-scuro);
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { border-color: var(--rosso); }

.wpcf7-response-output {
	margin: var(--s5) 0 0 !important;
	padding: var(--s4) var(--s5) !important;
	border: 0 !important;
	border-left: 4px solid var(--grigio) !important;
	border-radius: var(--raggio);
	background: var(--carta-calda);
	font-size: var(--t-picc);
}

.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--ok) !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--rosso) !important; }

/* --- due colonne SOLO dove ci stanno davvero --------------------------------
   Nome e mail, telefono e oggetto sono coppie brevi: su una riga sola il
   modulo si legge in meta' altezza.

   Niente media query, pero': quella guarda la finestra, e qui il modulo sta
   dentro una mezza colonna larga 373 px — si sdoppiava in due colonnine da
   176 px anche su schermo grande. `auto-fit` con un minimo guarda lo spazio
   che c'e' davvero. */

.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 var(--s5);
	align-content: start;
}

.wpcf7-form > p:nth-of-type(n+5),
.wpcf7-form > .wpcf7-response-output,
.wpcf7-form > fieldset,
.wpcf7-form > .wpcf7-acceptance,
.wpcf7-form > p:has(textarea),
.wpcf7-form > p:has([type="submit"]) { grid-column: 1 / -1; }

/* --- WPForms ------------------------------------------------------------------ */

.wpforms-container .wpforms-field-label { font-weight: var(--peso-forte); color: var(--navy); }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
	border: 1px solid var(--filo-scuro) !important;
	border-radius: var(--raggio) !important;
	padding: 0.75rem 0.9rem !important;
	font: inherit !important;
}

.wpforms-container button[type="submit"] {
	background: var(--rosso) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--raggio-pil) !important;
	padding: 0.85rem 1.6rem !important;
	font: var(--peso-forte) var(--t-base)/1.2 var(--carattere) !important;
}

.wpforms-container button[type="submit"]:hover { background: var(--rosso-scuro) !important; }