/* Farsi Strada — reset di base per Contact Form 7 (strutturale, agnostico sul trattamento).
   Messo in coda solo dove un form viene reso, dopo il foglio del plugin e dopo
   theme.css: la skin dei form del progetto (regole su .wpcf7* e sui controlli
   del form) va qui, sotto il reset, mai in theme.css.
   Pavimento sotto le classi Bootstrap che inc/bootstrap-integration.php (Sezione 4)
   applica ai controlli: vale anche per quelli in opt-out (no-bs-form).
   Bottoni e check esclusi: lì non c'è `size`, e .form-check-input è owner della propria larghezza. */
.wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select { width: 100%; box-sizing: border-box; }
.wpcf7-form-control-wrap { display: block; }

/* ===================================================================
   Skin dei form del progetto. Le custom property --farsistrada-* sono
   definite su :root in theme.css, accodato prima di questo foglio.
   =================================================================== */

/* Modulo CF7 su un fondo blu (.form-on-blue). Lo condividono la banda mini-guida
   (.lead-magnet, blu pieno), la banda newsletter del blog (.farsistrada-academy,
   gradiente scuro) e la banda "Prossime uscite" dell'archivio libri (.arch-note,
   blu pieno): stesso modulo, stessa pelle, scritta una volta. La struttura (classe
   Bootstrap dei controlli .form-control/.btn + il pavimento qui sopra) arriva dalla
   Factory: inc/bootstrap-integration.php Section 4. Qui il layout a riga
   dell'export (campi + submit affiancati, a capo su schermo stretto; min-width:0
   lascia restringere l'input sotto il size="40" nativo di CF7) e l'accento chiaro
   sopra .form-control / .btn. La nota sotto il modulo (.form-note) è markup del
   template e resta in theme.css. */
.form-on-blue .wpcf7-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.form-on-blue .wpcf7-form > p { margin: 0; flex: 1 1 220px; min-width: 0; }
.form-on-blue .wpcf7-form > p:last-of-type { flex: 0 0 auto; }   /* submit: larghezza naturale */
/* Modificatori di riga per i moduli con più campi (mini-guida: nome e cognome
   affiancati, poi email e consenso su righe proprie). Classi scritte nel markup
   del form CF7: senza, il modulo resta la riga unica dell'export. */
.form-on-blue .wpcf7-form > .full { flex-basis: 100%; }
/* Label che avvolge il controllo (nome accessibile visually-hidden): inline, il
   controllo a width:100% si misurerebbe sul size="40" nativo e non sulla riga. */
.form-on-blue .wpcf7-form > p > label { display: block; }
/* Consenso privacy su fondo blu. .wpcf7-list-item porta di serie un margine a
   sinistra di 1em, pensato per le liste di checkbox affiancate. */
.form-on-blue .check { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.form-on-blue .check .wpcf7-list-item { margin: 0; }
.form-on-blue .check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.form-on-blue .check a { color: var(--farsistrada-white); text-decoration: underline; }
.form-on-blue .check .form-check-input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}
.form-on-blue .check .form-check-input:focus { border-color: var(--farsistrada-white); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18); }
/* Spunta blu su casella bianca: la spunta di serie di Bootstrap è bianca, e su
   fondo bianco sparirebbe. */
.form-on-blue .check .form-check-input:checked {
    background-color: var(--farsistrada-white);
    border-color: var(--farsistrada-white);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230C6293' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-on-blue .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--farsistrada-radius-xs);
    color: var(--farsistrada-white);
    padding: 13px 18px;
    font-size: 14.5px;
}
.form-on-blue .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }
.form-on-blue .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18);   /* sostituisce il ring blu di Bootstrap */
    color: var(--farsistrada-white);
}
.form-on-blue .wpcf7-submit {
    background: var(--farsistrada-white);
    color: var(--farsistrada-blue);
    border: 1px solid transparent;   /* pareggia l'altezza dell'input (border 1px) */
    border-radius: var(--farsistrada-radius-xs);
    padding: 13px 24px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.form-on-blue .wpcf7-submit:hover { background: #f1f7fb; }
/* Lo spinner che CF7 aggiunge via JS accanto al submit è un inline-block di 24px
   con visibility:hidden: invisibile ma in flusso, alza la riga del bottone e apre
   un vuoto sotto di esso. Fuori flusso (offset auto) resta dove il layout lo
   metterebbe e torna visibile durante l'invio, senza occupare spazio a riposo. */
.form-on-blue .wpcf7-spinner { position: absolute; }
/* .wpcf7-form nel selettore: la regola di CF7 `.wpcf7 form .wpcf7-response-output`
   (0,2,1) batte la sola coppia (0,2,0) e il suo margin 2em 0.5em sposta il
   riquadro fuori dall'allineamento dei campi. Il colore del bordo resta quello
   di stato di CF7 (verde inviato, giallo errori, rosso fallito). */
.form-on-blue .wpcf7-form .wpcf7-response-output { flex: 1 1 100%; margin: 4px 0 0; padding: 10px 16px; border-radius: var(--farsistrada-radius-xs); font-size: 13px; }
.form-on-blue .wpcf7-not-valid-tip { font-size: 12.5px; color: #ffd9d9; margin-top: 5px; }

/* form-grid: layout 2-col della form-card dei contatti; la form CF7 (wp-admin) usa
   questo markup (design-remapping §6). Il contenitore .form-card resta in theme.css. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field { display: flex; flex-direction: column; gap: 8px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid label { font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-ink); font-weight: 700; }
/* Il selettore esclude submit, checkbox e radio come fa il design system: sono
   controlli, non campi di testo. CF7 rende il submit come <input type="submit">
   (il mock usa <button>), quindi senza l'esclusione prendeva la skin di campo:
   width 100% al posto della larghezza naturale, e padding 14px 16px sulla
   casella privacy che la gonfiava oltre i 16px del design. */
.form-grid input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .form-grid textarea, .form-grid select { background: var(--farsistrada-white); border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius); padding: 14px 16px; font: inherit; font-size: 15px; color: var(--farsistrada-ink); transition: border-color .2s ease; width: 100%; min-width: 0; box-sizing: border-box; }
/* Chevron del select. Serve una regola esplicita: la shorthand `background:` della
   riga sopra azzera background-image, e vincendo per specificità su .form-select di
   Bootstrap (che CF7 riceve da bootstrap-integration.php Section 4) lasciava il campo
   senza alcuna affordance di menu a tendina. Freccia del design, ridisegnata sul blu
   di brand invece che sul letterale #2c4a7c del mock. */
.form-grid select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%230C6293' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 10px 6px;
}
.form-grid input:not([type="submit"]):focus, .form-grid textarea:focus, .form-grid select:focus { outline: none; border-color: var(--farsistrada-blue); box-shadow: 0 0 0 3px var(--farsistrada-blue-tint); }
/* `height` esplicita e non solo `min-height`: CF7 emette rows="10" sul textarea
   (il mock non ha l'attributo) e l'altezza intrinseca vinceva sul min-height,
   allungando il campo di un centinaio di pixel oltre il design. Stessa classe di
   neutralizzazione già applicata a size="40" sugli input. resize resta libero. */
.form-grid textarea { min-height: 140px; height: 140px; resize: vertical; }
/* Marcatore di campo obbligatorio: DERIVATO dal markup CF7, non scritto a mano
   nella label. La sorgente unica resta l'asterisco del form-tag in wp-admin
   ([text* azienda]): se un campo smette di essere obbligatorio il marcatore
   sparisce da solo, senza un secondo edit al markup.
   L'aggancio è .wpcf7-validates-as-required e non aria-required perché quella
   classe nasce da un chokepoint unico di CF7 (wpcf7_form_controls_class in
   includes/contact-form-functions.php: la aggiunge a ogni tag il cui tipo finisce
   per "*", qualunque sia il modulo), mentre aria-required lo emettono solo alcuni
   moduli - checkbox.php non lo emette affatto.
   Il combinatore figlio esclude la label annidata dell'acceptance privacy, che è
   una frase e non una label di campo. */
.form-grid .field:has(.wpcf7-validates-as-required) > label::after { content: "*"; margin-left: 4px; color: var(--farsistrada-error); }
/* Stesso marcatore sul consenso privacy. Serve una regola in più, non un selettore
   più largo: [acceptance] è un tipo nudo (modules/acceptance.php lo registra senza
   variante "acceptance*"), quindi wpcf7_form_controls_class() non gli appende mai
   .wpcf7-validates-as-required e la regola sopra non può raggiungerlo per costruzione.
   L'obbligo però c'è, ed è server-side: wpcf7_acceptance_filter() porta la submission
   a stato acceptance_missing per ogni acceptance non "optional" lasciata vuota — il
   submit disabilitato via JS è solo il primo strato.
   :not(.optional) e :not(.invert) leggono le due opzioni che CF7 riporta come classi
   sullo stesso span: con invert è *spuntare* a bloccare l'invio, quindi un asterisco
   lì direbbe il falso.
   Il target è .wpcf7-list-item-label e non lo span di controllo: quello span contiene
   un .wpcf7-list-item inline-block a piena larghezza, quindi un ::after sul controllo
   va a capo sotto il testo, staccato (verificato a schermo).
   Margin simmetrico e non solo a sinistra: la regola sovrascrive lo spazio che CF7
   mette in .wpcf7-list-item-label::after, e con l'opzione label_first quello spazio è
   l'unico separatore fra testo e casella. */
.form-grid .field:has(.wpcf7-acceptance:not(.optional):not(.invert)) .wpcf7-list-item-label::after { content: "*"; margin: 0 4px; color: var(--farsistrada-error); }
.form-card .submit-row { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.form-card small { color: var(--farsistrada-muted); font-size: 12.5px; }
/* checkbox privacy: annulla il trattamento mono della label */
.form-grid label.check, .form-grid .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--farsistrada-ink-soft); text-transform: none; letter-spacing: normal; font-weight: 400; }
.form-grid .check input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex: none; }
/* Spunta in tinta di brand. `accent-color` (che il design usa sulla checkbox nativa)
   qui non farebbe nulla: .form-check-input di Bootstrap porta appearance:none e
   dipinge lo stato con `background-color:#0d6efd` letterale, senza variabile da
   ridefinire. Si sovrascrive quindi la coppia background/border. */
.form-grid .check input[type="checkbox"]:checked { background-color: var(--farsistrada-blue); border-color: var(--farsistrada-blue); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }