/* Task 1.68 §6: the public Contact page. Reuses existing form-row/
   form-label/auth-field-error conventions from static/css/accounts.css -
   only new, contact-specific rules live here. */

.contact-page {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form {
  margin-top: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form__errors {
  color: var(--color-error);
  font-size: 0.875rem;
}

/* Task 1.72 Group 2: matches static/css/accounts.css's identical
   .auth-field-error rules byte-for-byte - this page reuses that same
   class name (templates/content/contact.html) but does not load
   accounts.css (its own .auth-page/.auth-card layout wrapper would be
   unwanted here), so the three small rules are duplicated rather than
   pulling in a second stylesheet's unrelated layout classes. Every
   error <div> is now always rendered (never conditionally, matching
   LoginForm/SignUpForm's own established pattern) so :empty correctly
   hides it, and its `id` always exists for `aria-describedby` to
   reference - never a dangling reference. */
.auth-field-error {
  color: var(--color-error);
  font-size: var(--font-size-body-sm);
}

.auth-field-error:empty {
  display: none;
}

.auth-field-error ul {
  margin: 0;
  padding-left: 1.1em;
}

.form-row--checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 0.875rem;
}

/* Honeypot - visually hidden off-screen (never display:none, which some
   scrapers specifically detect and skip around), never keyboard-
   focusable, and marked aria-hidden so assistive technology never
   announces it to a real visitor either. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-success {
  margin-top: var(--space-32);
  padding: var(--space-24);
}