/* ---- Contact page — hero intro, stepped enquiry form, offices ---- */

/* Hero supporting copy — sits under .panel__heading, same treatment as the
   other hero-panel secondary copy (rgba white, not a full opacity read
   against photography). */
.contact-hero__intro {
  max-width: 32rem;
  margin-top: var(--space-6);
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Contact Us + Offices text block, and the stepped enquiry form,
   share one .editorial-module--feature.editorial-module--reverse
   (project-detail.css) — office text lands in the narrower left column,
   the form in the wider right column. Office content (two address blocks)
   is a different shape than the single testimonial-style blurb that
   component was built for, so it gets its own max-width here rather than
   assuming the shared 24rem cap fits. ---- */
.editorial-module--feature.editorial-module--reverse .editorial-text-block {
  max-width: 26rem;
}

/* ---- Stepped enquiry form ---- */

.contact-form__column {
  min-width: 0;
  background-color: var(--color-paper-alt);
  padding: var(--space-8);
  /* Floor only (not a fixed height) — the full multi-field form is always
     taller than this and grows the box naturally as before; it only takes
     effect once the form is replaced by the much shorter success message
     on submit, stopping the tinted box from collapsing down to just those
     two lines. */
  min-height: 32rem;
}

@media (min-width: 1024px) {
  .contact-form__column {
    padding: var(--space-12);
  }
}

.contact-form__panel,
.contact-form__panel form {
  height: 100%;
}

/* Success state only — centers within the now-taller box instead of
   sitting flush top-left of it. Scoped to :has() so the normal, much
   taller field list is completely unaffected (it isn't a flex context at
   all, still plain top-down block flow). */
.contact-form__panel form:has(.contact-form__success) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Step progress line — thin, square-edged (no rounded caps, per the
   site's architectural-forms direction), fills left-to-right as Continue
   is clicked through steps and retreats on Back. ---- */
.contact-form__progress {
  position: relative;
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: var(--space-10);
}

.contact-form__progress-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background-color: var(--color-ink);
  transition: transform var(--duration-slow) var(--ease-standard);
}

.contact-form__nav {
  margin-bottom: var(--space-12);
}

.contact-form__nav-copy {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  max-width: 26rem;
}

/* ---- Right column / active step panel ---- */

.contact-form__panel {
  min-width: 0;
  width: 100%;
}

/* Placeholder tone tuned for this panel's --color-paper-alt background
   specifically (scoped here rather than in form.css's shared .field__input
   rule, since a different placeholder tone may suit a plain-paper
   background elsewhere) — legible as a hint without competing with real
   input text. */
.contact-form__panel .field__input::placeholder,
.contact-form__panel .field__textarea::placeholder {
  color: rgba(27, 26, 23, 0.35);
}

.contact-form__step {
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.contact-form__step--entering {
  opacity: 0;
  transform: translateY(12px);
}

.contact-form__step--leaving {
  opacity: 0;
  transform: translateY(-12px);
}

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

  .contact-form__step--entering,
  .contact-form__step--leaving {
    opacity: 1;
    transform: none;
  }
}

.contact-form__step-heading {
  /* Legend is visually hidden — the left column already shows the live
     heading — but stays in the accessibility tree for screen readers. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-form__group {
  margin-bottom: var(--space-10);
}

/* Paired fields (First/Last name, Email/Phone) — stacked full-width through
   mobile and tablet, where the form column isn't wide enough for two-up
   without squeezing each field (and its label) too narrow to use; sits
   two-up from 1024px (small desktop) up, where the form column has room.
   Row-gap is left to each .field's own margin-bottom (form.css) so vertical
   rhythm matches single-column groups; only column-gap needs adding here. */
.contact-form__group--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-8);
}

@media (min-width: 1024px) {
  .contact-form__group--split {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__group-label {
  display: block;
  margin-bottom: var(--space-4);
}

.contact-form__group-note {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

/* Reserved-height error slot beneath a group — avoids layout jump when a
   validation message appears/disappears (mirrors .panel__eyebrow's
   fixed-height-slot technique). */
.contact-form__group-error {
  display: block;
  min-height: calc(var(--font-size-2) * var(--line-height-normal));
  margin-top: var(--space-2);
  font-size: var(--font-size-2);
  color: #a8402f;
}

/* ---- Selectable "option toggle" — checkbox/radio styled as a large text
   block instead of a native control or a dropdown. No icon, no checkmark,
   no rounded card — a border/background shift only. ---- */
.option-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* Short, fixed-length groups (e.g. Phone / Email / Either) should stay on
   one row rather than wrap via auto-fill once the panel's own max-width
   (see .contact-form__panel) makes a 220px-per-item minimum no longer fit
   three across. */
.option-toggle-list--3up {
  grid-template-columns: repeat(3, 1fr);
}

.option-toggle {
  position: relative;
  display: block;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  text-align: center;
  /* Subtle tint vs the section background — noticeable but not a hard
     edge. tokens.css has no dedicated neutral-tint variable, so this uses
     --color-ink at low opacity rather than introducing a new token. */
  /* background-color: rgba(27, 26, 23, 0.025); */
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.option-toggle:hover {
  background-color: rgba(27, 26, 23, 0.05);
}

.option-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.option-toggle.is-selected {
  background-color: var(--color-border);
}

.option-toggle:has(input:focus-visible) {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.option-toggle--upload {
  text-align: center;
  color: var(--color-text-muted);
}

.contact-form__upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.contact-form__upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* A long filename (phone photos routinely run 30-40+ characters) has no
   room to shrink by default in a flex row and pushes Remove off narrow
   mobile widths instead of truncating. */
.contact-form__upload-item .caption {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-form__upload-item .btn {
  flex-shrink: 0;
}

/* ---- Controls row ---- */

.contact-form__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

/* ---- Step 4 summary ---- */


.contact-form__summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.contact-form__summary-row:first-child {
  padding-top: 0;
}

.contact-form__summary-term {
  color: var(--color-text-muted);
}

.contact-form__summary-value {
  flex: 1;
}

/* ---- Submission status ---- */

.contact-form__success {
  max-width: 32rem;
  text-align: center;
}

[data-form-status].is-error {
  color: #a8402f;
}

/* ---- Offices — stacked inside the Contact Us text column ---- */

.contact-offices__office {
  margin-top: var(--space-10);
}

.contact-offices__office address {
  font-style: normal;
}

.contact-offices__office > * + * {
  margin-top: var(--space-4);
}