/* =========================================================
   EMMAUS WORLDWIDE — NEON DONATION FORM
   Squarespace-compatible compact styling
   ========================================================= */


/* ---------- IMPORT EMMAUS FONT ---------- */

@import url('https://fonts.googleapis.com/css2?family=Pontano+Sans&display=swap');


/* ---------- TYPOGRAPHY ---------- */

/* Match Emmaus Squarespace typography */
#neon-page-1,
#neon-page-2,
#neon-page-1 input,
#neon-page-1 select,
#neon-page-1 textarea,
#neon-page-1 button,
#neon-page-1 label,
#neon-page-2 input,
#neon-page-2 select,
#neon-page-2 textarea,
#neon-page-2 button,
#neon-page-2 label {
  font-family: "Pontano Sans", sans-serif !important;
  letter-spacing: 0 !important;
}

/* Standard form copy */
#neon-page-1,
#neon-page-2,
#neon-page-1 input,
#neon-page-1 select,
#neon-page-1 textarea,
#neon-page-2 input,
#neon-page-2 select,
#neon-page-2 textarea {
  font-size: 1rem !important;
}


/* ---------- PAGE 2: TWO-COLUMN LAYOUT ---------- */

/*
   Neon already identifies its intended half-width fields
   with col-md-6. Keep those fields side-by-side even when
   the Squarespace embed is narrower than Bootstrap's
   normal md breakpoint.
*/

#neon-page-2 .neonfront-form > .neonfront_element.col-md-6 {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
}


/* ---------- COMPACT GRID SPACING ---------- */

/* Reduce horizontal and vertical gaps between fields */
#neon-page-2 .neonfront-form {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0.75rem;
}


/* ---------- LABELS ---------- */

#neon-page-2 .form-label {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  margin-bottom: 0.25rem !important;
}


/* ---------- TEXT INPUTS / SELECTS ---------- */

/*
   Only target standard text/select controls.
   Do NOT touch radio buttons or checkboxes.
*/

#neon-page-2 input.form-control,
#neon-page-2 select.form-select,
#neon-page-2 textarea.form-control {
  min-height: 40px !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  line-height: 1.4 !important;
}


/* ---------- CHECKBOX LABELS ---------- */

#neon-page-2 .form-check-label {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}


/* ---------- SMALL / HELPER TEXT ---------- */

/* Match Squarespace Paragraph 3 */
#neon-page-1 .form-text,
#neon-page-1 small,
#neon-page-2 .form-text,
#neon-page-2 small,
#neon-page-2 .invalid-feedback {
  font-family: "Pontano Sans", sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}


/* ---------- DONATION SUMMARY ---------- */

#neon-page-2 .mgs-summary-bar {
  font-family: "Pontano Sans", sans-serif !important;
}


/* ---------- BUTTON TYPOGRAPHY ---------- */

#neon-page-1 button,
#neon-page-2 button {
  font-family: "Pontano Sans", sans-serif !important;
}


/* ---------- SECURITY FOOTER ---------- */

#neon-page-2 .neonfront-donation-security-footer {
  font-family: "Pontano Sans", sans-serif !important;
  font-size: 0.9rem !important;
}


/* ---------- TRUE MOBILE LAYOUT ---------- */

/*
   The Squarespace desktop embed is narrow, but we still
   want two columns there. Only stack fields when the
   actual available width becomes phone-sized.
*/

@media (max-width: 480px) {

  #neon-page-2 .neonfront-form > .neonfront_element.col-md-6 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

}