/* giving.css — starter styles; match colors/fonts to the existing FECF theme */
.giving-banner { background-size: cover; background-position: center; min-height: 260px; display: flex; align-items: center; }
.giving-banner__inner { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.giving-banner h1 { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }

.giving-intro, .giving-accordion, .donor-wall { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }

.giving-panel { border: 1px solid #cfd8d1; border-radius: 6px; margin-bottom: 1rem; }
.giving-panel > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; font-size: 1.15rem; }
.giving-panel > summary:focus-visible { outline: 3px solid #1f4e2c; outline-offset: 2px; }
.giving-panel__body { padding: 0 1.25rem 1.25rem; }

/* ---- Tier boxes: the Freeform radio group, styled as a 2x2 grid ----
   giving.js adds .tier-grid to .input-group-one-line and .tier-option to each label.
   Selectors are scoped to .freeform-form so they win over Freeform's theme CSS. */
.freeform-form .freeform-row .freeform-fieldtype-radios .input-group-one-line.tier-grid,
.freeform-form .input-group-one-line.tier-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem; margin: .75rem 0 1.5rem;
  max-width: 640px; /* keeps the 2x2 compact; remove for full width */
}

.freeform-form .tier-option {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; padding: 1.25rem; margin: 0;
  border: 2px solid #1f4e2c; border-radius: 6px; background: #fff;
  text-align: center; cursor: pointer; font-weight: 700; line-height: 1.3;
  width: auto; min-width: 0; box-sizing: border-box;
}
.freeform-form .tier-option .tier-range { display: block; font-weight: 400; }

/* Hide the radio visually but keep it focusable and readable by screen readers */
.freeform-form .tier-option input.freeform-input[type="radio"] {
  position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important;
  margin: 0; padding: 0; pointer-events: none;
}
.freeform-form .tier-option:hover { background: #eef3ef; }
.freeform-form .tier-option.is-checked { background: #1f4e2c; color: #fff; }
.freeform-form .tier-option:focus-within { outline: 3px solid #1f4e2c; outline-offset: 3px; }

@media (max-width: 520px) {
  .freeform-form .freeform-row .freeform-fieldtype-radios .input-group-one-line.tier-grid,
  .freeform-form .input-group-one-line.tier-grid { grid-template-columns: 1fr !important; }
}

/* ---- Donation amount field ---- */
.freeform-form [data-field-container="baseAmount"] .freeform-label { font-weight: 700; font-size: 1.15rem; }

.freeform-form .amount-wrap { position: relative; max-width: 360px; margin-top: .25rem; }
.freeform-form .amount-symbol {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.75rem; font-weight: 700; color: #1f4e2c; pointer-events: none;
}
.freeform-form .amount-wrap input.freeform-input[type="number"] {
  width: 100%; box-sizing: border-box; padding: .75rem 1rem .75rem 2.5rem;
  font-size: 1.75rem; font-weight: 700; color: #1f4e2c;
  border: 2px solid #1f4e2c; border-radius: 6px; background: #fff;
  -moz-appearance: textfield; appearance: textfield;
}
.freeform-form .amount-wrap input[type="number"]::-webkit-outer-spin-button,
.freeform-form .amount-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.freeform-form .amount-wrap input[type="number"]::placeholder { color: #9aaa9f; font-weight: 400; }
.freeform-form .amount-wrap input[type="number"]:focus { outline: 3px solid rgba(31, 78, 44, .35); outline-offset: 2px; }
.freeform-form .amount-hint { margin: .4rem 0 0; color: #555; font-size: .95rem; }

/* Fee-cover total, shown only when it has text */
.freeform-form .fee-total { margin: .5rem 0 0; font-weight: 700; }
.freeform-form .fee-total:not(:empty) {
  background: #eef3ef; border-left: 4px solid #1f4e2c; border-radius: 4px; padding: .6rem .9rem;
}

/* donor wall */
.donor-tier { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #cfd8d1; border-radius: 6px; min-height: 5rem; }
.donor-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1rem; }