/* ============================================================
   CONTACT PAGE — Bloomerang interaction form (50176)

   Style only: no markup, IDs, names, classes or validation logic
   is touched. Bloomerang injects the form (and its own stylesheet)
   into the page at runtime, and its stylesheet lands in the body
   AFTER this file — scoping by ID wins on specificity without
   needing !important.

   Lifted verbatim from the <helmet><style> block of the canvas
   export. The global reset that sat alongside it (* box-sizing,
   body margin, a text-decoration) already lives in fie.css.
   ============================================================ */

#interaction-form-container {
  font-family: 'Jost', sans-serif;
  max-width: 520px;
}

#interaction-form .section { margin-bottom: 22px; }

#interaction-form h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fie-navy);
  margin: 0 0 14px;
}

#interaction-form .field { padding: 0 0 14px; }

#interaction-form label {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--fie-navy);
  margin-bottom: 6px;
}

#interaction-form .field .required-star {
  color: var(--fie-orange);
  margin-left: 4px;
}

#interaction-form .field input,
#interaction-form .field select,
#interaction-form .field textarea {
  width: 100%;
  max-width: 100%;
  padding: 13px 15px;
  border: 1px solid #e3e5e8;
  border-radius: 5px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: #2a2f3a;
  background: var(--fie-white);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#interaction-form .field textarea {
  min-height: 110px;
  resize: vertical;
}

#interaction-form .field input:focus,
#interaction-form .field select:focus,
#interaction-form .field textarea:focus {
  outline: none;
  border-color: var(--fie-orange);
  box-shadow: 0 0 0 3px rgba(237, 104, 60, 0.18);
}

/* checkbox/radio inputs must stay auto-width (Bloomerang consent block) */
#interaction-form .field.checkbox input,
#interaction-form .field.radio input { width: auto; }

/* jQuery-validate messages */
#interaction-form label.error {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #c0392b;
}

#interaction-form input.error,
#interaction-form select.error,
#interaction-form textarea.error { border-color: #c0392b; }

#interaction-form-container .errors {
  border: 1px solid #c0392b;
  border-radius: 5px;
  background: #fdf3f2;
  color: #c0392b;
  font-size: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

/* Submit — site button */
#interaction-form .btn-submit-interaction {
  background: var(--fie-orange);
  color: var(--fie-white);
  font-family: 'Jost', sans-serif;
  font-weight: 800;
  font-size: 16px;
  padding: 15px 34px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: auto;
  max-width: none;
}

#interaction-form .btn-submit-interaction:hover { background: #c94f22; }
#interaction-form .btn-submit-interaction.disabled { opacity: .65; cursor: default; }

/* Success state */
#interaction-form-container .donation-success h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--fie-navy);
  margin: 0 0 10px;
}

#interaction-form-container .donation-success p {
  font-family: 'Jost', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4a5162;
  margin: 0;
}

/* Fallback shown only when JavaScript is unavailable and the form
   can never mount. */
.contact-noscript {
  border: 1px solid #e3e5e8;
  border-radius: 5px;
  background: var(--fie-grey);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5162;
  max-width: 520px;
}

/* Disclosure at the point of collection, under the Bloomerang form. */
.contact-privacy {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5c6472;
}