/* =============================================================
   CONTACT PAGE — /contact.html
   -------------------------------------------------------------
   Layout for the centered contact-form panel. The form controls
   themselves (inputs, labels, error message, submit button)
   reuse the shared classes in auth.css; design tokens come from
   global.css.
   ============================================================= */

.contact {
  padding: var(--space-lg) 0 var(--space-xl);
  /* Keep the footer from hugging the form on tall screens. */
  min-height: 55vh;
}

.contact__panel {
  max-width: 560px;
  margin:    var(--space-lg) auto;
}

.contact__heading {
  font-size:     var(--text-h2);
  margin-bottom: var(--space-sm);
}

.contact__intro {
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* The message box: same visual language as the inputs (via
   .auth-form__input), plus textarea-specific behavior. */
.contact__message {
  resize:     vertical;      /* Users can make it taller, never wider */
  min-height: 140px;
}

/* Honeypot field — moved far off-screen rather than display:none,
   because the crudest spam bots skip fields they can see are
   hidden. Real visitors never see or tab into it. */
.contact__website-field {
  position: absolute;
  left:     -9999px;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

/* Success panel that replaces the form after sending */
.contact__success-heading {
  font-size:     var(--text-h3);
  color:         #1E6B34;                   /* Same accessible green as .auth-form__success */
  margin-bottom: var(--space-xs);
}

.contact__success-text {
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
}