/*
 * Contatti — aspetto
 *
 * Origine: .contact-* di source-clean/styles.css, piu' .button/.full.
 * Ogni valore letto, compreso il blocco @media (max-width: 820px).
 *
 * Il pulsante di invio riusa .falone-btn / .falone-btn--primary del tema:
 * nel sorgente e' <button class="button primary full">, cioe' esattamente
 * il componente gia' promosso.
 *
 * Indice
 *   1. sezione a due colonne
 *   2. pannello scuro
 *   3. schede di richiesta
 *   4. recapiti
 *   5. lato del modulo
 *   6. campi
 *   7. esito
 *   8. movimento ridotto
 */

/* ======================================================================
   1. SEZIONE A DUE COLONNE
   ======================================================================
   1fr / 2fr: il pannello scuro vale un terzo, il modulo due.
   minmax(0, …) su entrambe, o un campo lungo allargherebbe la colonna
   oltre la sua quota — una griglia non scende sotto il contenuto minimo
   se non glielo si dice. */
.falone-contact {
  display: grid;
  /* Con un bordo la sezione diventa una SCHEDA: e' la forma di
     Efficientamento Energetico, dove i due lati stanno dentro un riquadro
     invece di occupare tutta la larghezza. Il margine crea lo spazio
     attorno, che nella home non c'e'. */
  border: var(--falone-contact-card-border, 0) solid var(--falone-contact-card-line, #e7e7e7);
  margin: var(--falone-contact-card-margin, 0);
  grid-template-columns:
    minmax(0, var(--falone-contact-col-panel, 1fr))
    minmax(0, var(--falone-contact-col-form, 2fr));
  gap: 0;
  padding: 0;
  background: var(--falone-contact-bg, #fff);
  color: var(--falone-contact-ink, #121212);
}

/* ⚠️ La soglia a cui i due lati si impilano cambia da pagina a pagina: il
   modulo della home resiste fino a 820, quello di Edilizia Residenziale si
   impila gia' a 1180 perche' il pannello e' piu' stretto. Una @media non
   accetta una variabile, quindi e' una CLASSE scelta dal pannello — come per
   la sezione a due colonne. */
@media (max-width: 1180px) {
  .falone-contact--stack-1180 { grid-template-columns: 1fr; }
  .falone-contact--stack-1180 .falone-contact__panel {
    border-right: 0;
    border-bottom: var(--falone-contact-divider, 0) solid rgba(255, 255, 255, .14);
  }
}

@media (max-width: 820px) {
  .falone-contact { grid-template-columns: 1fr; }
}

/* ======================================================================
   2. PANNELLO SCURO
   ======================================================================
   ⚠️ #090909 non e' --falone-black (#121212): e' un nero piu' profondo,
   lo stesso del collage delle Persone. Nel sorgente non c'e' una custom
   property che lo contenga: resta letterale, esposto come controllo. */
.falone-contact__panel {
  display: grid;
  align-content: start;
  min-height: var(--falone-contact-min-h, 640px);
  /* ⚠️ 52px, non i 48 del modello: con 48 il titolo cadeva a x=98 mentre
     tutte le altre sezioni partono da 102. Scarto voluto, richiesta 31/08. */
  padding: var(--falone-contact-panel-pad-y, 78px) var(--falone-contact-panel-pad-x, 52px);
  background: var(--falone-contact-panel-bg, #090909);
  color: var(--falone-contact-panel-ink, #fff);

  /* filetto fra pannello e modulo: c'e' in Edilizia Residenziale, dove i due
     lati hanno lo stesso fondo e senza si confonderebbero. Zero altrove. */
  border-right: var(--falone-contact-divider, 0) solid rgba(255, 255, 255, .14);
}

@media (max-width: 820px) {
  /* impilati, il filetto va sotto e non a lato */
  .falone-contact__panel {
    border-right: 0;
    border-bottom: var(--falone-contact-divider, 0) solid rgba(255, 255, 255, .14);
  }
}

/* Testo introduttivo del pannello: nel modulo della home non c'e', in quello
   di Edilizia Residenziale sta fra il titolo e l'elenco dei recapiti. */
.falone-contact__panel-lead {
  margin: 0 0 var(--falone-contact-panel-lead-gap, 22px);
  margin-left: var(--falone-indent, 0px);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-contact-panel-lead-size, .74rem);
  font-weight: 300;
  line-height: var(--falone-contact-panel-lead-lh, 1.7);

  color: rgba(255, 255, 255, .72);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-panel-lead-op, .72) * 100%),
    transparent);
}

.falone-contact__panel-title {
  margin: 0 0 var(--falone-contact-title-gap, 42px);
  margin-left: var(--falone-indent, 0px);
  font-family: var(--falone-font-display, "Jost", sans-serif);

  /* la formula sta qui, non nelle impostazioni: il controllo scrive un
     valore fisso solo se lo si compila */
  font-size: var(--falone-contact-title-size, clamp(2.45rem, 3.8vw, 4.1rem));
  font-style: italic;
  line-height: var(--falone-contact-title-lh, .92);
}

.falone-contact__panel-title em {
  color: var(--falone-contact-accent, #f7941d);
  font-style: italic;
}

/* ======================================================================
   3. SCHEDE DI RICHIESTA
   ======================================================================
   Nel sorgente sono tre <a href="#contact-form">: portano al modulo e
   basta, non filtrano niente — ma il contenitore ha aria-label «Seleziona
   richiesta». L'intenzione c'era. Qui restano link (senza JavaScript
   scorrono al modulo, come nell'originale) e in piu' scrivono il tipo di
   richiesta in un campo nascosto. */
.falone-contact__tabs {
  display: grid;
  gap: var(--falone-contact-tabs-gap, 16px);
  margin-left: var(--falone-indent, 0px);
}

.falone-contact__tabs .falone-contact__tab {
  display: flex;
  align-items: center;
  min-height: var(--falone-contact-tab-h, 50px);
  padding: 0;
  color: rgba(255, 255, 255, .62);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-tab-op, .62) * 100%),
    transparent);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color      var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    background var(--falone-dur-fast, .2s) var(--falone-ease, ease),
    padding    var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

/* ⚠️ Selettore discendente per la stessa ragione delle Garanzie: sono <a>,
   ed Elementor azzera box-shadow e text-decoration su `.elementor a` con
   specificita' (0,1,1). */
.falone-contact__tabs .falone-contact__tab:hover,
.falone-contact__tabs .falone-contact__tab:focus-visible,
.falone-contact__tabs .falone-contact__tab.is-active {
  padding: 0 var(--falone-contact-tab-pad, 28px);
  color: var(--falone-contact-panel-ink, #fff);
  background: var(--falone-contact-accent, #f7941d);
  outline: 0;
}

/* Pulsante dentro il pannello: in Efficientamento Energetico invita a
   scendere al modulo. `justify-self: start` o si allargherebbe a tutta la
   colonna, che in una griglia e' il comportamento normale. */
.falone-contact__panel .falone-contact__cta {
  justify-self: start;
  min-height: var(--falone-contact-cta-h, 32px);
  margin-bottom: var(--falone-contact-cta-gap, 18px);
  margin-left: var(--falone-indent, 0px);
  padding: 0 var(--falone-contact-cta-pad, 14px);
  gap: var(--falone-contact-cta-space, 32px);
  font-size: var(--falone-contact-cta-size, .58rem);
  letter-spacing: var(--falone-contact-cta-ls, .14em);
}

.falone-contact__cta em { font-style: normal; }

/* Righe di servizio sotto i recapiti: luogo e orari. */
.falone-contact__extra {
  margin: 0 0 var(--falone-contact-extra-gap, 16px);
  margin-left: var(--falone-indent, 0px);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-contact-extra-size, .72rem);
  font-weight: 400;

  color: rgba(255, 255, 255, .82);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-extra-op, .82) * 100%),
    transparent);
}

.falone-contact__extra:last-child { margin-bottom: 0; }

/* ======================================================================
   4. RECAPITI
   ====================================================================== */
.falone-contact__details {
  display: grid;
  gap: var(--falone-contact-details-gap, 18px);
  margin-top: var(--falone-contact-details-top, 104px);
  margin-left: var(--falone-indent, 0px);
  padding-top: var(--falone-contact-details-pad, 34px);
  /* ⚠️ Il filetto sopra i recapiti c'e' nel modulo della home, NON in quelli
     delle pagine di servizio: lo spessore e' un controllo, non una costante. */
  border-top: var(--falone-contact-details-line, 1px) solid rgba(255, 255, 255, .18);
  border-top-color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-details-line-op, .18) * 100%), transparent);
  color: rgba(255, 255, 255, .78);                  /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) 78%, transparent);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.falone-contact__details .falone-contact__detail {
  color: inherit;
  text-decoration: none;
}

.falone-contact__details a.falone-contact__detail:hover,
.falone-contact__details a.falone-contact__detail:focus-visible {
  color: var(--falone-contact-accent, #f7941d);
}

/* Ogni recapito su una riga, con l'icona in una colonna a se': cosi' il
   testo su piu' righe resta allineato e non va sotto l'icona. */
.falone-contact__details--icone {
  display: grid;
  gap: var(--falone-contact-icons-gap, 14px);
  border-top: 0;
  padding-top: 0;
  margin-top: var(--falone-contact-icons-top, 0);
  font-size: var(--falone-contact-icons-size, .74rem);
  font-weight: 400;
  letter-spacing: normal;
  list-style: none;
  padding-left: 0;
}

.falone-contact__details--icone .falone-contact__row {
  display: grid;
  grid-template-columns: var(--falone-contact-icon-col, 26px) minmax(0, 1fr);
  gap: var(--falone-contact-icon-gap, 16px);
  align-items: start;
  margin: 0;
}

.falone-contact__details--icone .falone-contact__icon,
.falone-contact__details--icone .falone-contact__icon svg {
  display: block;
  width: var(--falone-contact-icon-w, 22px);
  height: var(--falone-contact-icon-h, 22px);
  color: var(--falone-contact-accent, #f7941d);
  fill: currentColor;
  font-size: var(--falone-contact-icon-size, 18px);
  line-height: 1;
}

.falone-contact__details--icone .falone-contact__detail {
  line-height: var(--falone-contact-icons-lh, 1.55);

  color: rgba(255, 255, 255, .9);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-icons-op, .9) * 100%),
    transparent);
}

/* ======================================================================
   5. LATO DEL MODULO
   ====================================================================== */
.falone-contact__form-wrap {
  display: grid;
  align-content: start;
  min-height: var(--falone-contact-min-h, 640px);
  margin-left: var(--falone-indent, 0px);
  padding: var(--falone-contact-form-pad-y, 78px) var(--falone-contact-form-pad-x, clamp(28px, 7vw, 92px));
  background: var(--falone-contact-form-bg, #fff);
  color: var(--falone-contact-ink, #121212);
}

.falone-contact__form-title {
  margin: 0 0 var(--falone-contact-form-title-gap, 10px);
  color: var(--falone-contact-form-title-color, inherit);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  /* ⚠️ Senza, prendeva il 500 della tipografia globale del Kit e restava
     piu' leggero del titolo del pannello accanto, che e' 700. */
  font-weight: var(--falone-contact-form-title-weight, 600);
  font-size: var(--falone-contact-form-title-size, clamp(2rem, 3vw, 3rem));
}

.falone-contact__lead {
  margin: 0 0 var(--falone-contact-lead-gap, 40px);
  color: var(--falone-contact-lead-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;
}

@media (max-width: 820px) {
  .falone-contact__panel,
  .falone-contact__form-wrap {
    min-height: auto;
    padding: var(--falone-contact-pad-y-tablet, 64px) var(--falone-contact-pad-x-tablet, 18px);
  }
  .falone-contact__details { margin-top: var(--falone-contact-details-top-tablet, 56px); }
}

/* Lato modulo su fondo SCURO: in Edilizia Residenziale i due lati hanno lo
   stesso nero, quindi etichette, testo e filetti dei campi vanno schiariti.
   Una classe, non una copia del blocco dei campi. */
.falone-contact--form-dark .falone-contact__form-title,
.falone-contact--form-dark .falone-contact__lead { color: var(--falone-contact-panel-ink, #fff); }

.falone-contact--form-dark .falone-contact__lead {
  color: rgba(255, 255, 255, .66);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-form-lead-op, .66) * 100%),
    transparent);
}

.falone-contact--form-dark .falone-contact__form label > span {
  color: rgba(255, 255, 255, .6);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-dark-label-op, .6) * 100%),
    transparent);
}

.falone-contact--form-dark .falone-contact__form input,
.falone-contact--form-dark .falone-contact__form textarea {
  /* ⚠️ Il ripiego passa da --falone-contact-field-ink: con le caselle
     bianche il testo dentro deve tornare scuro, o sarebbe bianco su bianco. */
  color: var(--falone-contact-field-ink, var(--falone-contact-panel-ink, #fff));
  border-bottom-color: rgba(255, 255, 255, .22);   /* ripiego */
  border-bottom-color: color-mix(in srgb,
    var(--falone-contact-panel-ink, #fff) calc(var(--falone-contact-dark-line-op, .22) * 100%),
    transparent);
}

.falone-contact--form-dark .falone-contact__msg { color: var(--falone-contact-panel-ink, #fff); }

/* ======================================================================
   6. CAMPI
   ====================================================================== */
.falone-contact__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--falone-contact-row-gap, 34px) var(--falone-contact-col-gap, 44px);
  width: 100%;
  color: var(--falone-contact-ink, #121212);
}

@media (max-width: 820px) {
  .falone-contact__form { grid-template-columns: 1fr; }
}

.falone-contact__full { grid-column: 1 / -1; }

.falone-contact__form label {
  display: grid;
  gap: var(--falone-contact-label-gap, 12px);
}

.falone-contact__form label > span {
  color: var(--falone-contact-label-color, #9a9a9a);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* ⚠️ Selettori discendenti: i temi e Elementor mettono le loro regole su
   input/textarea con specificita' di elemento, che batterebbe una classe
   sola come per <a> e <img>. */
.falone-contact__form input,
.falone-contact__form textarea {
  width: 100%;
  border: 0;
  /* Il filetto sotto e' la forma del sorgente. Con le caselle piene si
     azzera dal controllo, o resta una riga scura sul fondo chiaro. */
  border-bottom: var(--falone-contact-field-line-w, 1px) solid var(--falone-contact-field-line, #e7e7e7);
  border-radius: var(--falone-contact-field-radius, 0);
  /* ⚠️ Nel sorgente i campi sono TRASPARENTI, con il solo filetto sotto.
     Con un fondo pieno diventano caselle: serve anche il margine ai lati, o
     il testo resta incollato al bordo. */
  background: var(--falone-contact-field-bg, transparent);
  color: var(--falone-contact-field-ink, var(--falone-contact-ink, #121212));
  padding: var(--falone-contact-field-pad, 14px) var(--falone-contact-field-pad-x, 0);
  outline: 0;
  resize: vertical;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 1rem;
}

.falone-contact__form textarea {
  min-height: var(--falone-contact-textarea-h, 150px);
}

/* ⚠️ Nell'originale il segnale di messa a fuoco e' SOLO questo filetto che
   cambia colore: `outline: 0` toglie il contorno del browser. Un solo
   pixel e' un segnale debole per chi naviga da tastiera. Riprodotto
   fedelmente; lo spessore e' un controllo, alzarlo a 2px lo rende
   percepibile senza cambiare l'aspetto a riposo. */
.falone-contact__form input:focus,
.falone-contact__form textarea:focus {
  border-bottom-color: var(--falone-contact-accent, #f7941d);
  border-bottom-width: var(--falone-contact-field-line-focus, 1px);
}

/* il campo esca non deve esistere per nessuno: ne' visto, ne' letto dai
   lettori di schermo, ne' raggiunto col tabulatore */
.falone-contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.falone-contact__form .falone-btn {
  width: 100%;
  margin-top: var(--falone-contact-btn-top, -8px);
}

/* ----------------------------------------------------------------------
   Etichette DENTRO i campi
   ----------------------------------------------------------------------
   ⚠️ L'etichetta non viene rimossa, viene nascosta alla vista: resta nel
   markup e i lettori di schermo continuano a leggerla. Un campo con il solo
   `placeholder` e' un campo senza nome — e il segnaposto sparisce appena si
   scrive, lasciando chi compila senza sapere piu' cosa stava scrivendo.
   Questa e' la tecnica standard: fuori dal riquadro di ritaglio, non
   `display: none`, che lo toglierebbe anche a loro. */
.falone-contact--placeholder .falone-contact__form label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* senza etichetta sopra, la griglia dell'etichetta non serve piu' */
.falone-contact--placeholder .falone-contact__form label { display: block; }

.falone-contact__form input::placeholder,
.falone-contact__form textarea::placeholder {
  color: var(--falone-contact-placeholder, #9a9a9a);
  opacity: 1;   /* Firefox lo mette al 54% per conto suo */
}

/* ======================================================================
   7. ESITO
   ======================================================================
   ⚠️ Nessuna regola parte da opacity: 0 — senza JavaScript, o prima che
   parta, il messaggio dev'essere leggibile. min-height riserva lo spazio
   in anticipo, cosi' comparendo non fa saltare il modulo. */
.falone-contact__msg {
  min-height: 1.4em;
  margin: 0;
  color: var(--falone-contact-lead-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 700;
}

.falone-contact__msg--ok    { color: var(--falone-contact-ok-color, #1a7f37); }
.falone-contact__msg--errore { color: var(--falone-contact-err-color, #ee2a24); }

/* ======================================================================
   8. MOVIMENTO RIDOTTO
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .falone-contact__tabs .falone-contact__tab { transition: none; }
}