/* ==========================================================================
   SOUND ALCHEMISTS — Modulo di contatto

   Stili del modulo costruito da assets/js/contact.js: campi, menu a tendina
   del tipo di progetto, nota, pulsante, ringraziamento, avviso "non ancora
   disponibile". Solo variabili di tokens.css; il pulsante riusa .pill di
   base.css.
   ========================================================================== */

/* --- Il modulo ------------------------------------------------------------ */
.form {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: 820px;
  margin-top: 8px;
}

/* Nome ed e-mail affiancati; sotto circa 530 px vanno in colonna da soli */
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 36px 48px;
}

.form .field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* Con il menu aperto il campo deve stare sopra ai fratelli che lo seguono,
   anche quando il reveal dà loro una trasformazione (e quindi un proprio
   livello di sovrapposizione). */
.form .field.is-open { z-index: 20; }

.form__label {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}

/* Quando il focus porta un campo in vista (primo errore, apertura del menu),
   l'header sticky non deve coprirlo: si lascia spazio per header ed etichetta. */
.form__input,
.dd__trigger { scroll-margin-top: calc(var(--header-h) + 64px); scroll-margin-bottom: 32px; }

/* --- Campi di testo ----------------------------------------------------------
   Nessun riquadro: una riga sotto il testo che da fioca diventa sabbia al focus. */
.form__input {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--faint);
  border-radius: 0;
  background: transparent;
  color: var(--sand);
  font: inherit;
  font-size: 20px;
  font-weight: 300;
  padding: 10px 0 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s, box-shadow .3s;
}
textarea.form__input { resize: vertical; }

/* Il contorno globale di :focus-visible qui sarebbe un riquadro: il focus lo dice
   la riga sabbia, rinforzata da un'ombra perché si veda bene. */
.form .field .form__input:focus,
.form .field .form__input:focus-visible {
  outline: none;
  border-bottom-color: var(--sand);
  box-shadow: 0 1px 0 var(--sand);
}

/* Il riempimento automatico di Chrome dipinge un fondo chiaro: lo si tiene a
   trasparente rimandando la transizione di un tempo praticamente infinito. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sand);
  caret-color: var(--sand);
  transition: background-color 600000s 0s, color 600000s 0s, border-color .3s, box-shadow .3s;
}

/* --- Errori --------------------------------------------------------------------- */
.field__error {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--sand-dark);
}
.field__error:empty { display: none; }

.field.has-error .form__input,
.field.has-error .dd__trigger { border-bottom-color: var(--sand-dark); }

/* --- Menu a tendina --------------------------------------------------------------- */
.dd__control { position: relative; }

.dd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--faint);
  border-radius: 0;
  background: transparent;
  color: var(--sand);
  font: inherit;
  font-size: 20px;
  font-weight: 300;
  padding: 10px 0 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s;
}
/* Il contorno globale di :focus-visible resta: è un pulsante. */
.form .field .dd__trigger:hover,
.form .field .dd__trigger:focus-visible,
.form .field.is-open .dd__trigger { border-bottom-color: var(--sand); }

.dd__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "choose…" finché non si sceglie */
.dd__value.is-empty { opacity: .38; }

.dd__chevron {
  display: flex;
  flex: none;
  transition: transform .2s;
}
.field.is-open .dd__chevron { transform: rotate(180deg); }

.dd__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  border-radius: var(--radius-card);
  background: var(--card);
  /* L'unica ombra del sito */
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  outline: none;
  scroll-margin-top: var(--header-h);
  scroll-margin-bottom: 24px;
}

/* Le voci sono evidenziate dal sabbia a bassa opacità: nei token non esiste una
   variante trasparente della sabbia, quindi è il valore del prototipo. */
.dd__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-option);
  font-size: 18px;
  font-weight: 300;
  color: var(--sand);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.dd__option::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand);
  opacity: 0;
}
.dd__option[aria-selected="true"] { background: rgba(233, 223, 204, .06); }
.dd__option[aria-selected="true"]::after { opacity: 1; }
.dd__option:hover,
.dd__option.is-active { background: rgba(233, 223, 204, .08); }

/* --- Nota privacy e pulsante --------------------------------------------------------- */
.form__note {
  max-width: 560px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.form__note a {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: .22em;
}
.form__note a:hover { color: var(--sand-dark); }

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.form__submit { align-self: flex-start; }
.form__submit:disabled { opacity: .55; cursor: default; }
.form__submit:disabled:hover { background: transparent; color: var(--sand); }

/* Esito negativo dell'invio, sotto il pulsante. Vuota non occupa spazio. */
.form__status {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--sand-dark);
}
.form__status:not(:empty) { margin-top: 16px; }

/* --- Ringraziamento (al posto del modulo) ---------------------------------------------- */
.form__thanks {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  font-size: 20px;
  font-weight: 300;
}
/* Riceve il focus da codice, perché il modulo che lo aveva è scomparso: non è un
   controllo, quindi niente contorno. */
.form__thanks:focus { outline: none; }

.form__demo {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}

/* --- Modulo non disponibile (online, senza endpoint) ----------------------------------------- */
.form__unavailable {
  padding: 8px 0 24px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  word-break: break-word;
}
.form__unavailable a {
  text-decoration: underline;
  text-underline-offset: .22em;
}

/* --- Schermi stretti ------------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .form { gap: 32px; }
  .dd__panel { padding: 6px; }
}