/* ==========================================================================
   Contact form
   ==========================================================================
   One step, seven fields, then a confirmation. Ported from contact-form.tsx.

   Hulusi, 16 September 2026: the same fields as Galadrim's form on every
   contact form, homepage and contact page: first name, last name, work
   email, phone, company or project name, budget, message with a file. It
   replaces the two-step, bank-the-lead shape set on 3 September after Lucas's
   feedback; that decision is logged in the roadmap.

   Attribution ("how did you hear about us") is asked on the confirmation
   screen, where the visitor is already done and it costs nothing.

   The form does not submit anywhere yet. See docs/WORDPRESS.md for the
   contract Anh wires.
   ========================================================================== */

.contact-form {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 640px) { .contact-form { padding: 2rem; } }

.contact-form__step[hidden] { display: none; }

.contact-form__step--1 { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form__step--done { display: flex; flex-direction: column; gap: 1.5rem; }

/* Focus lands on the heading when the step changes, so keyboard and screen
   reader users follow the move instead of being left at the top of the page. */
.contact-form__heading {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
  letter-spacing: var(--text-h5-tracking);
  font-weight: var(--text-h5-weight);
  color: var(--foreground);
  outline: none;
}

.contact-form__heading--done {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  font-weight: var(--text-h4-weight);
}

.contact-form__lede {
  margin-top: 0.25rem;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

.contact-form__lede--done {
  margin-top: 0.5rem;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
}

.contact-form__grid { display: grid; gap: 1.25rem; }

@media (min-width: 640px) {
  .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five fields since 23 Sept: the last one (budget) takes the full row
     instead of leaving a hole beside it. */
  .contact-form__grid > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.contact-form__actions .btn { width: 100%; }
.contact-form__actions .btn svg { width: 1.25rem; height: 1.25rem; }

.contact-form__consent {
  text-align: center;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  color: var(--subtle-foreground);
}

/* Step 2 closes with a skip and a finish. The skip is first in the DOM for
   reading order and last visually on wide screens, because "Terminer" is the
   primary path. */

/* -------------------------------------------------------------------------- */
.contact-form__done-mark {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--success-subtle);
  color: var(--success-foreground);
}

.contact-form__done-mark svg { width: 1.5rem; height: 1.5rem; }

.contact-form__next { display: flex; flex-direction: column; gap: 1rem; }
.contact-form__next li { display: flex; gap: 0.875rem; }

.contact-form__next-n {
  margin-top: 0.125rem;
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--brand-subtle);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--brand);
}

.contact-form__next-title {
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  font-weight: var(--text-label-lg-weight);
  color: var(--foreground);
}

.contact-form__next-body {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

/* Attribution lives on the confirmation, not in step 2. The visitor is done,
   so asking costs nothing and the answer is still ours. */
.contact-form__attribution {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  padding: 1.5rem 0 0;
  margin: 0;
}

.contact-form__sources {
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-form__source {
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  padding: 0.375rem 0.875rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--muted-foreground);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.contact-form__source:hover { background-color: var(--background-subtle); }

.contact-form__source[aria-pressed="true"] {
  border-color: var(--brand);
  background-color: var(--brand-subtle);
  color: var(--brand);
}

.contact-form__urgent {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background-color: var(--background-subtle);
  padding: 1rem;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

.contact-form__urgent a {
  font-weight: 500;
  color: var(--brand);
  text-underline-offset: 4px;
}

.contact-form__urgent a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .contact-form__source { transition: none; }
}

/* --------------------------------------------------------------------------
   23 Oct 2026 (Hulusi): country code beside the phone, errors under their
   field, and a white confirmation so its blue and green marks read.
   -------------------------------------------------------------------------- */
.phone-group { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
/* A compact box showing only the code; the real select sits on top of it,
   invisible, so the native list (with country names) opens on tap. */
.phone-code { position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: 0 .625rem 0 .75rem; border: 1px solid var(--border, #d8dce1); background: #fff; font-variant-numeric: tabular-nums; color: var(--ed-ink, #121417); }
.home-editorial .closing-contact .phone-code { border-color: transparent; }
.phone-code svg { width: 1rem; height: 1rem; color: var(--ed-muted, #50565f); flex: none; }
.phone-code select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.phone-code:focus-within { outline: 2px solid var(--brand, #0052f8); outline-offset: 0; }
.field__error { margin: .375rem 0 0; font-size: .875rem; line-height: 1.4; color: #c42b1c; }
.field__error[hidden] { display: none; }
.contact-form .input[aria-invalid="true"],
.home-editorial .closing-contact .contact-form .input[aria-invalid="true"] { border-color: #c42b1c; }
.contact-form:has(.contact-form__step--done:not([hidden])),
.home-editorial .closing-contact .contact-form:has(.contact-form__step--done:not([hidden])) { background: #fff; }
/* The white confirmation keeps a dream sky at its foot, fading out by the
   middle, at 40 % (23 Oct, Hulusi: plain white merged with the page). */
.contact-form:has(.contact-form__step--done:not([hidden])) { position: relative; isolation: isolate; overflow: hidden; }
.contact-form:has(.contact-form__step--done:not([hidden]))::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background: url('../../img/backgrounds/dream/figma/card/ai-bg-033.webp') center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 50%);
          mask-image: linear-gradient(to top, #000 0%, transparent 50%);
}
.contact-form__thanks { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 500; color: var(--ed-ink, #121417); animation: contact-thanks-in 300ms ease-out both; }
.contact-form__thanks svg { width: 1.125rem; height: 1.125rem; color: var(--success-foreground, #146c43); flex: none; }
@keyframes contact-thanks-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .contact-form__thanks { animation: none; } }