/* ==========================================================================
   Paradise Home — form e pagina contatti
   Caricato su /contatti/ e /modulo/ (mappa $contextual di inc/enqueue.php).

   Sul sito originale questi stili vivevano nel campo Custom CSS del kit Elementor,
   duplicati in due blocchi quasi identici e con venti selettori corrotti dalla
   sostituzione della parola-chiave `selector`. Qui sono scritti una volta sola.

   Gli stili di Contact Form 7 vengono coperti per specificità (`.ph-form .wpcf7 form …`
   batte `.wpcf7 form …`): il foglio del plugin resta caricato ma non si vede più.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pagina contatti — impaginazione
   -------------------------------------------------------------------------- */

/* Il blocco editoriale dell'originale è il widget 3353855, largo il 100,902% del
   contenitore: piena larghezza, nessuna misura di lettura ridotta. */
.contatti__intro {
  max-width: none;
}

.contatti__intro h2 {
  font-size: var(--ph-h3);
}

/* Due schede affiancate, i recapiti a 36,113% (post-11.css, @media min-width:768px)
   e il modulo a riempire il resto. Lo scarto è quello di default del kit,
   `--widgets-spacing: 20px`. */
.contatti__griglia {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 8px var(--ph-section-y);
  align-items: stretch;
}

@media (min-width: 768px) {
  .contatti__griglia {
    grid-template-columns: 36.113% minmax(0, 1fr);
  }
}

/* Scheda dei recapiti: fondo #00BF630D, raggio 20px, padding 20px. */
.contatti__dati {
  padding: 20px;
  border-radius: var(--ph-radius-lg);
  background: rgba(0, 191, 99, 0.05);
}

.contatti__dati-titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-heading-section);
}

.contatti__dati-voce {
  margin: 20px 0 0;
  font-family: var(--ph-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-heading-section);
}

/* I widget text-editor dell'originale portano `margin-top:-14px`: è ciò che tiene
   il valore appiccicato al proprio titolo. */
.contatti__dati-valore {
  margin: 6px 0 0;
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ph-text-muted);
}

.contatti__dati-valore a {
  color: var(--ph-text-muted);
}

.contatti__dati-valore a:hover,
.contatti__dati-valore a:focus-visible {
  color: var(--ph-primary);
}

/* Scheda del modulo: fondo rosa, nessun bordo e nessuna ombra — sull'originale è
   un contenitore colorato, non una card sollevata. */
.page--contatti .ph-form.contatti__form {
  padding: 20px;
  border: 0;
  border-radius: var(--ph-radius-lg);
  background: #ffeaf7;
  box-shadow: none;
}

.page--contatti .contatti__form .ph-form__titolo {
  margin: 0 0 16px;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-heading-section);
}

/* --------------------------------------------------------------------------
   Recapiti
   -------------------------------------------------------------------------- */

.dati-contatto {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.dati-contatto__voce {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--ph-border);
}

.dati-contatto__voce:first-child {
  padding-top: 0;
  border-top: 0;
}

.dati-contatto__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ph-primary-pale);
  color: var(--ph-primary);
}

.dati-contatto__icona .icon {
  width: 18px;
  height: 18px;
}

.dati-contatto__corpo {
  min-width: 0;
}

.dati-contatto__titolo {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ph-primary);
}

.dati-contatto__valore {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ph-text);
  overflow-wrap: break-word;
}

.dati-contatto__valore a {
  color: var(--ph-text);
  text-decoration: underline;
  text-decoration-color: var(--ph-primary-light);
  text-underline-offset: 3px;
}

.dati-contatto__valore a:hover,
.dati-contatto__valore a:focus-visible {
  color: var(--ph-primary);
}

.dati-contatto__link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--ph-font-heading);
  font-size: 13.5px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Mappa: nessun iframe, nessuna richiesta esterna (vedi template-parts/form/mappa.php)
   -------------------------------------------------------------------------- */

.mappa-sede__figura {
  margin: 0 0 16px;
}

.mappa-sede__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

.mappa-sede__didascalia {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ph-text-muted);
}

.mappa-sede__scheda {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--ph-border);
  border-left: 4px solid var(--ph-primary);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
}

.mappa-sede__icona {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--ph-primary);
}

.mappa-sede__icona .icon {
  width: 26px;
  height: 26px;
}

.mappa-sede__nome {
  margin: 0 0 2px;
  font-family: var(--ph-font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--ph-primary);
}

.mappa-sede__indirizzo {
  margin: 0;
  font-size: 15px;
  color: var(--ph-text);
}

.mappa-sede__cta .icon {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Guscio del form
   -------------------------------------------------------------------------- */

.ph-form {
  /* Token locali del componente. Il viola scuro è quello del CSS eventi (#4e1f72):
     l'originale ne usava due diversi (#4e1f72 per TEC, #561f80 per il submit CF7). */
  --form-border: #e4e1f0;
  --form-radius: 10px;
  --form-dark: #4e1f72;
  --form-ring: 0 0 0 3px rgba(105, 42, 152, 0.25);
  --form-error: #b3261e;
  --form-error-bg: #fdecea;
  --form-ok: #1f6b3a;
  --form-ok-bg: #eaf6ee;
  --form-warn: #8a5a00;
  --form-warn-bg: #fff7e6;

  padding: 32px;
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-white);
  box-shadow: var(--ph-shadow-card);
}

@media (max-width: 600px) {
  .ph-form {
    padding: 24px 20px;
  }
}

.ph-form__titolo {
  margin: 0 0 8px;
  font-size: var(--ph-h3);
}

.ph-form__testo {
  margin: 0 0 24px;
  font-size: 15.5px;
  color: var(--ph-text-muted);
}

.ph-form__titolo:last-child,
.ph-form__testo:last-child {
  margin-bottom: 0;
}

.ph-form__fallback-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ph-form__fallback-lista .icon {
  width: 17px;
  height: 17px;
}

/* --------------------------------------------------------------------------
   Contact Form 7 — reset e vestizione
   -------------------------------------------------------------------------- */

/* La risposta per screen reader di CF7 non deve mai diventare visibile, nemmeno se il
   foglio del plugin venisse rimosso dalla coda. */
.ph-form .wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ph-form .wpcf7 form {
  margin: 0;
}

/* Contact Form 7 passa il contenuto del modulo in `wpautop`: ogni etichetta col suo
   campo finisce dentro un `<p>`. Il paragrafo resta, ma non deve aggiungere spazio:
   la distanza fra i campi la decide la griglia. */
.ph-form .wpcf7 form p {
  margin: 0;
}

/* Griglia del modulo: le classi stanno nel contenuto del form (modificabile dalla
   redazione), quindi ogni riga funziona anche da sola, senza wrapper. */
.ph-form__row {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 18px;
}

@media (min-width: 601px) {
  .ph-form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ph-form__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ph-form__field {
  min-width: 0;
}

.ph-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ph-font-heading);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ph-text);
}

/* CF7 inserisce un <br> dentro l'etichetta quando il campo la segue a capo. */
.ph-form label br {
  display: none;
}

.ph-form__req {
  border: 0;
  color: var(--ph-primary);
  text-decoration: none;
  cursor: help;
}

.ph-form .wpcf7-form-control-wrap {
  display: block;
}

.ph-form .wpcf7 input[type="text"],
.ph-form .wpcf7 input[type="email"],
.ph-form .wpcf7 input[type="tel"],
.ph-form .wpcf7 input[type="url"],
.ph-form .wpcf7 input[type="number"],
.ph-form .wpcf7 input[type="date"],
.ph-form .wpcf7 textarea,
.ph-form .wpcf7 select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: var(--ph-white);
  font-family: var(--ph-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ph-text);
  transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
}

.ph-form .wpcf7 textarea {
  min-height: 170px;
  resize: vertical;
}

.ph-form .wpcf7 input::placeholder,
.ph-form .wpcf7 textarea::placeholder {
  /* Il segnaposto è testo a tutti gli effetti: #a8a3b8 stava a 2,4:1. */
  color: #6f6a82;
}

.ph-form .wpcf7 input:focus-visible,
.ph-form .wpcf7 textarea:focus-visible,
.ph-form .wpcf7 select:focus-visible {
  border-color: var(--ph-primary);
  box-shadow: var(--form-ring);
  outline: 2px solid transparent; /* il contorno resta per la modalità contrasto elevato */
  outline-offset: 2px;
}

/* Codice fiscale in maiuscolo: è cosmetico, la normalizzazione va fatta lato server. */
.ph-form .wpcf7 input[name="codicefiscalenew"] {
  text-transform: uppercase;
}

/* Caselle di spunta e accettazioni ------------------------------------------ */

.ph-form .wpcf7 .wpcf7-list-item {
  display: block;
  margin: 0;
}

.ph-form .wpcf7 .wpcf7-list-item label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ph-text);
  cursor: pointer;
}

.ph-form .wpcf7 input[type="checkbox"],
.ph-form .wpcf7 input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1px solid var(--ph-primary-light);
  border-radius: 5px;
  background: var(--ph-white);
  cursor: pointer;
  transition: background-color var(--ph-transition), border-color var(--ph-transition);
}

.ph-form .wpcf7 input[type="radio"] {
  border-radius: 50%;
}

.ph-form .wpcf7 input[type="checkbox"]:checked,
.ph-form .wpcf7 input[type="radio"]:checked {
  border-color: var(--ph-primary);
  background: var(--ph-primary);
}

/* Spunta disegnata con due bordi ruotati: nessuna immagine, nessuna maschera. */
.ph-form .wpcf7 input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 10px;
  height: 5px;
  margin: 3px auto 0;
  border-left: 2px solid var(--ph-white);
  border-bottom: 2px solid var(--ph-white);
  transform: rotate(-45deg);
}

.ph-form .wpcf7 input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 5px auto 0;
  border-radius: 50%;
  background: var(--ph-white);
}

.ph-form .wpcf7 input[type="checkbox"]:focus-visible,
.ph-form .wpcf7 input[type="radio"]:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

.ph-form .wpcf7 .wpcf7-list-item-label {
  min-width: 0;
}

/* Invio -------------------------------------------------------------------- */

.ph-form .wpcf7 input[type="submit"],
.ph-form .wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 13px 36px;
  border: 0;
  border-radius: var(--form-radius);
  /* Tinta piena #692A98, come il Custom CSS del kit originale: il gradiente non
     c'era, e sullo screenshot il pulsante è un rettangolo viola uniforme. */
  background-image: none;
  background-color: var(--ph-primary);
  font-family: var(--ph-font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ph-white);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(105, 42, 152, 0.22);
  transition: background-image var(--ph-transition), transform var(--ph-transition), box-shadow var(--ph-transition);
}

.ph-form .wpcf7 input[type="submit"]:hover,
.ph-form .wpcf7 .wpcf7-submit:hover,
.ph-form .wpcf7 input[type="submit"]:focus-visible,
.ph-form .wpcf7 .wpcf7-submit:focus-visible {
  background-color: #561f80;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(105, 42, 152, 0.3);
}

.ph-form .wpcf7 .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ph-form .wpcf7 input[type="submit"],
  .ph-form .wpcf7 .wpcf7-submit {
    transition: none;
  }

  .ph-form .wpcf7 input[type="submit"]:hover,
  .ph-form .wpcf7 .wpcf7-submit:hover {
    transform: none;
  }
}

.ph-form .wpcf7-spinner {
  margin: 0 0 0 14px;
  background-color: var(--ph-primary);
}

/* Errori ------------------------------------------------------------------- */

.ph-form .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-family: var(--ph-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--form-error);
}

.ph-form .wpcf7 input.wpcf7-not-valid,
.ph-form .wpcf7 textarea.wpcf7-not-valid,
.ph-form .wpcf7 select.wpcf7-not-valid {
  border-color: var(--form-error);
  background: var(--form-error-bg);
}

.ph-form .wpcf7 .wpcf7-acceptance .wpcf7-not-valid-tip {
  margin-left: 32px;
}

/* Messaggi di esito -------------------------------------------------------- */

.ph-form .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--ph-border);
  border-left-width: 4px;
  border-radius: var(--form-radius);
  background: var(--ph-surface);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ph-text);
}

/* Prima dell'invio la scatola non esiste: il plugin la nasconde, ma la regola è
   ripetuta qui perché il tema non dipenda dal suo foglio di stile. */
.ph-form .wpcf7 form.init .wpcf7-response-output,
.ph-form .wpcf7 form.resetting .wpcf7-response-output,
.ph-form .wpcf7 form.submitting .wpcf7-response-output,
.ph-form .wpcf7 form .wpcf7-response-output:empty {
  display: none;
}

.ph-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--form-ok);
  background: var(--form-ok-bg);
  color: var(--form-ok);
}

.ph-form .wpcf7 form.invalid .wpcf7-response-output,
.ph-form .wpcf7 form.unaccepted .wpcf7-response-output,
.ph-form .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--form-warn);
  background: var(--form-warn-bg);
  color: var(--form-warn);
}

.ph-form .wpcf7 form.failed .wpcf7-response-output,
.ph-form .wpcf7 form.aborted .wpcf7-response-output,
.ph-form .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--form-error);
  background: var(--form-error-bg);
  color: var(--form-error);
}

/* --------------------------------------------------------------------------
   Pagina modulo
   -------------------------------------------------------------------------- */

.page--modulo .page-hero__eyebrow {
  margin: 0 0 6px;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-accent-ink);
}

.modulo__informativa {
  padding-block: 32px 8px;
}

.modulo__informativa p {
  font-size: 16px;
}

.page--modulo .ph-form {
  margin-block: 24px;
}

.modulo__nota {
  margin: 0;
  padding-block: 0 var(--ph-section-y);
  font-size: 14px;
  color: var(--ph-text-muted);
}