/* ==========================================================================
   Family Health Project — Bloomerang CRM Hosted Form Stylesheet
   ==========================================================================
   Upload location: Communications > Forms > Form Settings > Select >
   "External CSS Stylesheet" (Select a File button).

   IMPORTANT: this applies to EVERY Bloomerang-hosted form for the org,
   not just one form — there's no per-form CSS in this product.

   Rebuilt against the actual markup (via browser Inspect on the live
   "Pitch In" donation form) — NOT the qg-vendor-* classes from the
   earlier version, which belong to a different Bloomerang product
   (Bloomerang Fundraising / Qgiv) and don't exist on this page.

   Selectors seen in the live markup:
     #wrapper > #content.widgetContent
       header.header (org banner/logo)
       section.title (org name)
       #donation-form-container
         form#donation-form.donation-form
           div.errors
           div.section.donation
             h3
             div.field.radio.{id}.required   (one per preset amount)
             div.field.radio.other-option.required
             div.field.text.other-amount
               input#other-amount.otherAmount.required
           div.section.recurring
           div.section.true-impact
           div.section.contact
           div.section.billing-address
           div.section.comment
           div.section.consent
           div.section.captcha
           div.btn-group
       div#orgInfo.orgInfo

   The site already ships some inline styles for input/select/textarea
   sizing — this file only adds colors, fonts, borders, and spacing on
   top, so it shouldn't need to fight those for width/padding.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=STIX+Two+Text:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* --------------------------------------------------------------------------
   2. BRAND VARIABLES
   -------------------------------------------------------------------------- */
#wrapper {
  --fhp-navy:        #1C1B49;
  --fhp-light-blue:  #C8E5F7;
  --fhp-olive:       #E5E9C9;
  --fhp-pink:        #EFC6DA;
  --fhp-red:         #DC4847;
  --fhp-cream:       #F4F4F0;
  --fhp-white:       #FFFFFF;

  --fhp-font-body:     'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --fhp-font-headline: 'STIX Two Text', Georgia, serif;

  font-family: var(--fhp-font-body);
  background-color: var(--fhp-cream);
  color: var(--fhp-navy);
}

/* --------------------------------------------------------------------------
   3. PAGE / CONTENT CONTAINER
   -------------------------------------------------------------------------- */
#content.widgetContent {
  background-color: var(--fhp-white);
  max-width: 640px;
  margin: 0 auto;
  border-radius: 12px;
  padding: 24px 32px 40px;
  font-family: var(--fhp-font-body);
  color: var(--fhp-navy);
}

header.header {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--fhp-olive);
  margin-bottom: 16px;
}

/* Org name heading, e.g. "Family Health Project" — hidden since the
   logo already carries the org identity and this duplicated it. */
section.title {
  display: none;
}

/* --------------------------------------------------------------------------
   4. FORM SECTIONS & HEADINGS
   -------------------------------------------------------------------------- */
#donation-form-container {
  font-family: var(--fhp-font-body);
}

.donation-form .section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fhp-olive);
}

.donation-form .section:last-of-type {
  border-bottom: none;
}

.donation-form .section h3 {
  font-family: var(--fhp-font-headline);
  color: var(--fhp-navy);
  font-weight: 500;
  font-size: 1.25em;
  margin-bottom: 12px;
}

/* Mission copy inserted between the logo and the "Donation" heading.
   Note: this is CSS-generated content, not real page text — it renders
   fine visually but isn't selectable/indexed the way typed content is.
   If Family Health Project ever needs to edit this copy themselves
   without touching CSS, ask about a self-hosted form instead, which
   gives full control over the actual HTML. */
.donation-form .section.donation h3::before {
  content: "We give new moms in our community $400 a month for their baby\2019s first three years. No conditions, just cash. Because research proves these foundational years are when it matters most.";
  white-space: pre-wrap;
  display: block;
  font-family: var(--fhp-font-body);
  color: var(--fhp-navy);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   5. DONATION AMOUNT RADIO FIELDS
   -------------------------------------------------------------------------- */
.donation-form .field.radio {
  border: 2px solid var(--fhp-olive);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  font-family: var(--fhp-font-body);
  font-weight: 600;
  color: var(--fhp-navy);
}

.donation-form .field.radio:hover {
  border-color: var(--fhp-pink);
  background-color: var(--fhp-pink);
}

.donation-form .field.radio label {
  font-family: var(--fhp-font-body);
  color: var(--fhp-navy);
  font-weight: 600;
}

/* Selected-radio highlight (works in browsers supporting :has) */
.donation-form .field.radio:has(input:checked) {
  border-color: var(--fhp-navy);
  background-color: var(--fhp-navy);
  color: var(--fhp-white);
}

.donation-form .field.radio:has(input:checked) label {
  color: var(--fhp-white);
}

.donation-form input[type="radio"],
.donation-form input[type="checkbox"] {
  accent-color: var(--fhp-red);
  width: 18px;
  height: 18px;
}

/* "Other" amount text input */
.donation-form .field.text.other-amount {
  border: 2px solid var(--fhp-olive);
  border-radius: 8px;
  padding: 10px 14px;
}

.donation-form #other-amount.otherAmount {
  border: 1px solid var(--fhp-olive);
  border-radius: 6px;
  font-family: var(--fhp-font-body);
  font-weight: 600;
  color: var(--fhp-navy);
}

.donation-form #other-amount.otherAmount:focus {
  border-color: var(--fhp-red);
  outline: none;
}

/* --------------------------------------------------------------------------
   6. TEXT / SELECT FIELDS (contact, billing address, comment, etc.)
   -------------------------------------------------------------------------- */
.donation-form .section.recurring,
.donation-form .section.true-impact,
.donation-form .section.contact,
.donation-form .section.billing-address,
.donation-form .section.comment,
.donation-form .section.consent {
  font-family: var(--fhp-font-body);
  color: var(--fhp-navy);
}

.donation-form .field label {
  font-family: var(--fhp-font-body);
  font-weight: 600;
  color: var(--fhp-navy);
  font-size: 0.95em;
}

.donation-form .field input[type="text"],
.donation-form .field input[type="email"],
.donation-form .field input[type="tel"],
.donation-form .field select,
.donation-form .field textarea {
  border: 1px solid var(--fhp-olive);
  border-radius: 6px;
  font-family: var(--fhp-font-body);
  color: var(--fhp-navy);
  background-color: var(--fhp-white);
  transition: border-color 0.15s ease;
}

.donation-form .field input[type="text"]:focus,
.donation-form .field input[type="email"]:focus,
.donation-form .field input[type="tel"]:focus,
.donation-form .field select:focus,
.donation-form .field textarea:focus {
  border-color: var(--fhp-red);
  outline: none;
}

.donation-form .errors {
  color: var(--fhp-red);
  font-family: var(--fhp-font-body);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. PAYMENT AREA
   PCI rules mean the actual card fields (#card-element) can't be
   meaningfully restyled beyond basic sizing that's already set inline —
   this just aligns the surrounding container.
   -------------------------------------------------------------------------- */
.donation-form .section.payment {
  font-family: var(--fhp-font-body);
}

.donation-form #paypal-button-container {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   8. SUBMIT BUTTON
   -------------------------------------------------------------------------- */
.donation-form .btn-group {
  margin-top: 20px;
}

.donation-form .btn-group button,
.donation-form .btn-group input[type="submit"] {
  background-color: var(--fhp-red);
  color: var(--fhp-white);
  font-family: var(--fhp-font-body);
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 0.9em 2em;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.donation-form .btn-group button:hover,
.donation-form .btn-group input[type="submit"]:hover {
  background-color: #c53c3b;
}

.donation-form .btn-group button:active,
.donation-form .btn-group input[type="submit"]:active {
  transform: scale(0.98);
}

#preview-text {
  color: #4a4a6a;
  font-family: var(--fhp-font-body) !important;
}

/* --------------------------------------------------------------------------
   9. ORG INFO / CONTACT PANEL
   -------------------------------------------------------------------------- */
#orgInfo.orgInfo {
  font-family: var(--fhp-font-body);
  color: var(--fhp-navy);
  background-color: var(--fhp-cream);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 24px;
}

/* Phone number hidden from the footer per request.
   The :has() rule also collapses its wrapping <p> so no empty gap is
   left behind; the span rule is a fallback for older browsers. */
#orgInfo.orgInfo p:has(span.phone) {
  display: none;
}

#orgInfo.orgInfo span.phone {
  display: none;
}