/*
 * Il modulo dell'intestazione dominio: come si vede.
 *
 * Viaggia col plugin. Venticinque campi senza foglio di stile sono un
 * elenco illeggibile, quindi su un altro sito il vestito deve arrivare
 * insieme al modulo.
 */

/* --- Modulo di intestazione dominio ---
   Venticinque campi si compilano una volta sola, spesso col documento in
   mano: contano i gruppi visibili e i campi larghi, non la compattezza.
   Due colonne dove c'è spazio, una sotto gli 800px. */
.l3-dom{ max-width:100%; margin-top:2em; }
.l3-dom__gruppo{
  border:0; border-top:1px solid var(--wp--preset--color--border);
  margin:0 0 var(--wp--preset--spacing--40); padding:1.6em 0 0;
}
.l3-dom__gruppo legend{
  font-family:var(--wp--preset--font-family--mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wp--preset--color--accent); padding:0;
}
.l3-dom__nota{ color:var(--wp--preset--color--muted-2); font-size:15px; margin:.6em 0 1.4em; }
.l3-dom__campi{ display:grid; grid-template-columns:1fr 1fr; gap:1.1em 1.5em; }
@media (max-width:800px){ .l3-dom__campi{ grid-template-columns:1fr; } }
.l3-dom__campo{ margin:0; display:flex; flex-direction:column; gap:.35em; }
/* Indirizzo e email prendono tutta la riga: sono i due che, andando a capo
   dentro una colonna stretta, si leggono peggio mentre si ricontrollano. */
.l3-dom__campo--email,
.l3-dom .l3-dom__campo:has(#l3d-indirizzo){ grid-column:1 / -1; }
.l3-dom__campo label{
  font-size:14px; color:var(--wp--preset--color--muted);
}
.l3-dom__campo label span{ color:var(--wp--preset--color--accent); }
.l3-dom__campo input,
.l3-dom__campo select{
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--border);
  border-radius:2px; padding:11px 12px;
  color:var(--wp--preset--color--contrast);
  font-family:inherit; font-size:16px; /* 16px: sotto, iOS ingrandisce la pagina al primo tocco */
  width:100%;
}
.l3-dom__campo input:focus,
.l3-dom__campo select:focus{ outline:2px solid var(--wp--preset--color--accent); outline-offset:1px; }
.l3-dom__aiuto{ font-size:13px; color:var(--wp--preset--color--dim); }
.l3-dom__esca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.l3-dom__consenso{ margin:1.5em 0; font-size:15px; color:var(--wp--preset--color--muted); }
.l3-dom__consenso label{ display:flex; gap:.7em; align-items:flex-start; }
.l3-dom__consenso input{ margin-top:.25em; flex:none; }
.l3-dom__invia button{
  background:var(--wp--preset--color--button); color:var(--wp--preset--color--base);
  border:0; border-radius:2px; height:54px; padding:0 30px;
  font-family:inherit; font-size:16px; font-weight:500; cursor:pointer;
}
.l3-dom__invia button:hover{ background:var(--wp--preset--color--accent); }
.l3-dom__esito{
  border-left:3px solid var(--wp--preset--color--accent);
  background:var(--wp--preset--color--surface);
  padding:1.2em 1.4em; margin:1.5em 0;
}
.l3-dom__esito--no{ border-left-color:#d98c8c; }
.l3-dom__esito h2{ margin:0 0 .4em; font-size:24px; }
.l3-dom__esito p{ margin:0; color:var(--wp--preset--color--muted); }
/* Un gruppo spento sparisce del tutto: «hidden» da solo non basta se altre
   regole gli danno un display. */
.l3-dom__gruppo[hidden]{ display:none; }