/* =========================================================
   Contact form component
   Fonte: assets/Form/{M,Tablet,L,XL}.png → mappati sui tier
   S / M / L / XL del sito (vedi tokens.css §7.0): M.png→S (layout
   impilato, telefono), Tablet.png→M, L.png→L, XL.png→XL. XXL non ha
   reference, --container stimato per estrapolazione (vedi tokens.css).
   Token: tokens.css
   ========================================================= */

:root {
  --form-duration: 200ms;
  --form-ease: ease;
  --form-ease-weighted: cubic-bezier(0.32, 0.72, 0, 1); /* stessa curva di thumb card / project card */
  /* Locale a questo componente, non tokens.css: nessun colore d'errore
     esiste nel design system, e introdurne uno nel foglio condiviso per un
     solo componente sarebbe prematuro. #B42318 e' scelto per il contrasto:
     6.57:1 su bianco, sopra la soglia WCAG di 4.5:1 per testo normale. */
  --form-error: #B42318;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
}

.contact-form-demo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey-2);
  /* --grid-margin (tokens.css §7.0) — la stessa variabile che allineerà
     il margine esterno di ogni altro componente nell'impaginato finale.
     Prima usavo --space-6 fisso, per questo i margini non combaciavano. */
  padding: var(--grid-margin);
}

/* ---------- Card container ----------
   Mobile-first: width segue --container di tokens.css §7.0 — una sola
   variabile che cambia da sola ai breakpoint giusti (S ha un valore fisso
   perché non c'è una reference per quel tier; da M in su la ripredono
   tutte da --container, senza bisogno di altre @media qui). */

.contact-form {
  width: 100%;
  max-width: 360px; /* S: assets/Form/M.png, card misurata a 372px */
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .contact-form {
    max-width: var(--container);
    padding: var(--space-6);
  }
}

@media (min-width: 900px) {
  .contact-form {
    padding: var(--space-7);
  }
}



.contact-form__title {
  margin: 0;
  /* h2, non title1 (60px) — title1 è la dimensione più grande della scala e
     stonava con gli altri titoli del sito; h2 resta comunque responsive via
     il breakpoint tipografico esistente in tokens.css. */
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  text-align: center;
}

/* ---------- Fields ---------- */
/* S: name + email stacked (assets/Form/M.png). From M (600px) on: side by
   side, matching Tablet.png / L.png / XL.png. */

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .contact-form__row {
    flex-direction: row;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 0;
}

.contact-form__field label {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.contact-form__field input,
.contact-form__field textarea {
  /* Form controls don't stretch to fill a flex column by default — they
     keep their intrinsic size (the `size`/`cols` attribute default), which
     was overflowing .contact-form past its max-width entirely. */
  width: 100%;
  min-width: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  background: var(--color-grey);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--form-duration) var(--form-ease), background var(--form-duration) var(--form-ease);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  background: var(--color-white);
}

/* ---------- Submit ----------
   L'aspetto (pillola blu, altezza, raggio, hover/press) sta in
   css/button.css: e' lo stesso bottone della CTA "Download my entire
   Resumè" nelle tavole, quindi lo stile e' definito una volta sola li'.
   Qui resta solo cio' che riguarda la posizione dentro il form. */

.contact-form__submit {
  align-self: center;
  min-width: 145px; /* misurato: 143px nelle tavole, sia S sia XL */
}

/* ---------- Contacts ---------- */
/* S: plain centered text stack (assets/Form/M.png — no box).
   From M (600px) on: bordered tiles side by side (Tablet/L/XL.png). */

.contact-form__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: center;
}

.contact-form__contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-form__contact-label {
  font-size: var(--font-size-body-small);
  color: var(--color-grey-2);
}

.contact-form__contact-value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

@media (min-width: 600px) {
  .contact-form__contacts {
    flex-direction: row;
  }

  .contact-form__contact-item {
    flex: 1 1 0;
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    padding: var(--space-4);
  }
}

/* ---------- Stati del submit (invio vero) ----------
   Prima "Sent" arrivava sempre, dopo un timeout finto. Ora tre stati
   reali: a riposo, in invio (aria-disabled — mai l'attributo nativo
   "disabled", che toglierebbe il fuoco a un bottone che l'ha appena
   ricevuto), fallito (il messaggio qui sotto). Vedi js/contact-form.js. */

.contact-form__submit[aria-disabled="true"] {
  opacity: 0.6;
  /* Non intercetta piu' click (un secondo tentativo lo blocca comunque
     in JS — questa e' solo la parte visiva): senza, il cursore
     resterebbe "a mano" su un bottone che in quel momento non deve
     rispondere al mouse. */
  pointer-events: none;
}

.contact-form__error {
  margin: 0;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  color: var(--form-error);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form__field input,
  .contact-form__field textarea,
  .contact-form__submit {
    transition-duration: 1ms;
  }
}