/* ============================================================================
   HOMO LAPIS 2026 — FORM DI DIVI
   ---------------------------------------------------------------------------
   Il modulo `divi/contact-form` porta con se' la sua veste, che e' quella del
   tema Divi e non ha niente a che vedere con questo sistema. Qui viene
   rivestito coi token: stessi campi, stesse etichette, stesso bottone del
   form del jingle, cosi' i due form del sito si somigliano invece di
   sembrare due epoche diverse.

   Non si tocca il markup: Divi lo genera e lo rigenera a ogni salvataggio nel
   builder. Si agisce solo sulle sue classi, che sono stabili.

   Questo file si carica dopo divi-bridge.css perche' molte regole di Divi per
   i campi sono sullo stesso livello di specificita' e vince l'ultima.
   ========================================================================= */

/* --- griglia dei campi ---------------------------------------------------
   Divi mette i campi in flex con classi et_flex_column_N_24. La griglia la
   rifacciamo noi, cosi' le due colonne restano allineate al resto del sito e
   collassano dove collassa tutto il resto. */
body.hl-carta .hl-diviform .et_pb_contact_form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hl-s-5) var(--hl-s-4);
  align-items: start;
}

body.hl-carta .hl-diviform .et_pb_contact_field {
  grid-column: span 2;
  /* Divi mette una larghezza in percentuale sulle classi et_flex_column_N_24.
     Dentro la griglia quella percentuale si calcola sulla traccia, non sul
     form, e il campo esce meta' del dovuto: la larghezza la decide la
     colonna. */
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hl-s-2);
  min-width: 0;
}

body.hl-carta .hl-diviform .et_flex_column_12_24 { grid-column: span 1; }

@media (max-width: 640px) {
  body.hl-carta .hl-diviform .et_flex_column_12_24 { grid-column: span 2; }
}

/* --- etichette -----------------------------------------------------------
   Divi nasconde l'etichetta e lascia il placeholder a fare da nome del campo:
   sparisce appena scrivi, ed e' il motivo per cui in un form lungo non sai
   piu' che cosa stai compilando. Qui l'etichetta si vede e il placeholder,
   che ripete l'etichetta, sparisce. */
body.hl-carta .hl-diviform .et_pb_contact_form_label {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  font-size: var(--hl-fs-sm);
  font-weight: 700;
  color: var(--hl-fg);
}

/* Il segno di obbligatorio: Divi lo mette solo come data-attribute sul
   controllo, quindi lo si legge da li' e lo si scrive sull'etichetta. Stessa
   forma del .hl-req dell'altro form. */
body.hl-carta .hl-diviform .et_pb_contact_field:has([data-required_mark="required"])
  .et_pb_contact_form_label::after {
  content: 'required';
  font-family: var(--hl-font-mono);
  font-weight: 500;
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-red-deep);
  margin-left: var(--hl-s-2);
}

body.hl-carta .hl-diviform ::placeholder { color: transparent; }

/* --- controlli ----------------------------------------------------------- */
body.hl-carta .hl-diviform .input,
body.hl-carta .hl-diviform input[type="text"],
body.hl-carta .hl-diviform textarea,
body.hl-carta .hl-diviform select {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--hl-s-3) var(--hl-s-4);
  border: 1px solid var(--hl-rule-strong);
  border-radius: var(--hl-r-none);
  background: var(--hl-sheet);
  color: var(--hl-fg);
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-body);
  line-height: var(--hl-lh-body);
  box-shadow: none;
  transition: border-color var(--hl-d-micro) var(--hl-e-ui),
              box-shadow var(--hl-d-micro) var(--hl-e-ui);
}

body.hl-carta .hl-diviform textarea { resize: vertical; min-height: 150px; }

body.hl-carta .hl-diviform .input:focus,
body.hl-carta .hl-diviform .input:focus-visible,
body.hl-carta .hl-diviform select:focus-visible,
body.hl-carta .hl-diviform textarea:focus-visible {
  outline: none;
  border-color: var(--hl-violet);
  box-shadow: 0 0 0 3px var(--hl-violet-soft);
}

/* Il campo con l'errore di Divi: il bordo lo dice, non serve altro. */
body.hl-carta .hl-diviform .et_contact_error { border-color: var(--hl-red-deep); }

/* --- riga finale: captcha e invio ----------------------------------------
   Il captcha di Divi e' una somma scritta, non un'immagine da decifrare:
   resta acceso perche' e' l'unica protezione di una casella pubblica. */
body.hl-carta .hl-diviform .et_contact_bottom_container {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-s-4);
  margin: 0;
  float: none;
}

body.hl-carta .hl-diviform .et_pb_contact_right {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

body.hl-carta .hl-diviform .et_pb_contact_right p {
  margin: 0;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  color: var(--hl-fg-mute);
}

body.hl-carta .hl-diviform .et_pb_contact_right label {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-s-2);
}

body.hl-carta .hl-diviform .et_pb_contact_captcha_question {
  display: inline;
  color: var(--hl-fg);
  white-space: nowrap;
}

body.hl-carta .hl-diviform .et_pb_contact_right .et_pb_contact_captcha {
  width: 4.5em;
  min-width: 0;
  padding: var(--hl-s-2) var(--hl-s-3);
  text-align: center;
}

/* Il bottone: e' lo stesso del resto del sito, non quello di Divi. */
body.hl-carta .hl-diviform .et_pb_button_wrapper { margin: 0; }

body.hl-carta .hl-diviform .et_pb_contact_submit.et_pb_button {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-s-3);
  padding: 14px 26px;
  border: 1px solid var(--hl-violet);
  border-radius: var(--hl-r-pill);
  background: var(--hl-violet);
  /* `!important` perche' il bottone del modulo di Divi porta anche
     `.et_pb_button`, e il bridge da' a quella classe il colore del testo di
     pagina con `!important` per battere l'azzurro di Divi. Senza questa riga
     il "Send" esce inchiostro su viola, cioe' contrasto 3.06 — axe lo
     segnala come "serious", ed e' un fallimento WCAG 1.4.3. */
  color: #fff !important;
  font-family: var(--hl-font-mono);
  font-weight: 500;
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hl-d-ui) var(--hl-e-ui),
              border-color var(--hl-d-ui) var(--hl-e-ui);
}

/* Divi appende una freccia con ::after su ogni .et_pb_button, in un font di
   icone che qui non c'e': senza questa riga resta un quadratino. */
body.hl-carta .hl-diviform .et_pb_contact_submit.et_pb_button::after,
body.hl-carta .hl-diviform .et_pb_contact_submit.et_pb_button::before {
  content: none;
  display: none;
}

body.hl-carta .hl-diviform .et_pb_contact_submit.et_pb_button:hover,
body.hl-carta .hl-diviform .et_pb_contact_submit.et_pb_button:focus-visible {
  background: var(--hl-violet-deep);
  border-color: var(--hl-violet-deep);
  color: #fff !important;
  padding: 14px 26px;
}

/* --- esito --------------------------------------------------------------- */
body.hl-carta .hl-diviform .et-pb-contact-message { margin: 0; }
body.hl-carta .hl-diviform .et-pb-contact-message:empty { display: none; }

body.hl-carta .hl-diviform .et-pb-contact-message p {
  margin: 0 0 var(--hl-s-5);
  padding: var(--hl-s-4) var(--hl-s-5);
  border-left: 2px solid var(--hl-violet);
  background: var(--hl-violet-soft);
  color: var(--hl-fg);
  font-size: var(--hl-fs-sm);
}

body.hl-carta .hl-diviform .et-pb-contact-message ul {
  margin: 0 0 var(--hl-s-5);
  padding: var(--hl-s-4) var(--hl-s-5) var(--hl-s-4) calc(var(--hl-s-5) + 1em);
  border-left: 2px solid var(--hl-red-deep);
  background: rgba(228, 35, 32, 0.07);
  color: var(--hl-fg);
  font-size: var(--hl-fs-sm);
}

/* --- la sezione che lo contiene ------------------------------------------ */
body.hl-carta .hl-formsec__main { align-self: start; }

/* La freccia della select: disegnata, non un carattere di un font di icone
   che qui non c'e'. */
body.hl-carta .hl-diviform select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--hl-s-4) + 18px);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hl-fg-dim) 50%),
    linear-gradient(135deg, var(--hl-fg-dim) 50%, transparent 50%);
  background-position:
    right calc(var(--hl-s-4) + 5px) center,
    right var(--hl-s-4) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Divi disegna la sua freccia con un ::after sul contenitore del campo.
   Con la nostra ne restavano due, una sopra l'altra. */
body.hl-carta .hl-diviform .et_pb_contact_field::after,
body.hl-carta .hl-diviform .et_pb_contact_field::before { content: none; }