/* contact-form.css — shared form styles for the contact form (contact.html)
   and the "Suggest a resource or article" form (resources.html). Factored
   out of contact.html's inline <style> so both pages stay in sync. No new
   brand tokens: every color, font, and radius resolves to a shared.css var(). */

.contact-form { margin: 0; }
.form-row { margin-bottom: 22px; }
.form-row > label {
  display: block;
  font: 700 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ha-navy);
  margin-bottom: 8px;
}
.form-row .req { color: var(--ha-red); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row select,
.form-row textarea {
  width: 100%; box-sizing: border-box;
  font: 16px/1.5 var(--font-sans); color: var(--ha-navy);
  background: var(--ha-paper);
  border: 1px solid var(--ha-navy-500);
  border-radius: var(--ha-radius);
  padding: 12px 14px;
}
.form-row select { appearance: auto; }
.form-row textarea { min-height: 160px; resize: vertical; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: 2px solid var(--ha-red); outline-offset: 2px; border-color: var(--ha-red); }
.form-row[data-invalid="true"] input,
.form-row[data-invalid="true"] select,
.form-row[data-invalid="true"] textarea { border-color: var(--ha-red); }
.form-error { display: block; font-size: 13px; color: var(--ha-red); margin-top: 6px; min-height: 18px; }

/* Desktop two-column layout: Name + Email on row 1, remaining rows
   full-width, Submit right-aligned. Mobile stacks. */
@media (min-width: 768px) {
  .contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  .contact-form__grid .form-row--full { grid-column: 1 / -1; }
  .contact-form__actions { display: flex; justify-content: flex-end; }
}

.contact-form button[type="submit"] {
  display: inline-block; padding: 14px 28px;
  border: 1px solid var(--ha-red); border-radius: var(--ha-radius);
  background: transparent; color: var(--ha-red);
  font: 700 13px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
}
.contact-form button[type="submit"]:hover:not(:disabled) { background: var(--ha-red); color: var(--ha-off-white); }
.contact-form button[type="submit"]:disabled { opacity: 0.5; cursor: progress; }
.form-status { margin-top: 18px; font-size: 15px; }
.form-status[data-state="error"] { color: var(--ha-red); }

/* Honeypot — visually hidden from humans, off-screen. Field name is
   "website" because bots auto-fill URL-looking fields. */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Thank-you banner. On contact.html it is revealed when /contact?sent=1
   loads (after a successful submission's redirect); on resources.html the
   submit handler reveals it inline in place of the form. */
.contact-thanks {
  background: var(--ha-blue-50);
  border-left: 4px solid var(--ha-red);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.contact-thanks h2 { margin: 0 0 6px; font-size: 22px; color: var(--ha-navy); }
.contact-thanks p { margin: 0; font-size: 16px; color: var(--ha-navy); line-height: 1.5; }
.contact-thanks:focus { outline: 2px solid var(--ha-red); outline-offset: 2px; }