/* Contact Form 7 nel linguaggio del tema: il plugin da' il markup, i token l'aspetto.
   Senza questo foglio i campi restano i widget di sistema (bordo 2px inset, 13px), perche'
   il CSS di CF7 veste solo la sua carrozzeria (esito, spinner, risposta per lo screen
   reader) e non i controlli, e style.css veste solo i moduli nostri (.tc-form).

   Caricato dall'azione wpcf7_enqueue_styles, cioe' esattamente quando CF7 accoda il
   proprio foglio, e dichiarato dipendente da esso: arriva dopo, quindi vince a pari
   specificita' senza !important.

   REGOLA di style.css, valida anche qui: nessun colore letterale, solo
   var(--wp--preset--color--*), cosi' il gate tools/contrast-check.py li controlla. */

/* La stessa misura dei moduli del plugin (.tc-form): una colonna di lettura, non tutta
   la larghezza del contenuto.
   La misura sta sul <form> e non sul contenitore .wpcf7 di proposito: il layout
   "constrained" dei blocchi centra con margin-inline: auto !important ogni figlio diretto
   che abbia una larghezza massima, e il modulo finirebbe centrato mentre titolo e testo
   restano a sinistra. */
.wpcf7-form {
    max-inline-size: 34rem;
}

/* CF7 impagina ogni campo in un <p> con la <label> che AVVOLGE il controllo, separati da
   un <br>. Lo spazio verticale lo danno i margini, non il ritorno a capo: il <br> resta
   nel markup (non e' nostro) ma non disegna niente. */
.wpcf7-form p {
    margin-block: 0 var(--wp--preset--spacing--50);
}

/* Le righe di servizio del modulo (per esempio "i campi con * sono obbligatori") sono
   <p> come i campi, e a corpo pieno leggono piu' forte delle etichette che spiegano: qui
   diventano un suggerimento. Sono i <p> che non contengono un controllo. */
.wpcf7-form p:not(:has(.wpcf7-form-control)) {
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--small);
}

.wpcf7-form label {
    display: block;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--small);
}

.wpcf7-form label br {
    display: none;
}

.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-block-start: 0.4rem;
}

/* Campi: le stesse misure di .tc-field (44px di altezza minima, SC 2.5.8) e gli stessi
   token, cosi' il modulo contatti e la registrazione si somigliano.
   box-sizing: il tema non ha un reset globale e il padding, sommato a inline-size 100%,
   farebbe sbordare il campo dalla colonna. */
.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 {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 44px;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--wp--preset--color--line);
    border-radius: var(--wp--custom--radius--sm);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    /* font: inherit tiene i campi a 1rem: sotto i 16px iOS ingrandisce la pagina al
       primo tocco, e la si ritrova zoomata. */
    font: inherit;
}

.wpcf7-form textarea {
    min-block-size: 11rem;
    resize: vertical;
}

.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible {
    border-color: var(--wp--preset--color--brand);
}

/* Consenso (acceptance): casella e testo su due colonne, testo di corpo e non etichetta. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.6rem;
    align-items: start;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0.1rem 0 0;
    accent-color: var(--wp--preset--color--brand);
}

/* Invio: il bottone del tema (elements.button di theme.json non arriva a un <input>). */
.wpcf7-form .wpcf7-submit {
    min-block-size: 48px;
    padding: 0.75rem 1.375rem;
    border: 0;
    border-radius: var(--wp--custom--radius--pill);
    background: var(--wp--preset--color--brand);
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.wpcf7-form .wpcf7-submit:hover:not(:disabled) {
    background: var(--wp--preset--color--brand-dark);
}

/* Disabilitato e' uno stato che si deve VEDERE: CF7 spegne il pulsante di invio finche'
   la casella del consenso non e' spuntata, e un pulsante spento coi colori di quello
   acceso e' un vicolo cieco (si preme e non succede niente). SC 1.4.3 esenta i controlli
   inattivi dal minimo di contrasto; l'etichetta resta comunque leggibile (5,05:1, coppia
   dichiarata in tools/contrast-check.py). */
.wpcf7-form .wpcf7-submit:disabled {
    background: var(--wp--preset--color--surface-strong);
    color: var(--wp--preset--color--muted);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7-form .wpcf7-submit {
        transition: none;
    }
}

/* Errore di campo: stesso segno di .tc-field (testo di marca scuro + bordo doppio),
   sotto il campo che lo riguarda. */
.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-block-start: 0.35rem;
    color: var(--wp--preset--color--brand-dark);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
    border-color: var(--wp--preset--color--brand-dark);
    border-width: 2px;
}

/* Esito dell'invio: la scatola di .tc-form__alert, con due differenze volute. Il COLORE
   del bordo non si dichiara: lo mette CF7 per stato (verde inviato, giallo non valido,
   rosso rifiutato) con selettori piu' specifici, e quel segnale e' suo. Il fondo e'
   'surface' e non 'brand-tint' proprio per quello: il giallo di CF7 su un fondo azzurro
   stona, su un grigio pallido si legge come stato. */
.wpcf7-form .wpcf7-response-output {
    margin: var(--wp--preset--spacing--40) 0 0;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    border-width: 2px;
    border-style: solid;
    border-radius: var(--wp--custom--radius--md);
    background: var(--wp--preset--color--surface);
    font-size: var(--wp--preset--font-size--small);
}

/* Attesa dopo l'invio: la rotella di CF7 nel colore di marca. */
.wpcf7-form .wpcf7-spinner {
    background-color: var(--wp--preset--color--brand);
}