/* ==========================================================================
   CONVEO — Contact Us page
   Page-specific styles only. Inherits colors, type scale, layout utilities,
   nav, buttons, and footer from styles.css — load that first.

   Card position matches the comp pixel-for-pixel at desktop widths: the
   card sits offset toward the left of the page rather than centered
   (confirmed intentional, not a Figma placement artifact) inside a shell
   that centers the same way .container does, so it still lines up with
   the rest of the site on ultra-wide screens. Tablet/mobile fall back to
   a conventional centered card — the comp only covers desktop.
   ========================================================================== */

.contact-page {
  /* Tightened from the comp's original 176px/269px gaps so the full card
     fits within a standard laptop viewport (1366×768 / 1440×900) without
     scrolling — see the density pass throughout this file. The old
     269px bottom gap was sized for the original, much taller card and
     read as a large dead-space gap once the card shrank; reclaimed some
     of it here as top breathing room instead. */
  padding-top: calc(var(--nav-height) + 30px);
  padding-bottom: 96px;
}

.contact-shell {
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-card {
  margin-left: 150px;
  width: 875px;
  max-width: calc(100% - 150px);
  border: 1px solid var(--white-faint-16);
  padding: 14px;
}

.contact-form__heading {
  /* Bumped up from --fs-feature (24px) — that card-heading scale read as
     undersized/unfinished next to the form below it, and mobile was
     already overriding up to 36px while desktop stayed small. 32px reads
     as an intentional page title without overwhelming the compact card. */
  font-size: 32px;
  font-weight: var(--fw-medium);
  text-align: center;
  margin-bottom: 16px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  /* Was 6px — desktop has real slack below the card at 1440x900+, and the
     fields read as cramped. Widened for breathing room between labels. */
  gap: 22px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ---------- Fields — same visual language as the auth forms (field,
   input border/radius/focus treatment) so this page belongs to the
   same site, not a one-off pattern. ---------- */
.field {
  display: flex;
  flex-direction: column;
  /* Was 6px — matches the wider .contact-form gap above for a consistent
     label-to-input rhythm now that there's room for it. */
  gap: 10px;
}

.field label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.field__required {
  color: var(--color-white);
  margin-left: 2px;
}

.field input,
.field textarea {
  background: transparent;
  border: 1px solid var(--white-faint-16);
  border-radius: 2px;
  color: var(--color-white);
  font-family: var(--font-fallback);
  font-size: var(--fs-body);
  padding: 8px 14px;
  transition: border-color 150ms ease;
}

.field textarea {
  resize: vertical;
  min-height: 50px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--white-muted);
}

.field--invalid input,
.field--invalid textarea {
  border-color: #e57373;
}

.contact-form__note {
  font-size: var(--fs-small);
  color: var(--color-white);
}

.contact-form__actions {
  display: flex;
  justify-content: center;
}

.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Inline error — same left-rule alert pattern as the auth
   forms' .form-alert, scoped locally so this page stays self-contained. ---------- */
.form-alert {
  border-left: 2px solid #e57373;
  padding: 4px 0 4px 16px;
}

.form-alert__message {
  color: var(--color-white);
}

.form-alert__message a {
  color: var(--color-blue);
  text-decoration: underline;
}

/* ---------- Success state — replaces the form inside the same card ----------
   [hidden] needs an explicit override here — .contact-form's own
   display:flex otherwise beats the browser's default [hidden] style (an
   author rule always wins over the UA stylesheet, even at equal
   specificity), so form.hidden = true silently did nothing and the
   success message rendered below the still-visible form instead of
   replacing it. Same override auth.css and app.css already carry. */
[hidden] {
  display: none !important;
}

.contact-success {
  text-align: center;
  padding: 40px 0;
}

.contact-success__heading {
  font-size: var(--fs-feature);
  color: var(--color-white);
  line-height: 1.5;
  margin-bottom: 24px;
}

.contact-success__sub {
  color: var(--white-muted);
}

/* ==========================================================================
   Responsive — Tablet: 768px – 1279px
   The comp only covers desktop; below it the card centers conventionally
   rather than trying to preserve a left offset that stops making sense
   at narrower widths.
   ========================================================================== */
@media (max-width: 1279px) {
  .contact-page {
    /* Was +64px — an outlier next to desktop's +30px and mobile's +40px,
       not a deliberate step in the scale. Brought in line with those. */
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 96px;
  }

  .contact-shell {
    padding: 0 var(--pad-tablet);
  }

  .contact-card {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    padding: 40px;
  }
}

/* ==========================================================================
   Responsive — Mobile: below 768px
   ========================================================================== */
@media (max-width: 767px) {
  .contact-page {
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 64px;
  }

  .contact-shell {
    padding: 0 var(--pad-mobile);
  }

  .contact-card {
    max-width: 100%;
    padding: 28px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-form__heading {
    font-size: var(--fs-section);
  }
}