/* L3 — Moduli: l'aspetto dei pezzi che tutti i moduli hanno in comune.
 *
 * PERCHE' LE VARIABILI IN CIMA. Queste regole stavano nel foglio di stile del
 * tema e usavano i suoi colori. Portato il modulo su un altro sito, quelle
 * variabili non esistono: i campi diventano trasparenti, il testo delle
 * etichette invisibile, e il modulo sembra rotto senza che nessun errore lo
 * dica. Qui ogni variabile ha il suo valore di ripiego, che sono i colori del
 * nostro disegno. Dove il tema Layer3 c'e', vince lui e non cambia niente:
 * il ripiego di var() vale solo quando la variabile non e' definita.
 */

:root{
  --l3m-base:      var(--wp--preset--color--base, #0b0c0d);
  --l3m-surface:   var(--wp--preset--color--surface, #101112);
  --l3m-border:    var(--wp--preset--color--border, #26282a);
  --l3m-contrast:  var(--wp--preset--color--contrast, #d8d1c2);
  --l3m-muted:     var(--wp--preset--color--muted, #a8a091);
  --l3m-muted-2:   var(--wp--preset--color--muted-2, #9c9484);
  --l3m-dim:       var(--wp--preset--color--dim, #7b7466);
  --l3m-dim-2:     var(--wp--preset--color--dim-2, #5f594f);
  --l3m-accent:    var(--wp--preset--color--accent, #9fd3b8);
  --l3m-button:    var(--wp--preset--color--button, #cfc7b8);
  --l3m-mono:      var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --l3m-wrap:      var(--l3-wrap, 1360px);
  --l3m-gutter:    var(--l3-gutter, clamp(24px, 5vw, 48px));
  --l3m-sp-50:     var(--wp--preset--spacing--50, 72px);
  --l3m-sp-60:     var(--wp--preset--spacing--60, 96px);
  /* I tre toni degli esiti. Non stanno nella tavolozza del tema perche' non
     sono scelte di disegno: verde «e' andata», ambra «guardate che...»,
     rosso «no». */
  --l3m-ok:        #6ee7a8;
  --l3m-warn:      #f0b357;
  --l3m-ko:        #f87171;
}

/* padding-inline: gli strumenti sono inseriti nudi nella pagina, senza il
   contenitore che le sezioni delle artboard si portano dietro. Senza questa
   riga titoli, domande e bottoni partivano da zero, a filo del bordo. */
.l3-tool{ max-width:var(--l3m-wrap); margin-inline:auto; padding-block:var(--l3m-sp-60); padding-inline:var(--l3m-gutter); }
/* ...tranne quando lo strumento sta dentro una sezione, come il modulo nella
   pagina contatti: li' il margine ce l'ha gia' il contenitore, e sommarli
   stringerebbe il modulo di mezzo centimetro per lato. Il selettore guarda
   .l3-section e non .wp-block-group: quest'ultima ce l'ha anche il <main>,
   quindi valeva ovunque e toglieva il margine anche in pagina iniziale. */
.l3-section .l3-tool{ padding-inline:0; }
/* ...tranne quando la pagina chiede il contrario con .l3-pad. Succede nelle
   pagine scritte a mano, dove lo strumento sta dentro una sezione che il
   margine non ce l'ha: senza questa riga vinceva la regola qui sopra e il
   modulo restava a filo del bordo mentre il testo sopra era rientrato. */
.l3-section .l3-tool.l3-pad{ padding-inline:var(--l3m-gutter); }

.l3-tool__cols{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--l3m-sp-50); align-items:start; }
@media (max-width:900px){ .l3-tool__cols{ grid-template-columns:1fr; } }

.l3-tool__left{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.l3-tool__title{ font-size:clamp(34px,4.1vw,52px); font-weight:500; letter-spacing:-.04em; line-height:1.02; margin:0; }
.l3-tool__lead{ font-size:17px; line-height:1.55; color:var(--l3m-muted-2); max-width:52ch; margin:0; }
.l3-tool__note{ font-size:13px; color:var(--l3m-dim-2); margin:0; }
.l3-tool__eyebrow{
  font-family:var(--l3m-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--l3m-dim); margin:26px 0 14px;
}
.l3-tool__eyebrow:first-child{ margin-top:0; }

.l3-btn{
  display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 30px;
  border:0; border-radius:2px; font:inherit; font-size:16px; font-weight:500; cursor:pointer;
  text-decoration:none; transition:background .15s ease;
}
.l3-btn--primary{ background:var(--l3m-button); color:var(--l3m-base); }
.l3-btn--primary:hover{ background:var(--l3m-accent); color:var(--l3m-base); }
.l3-btn--ghost{
  height:48px; background:transparent; color:var(--l3m-contrast);
  border:1px solid var(--l3m-border); flex:none;
}
.l3-btn--ghost:hover:not(:disabled){ border-color:var(--l3m-accent); background:var(--l3m-surface); }
.l3-btn:disabled{ opacity:.5; cursor:default; }

/* ---------- il modulo ---------- */

.l3-lead{
  margin-top:var(--l3m-sp-50);
  padding-top:var(--l3m-sp-50);
  border-top:1px solid var(--l3m-border);
  max-width:560px;
}
.l3-lead__title{ font-size:clamp(22px,2.4vw,30px); font-weight:500; letter-spacing:-.03em; margin:0 0 10px; }
.l3-lead__form{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }

.l3-field{ display:flex; flex-direction:column; gap:6px; }
.l3-field__lbl{
  font-family:var(--l3m-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--l3m-dim);
}
.l3-field__in{
  height:48px; padding:0 14px; font:inherit; font-size:16px;   /* 16px: sotto, iOS ingrandisce la pagina da solo */
  color:var(--l3m-contrast); background:var(--l3m-surface);
  border:1px solid var(--l3m-border); border-radius:2px;
  transition:border-color .15s;
}
.l3-field__in:focus{ outline:none; border-color:var(--l3m-accent); }
.l3-field__in::placeholder{ color:var(--l3m-dim-2); }
.l3-field__area{ height:auto; padding:12px 14px; line-height:1.5; resize:vertical; min-height:110px; }

/* Il menu a tendina prende gli stessi bordi dei campi. La freccia e'
   disegnata qui: quella di sistema su fondo scuro resta nera su nero in
   piu' di un browser. */
select.l3-field__in{
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--l3m-muted) 50%),
    linear-gradient(135deg, var(--l3m-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
select.l3-field__in option{ background:var(--l3m-surface); color:var(--l3m-contrast); }

.l3-lead__vat{ display:flex; gap:12px; align-items:flex-end; }
.l3-lead__vat .l3-field{ flex:1; }

.l3-lead__msg{ margin:0; font-size:14px; color:var(--l3m-muted-2); min-height:1.4em; }
.l3-lead__msg--ok{ color:var(--l3m-ok); }
.l3-lead__msg--warn{ color:var(--l3m-warn); }
.l3-lead__msg--ko{ color:var(--l3m-ko); }

.l3-lead__rest{ display:flex; flex-direction:column; gap:16px; }
.l3-lead__two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .l3-lead__two{ grid-template-columns:1fr; } }

.l3-lead__consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.5; color:var(--l3m-muted-2);
}
.l3-lead__consent input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--l3m-accent); }
.l3-lead__consent a{ color:var(--l3m-accent); }

/* Campo esca: fuori dallo schermo, non display:none. Un campo con
   display:none i compilatori automatici lo saltano; uno spostato fuori
   riquadro lo riempiono, ed e' esattamente quello che serve per
   riconoscerli. aria-hidden e tabindex lo tengono fuori dalla navigazione
   da tastiera e dai lettori di schermo. */
.l3-lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.l3-lead__done{
  margin:0; padding:16px 18px; font-size:15px; line-height:1.5;
  color:var(--l3m-contrast);
  background:var(--l3m-surface);
  border-left:2px solid var(--l3m-accent);
}
/* Ambra quando il collegamento era scaduto: in quel caso non e' un errore di
   nessuno, e il modulo qui sotto e' gia' pronto. */
.l3-lead__done--ko{ border-left-color:var(--l3m-warn); }

/* Il tasto per scaricare il documento, dentro il messaggio di conferma. */
.l3-lead__scarica{ margin-top:14px; }
.l3-lead__nota{
  display:block; margin-top:10px;
  font-family:var(--l3m-mono);
  font-size:11px; letter-spacing:.08em; color:var(--l3m-dim-2);
}

/* Un campo di testo ha una larghezza sua di circa venti caratteri, e come
   elemento flessibile non scende sotto quella: dentro una colonna stretta
   il modulo sporgeva a destra e i campi finivano tagliati. width:100% piu'
   min-width:0 gli dicono che puo' rimpicciolirsi quanto serve. */
.l3-lead__form, .l3-lead__rest, .l3-lead__two, .l3-lead__vat, .l3-lead .l3-field{ min-width:0; }
.l3-lead .l3-field__in{ width:100%; min-width:0; }

/* ---------- caselle a pastiglia ---------- */

.l3-chips__box{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.l3-chips__box legend{ padding:0; }
.l3-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.l3-chip{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  min-height:40px; padding:0 14px; font:inherit; font-size:14px;
  color:var(--l3m-muted); background:transparent;
  border:1px solid var(--l3m-border); border-radius:2px;
  transition:border-color .15s, color .15s, background-color .15s;
}
.l3-chip:hover{ border-color:var(--l3m-muted-2); color:var(--l3m-contrast); }
.l3-chip.is-on{
  color:var(--l3m-base); background:var(--l3m-accent);
  border-color:var(--l3m-accent);
}