/* ─────────────────────────────────────────────────────────────────────────
   forms.css — veste i moduli con il design system del tema.

   Caricato SOLO nelle pagine che contengono un modulo (hook `wpforms_frontend_css`,
   vedi functions.php) e sempre DOPO il CSS del plugin, che dichiara i suoi colori
   come variabili su `:root`. Qui si riscrivono quelle variabili con i token del
   tema: stessa specificita', ma piu' avanti nella cascata — quindi vincono senza
   un solo !important. Se cambia il brand, cambiano anche i moduli.

   ⚠ Non impostare i colori dei bottoni scrivendo `background:` sulle classi del
   plugin: il markup moderno le calcola dalle variabili qui sotto, e una regola
   diretta verrebbe scavalcata.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Campi */
  --wpforms-field-border-radius: var(--r-md);
  --wpforms-field-border-color: var(--ink-200);
  --wpforms-field-border-color-spare: var(--ink-200);
  --wpforms-field-background-color: var(--white);
  --wpforms-field-text-color: var(--ink-900);
  --wpforms-field-size-font-size: 15px;

  /* Etichette */
  --wpforms-label-color: var(--ink-900);
  --wpforms-label-sublabel-color: var(--ink-500);
  --wpforms-label-error-color: var(--danger);

  /* Bottoni e indicatore di pagina */
  --wpforms-button-border-radius: var(--r-md);
  --wpforms-button-background-color: var(--teal-800);
  --wpforms-button-border-color: var(--teal-800);
  --wpforms-button-text-color: var(--white);
  --wpforms-page-break-color: var(--sage-600);
}

/* Le varianti del CTA del sito valgono anche per i moduli. */
:root[data-cta="lime"] {
  --wpforms-button-background-color: var(--sage-400);
  --wpforms-button-border-color: var(--sage-400);
  --wpforms-button-text-color: var(--teal-900);
}

:root[data-cta="limeDeep"] {
  --wpforms-button-background-color: var(--sage-600);
  --wpforms-button-border-color: var(--sage-600);
  --wpforms-button-text-color: var(--white);
}

.wpforms-container {
  max-width: 720px;
  margin-inline: auto;
  font-family: var(--font-sans);
  color: var(--ink-900);
}

/* ── Etichette e testi ───────────────────────────────────────────────────── */
.wpforms-container .wpforms-field-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

.wpforms-container .wpforms-field-description {
  font-size: 13px;
}

/* I titoli arrivano dai campi "contenuto": stessa scala del resto del sito. */
.wpforms-container .wpforms-field-content h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 8px 0 4px;
}

.wpforms-container .wpforms-field-content h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 4px 0;
}

.wpforms-container .wpforms-field-content p {
  color: var(--ink-700);
  line-height: 1.55;
}

.wpforms-container a {
  color: var(--teal-700);
  text-decoration: underline;
}

/* ── Scelte e caselle ────────────────────────────────────────────────────── */
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-gdpr-checkbox li {
  margin-bottom: 8px;
  line-height: 1.45;
}

/* Le scale 1–10 restano su una riga sola. */
.wpforms-container .wpforms-list-inline li {
  margin-right: 14px;
}

.wpforms-container .wpforms-field-gdpr-checkbox label,
.wpforms-container .wpforms-field-checkbox label {
  font-size: 14px;
  color: var(--ink-700);
}

/* ── Bottoni: solo cio' che le variabili non coprono ─────────────────────── */
.wpforms-container .wpforms-submit,
.wpforms-container .wpforms-page-button {
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 13px 22px;
}

/* «Indietro» e' un'azione secondaria: non deve competere con «Avanti». */
.wpforms-container .wpforms-page-button.wpforms-page-prev {
  background: var(--white);
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
}

.wpforms-container .wpforms-page-button.wpforms-page-prev:hover {
  background: var(--paper-2);
  color: var(--ink-900);
}

/* ── Struttura ───────────────────────────────────────────────────────────── */
.wpforms-container .wpforms-page-indicator-page-title,
.wpforms-container .wpforms-page-indicator-steps {
  font-family: var(--font-sans);
  color: var(--ink-700);
}

.wpforms-container .wpforms-field-divider {
  border-top: 1px solid var(--ink-100);
  padding-top: 4px;
}

/* ── Conferma dopo l'invio ───────────────────────────────────────────────── */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: var(--sage-100);
  border: 1px solid var(--sage-400);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  color: var(--ink-900);
}

.wpforms-confirmation-container-full h2 {
  margin-top: 0;
  font-size: 24px;
}

/* ── Caricamento file (uploader moderno) ─────────────────────────────────── */
.wpforms-container .wpforms-uploader {
  border: 1px dashed var(--ink-300);
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.wpforms-container .wpforms-uploader:hover {
  border-color: var(--teal-700);
}

/* ── Fascia newsletter sopra il footer ───────────────────────────────────
   Sta in questo foglio, e non nel design system, perché esiste solo insieme
   al modulo che contiene: senza modulo la fascia non viene stampata affatto.
   ───────────────────────────────────────────────────────────────────────── */

.newsletter-band {
  background: var(--paper-2);
  border-top: 1px solid var(--ink-100);
  padding: 56px 0;
}

.newsletter-band-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.newsletter-band-testo h2 {
  margin: 12px 0 0;
  font-size: 30px;
  line-height: 1.2;
}

.newsletter-band-testo p {
  margin: 14px 0 0;
  max-width: 460px;
  color: var(--ink-700);
}

/* Dentro la fascia il modulo è più compatto: è un contorno della pagina,
   non il suo contenuto principale. */
.newsletter-band .wpforms-container {
  margin: 0;
  max-width: none;
}

/* ── La forma del modulo nella fascia ─────────────────────────────────────
   Nome e cognome affiancati, poi email, poi il consenso, poi il bottone:
   l'ordine in cui si compila, senza scavalcamenti.

   `display: contents` sul contenitore dei campi lo rende trasparente, così i
   campi diventano figli diretti di questa griglia insieme al bottone — che nel
   markup di WPForms sta fuori da quel contenitore. Senza, i due gruppi si
   impilerebbero come due blocchi separati.
   ───────────────────────────────────────────────────────────────────────── */
.newsletter-band .wpforms-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: end;
}

.newsletter-band .wpforms-field-container {
  display: contents;
}

/* Il selettore è lungo apposta: WPForms scrive
   `.wpforms-container-full .wpforms-form .wpforms-field { padding: 15px 0 }`,
   e con due sole classi la regola qui sotto perdeva. Quei 15px sotto ogni
   campo erano il motivo per cui il bottone finiva più in basso dei campi. */
.newsletter-band .wpforms-container .wpforms-form .wpforms-field {
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Email, consenso e bottone stanno ognuno sulla propria riga, larghi quanto
   i due campi sopra. Il bottone NON viene collocato a mano: resta l'ultimo
   elemento del flusso, dove lo si incontra compilando. */
.newsletter-band .wpforms-submit-container {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0;
  justify-self: start;
}

/* Consenso e messaggi occupano tutta la riga sotto ai campi. */
.newsletter-band .wpforms-field-email,
.newsletter-band .wpforms-field-gdpr-checkbox,
.newsletter-band .wpforms-field-checkbox,
.newsletter-band .wpforms-field-content,
.newsletter-band .wpforms-error-container,
.newsletter-band .wpforms-confirmation-container-full {
  grid-column: 1 / -1;
}

.newsletter-band .wpforms-field-gdpr-checkbox label,
.newsletter-band .wpforms-field-checkbox label {
  font-size: 13px;
  line-height: 1.45;
}

/* Il bottone sta sulla riga dei campi: stessa altezza, stessa base. La misura
   la dà WPForms con una variabile sua, così se cambia la dimensione dei campi
   il bottone la segue. */
.newsletter-band .wpforms-container .wpforms-form .wpforms-submit {
  white-space: nowrap;
  height: var(--wpforms-field-size-input-height, 43px);
  padding: 0 26px;
}

/* Il modulo porta con sé il proprio titolo («Iscrizione Newsletter» + testo),
   che qui direbbe due volte la stessa cosa della colonna a sinistra. Si
   nasconde solo DENTRO la fascia: altrove, se il modulo viene usato da solo,
   il titolo serve eccome.

   ⚠️ Si seleziona per CLASSE, non con `:first-of-type`. La protezione antispam
   di WPForms aggiunge al modulo un campo-esca e lo mette in un punto DIVERSO A
   OGNI CARICAMENTO: con `:first-of-type` il titolo spariva o restava a caso,
   visita per visita. */
.newsletter-band .wpforms-field-content {
  display: none;
}

/* Il campo-esca dell'antispam, appunto: nel modulo verticale non si nota,
   dentro una griglia si prende una casella e sposta tutto il resto. Qui si
   toglie dal flusso — resta nella pagina, quindi continua a fare il suo
   mestiere con i robot che compilano tutto quello che trovano.

   Si riconosce perché è l'unico campo di testo senza input obbligatorio: gli
   id cambiano se qualcuno rimette mano al modulo, la forma no. */
.newsletter-band .wpforms-field-text:not(:has(.wpforms-field-required)) {
  display: none;
}

.newsletter-band .wpforms-field {
  padding: 6px 0;
}

.newsletter-band .wpforms-field-label {
  font-size: 14px;
}

/* Moduli a passi con la navigazione al centro (Test Cannabis): «Invia» non sta
   nella pagina ma in un contenitore suo, sotto «Indietro», e WPForms lo lascia a
   sinistra. Qui segue l'allineamento dei bottoni dei passi. */
.wpforms-container .wpforms-form:has(.wpforms-pagebreak-center) .wpforms-submit-container {
  text-align: center;
}

/* Campi affiancati con le classi di colonna di WPForms (wpforms-one-half…, le
   mette jotform-a-wpforms.py per i campi composti di JotForm). Il plugin li
   tiene affiancati a qualunque larghezza: su un telefono Nome e Cognome
   diventano due caselle da 150px e il prefisso del cellulare copre il numero. */
@media (max-width: 600px) {
  .wpforms-container .wpforms-form .wpforms-field[class*="wpforms-one-"],
  .wpforms-container .wpforms-form .wpforms-field[class*="wpforms-two-"] {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .newsletter-band-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Su schermi stretti nemmeno due campi affiancati ci stanno: tutto in colonna. */
  .newsletter-band .wpforms-form {
    grid-template-columns: 1fr;
  }

  .newsletter-band .wpforms-field-email,
  .newsletter-band .wpforms-submit-container {
    grid-column: 1;
  }
}