/* =========================================================================
   09-form.css — il modulo di contatto CF7 dentro il pannello blu di
   chiusura. 25/09/2026.

   PERCHE' ESISTE QUESTO FILE, E PERCHE' SOLO ADESSO.
   Le stesse ~250 righe vivevano copiate in due fogli di pagina:
   pagine/palestra-benessere.css e pagine/protesi-anca-chirurgia-robotica.css.
   CLAUDE.md §13.7 fissava la soglia: "quando servira' la terza volta, la
   cosa giusta e' promuoverlo a strato comune". La terza volta e' la pagina
   Psicologia del lavoro.

   ⚠️ LE DUE COPIE NON SONO STATE TOLTE, ed e' una scelta. I loro selettori
   hanno DUE id (#lc-<pagina> #cta-finale) contro la classe .lc-page di
   questo file, e il foglio di pagina si carica comunque dopo: qualunque
   cosa ci sia scritta qui, su Palestra e Anca vince la loro. Quelle due
   pagine sono online e approvate, e questo file non puo' spostarle di un
   pixel — verificato, non dedotto. Quando un giorno si vorranno ripulire,
   si cancellano quei due blocchi e il vestito arriva da qui.

   A CHI SI APPLICA. Ai soli elementi .lg-form*, che esistono solo nel
   markup del modulo CF7 13700 e in nessun altro posto del sito —
   controllato su tutte e sei le pagine LiveCanvas. Una pagina senza quel
   modulo carica il file e non trova niente da vestire.

   ⚠️ IL PREFISSO RESTA lg- E NON DIVENTA lc-. Quelle classi non sono
   nostre: le scrive il template del form dentro Contact Form 7, e sono gia'
   referenziate dai due fogli di pagina qui sopra. Rinominarle vorrebbe dire
   toccare il form in produzione e rompere Palestra e Anca nello stesso
   momento. La definizione del form sta in
   longevity-materiale/form-livecanvas.md

   ⚠️ IL MODULO NON USA .column-half / .column-full DEL TEMA, e non e' un
   dettaglio: style.css del child dichiara `.column-half, .column-full {
   color:#FFF }` per tutto il sito, che rende il form bianco su qualunque
   fondo, etichette dei consensi comprese. Con classi proprie il modulo e'
   indipendente dal fondo e i colori li decide questo file.

   ⚠️ TUTTO E' ANCORATO A #cta-finale. Non e' pigrizia di selettore: il
   modulo e' disegnato per il pannello blu, e su fondo chiaro il testo
   bianco delle etichette sparirebbe. Se un giorno serve il modulo su fondo
   chiaro, si scrive una variante, non si allarga questo aggancio.
   ========================================================================= */


/* --------------------------------------------------------------------------
   1. Contenitore
   .lc-cta centra il testo della sezione: il form no, i campi vanno allineati
   a sinistra o l'occhio non trova l'inizio di ogni riga.

   ⚠️ LE TRE LARGHEZZE SONO LA STESSA: 640px. Recapiti diretti, campi e
   pulsante d'invio hanno gli stessi bordi verticali. Prima erano 420, 638 e
   240, tutte centrate su assi diversi, e si vedeva.
   -------------------------------------------------------------------------- */

.lc-page #cta-finale .lg-form {
    max-width: 640px;
    margin: 20px auto 0;
    text-align: left;
}


/* --- I recapiti diretti, sopra il modulo --------------------------------
   ⚠️ L'ORDINE E' UNA SCELTA: telefono e WhatsApp vengono PRIMA del modulo.
   Chi ha gia' deciso di chiamare non deve scorrere un modulo per trovare il
   numero; chi preferisce scrivere trova il modulo un rigo sotto.

   Sotto i 576px i due pulsanti si impilano: affiancati verrebbero ~150px
   l'uno, meno del bersaglio comodo per un pollice.                        */
.lc-page #cta-finale .lg-contatti-diretti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 640px;
    margin: 32px auto 0;
}

@media (min-width: 576px) {
    .lc-page #cta-finale .lg-contatti-diretti {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}


/* --- La riga "oppure scrivici…" -----------------------------------------
   Separa i due modi di contatto senza essere un titolo: e' un <p> e non
   entra nell'albero dei titoli, che in quella sezione ha gia' il suo H2.  */
.lc-page #cta-finale .lg-oppure {
    margin-top: 26px;
}

.lc-page #cta-finale .lg-oppure p {
    margin: 0;
    color: var(--lc-testo-su-blu);
    font-size: 15px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   2. Griglia dei campi
   Una colonna su telefono, due da 768px. Il messaggio le attraversa entrambe.
   -------------------------------------------------------------------------- */

.lc-page #cta-finale .lg-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .lc-page #cta-finale .lg-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .lc-page #cta-finale .lg-form-field--full {
        grid-column: 1 / -1;
    }
}

.lc-page #cta-finale .lg-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;   /* CF7 avvolge i campi in <p>: il margine di default sfasa la griglia */
}

.lc-page #cta-finale .lg-form-field label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lc-bianco);
}

/* L'asterisco in un colore diverso si legge come segnale, non come refuso. */
.lc-page #cta-finale .lg-form-req {
    color: var(--lc-azzurro-tenue);
}

/* CF7 avvolge ogni controllo in uno <span> inline. */
.lc-page #cta-finale .lg-form .wpcf7-form-control-wrap {
    display: block;
}

/* ⚠️ CF7 APPLICA IL SUO wpcf7_autop AL TEMPLATE DEL FORM, e non lo disattiva
   il meta _lc_livecanvas_enabled: aggiunge <p> attorno al contenuto sciolto
   dei <div> e, se un campo va a capo nel sorgente, un <br> fra etichetta e
   campo. Dentro un contenitore flex quel <br> diventa un elemento a se' e
   apre un buco di ~50px. Il markup del form e' scritto con ogni campo su una
   riga sola per non generarli; queste due regole sono la rete di sicurezza
   se qualcuno lo riformatta dall'editor CF7.                              */
.lc-page #cta-finale .lg-form p {
    margin: 0;
}

.lc-page #cta-finale .lg-form br {
    display: none;
}


/* --------------------------------------------------------------------------
   3. Campi
   Fondo bianco pieno e testo scuro, non campi traslucidi: il pubblico di
   queste pagine comprende persone anziane e ipovedenti, e un campo semi-
   trasparente su blu e' esattamente il posto sbagliato per fare eleganza.
   -------------------------------------------------------------------------- */

.lc-page #cta-finale .lg-form input[type="text"],
.lc-page #cta-finale .lg-form input[type="email"],
.lc-page #cta-finale .lg-form input[type="tel"],
.lc-page #cta-finale .lg-form textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--lc-bianco);
    color: var(--lc-campo-testo);
    font-family: inherit;
    font-size: 16px;   /* sotto i 16px iOS zooma il viewport al focus */
    line-height: 1.35;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Nessun min-height qui: l'altezza la decide l'attributo rows del campo
   ([textarea* messaggio x4] = 4 righe). Un min-height in CSS lo
   scavalcherebbe e cambiare le righe dall'editor CF7 non avrebbe piu'
   effetto. */
.lc-page #cta-finale .lg-form textarea {
    height: auto;
    resize: vertical;
}

.lc-page #cta-finale .lg-form input:focus-visible,
.lc-page #cta-finale .lg-form textarea:focus-visible {
    outline: 3px solid rgba(127, 205, 242, .75);
    outline-offset: 2px;
    border-color: var(--lc-azzurro-tenue);
}

/* Campo in errore: bordo rosso, cosi' l'errore non e' segnalato dal solo
   testo sotto (che chi ingrandisce molto la pagina puo' non vedere). */
.lc-page #cta-finale .lg-form .wpcf7-not-valid {
    border-color: var(--lc-errore);
    box-shadow: 0 0 0 1px var(--lc-errore);
}


/* --------------------------------------------------------------------------
   4. Consenso privacy
   Casella disegnata da zero: quella nativa su fondo blu e' il quadratino
   grigio di sistema, fuori scala e fuori palette.
   -------------------------------------------------------------------------- */

.lc-page #cta-finale .lg-form-privacy {
    margin-top: 26px;
}

.lc-page #cta-finale .lg-form-privacy .wpcf7-list-item {
    margin: 0;
}

.lc-page #cta-finale .lg-form-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.lc-page #cta-finale .lg-form-privacy small {
    font-size: 14px;
    line-height: 1.5;
    color: var(--lc-bianco);
}

.lc-page #cta-finale .lg-form-privacy a {
    color: var(--lc-bianco);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lc-page #cta-finale .lg-form-privacy a:hover {
    color: var(--lc-azzurro-tenue);
}

.lc-page #cta-finale .lg-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.lc-page #cta-finale .lg-form input[type="checkbox"]:hover {
    border-color: var(--lc-bianco);
}

.lc-page #cta-finale .lg-form input[type="checkbox"]:checked {
    background-color: var(--lc-azzurro);
    border-color: var(--lc-azzurro);
}

/* Il segno di spunta: due lati di un bordo, ruotati. Nessuna immagine. */
.lc-page #cta-finale .lg-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--lc-bianco);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lc-page #cta-finale .lg-form input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(127, 205, 242, .75);
    outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. Invio
   -------------------------------------------------------------------------- */

/* ⚠️ NIENTE text-align:center, ed e' la correzione di un difetto vero: CF7
   stampa <span class="wpcf7-spinner"> SUBITO DOPO il pulsante. Lo spinner e'
   invisibile a riposo ma occupa spazio, quindi centrando la riga si centrava
   "pulsante + spinner" e il pulsante restava spostato a sinistra di ~36px.
   Misurato in pagina il 04/09/2026: centro del pulsante a 443 invece che a
   479.

   Con il pulsante a piena larghezza il problema non esiste piu' — e in piu'
   il bordo destro e sinistro coincidono con quelli dei campi.             */
.lc-page #cta-finale .lg-form-submit {
    position: relative;
    margin-top: 30px;
}

.lc-page #cta-finale .lg-form .wpcf7-submit {
    /* style.css dichiara `.wpcf7-submit{ float:left }`: senza questo il
       bottone esce dal flusso. */
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    /* !important: style.css dichiara `.wpcf7-submit{ padding:15px 30px !important }` */
    padding: 16px 36px !important;
    border: 1px solid var(--lc-azzurro);
    border-radius: 8px;
    background: var(--lc-azzurro);
    color: var(--lc-bianco);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: none;   /* il tema le vuole maiuscole, le pagine no */
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.lc-page #cta-finale .lg-form .wpcf7-submit:hover {
    background: var(--lc-azzurro-scuro);
    border-color: var(--lc-azzurro-scuro);
}

.lc-page #cta-finale .lg-form .wpcf7-submit:focus-visible {
    outline: 3px solid rgba(127, 205, 242, .75);
    outline-offset: 3px;
}

/* Fuori dal flusso: a riposo e' invisibile ma largo, e in qualunque
   disposizione sposterebbe cio' che gli sta intorno. Cosi' compare sopra il
   bordo destro del pulsante mentre l'invio e' in corso, senza muovere nulla. */
.lc-page #cta-finale .lg-form .wpcf7-spinner {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}


/* --------------------------------------------------------------------------
   6. Messaggi
   Quelli di default sono testo bianco su bordo trasparente: sul blu si
   perdono. Su fondo bianco e testo scuro si leggono in ogni stato.
   -------------------------------------------------------------------------- */

.lc-page #cta-finale .wpcf7-response-output {
    max-width: 640px;
    margin: 24px auto 0 !important;   /* CF7 impone un margin inline */
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--lc-bianco);
    color: var(--lc-campo-testo);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.lc-page #cta-finale .lg-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    padding: 0;
    background: transparent;
    color: var(--lc-errore-su-blu);
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}