/* ==========================================================================
   Forms (contact page)
   ========================================================================== */

.contact-form { display: grid; gap: 18px; margin-top: 22px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.form-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #26262a; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid #c9c9cc;
  border-radius: 5px;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--c-orange); outline: 2px solid rgba(245, 138, 31, .35); outline-offset: 0; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #b3261e; }
.form-error { margin-top: 6px; font-size: 13px; color: #b3261e; }
.form-note { font-size: 13px; color: #55555a; }
.form-note a { color: #b04a12; text-decoration: underline; }

/* honeypot: hidden from people and assistive tech, still present for bots */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert { margin-top: 16px; padding: 14px 16px; font-size: 15px; border-radius: 5px; }
.form-alert--success { color: #14532d; background: #e3f4ea; border: 1px solid #a7d7b8; }
.form-alert--error { color: #7a1a14; background: #fbe9e7; border: 1px solid #efb3ad; }

@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) {
  .contact-form { gap: 2rem; margin-top: 2.4rem; }
  .form-row { gap: 2rem; }
  .form-field label { margin-bottom: .8rem; font-size: 1.2rem; }
  .form-field input,
  .form-field select,
  .form-field textarea { min-height: 4.6rem; padding: 1.2rem 1.5rem; font-size: 1.4rem; border-radius: .5rem; }
  .form-field textarea { min-height: 15rem; }
  .form-error { margin-top: .6rem; font-size: 1.15rem; }
  .form-note { font-size: 1.15rem; }
  .form-alert { margin-top: 1.8rem; padding: 1.4rem 1.6rem; font-size: 1.3rem; border-radius: .5rem; }
}