/* =============================================================================
   Modulo: un form di Gravity Forms, col titolo a sinistra.

   Nodo di design 453:1609, pagina Contacts — «Talk to us.».

   La griglia è quella della fila sopra: tre colonne da 456 con 40 in mezzo. Il
   titolo sta nella prima, il form nelle altre due (x 528 → 1479, 951 di larghezza),
   e i campi vanno a coppie una colonna ciascuno. Un campo è una riga di testo con un
   filetto bianco sotto: 16 sopra, l'etichetta a 18 su 28, 8 sotto. Righe ogni 88,
   la richiesta alta 240, il pulsante centrato 40 più giù (nodi 453:1678–453:1690,
   895:5498).

   ⚠ **Il markup è di Gravity Forms, e qui si stila per selettore** (OBIETTIVO 07.1).
   Ogni regola passa da `.contact-form .gform_wrapper.gravity-theme`: una classe in
   più di quelle del foglio del plugin, che arriva in `<head>` **dopo** questo e con
   quegli stessi selettori — a pari peso vincerebbe lui. Dove il plugin ne usa una in
   più del solito, qui ce n'è una in più ancora: vedi l'altezza della richiesta. `gravity-theme` è sicuro perché il
   tema del form è passato esplicito, nel template e nel form.

   Nessun movimento oltre al reveal.
   ========================================================================== */

/* Lo stacco del design, 160 per lato, come margine: vedi `--space-module` in
   base.css.

   `scroll-margin` perché la sezione è l'ancora del pulsante in cima alla pagina: col
   menu che torna allo scroll-up, arrivarci senza margine la metterebbe a filo sotto
   di lui. */
.contact-form {
    /* ⚠ **Il rosso degli errori non è del design**, che non disegna un form sbagliato.
       Il rosso di Gravity Forms, `#c02b0a`, sul fondo blu di default ha un contrasto
       di 2,16: illeggibile. Questo è un salmone chiaro che sullo stesso fondo fa
       6,96, e 4,26 sul marrone degli articoli, che è il fondo più chiaro del sito.
       Resta locale finché il design non ne dice uno. */
    --contact-form-error: #ffab9e;

    margin-block: var(--space-module);
    scroll-margin-block-start: var(--header-h);
}

.contact-form__inner {
    display: grid;
    /* ⚠ Una colonna dichiarata, anche quando è una sola. Senza, la traccia implicita
       è `auto` e si allarga fino al contenuto minimo del form — cioè alla tendina,
       che è larga quanto la sua voce più lunga: a 390 la pagina sbordava di 66px. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l) 2.5rem; /* 40 fra le colonne, come la fila degli indirizzi */
}

/* Lo stile `h2` del design, come il titolo di `contact-channels`. */
.contact-form__heading {
    font-size: var(--text-body-xxl);
    line-height: var(--leading-body-xxl);
    font-weight: var(--weight-medium);
}

@media (min-width: 901px) {
    .contact-form__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }

    /* 8 più giù della cima del primo campo (2259 contro 2251): così il centro del
       titolo cade sul centro dell'etichetta «Name», che è quel che il frame allinea. */
    .contact-form__heading {
        margin-block-start: var(--space-2xs);
    }

    .contact-form__form {
        grid-column: 2 / -1;
    }
}

/* -----------------------------------------------------------------------------
   Gravity Forms: il contenitore e la griglia dei campi.
   -------------------------------------------------------------------------- */

.contact-form .gform_wrapper.gravity-theme {
    margin: 0;
}

/* La legenda «* indicates required fields» non ha più senso: gli asterischi qui
   sotto sono spenti, e il design segna i campi facoltativi. Titolo e descrizione del
   form sono già spenti dal template, quindi l'intestazione resta vuota. */
.contact-form .gform_wrapper.gravity-theme .gform_heading {
    display: none;
}

/* La griglia a dodici colonne è del plugin; qui cambiano gli stacchi. 40 fra le due
   colonne, come fuori dal form; fra le righe 35, perché le righe del design cadono
   ogni 88 e un campo qui è alto 53 — il filetto si somma, in Figma no. */
.contact-form .gform_wrapper.gravity-theme .gform_fields {
    row-gap: 2.1875rem;
}

/* ⚠ **Lo stacco fra le colonne solo sopra i 640px**, che è la soglia del plugin: sotto,
   Gravity Forms porta ogni campo a tutta riga e azzera lo stacco da sé. La griglia è
   di dodici colonne, quindi gli stacchi sono undici: 40 ciascuno fanno 440px che il
   form non può scendere sotto, e a 390 la pagina sbordava di 66. Dichiarato fuori
   dalla soglia, questo selettore — più pesante — scavalcava lo zero del plugin. */
@media (min-width: 641px) {
    .contact-form .gform_wrapper.gravity-theme .gform_fields {
        column-gap: 2.5rem;
    }
}

/* -----------------------------------------------------------------------------
   Un campo: un filetto sotto il controllo, e l'etichetta.

   Dove sta l'etichetta dipende dal campo:

     - **testo ed email — i primi quattro — l'etichetta fa da segnaposto**: sta dove
       andrà il testo, ed entrando nel campo si rimpicciolisce e sale sopra. Vedi
       *L'etichetta che sale*, più sotto;
     - la **tendina** ha la domanda come segnaposto e l'etichetta nascosta;
     - la **richiesta** ha l'etichetta in cima e il testo sotto;
     - ogni altro campo — qui non ce ne sono, ma il modulo stampa qualunque form — ha
       l'etichetta a sinistra e il controllo a destra, in due colonne. È la base qui
       sotto, e le tre righe sopra la riscrivono.

   Il filetto sta sotto il controllo e non sotto il campo, così un messaggio d'errore
   — seconda riga, a tutta larghezza — cade sotto il filetto invece di finirci sopra.
   -------------------------------------------------------------------------- */

.contact-form .gform_wrapper.gravity-theme .gfield {
    /* Il colore del filetto, che l'errore fa rosso: un nome solo, perché lo leggono il
       bordo e il filetto più spesso del fuoco. */
    --field-rule: var(--color-text-primary);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Le righe restano alte quanto il loro contenuto: accanto a un campo con l'errore
       sotto — più alto — un campo senza si stirerebbe, e il suo filetto scenderebbe a
       metà dell'altro. */
    align-content: start;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
    font-weight: var(--weight-medium);
}

/* Il plugin la vuole a 16px in grassetto con 8 sotto: qui è il corpo del campo. */
.contact-form .gform_wrapper.gravity-theme .gfield_label {
    margin: 0;
    padding-block: var(--space-s) var(--space-2xs);
    padding-inline: 0 var(--space-s);
    border-block-end: 1px solid var(--field-rule);
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.contact-form .gform_wrapper.gravity-theme .ginput_container {
    padding-block: var(--space-s) var(--space-2xs);
    border-block-end: 1px solid var(--field-rule);
}

/* ⚠ **Righe e colonne dichiarate, non lasciate all'ordine del markup.** Il form mette
   il messaggio d'errore *prima* del controllo — è `field_validation_above`, il
   default del plugin — e con il posizionamento automatico l'errore prendeva la riga
   del campo e spingeva il controllo sotto di sé: al primo invio sbagliato ogni coppia
   etichetta-campo si spezzava in due righe. Così etichetta e controllo stanno sempre
   sulla prima riga, e errore e descrizione sotto il filetto, a tutta larghezza,
   qualunque sia l'ordine in cui il plugin li scrive. */
.contact-form .gform_wrapper.gravity-theme .gfield > .gfield_label {
    grid-row: 1;
    grid-column: 1;
}

.contact-form .gform_wrapper.gravity-theme .gfield > .ginput_container {
    grid-row: 1;
    grid-column: 2;
}

.contact-form .gform_wrapper.gravity-theme .gfield > :is(.gfield_validation_message, .gfield_description, .instruction) {
    grid-row: 2;
    grid-column: 1 / -1;
}

/* L'asterisco è spento: il design segna i facoltativi. Chi usa uno screen reader
   non perde niente, perché ogni controllo obbligatorio porta `aria-required`. */
.contact-form .gform_wrapper.gravity-theme .gfield_label .gfield_required {
    display: none;
}

/* «(optional)» dopo l'etichetta di ogni campo non obbligatorio, al 60% di bianco
   come nel nodo 453:1688. La parola arriva tradotta dal template, sulla sezione. */
.contact-form .gform_wrapper.gravity-theme .gfield:not(.gfield_contains_required) .gform-field-label__text::after {
    content: "\00a0" var(--contact-form-optional, "");
    color: rgb(255 255 255 / 0.6);
}

/* -----------------------------------------------------------------------------
   I controlli.
   -------------------------------------------------------------------------- */

/* Nessuna scatola: testo bianco sul fondo pagina, alto quanto la riga. Il plugin ci
   mette 15px di corpo e 8 di padding. */
.contact-form .gform_wrapper.gravity-theme .ginput_container :is(input, select, textarea) {
    display: block;
    width: 100%;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    caret-color: currentColor;
}

/* ⚠ **L'autocompletamento di Chrome e Safari dipinge il campo di azzurro**, con una
   regola dello user agent che nessun `background-color` scavalca, e col testo nero:
   sul fondo scuro un campo compilato diventerebbe un rettangolo chiaro. Il colore del
   testo si riprende con `-webkit-text-fill-color`; il fondo si rimanda con una
   transizione lunga un giorno, che è il rimedio noto. Col movimento ridotto base.css
   accorcia tutte le transizioni, e lì il rettangolo chiaro torna: meglio quello di
   un campo illeggibile. */
.contact-form .gform_wrapper.gravity-theme .ginput_container input:-webkit-autofill {
    -webkit-text-fill-color: currentColor;
    transition: background-color 86400s;
}

/* ⚠ **Nessun anello di fuoco sui controlli**, ed è una richiesta: l'anello di base.css
   attorno a una riga senza scatola disegnava un rettangolo che il design non ha.

   Al suo posto **il filetto sotto il campo passa da 1 a 2px**, e non è un
   ornamento: chi si muove col tab deve vedere dove si trova, e l'etichetta che sale
   non basta — su un campo già compilato è già su, e al fuoco non cambia niente. Un
   `box-shadow` interno e non un bordo più spesso, così il testo non si sposta di un
   pixel. Con `:focus` e non `:focus-visible`, perché una tendina aperta col mouse non
   è `:focus-visible` in tutti i motori. */
.contact-form .gform_wrapper.gravity-theme .ginput_container :is(input, select, textarea):focus {
    outline: none;
}

.contact-form .gform_wrapper.gravity-theme .gfield:has(.ginput_container :focus) > .ginput_container {
    box-shadow: inset 0 -1px 0 var(--field-rule);
}

/* -----------------------------------------------------------------------------
   L'etichetta che sale: testo ed email.

   Dal design, nodi 453:1678–453:1690: a campo vuoto «Name» sta dove andrà il testo,
   18 su 28. Entrando nel campo — o quando il campo ha un valore — l'etichetta passa a
   14 e sale sopra il testo, dentro i 16 di aria che il campo ha sopra la riga. Non
   sparisce mai: chi torna su un campo compilato sa ancora cosa sia.

   ⚠ **Sale già al fuoco, prima della prima lettera.** Altrimenti il cursore
   lampeggerebbe sopra la parola «Name», nel punto esatto in cui sta scritta.

   ⚠ **Il campo si riconosce da `[placeholder=" "]`**, il segnaposto di uno spazio che
   aggiunge `inc/gravityforms.php`: è lui che fa funzionare `:placeholder-shown`, cioè
   «il campo è vuoto», senza JavaScript e anche per l'autocompletamento. Un campo con
   un segnaposto vero resta con l'etichetta a sinistra: le due cose nello stesso punto
   si sovrapporrebbero. `:autofill` e il suo alias stanno dentro `:is()`, che perdona un
   selettore sconosciuto — dentro `:has()` da solo invaliderebbe la regola intera.

   Il movimento è `scale` più `translate` e non `font-size`, così non ricalcola il
   layout a ogni fotogramma: da 18 a 14 è 0,7778, e salendo di 20 la cima del testo va
   da 16 a −4 — 4 sopra il campo, nello stacco fra le righe. Con il movimento ridotto
   base.css accorcia la transizione, e l'etichetta salta invece di scivolare.
   -------------------------------------------------------------------------- */

.contact-form .gform_wrapper.gravity-theme .gfield:is(.gfield--type-text, .gfield--type-email):has(> .ginput_container input[placeholder=" "]) {
    grid-template-columns: minmax(0, 1fr);

    /* Etichetta e controllo nella stessa cella: l'etichetta sopra, trasparente ai
       click, così il cursore finisce dove si preme e non all'inizio della riga. */
    & > .gfield_label {
        position: relative;
        z-index: 1;
        grid-column: 1;
        align-self: start;
        margin-block-start: var(--space-s);
        padding: 0;
        border: 0;
        pointer-events: none;
        transform-origin: left top;
        transition:
            scale var(--duration-fast) var(--ease-out),
            translate var(--duration-fast) var(--ease-out);
    }

    & > .ginput_container {
        grid-column: 1;
    }

    &:has(> .ginput_container input:is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill)) > .gfield_label {
        scale: 0.7778;
        translate: 0 -1.25rem;
    }
}

/* La tendina delle sedi. **La sua etichetta non si vede**, ed è l'unica: nel design
   la domanda sta dentro la tendina chiusa, ed è il suo segnaposto — l'opzione vuota
   in cima, che serve comunque perché nessuna sede sia scelta da sola. L'etichetta
   resta per gli screen reader, con le regole di `.visually-hidden`.

   La freccia è il triangolo del design (nodo 453:1686), 16×12 a filo del bordo
   destro: uno sfondo, perché dentro il `<select>` del plugin non si aggiunge niente. */
.contact-form .gform_wrapper.gravity-theme .gfield--type-select > .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.contact-form .gform_wrapper.gravity-theme .gfield--type-select > .ginput_container {
    grid-column: 1 / -1;
}

.contact-form .gform_wrapper.gravity-theme .ginput_container_select select {
    appearance: none;
    padding-inline-end: calc(1rem + var(--space-s));
    background: url("../../../icons/triangle-down.svg") no-repeat right center / 1rem 0.75rem;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* L'elenco aperto **dove resta quello di sistema** — oggi Firefox, vedi il blocco
   `base-select` qui sotto. Su Windows e Linux il browser lo disegna coi colori del
   `<select>`, e senza questa riga sarebbe testo bianco su bianco: è la stessa riga
   delle tendine dei progetti. */
.contact-form .gform_wrapper.gravity-theme .ginput_container_select option {
    background-color: #fff;
    color: #000;
}

/* -----------------------------------------------------------------------------
   L'elenco aperto, disegnato dal tema: **lo stesso delle tendine dei progetti**.

   È il blocco `base-select` di `projects-index.css`, e i valori sono quelli: il
   riquadro col filetto bianco e il raggio 16, il fondo della barra dell'header
   rientrata — il colore della pagina al 34% su nero, al 92%, sfocato —, 4 di padding,
   la voce all'hover col velo al 16%, la voce scelta piena bianca col testo nero, la
   dissolvenza breve all'apertura, e l'apertura verso il basso con `flip-block` solo se
   sotto non c'è posto. Le ragioni di ognuna sono scritte là, e valgono qui identiche.
   Ogni modulo possiede i propri asset, quindi le righe sono copiate e non condivise:
   **chi le cambia là le cambi anche qui.**

   Quel che è diverso è quel che viene dalla tendina chiusa, che qui è un'altra:

     - **la voce ha il corpo del campo**, 18 su 28 in tondo, e non `label-sm` in
       maiuscolo: nei progetti la voce ripete la tendina chiusa, e qui la tendina
       chiusa è una riga di testo del form;
     - **l'elenco è largo quanto il campo** e comincia 8 sotto il filetto: l'ancora è
       il `<select>`, che sta 8 sopra il filetto dentro il contenitore, quindi 8 + 1 +
       8 = 17 di margine. Nei progetti invece l'ancora sta dentro un bordo, e i conti
       sono quelli di un pixel;
     - **la domanda resta in cima all'elenco, attenuata**: è il segnaposto, l'opzione
       vuota che serve a non avere una sede già scelta, e finché è lei la scelta vuol
       dire «nessuna sede» — quindi niente riempimento bianco. ⚠ **Non si nasconde.**
       Con `display: none` WebKit apre l'elenco col fuoco sulla voce scelta, cioè su
       quella nascosta, e da lì la tastiera non si muove più: frecce e Invio non fanno
       niente. Chromium lo regge, WebKit no — misurato. È anche la ragione per cui nei
       progetti «All» sta nell'elenco;
     - **la freccia è il triangolo del design**, non un SVG nel markup — dentro il
       `<select>` del plugin non si aggiunge niente — e da aperta si capovolge
       cambiando immagine invece di ruotare: vedi la regola più sotto.

   ⚠ **È ancora il `<select>` di Gravity Forms**: tastiera, lettore di schermo, Esc e
   click fuori restano del browser, e il markup non cambia di un carattere
   (OBIETTIVO 07.1). Dove `base-select` non c'è — Firefox, al 30 settembre 2026 — il
   blocco non si applica e resta l'elenco di sistema.
   -------------------------------------------------------------------------- */

@supports (appearance: base-select) {

    .contact-form .gform_wrapper.gravity-theme .ginput_container_select select,
    .contact-form .gform_wrapper.gravity-theme .ginput_container_select select::picker(select) {
        appearance: base-select;
    }

    /* ⚠ **La freccia resta lo sfondo, e da aperta cambia immagine.** Nei progetti è un
       SVG nel markup che ruota; qui dentro il `<select>` del plugin non si aggiunge
       niente, e `::picker-icon` — l'altra strada — Chromium non la dipinge su un
       `<select>` a blocco: provata di serie, con `content: url()`, in assoluto e con
       uno sfondo, e non compare in nessuna forma; compare solo con il `<select>` in
       `flex`, che però non fa i puntini di un testo troppo lungo, e su un telefono la
       domanda non ci sta. WebKit la dipinge in tutti i casi. `triangle-up.svg` è il
       poligono del design com'è nel file, prima della rotazione che lo punta in giù. */
    .contact-form .gform_wrapper.gravity-theme .ginput_container_select select {
        &::picker-icon {
            display: none;
        }

        &:open {
            background-image: url("../../../icons/triangle-up.svg");
        }
    }

    .contact-form .gform_wrapper.gravity-theme .ginput_container_select select::picker(select) {
        width: anchor-size(width);
        max-height: 20rem;
        margin: calc(var(--space-2xs) * 2 + 1px) 0 0;
        position-try-order: normal;
        position-try-fallbacks: flip-block;
        padding: var(--space-3xs);
        border: 1px solid var(--color-text-primary);
        border-radius: var(--radius-m);
        background-color: color-mix(in srgb, color-mix(in srgb, var(--color-page-bg) 34%, #000) 92%, transparent);
        backdrop-filter: blur(8px);
        color: var(--color-text-primary);
        overflow-y: auto;
        transition:
            opacity var(--duration-fast) var(--ease-out),
            translate var(--duration-fast) var(--ease-out);
    }

    @starting-style {
        .contact-form .gform_wrapper.gravity-theme .ginput_container_select select::picker(select) {
            opacity: 0;
            translate: 0 calc(var(--space-3xs) * -1);
        }
    }

    .contact-form .gform_wrapper.gravity-theme .ginput_container_select option {
        display: flex;
        align-items: center;

        /* Il testo della voce a 12 dal filo esterno, come nei progetti: 1 di bordo, 4
           di padding dell'elenco, 7 qui. */
        padding: var(--space-2xs) calc(var(--space-xs) - var(--space-3xs) - 1px);
        border-radius: calc(var(--radius-m) - var(--space-3xs));
        background-color: transparent;
        color: inherit;
        white-space: normal;
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
        outline-offset: -2px;

        &::checkmark {
            display: none;
        }

        &:is(:hover, :focus-visible) {
            background-color: var(--color-text-faint);
        }

        &:checked {
            background-color: var(--color-text-primary);
            color: #000;
        }

        &:disabled {
            opacity: 0.4;
            cursor: default;
        }
    }

    /* La domanda: al 60% come «(optional)», e non piena quando è lei la scelta. Lo
       hover e il fuoco le danno il velo come alle altre, perché resta una voce che si
       può scegliere. Dopo la regola della voce, e più pesante: vince sul `:checked`. */
    .contact-form .gform_wrapper.gravity-theme .ginput_container_select option.gf_placeholder {
        color: rgb(255 255 255 / 0.6);

        &:checked {
            background-color: transparent;
            color: rgb(255 255 255 / 0.6);
        }

        &:checked:is(:hover, :focus-visible) {
            background-color: var(--color-text-faint);
        }
    }

    /* Il movimento ridotto va dichiarato qui, perché la regola di base.css non arriva a
       `::picker(select)`: vedi lo stesso blocco in `projects-index.css`. */
    @media (prefers-reduced-motion: reduce) {
        .contact-form .gform_wrapper.gravity-theme .ginput_container_select select::picker(select) {
            transition: none;
        }
    }
}

/* La richiesta: l'etichetta in cima e il testo sotto, in un riquadro alto 240 col
   filetto in fondo (nodo 453:1680). 240 meno 16 sopra, 28 di etichetta, 8 sotto e il
   filetto fa 187 di area per scrivere. */
.contact-form .gform_wrapper.gravity-theme .gfield--type-textarea {
    grid-template-columns: minmax(0, 1fr);
}

.contact-form .gform_wrapper.gravity-theme .gfield--type-textarea > .gfield_label {
    padding-block-end: 0;
    padding-inline-end: 0;
    border: 0;
}

.contact-form .gform_wrapper.gravity-theme .gfield--type-textarea > .ginput_container {
    grid-row: 2;
    grid-column: 1;
    padding-block-start: 0;
}

.contact-form .gform_wrapper.gravity-theme .gfield--type-textarea > :is(.gfield_validation_message, .gfield_description, .instruction) {
    grid-row: 3;
}

/* ⚠ Qui il plugin usa quattro classi e non tre — `.gfield textarea.medium`, alta 192
   — e con un selettore di pari peso vincerebbe lui, che arriva dopo: la richiesta
   risultava alta 245. Da qui la classe in più. */
.contact-form .gform_wrapper.gravity-theme .gfield--type-textarea .ginput_container_textarea textarea {
    height: calc(15rem - 3.25rem - 1px);
    resize: vertical;
}

/* -----------------------------------------------------------------------------
   Errori.
   -------------------------------------------------------------------------- */

/* Il riepilogo in cima al form, dopo un invio sbagliato. Il plugin lo disegna come
   un riquadro chiaro con un'icona: qui è il filetto del tema, nel rosso degli
   errori. */
.contact-form .gform_wrapper.gravity-theme .gform_validation_errors {
    margin: 0 0 var(--space-l);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--contact-form-error);
    border-radius: var(--radius-m);
    background: none;
    box-shadow: none;
}

/* Il plugin porta il fuoco sul riepilogo dopo l'invio, perché uno screen reader lo
   legga, e gli disegna un anello rosso a 2px: qui è l'anello del tema, come ovunque. */
.contact-form .gform_wrapper.gravity-theme .gform_validation_errors:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.contact-form .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
    margin: 0;
    color: var(--contact-form-error);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    font-weight: var(--weight-medium);
}

.contact-form .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon {
    display: none;
}

.contact-form .gform_wrapper.gravity-theme .gform_validation_errors > ol {
    margin: var(--space-2xs) 0 0;
}

.contact-form .gform_wrapper.gravity-theme .gform_validation_errors > ol :is(li, a) {
    color: inherit;
    font-size: var(--text-body-s);
}

/* Il campo sbagliato: il filetto prende il rosso, l'etichetta no — il plugin la
   colora, e un'etichetta rossa su fondo blu si legge peggio di una bianca. */
.contact-form .gform_wrapper.gravity-theme .gfield_error :is(.gfield_label, legend) {
    color: inherit;
}

.contact-form .gform_wrapper.gravity-theme .gfield_error {
    --field-rule: var(--contact-form-error);
}

.contact-form .gform_wrapper.gravity-theme .gfield_validation_message {
    margin: var(--space-2xs) 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--contact-form-error);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
}

/* -----------------------------------------------------------------------------
   Il pulsante e la conferma.
   -------------------------------------------------------------------------- */

/* Centrato sotto il form, 40 più giù della richiesta (2755 → 2795). L'aspetto è
   `cta-l-white`, e lo dà base.css per selettore: qui ci sono solo il posto e i due
   margini del plugin da azzerare. */
.contact-form .gform_wrapper.gravity-theme .gform_footer {
    justify-content: center;
    margin: 2.5rem 0 0;
    padding: 0;
}

.contact-form .gform_wrapper.gravity-theme .gform_footer .gform_button {
    margin: 0;
}

/* Dopo l'invio Gravity Forms sostituisce il form con il messaggio di conferma, e il
   suo contenitore non porta più `gravity-theme`: il selettore è più corto apposta. */
.contact-form .gform_confirmation_message {
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    font-weight: var(--weight-medium);
}