/* ==========================================================================
   Blocco condiviso — IL FORM
   Contact Us `Form` 85:7476 · 872 x 656
   Become a partner `Form` 85:7141 · 872 x 666

   Verifica altezza Contact Us (dentro la card, che ha 40 di padding):
     51 + 40 + 51 + 40 + 150 + 40 + 43 + 40 + 30 = 485
     piu 80 di padding = 565, piu la traccia fantasma (vedi hero-form.php) = 656
   Verifica altezza Become a partner:
     51 + 40 + 51 + 40 + 61 + 40 + 150 + 40 + 43 + 40 + 30 = 586 + 80 = 666 ✔

   ⚠️ IL GAP NON E UN NUMERO SOLO: 40 fra le righe, 16 fra le colonne.
   ⚠️ TUTTI I FILETTI SONO "INSIDE" in Figma: `box-shadow: inset 0 0 0 1px`,
      mai `border`. Con un border il campo passa da 51 a 53, il chip da 35 a
      37, e il gruppo `Job Position` — che ha 27px di margine su una riga da
      792 — va a capo e la pagina cresce di 43px.

   ⚠️ QUESTO FOGLIO VESTE DUE MARKUP. Quello del facsimile statico del tema e
   quello generato da Contact Form 7, che infila i suoi
   `<span class="wpcf7-form-control-wrap">` intorno a ogni campo. Per questo
   nessun selettore qui dentro usa il figlio diretto `>`: basterebbe quello
   span in mezzo per farlo smettere di funzionare senza dare errore.

   ⚠️ GLI STATI SONO MIEI. Nel mockup esiste solo lo stato di riposo: focus,
   hover, campo compilato, errore di campo, errore globale, invio in corso e
   conferma NON sono disegnati. Sono la convenzione consueta, scritta nel
   linguaggio del progetto. Vanno mostrati al designer.
   ========================================================================== */

.vidim-form__griglia,
.wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--grid-gap);    /* 40 righe · 16 colonne */
  width: 100%;
  margin: 0;
}

/* Ogni campo e un blocco della griglia. `p` perche e quello che genera CF7:
   i suoi margini vanno azzerati o il gap non significa piu niente. */
.campo {
  margin: 0;
  min-width: 0;
}

.campo--pieno {
  grid-column: 1 / -1;
}

/* --- Il campo di testo — componente `Text Input` 85:7153 ------------------- */
.campo__input,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  height: 51px;                          /* 16 + 19 + 16 */
  padding: var(--space-3) 24px;          /* 16 / 24 */
  border: 0;
  border-radius: var(--radius-md);       /* 8 */
  box-shadow: inset 0 0 0 1px var(--form-bordo);   /* ⚠️ stroke inside */
  background: none;                      /* trasparente: si vede la card */
  color: var(--text-on-light);           /* il valore digitato */
  font-family: inherit;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  transition: box-shadow 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.campo__input--area,
.wpcf7 textarea {
  height: 150px;                         /* fissa nel mockup */
  padding-block: var(--space-3);
  resize: vertical;
  display: block;
}

/* Il segnaposto resta il grigio del mockup: e testo non essenziale e
   l'etichetta vera esiste comunque, nascosta alla vista ma non agli
   assistivi. Il valore digitato invece e scuro e leggibile. */
.campo__input::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--form-segnaposto);
  opacity: 1;                            /* Firefox lo sbiadisce di suo */
}

@media (hover: hover) and (pointer: fine) {
  .campo__input:hover,
  .wpcf7 input[type="text"]:hover,
  .wpcf7 input[type="email"]:hover,
  .wpcf7 input[type="tel"]:hover,
  .wpcf7 textarea:hover {
    box-shadow: inset 0 0 0 1px var(--form-bordo-hover);
  }
}

/* Il focus e l'unico punto in cui il filetto diventa due pixel e prende il
   colore del brand: e il segnale piu importante di tutto il form. */
.campo__input:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* --- Il gruppo a scelta singola — `Radio` 85:7317, solo Become a partner ---
   In Figma si chiama Radio ma non ci sono cerchietti: sono quattro pillole.
   Sotto restano <input type="radio"> veri, spostati fuori vista invece che
   nascosti con display:none — che li toglierebbe anche alla tastiera.
-------------------------------------------------------------------------- */
.campo--chip {
  /* ⚠️ 61 e l'altezza dichiarata dal mockup; il contenuto ne misura 62
     (19 + 8 + 35). Un pixel di sbavatura del disegno: fissandola, la pagina
     torna a 3339 invece di 3340. */
  height: 61px;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                   /* 8 */
}

.campo__etichetta {
  padding: 0;
  color: var(--color-tertiary-300);      /* ⚠️ non #b0b0b0: vedi tokens.css */
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}

.campo__chip-lista {
  display: flex;
  flex-wrap: wrap;                       /* 27px di margine: se un testo
                                            cresce, va a capo invece di
                                            sfondare */
  align-items: center;
  gap: var(--space-2);                   /* 8 */
  width: 100%;
}

/* Fuori vista ma raggiungibile: il focus si vede sulla pillola, non qui. */
.campo__chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.campo__chip {
  display: inline-flex;
  align-items: center;
  height: 35px;                          /* 8 + 19 + 8 */
  padding: var(--space-2) 12px;
  border-radius: var(--radius-xs);       /* 4 */
  box-shadow: inset 0 0 0 1px var(--form-bordo);
  color: var(--color-tertiary-300);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  cursor: pointer;
  transition: box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .campo__chip:hover { box-shadow: inset 0 0 0 1px var(--color-tertiary); }
}

/* Lo stato scelto ESISTE nel componente Figma (85:7227) ma non e mai usato in
   pagina: fondo #00122b, testo bianco, nessun filetto. Preso dal master. */
.campo__chip-input:checked + .campo__chip {
  box-shadow: none;
  background: var(--color-tertiary);
  color: var(--text-on-dark);
}

.campo__chip-input:focus-visible + .campo__chip {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Il pulsante a piena larghezza — 85:7483 -----------------------------
   E' l'unica larghezza piena del progetto: tutti gli altri `.btn` sono
   larghi quanto il testo. Modificatore, non variante nuova.
-------------------------------------------------------------------------- */
.btn--pieno,
.wpcf7 input[type="submit"] {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.btn--pieno[disabled],
.wpcf7 input[type="submit"][disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* --- Il consenso — `CheckNox` 85:7713 (il refuso e nel nome del layer) ----
   ⚠️ Nel mockup sta SOPRA il pulsante nella lettura ma sotto nell'ordine: e
   il pulsante a stare per primo. Riprodotto com'e. Se il consenso e
   obbligatorio va detto prima di chiedere l'invio: da rivedere col designer.
-------------------------------------------------------------------------- */
/* ⚠️ CF7 annida: span.wpcf7-list-item > label > (input + span.testo). La riga
   flex va sul <label>, non sullo span esterno: mettendola fuori, la casella e
   il testo restano impilati e il blocco cresce. */
.consenso,
.campo--consenso .wpcf7-list-item label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);                   /* 8 */
  margin: 0;
  cursor: pointer;
}

.consenso__casella,
.campo--consenso input[type="checkbox"] {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-xs);       /* 4 */
  box-shadow: inset 0 0 0 1px var(--form-bordo);
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.consenso__casella:checked,
.campo--consenso input[type="checkbox"]:checked {
  box-shadow: none;
  /* Il segno di spunta e disegnato col fondo: 12px sono troppo pochi per una
     spunta vera, e un quadratino pieno si legge lo stesso. */
  background: var(--color-tertiary);
}

.consenso__casella:focus-visible,
.campo--consenso input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.consenso__testo,
.campo--consenso .wpcf7-list-item-label {
  /* ⚠️ Nel mockup 12px in #b0b0b0: 2,17:1, illeggibile. Il corpo resta 12
     come disegnato, il colore no. Vedi la nota in tokens.css. */
  color: var(--color-tertiary-300);
  font-size: 12px;
  line-height: 15px;                     /* 30 = 2 righe */
}

.consenso__testo a,
.campo--consenso .wpcf7-list-item-label a {
  color: inherit;
  text-decoration: underline;
}

.campo--consenso .wpcf7-list-item { margin: 0; }

/* Rete di sicurezza: se un domani qualcuno riaccende wpautop (vedi il filtro
   in functions.php), almeno gli a-capo spuri non allargano i campi. */
.vidim-form__griglia br,
.wpcf7-form br { display: none; }

/* ==========================================================================
   STATI — nessuno di questi e nel mockup
   ========================================================================== */

/* --- Errore su un campo --------------------------------------------------
   CF7 mette `.wpcf7-not-valid` sul campo e infila subito dopo uno
   `<span class="wpcf7-not-valid-tip">` col messaggio.
-------------------------------------------------------------------------- */
.campo__input[aria-invalid="true"],
.wpcf7 .wpcf7-not-valid {
  box-shadow: inset 0 0 0 1px var(--color-errore);
}

.campo__input[aria-invalid="true"]:focus,
.wpcf7 .wpcf7-not-valid:focus {
  box-shadow: inset 0 0 0 2px var(--color-errore);
}

.campo__errore,
.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-1);            /* 4 */
  color: var(--color-errore);
  font-size: 12px;
  line-height: 15px;
}

/* --- Esito dell'invio -----------------------------------------------------
   CF7 stampa un `.wpcf7-response-output` in fondo al form e mette una classe
   di stato sul `<form>`: `.sent`, `.invalid`, `.failed`, `.spam`.
   Di suo e un riquadro con un bordo di sistema: qui diventa un messaggio del
   progetto. Occupa tutta la riga, o si infila in una colonna.
-------------------------------------------------------------------------- */
.wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-3) 24px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}

.wpcf7 form.sent .wpcf7-response-output {
  background: var(--color-successo-velo);
  color: var(--color-successo);
  box-shadow: inset 0 0 0 1px var(--color-successo);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  background: var(--color-errore-velo);
  color: var(--color-errore);
  box-shadow: inset 0 0 0 1px var(--color-errore);
}

/* --- Invio in corso -------------------------------------------------------
   CF7 aggiunge `.submitting` al form e accende il suo `.wpcf7-spinner`.
   Il pulsante si spegne, cosi non si clicca due volte.
-------------------------------------------------------------------------- */
.wpcf7 form.submitting input[type="submit"] {
  opacity: .55;
  pointer-events: none;
}

.wpcf7-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 0 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: none;
  box-shadow: inset 0 0 0 2px var(--color-neutral-300);
  border-top: 2px solid var(--color-primary);
  vertical-align: middle;
  animation: vidim-giro 700ms linear infinite;
}

@keyframes vidim-giro {
  to { transform: rotate(360deg); }
}

/* Chi ha chiesto meno movimento non ha bisogno di una rotella che gira:
   resta un cerchio fermo, e il pulsante spento dice gia che sta lavorando. */
@media (prefers-reduced-motion: reduce) {
  .wpcf7-spinner { animation: none; }
}

/* --- Le pillole generate da Contact Form 7 --------------------------------
   ⚠️ E' l'unico punto dei due form in cui il markup di CF7 e quello del tema
   NON coincidono, e va vestito a parte.

   Il facsimile del tema mette <input> e <label> come fratelli, cosi lo stato
   scelto si prende con `input:checked + label`. CF7 invece annida tutto:

     <span class="wpcf7-list-item">
       <label><input type="radio"><span class="wpcf7-list-item-label">…</span></label>
     </span>

   Li dentro il fratello non esiste piu, e serve `:has()` sul <label>.
   Su un browser senza `:has()` le pillole restano tutte spente: si vede
   comunque quale e scelta dal pallino nativo, che in quel caso NON va
   nascosto. Da qui l'ordine delle due regole qui sotto.
-------------------------------------------------------------------------- */
.campo__chip-gruppo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.campo__chip-gruppo .wpcf7-list-item { margin: 0; }

.campo__chip-gruppo .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: var(--space-2) 12px;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--form-bordo);
  color: var(--color-tertiary-300);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  cursor: pointer;
  transition: box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .campo__chip-gruppo .wpcf7-list-item label:hover {
    box-shadow: inset 0 0 0 1px var(--color-tertiary);
  }
}

/* Il pallino nativo sparisce solo dove sappiamo mostrare lo stato in un altro
   modo. `:has()` nella condizione non e un vezzo: e la garanzia che non si
   tolga l'unico indicatore disponibile. */
@supports selector(label:has(input)) {
  .campo__chip-gruppo .wpcf7-list-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
  }

  .campo__chip-gruppo .wpcf7-list-item label:has(input:checked) {
    box-shadow: none;
    background: var(--color-tertiary);
    color: var(--text-on-dark);
  }

  .campo__chip-gruppo .wpcf7-list-item label:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}