/* Contact support page. Page-specific; shared components live in site.css. */

/* The heading, the in-app route and the form are one block, deliberately tight so the form's
   first fields are visible without scrolling on a laptop. The site's usual .sec padding
   (96px top and bottom) and 48px hero type would push them a full screen down. This is a
   utility page, not a landing page, so a smaller heading is the right trade. */
.contact-top { padding: 30px 0 56px; }
.contact-intro { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.contact-intro h1 { font-size: var(--fs-page-title); line-height: 1.15; margin: 2px 0 0; }
.contact-intro .lead { max-width: 620px; margin: 0; }
.hero-cta { margin: 10px 0 0; }

.form-heading { font-size: 22px; margin: 0; }
.form-sub { max-width: 620px; margin: 6px 0 0; color: var(--hp-body); }

@media (max-width: 600px) {
  .contact-top { padding: 24px 0 40px; }
}

/* The hero and the in-app route share one block, tightened so the form itself starts above
   the fold on a laptop. The site's default .sec padding (96px top and bottom) would push it
   a whole screen down. */
.hero-cta { margin: 6px 0 0; }



.support-form { max-width: 620px; margin-top: 18px; }
.support-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }
.support-form label { font-weight: 600; font-size: 15px; color: var(--hp-blue-ink); }
.support-form input[type="text"],
.support-form input[type="email"],
.support-form textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming the page on focus */
  padding: 11px 14px; border: 2px solid var(--hp-muted); border-radius: var(--r-sm);
  background: #fff; color: inherit; width: 100%;
}
.support-form textarea { resize: vertical; min-height: 140px; }
.support-form input:focus-visible,
.support-form textarea:focus-visible,
.support-form button:focus-visible {
  outline: 3px solid var(--hp-blue); outline-offset: 2px; border-color: var(--hp-blue);
}
.support-form select {
  font: inherit; font-size: 16px; padding: 11px 14px; border: 2px solid var(--hp-muted);
  border-radius: var(--r-sm); background: #fff; color: inherit; width: 100%;
}
.support-form .hint { font-size: 14px; color: var(--hp-body); }

/* Two columns on a comfortable screen, stacked on a phone. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.support-form .notice {
  background: var(--hp-cream); border-left: 4px solid var(--hp-yellow);
  padding: 16px 18px; border-radius: var(--r-sm); margin: 0 0 24px;
}
.support-form .notice p { margin: 0; font-size: 15px; }

/* The spam trap. Hidden from sight and from screen readers, but not with display:none,
   which some bots detect and skip. */
.support-form .no-fill {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Submit row + the live status message the form writes into. */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-status { font-size: 15px; }
.form-status.is-error { color: var(--hp-coral); font-weight: 600; }
.form-status.is-busy { color: var(--hp-body); }

/* Shown in place of the form once a message has gone through. */
.form-sent {
  background: var(--hp-cream); border-left: 4px solid var(--hp-lime);
  padding: 20px 22px; border-radius: var(--r-sm);
}
.form-sent h3 { margin-top: 0; }
.form-sent p:last-child { margin-bottom: 0; }

/* A field the browser flagged as invalid, once the person has tried to submit. */
.support-form.was-validated :invalid { border-color: var(--hp-coral); }