:root {
  /* ground — plain white, matching every other page on the site */
  --wall: #ffffff;
  --wall-deep: #f5f5f5;  /* light neutral — scrollbar track */

  /* ink + paper — sampled from the live site's actual text colors */
  --ink: #4d4d4d;       /* site's heading / primary text color */
  --ink-soft: #767676;  /* site's body-copy secondary text color */
  --ink-faint: #999999;
  --paper: #ffffff;
  --paper-line: #e6e6e6;

  /* beacon = "you are here" / interactive — HRF's real sky blue */
  --beacon: #00aeef;
  --beacon-ink: #003a4d;

  /* brand magenta — #c5197f is a ~13% deepened version of the live
     site's #e31d93, needed to clear 4.5:1 as text/icon color (the
     literal hex measures 4.32:1 on white). Vivid stays for large
     fills paired with white/dark text, never as small text itself. */
  --brand-pink: #c5197f;
  --brand-pink-vivid: #e31d93;

  /* per-method accents — alternate the two real brand hues */
  --w-mail: var(--beacon-ink);
  --w-zelle: var(--brand-pink);
  --w-venmo: var(--beacon-ink);
  --w-online: var(--brand-pink);
  --w-stock: var(--beacon-ink);

  /* status system — shape differs from color, never color alone */
  --status-nofee: #1f7a4d;
  --status-nofee-ink: #0f3d26;
  --status-fee: #9a3412;
  --status-fee-ink: #4d1a09;

  --radius-plate: 10px;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  --shadow-plate: 0 1px 0 rgba(44,51,56,0.06), 0 6px 16px -8px rgba(44,51,56,0.22);
  --shadow-lift: 0 2px 0 rgba(44,51,56,0.08), 0 14px 28px -12px rgba(44,51,56,0.3);

  --ease-signage: cubic-bezier(0.16, 1, 0.3, 1);

  /* on-dark surface (Information Desk) */
  --desk-text: #cfd3d8;

  /* donate accent — brand orange. Matches charitable_mini_widget accent_color.
     Note: white text on #ff6b00 is 2.86:1 (below WCAG AA 4.5:1). */
  --donate-accent: #ff6b00;
  --donate-accent-hover: #e05e00;
  --donate-accent-soft: #fff2e8;
  --donate-accent-ink: #7a2e00;    /* 8.62:1 on soft */

  /* WCAG AA-safe variants of brand fills that carry white text */
  --band-ways: #0093cc;   /* #00aeef = 2.53:1 on white; this = 3.47:1 (large text) */
  --tab-active: #007f30;  /* #00ae42 = 2.94:1; this = 5.15:1 (13px bold) */
  --link: #006a9e;        /* theme #248cc8 = 3.71:1; this = 5.91:1 */

  /* spacing rhythm for the ways-to-give panel */
  --space-card: clamp(2rem, 3vw, 3.2rem);
  --space-stack: 1.6rem;
}

#main{
  padding: 0 !important;
}

/* Vantage sets #page-wrapper { overflow: hidden } to contain full-bleed sections.
   hidden makes it a scroll container, which disables position: sticky inside
   (the ways-to-give photo layer). clip contains overflow the same way without that. */
body:has(.donate-page) #page-wrapper {
  overflow: visible;
  overflow-x: clip;
}

.donate-page, .donate-page *, .donate-page *::before, .donate-page *::after { box-sizing: border-box; }
html:has(.donate-page) {
  scroll-behavior: smooth;
}
.donate-page {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.donate-page) {
    scroll-behavior: auto;
  }
  .donate-page *, .donate-page *::before, .donate-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* browser surfaces, scoped to the donate page only */
.donate-page ::selection { background: var(--beacon); color: #ffffff; }
.donate-page ::-webkit-scrollbar { width: 12px; height: 12px; }
.donate-page ::-webkit-scrollbar-track { background: var(--wall-deep); }
.donate-page ::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 8px; border: 3px solid var(--wall-deep); }
/* focus ring needs 3:1 against its surface — beacon cyan was 2.53:1 on white */
.donate-page :focus-visible {
  outline: 3px solid var(--beacon-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.donate-page .photo-hero :focus-visible,
.donate-page .desk :focus-visible { outline-color: #ffffff; }

.donate-page .wrap {
  max-width: 100rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ============================================================
   Photo hero / banner
   ============================================================ */

.photo-hero {
  position: relative;
  overflow: hidden;
  height: clamp(380px, 46vw, 640px);
  background: var(--ink);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.photo-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 22%;
}
.photo-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,13,15,0.62) 0%, rgba(11,13,15,0.5) 32%, rgba(11,13,15,0.24) 58%, rgba(11,13,15,0) 78%);
}
.photo-hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.photo-hero-copy {
  max-width: 60rem;
  padding-block: 2rem;
}
.photo-hero-lede {
  margin: 0;
  color: #fff;
  font-size: clamp(3.8rem, 7vw, 6.5rem);
  line-height: 1.15;
  text-wrap: balance;
}
.photo-hero-sub {
  margin: 1.1rem 0 0;
  max-width: 36ch;
  font-size: 2rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.86);
}
.photo-hero-cta {
  margin-top: 2.6rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--donate-accent);
  color: #ffffff;
  font-weight: 800;
  font-size: 2rem;
  padding: 1.8rem 4rem;
  border-radius: var(--radius-plate);
  text-decoration: none;
  box-shadow: var(--shadow-plate);
  transition: transform 0.2s var(--ease-signage), box-shadow 0.2s var(--ease-signage), background-color 0.2s var(--ease-signage);
}
.photo-hero-cta:focus { background: var(--donate-accent); color: #ffffff; }
.photo-hero-cta:hover { background: var(--donate-accent-hover); transform: translateY(-3px); box-shadow: var(--shadow-lift); color: #ffffff; }
.photo-hero-cta svg { width: 18px; height: 18px; }

/* ============================================================
   Page heading band
   ============================================================ */

.page-heading-band {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--brand-pink-vivid);
  padding-block: 1.75rem;
}
.page-heading-band__ways { background: var(--band-ways); }

.page-heading-band h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.15;
  text-align: left;
  margin: 0.6em 0;
}

/* ============================================================
   Hero / Directory board
   ============================================================ */

.hero {
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  background: #fee6eb;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.hero-inner { position: relative; }

.ways-to-give {
  position: relative;
  background: #e5f7fd;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: clip; /* clip, not hidden: hidden would make this the sticky scroll container */
}
/* Photo lives on a viewport-height layer that sticks while scrolling through the section.
   `cover` on the section itself scaled the image by the section's height, so opening the
   honorarium fields (or any content change) re-scaled and shifted the photo. */
.ways-to-give::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  margin-bottom: -100vh;
  background: url("../images/donation_background.jpg") center / cover no-repeat;
  pointer-events: none;
}
.ways-to-give > .wrap {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
}

.hero-copy {
  margin-top: 0;
  width: 100%;
  font-family: "Noto Sans", sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.hero-copy p { margin: 0 0 1rem; }

/* ---- ways-to-give bento grid ---- */

/* light blue panel so copy and cards read over the section photo */
.ways-to-give .corridor {
  background: #e5f7fd;
  padding: var(--space-card);
}

.give-intro {
  margin-bottom: var(--space-card);
}
.give-intro-text { width: 100%; }
.give-intro-sub {
  margin: 0;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.give-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.give-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack);
  grid-column: 1 / -1;
  background: var(--paper);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-card);
  border: 1.5px solid #00aeef;
}
.give-card > p { margin: 0; }

.give-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.4rem;
  width: 100%;
  margin-bottom: 0.4rem;
}
/* flatten group so icon, title and status share the head grid */
.give-card-title-group { display: contents; }
.give-card-head .status {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: start;
}
.give-card-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--marker-color, var(--ink)) 12%, white);
  color: var(--marker-color, var(--ink));
}
.give-card-icon svg { width: 44px; height: 44px; }
/* per-method colors; Zelle and Venmo use their brand marks and colors */
.give-card-icon--card  { background: #f9d3e8; color: var(--brand-pink); }
.give-card-icon--zelle { background: #6d1ed4; color: #fff; }
.give-card-icon--venmo { background: #008cff; color: #fff; }
.give-card-icon--stock { background: #cdf2d6; color: #16782f; }
.give-card-icon--mail  { background: #f4845f; color: #1f1f1f; }
.give-card-icon--zelle svg,
.give-card-icon--venmo svg { width: 40px; height: 40px; }
.give-card-icon--stock svg { width: 48px; height: 48px; }

/* "Express Donate" / "Other Ways To Give" — outlined box with a label on its top edge */
.give-group {
  --give-group-color: #0077b6; /* white label text 4.9:1 */
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.6rem;
  padding: clamp(2.8rem, 3vw, 3.2rem) clamp(1rem, 1.5vw, 1.6rem) clamp(1rem, 1.5vw, 1.6rem);
  border: 3px solid var(--give-group-color);
  border-radius: var(--radius-plate);
}
.give-group-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.5rem 2.4rem;
  background: var(--give-group-color);
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* h3 under the "Ways to Give" h2 — reset theme heading styles to keep the card look */
.give-card-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-family: inherit;
  color: var(--ink);
  line-height: 1.1;
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: normal;
  text-transform: none;
}
.give-card-lede { font-size: 1.7rem; line-height: 1.5; }
.give-card-address {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
}
.give-card-note {
  margin-top: auto !important;
  padding-top: var(--space-stack);
  border-top: 1px dashed var(--paper-line);
  font-size: 1.5rem;
  line-height: 1.6;
  width: 100%;
}
.give-card-note a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.give-card-note a:hover { color: var(--beacon-ink); }
.give-card .qr-placeholder { margin-bottom: 0; }

@media (min-width: 761px) {
  .give-card--wide { grid-column: span 12; }
  .give-card--narrow { grid-column: span 6; }
}

/* status badges — shape differs, never color alone */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem 0.25rem 0.45rem;
  line-height: 1;
}
.status svg { width: 9px; height: 9px; flex: none; }
.status--nofee {
  background: color-mix(in srgb, var(--status-nofee) 14%, white);
  color: var(--status-nofee-ink);
  border: 1.5px solid var(--status-nofee);
  border-radius: var(--radius-pill);
}
.status--fee {
  background: color-mix(in srgb, var(--status-fee) 12%, white);
  color: var(--status-fee-ink);
  border: 1.5px solid var(--status-fee);
  border-radius: var(--radius-pill);
}


.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  background: var(--ink);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1.5rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease-signage), transform 0.15s var(--ease-signage);
}
.copy-btn:hover, .copy-btn:focus { background: var(--marker-color, var(--ink-soft)); color: #fff; }
.copy-btn:active { transform: scale(0.97); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn[data-copied="true"] { background: var(--status-nofee); }

/* QR code display */
.qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 1rem;
  border-radius: var(--radius-plate);
  padding: var(--space-stack);
}
.qr-placeholder-image {
  width: 240px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  flex: none;
  border: 1.5px solid var(--paper-line);
  border-radius: 4px;
  background: var(--paper);
  padding: 10px;
  display: block;
}

/* ============================================================
   Charitable mini donation widget (Give Online card)
   Plugin marks selected state !important — overrides must match.
   ============================================================ */

.give-card .charitable_mini_widget { width: 100%; box-shadow:none; }

/* Widget root is the grid; the amounts container is display:contents so the
   custom-amount field (a sibling the plugin keeps outside the amounts, which it
   re-renders on every tab switch) can sit on the same row as "Other". */
.give-card .charitable-mini-widget {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  box-shadow: none;
}
.give-card .charitable-mini-widget > * { grid-column: 1 / -1; margin: 0; }
.give-card .charitable-mini-widget > .charitable-mini-widget__amounts { display: contents; }
.give-card .charitable-mini-widget > .charitable-mini-widget__tabs { margin-bottom: 4px; }
.give-card .charitable-mini-widget > .charitable-mini-widget__cta { margin-top: 4px; }
/* empty live region still takes a grid row — pull the gap back rather than hide it */
.give-card .charitable-mini-widget > .charitable-mini-widget__impact:empty { margin-top: -12px; }

/* widget accent — blue for Donate Now, selected amount and tabs (hero CTA stays orange).
   Matches charitable_mini_widget accent_color. White on #0093cc = 3.47:1. */
.give-card .charitable-mini-widget,
.give-card .charitable_mini_widget {
  --donate-accent: #0093cc;
  --donate-accent-hover: #007aab;
  --donate-accent-soft: #e5f4fa;
  --donate-accent-ink: #005a80;  /* 6.8:1 on soft */
  --tab-active: #0093cc;
}


.give-card .charitable-mini-widget__tabs {
  border: 1px solid var(--tab-active);
  border-radius: var(--radius-plate);
  margin-bottom: var(--space-stack);
  width: 50%;
}
.give-card .charitable-mini-widget .charitable-mini-widget__tab {
  min-height: 34px;
  padding: 1.2rem 0.8rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink);
}
/* plugin sets active tab to accent_color with !important */
.give-card .charitable-mini-widget .charitable-mini-widget__tab.charitable-mini-widget__tab--active,
.give-card .charitable-mini-widget .charitable-mini-widget__tab.charitable-mini-widget__tab--active:hover,
.give-card .charitable-mini-widget .charitable-mini-widget__tab.charitable-mini-widget__tab--active:focus,
.give-card .charitable-mini-widget .charitable-mini-widget__tab.charitable-mini-widget__tab--active:active {
  background: var(--tab-active) !important;
  background-color: var(--tab-active) !important;
  color: #fff !important;
}
.give-card .charitable-mini-widget .charitable-mini-widget__tab:hover:not(.charitable-mini-widget__tab--active),
.give-card .charitable-mini-widget .charitable-mini-widget__tab:focus:not(.charitable-mini-widget__tab--active) {
  background-color: color-mix(in srgb, var(--tab-active) 10%, #fff);
  color: var(--ink);
}
/* theme washes every button on hover/focus (opacity .75), adds a grey focus
   gradient and a white inset shadow on :active — strip those from widget buttons */
.give-card .charitable-mini-widget button,
.give-card .charitable-mini-widget button:hover,
.give-card .charitable-mini-widget button:focus,
.give-card .charitable-mini-widget button:active {
  opacity: 1;
  background-image: none;
  box-shadow: none;
}
.give-card .charitable-mini-widget .charitable-mini-widget__tab,
.give-card .charitable-mini-widget .charitable-mini-widget__tab:hover,
.give-card .charitable-mini-widget .charitable-mini-widget__tab:focus,
.give-card .charitable-mini-widget .charitable-mini-widget__tab:active { border: 0; }
.give-card .charitable-mini-widget .charitable-mini-widget__cta:disabled,
.give-card .charitable-mini-widget .charitable-mini-widget__cta--disabled { opacity: 0.5; }

.give-card .charitable-mini-widget .charitable-mini-widget__amounts .charitable-mini-widget__amount { grid-column: auto; }
/* "Other" fills its row until chosen, then shares it with the custom-amount field.
   Specificity must beat the plugin's :last-child:nth-child() span rules. */
.give-card .charitable-mini-widget .charitable-mini-widget__amounts .charitable-mini-widget__amount.charitable-mini-widget__amount--other:last-child { grid-column: 1 / -1; }
.give-card .charitable-mini-widget .charitable-mini-widget__amounts .charitable-mini-widget__amount.charitable-mini-widget__amount--other.charitable-mini-widget__amount--selected:last-child { grid-column: 1 / span 1; }
.give-card .charitable-mini-widget > .charitable-mini-widget__other-wrap { grid-column: 2 / -1; }
/* "Other" and the custom-amount field share one row; pin both to the same height
   so revealing the field doesn't grow the row (the field's "$" line-height made it taller). */
.give-card .charitable-mini-widget { --cmw-other-row: 52px; }
.give-card .charitable-mini-widget .charitable-mini-widget__amounts .charitable-mini-widget__amount.charitable-mini-widget__amount--other {
  height: var(--cmw-other-row);
  min-height: 0;
  padding-block: 0;
}
.give-card .charitable-mini-widget .charitable-mini-widget__other-input-wrap {
  height: var(--cmw-other-row);
  box-sizing: border-box;
}
.give-card .charitable-mini-widget .charitable-mini-widget__other-input-wrap .charitable-mini-widget__currency-symbol { line-height: 1; }
/* the plugin's error line keeps a 4px top margin even when empty */
.give-card .charitable-mini-widget .charitable-mini-widget__error:empty { margin: 0; }
.give-card .charitable-mini-widget .charitable-mini-widget__other-input-wrap .charitable-mini-widget__other-input {
  height: 100%;
  padding-block: 0;
}
.give-card .charitable-mini-widget .charitable-mini-widget__amount--other {
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}
.give-card .charitable-mini-widget .charitable-mini-widget__amount {
  position: relative;
  align-items: flex-start;
  min-height: 0;
  padding: 16px 48px 16px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid #c8c8c8;
  border-radius: var(--radius-plate);
  text-align: left;
  transition: border-color 0.18s var(--ease-signage), background-color 0.18s var(--ease-signage), box-shadow 0.18s var(--ease-signage);
}
/* radio circle, top-right */
.give-card .charitable-mini-widget .charitable-mini-widget__amount::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 21px;
  height: 21px;
  border: 1.5px solid #8c8c8c; /* 3.36:1 — unselected radio must read as a control */
  border-radius: 50%;
  background: transparent center / 13px no-repeat;
}
.give-card .charitable-mini-widget .charitable-mini-widget__amount:hover:not(.charitable-mini-widget__amount--selected) {
  border-color: var(--donate-accent);
  background-color: var(--paper);
  color: var(--ink);
}
.give-card .charitable-mini-widget .charitable-mini-widget__amount.charitable-mini-widget__amount--selected {
  background: var(--donate-accent-soft) !important;
  border: 1.5px solid var(--donate-accent) !important;
  color: var(--donate-accent-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--donate-accent);
}
.give-card .charitable-mini-widget .charitable-mini-widget__amount--selected::after {
  border-color: var(--donate-accent);
  background-color: var(--donate-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.give-card .charitable-mini-widget__amount-number {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.give-card .charitable-mini-widget__amount--selected .charitable-mini-widget__amount-number { color: var(--donate-accent-ink); }

.give-card .charitable-mini-widget__other-input-wrap {
  border: 1.5px solid #8c8c8c;
  border-radius: var(--radius-plate);
}
/* focus lives on the wrapper (matches the selected amount ring), not the inner input */
.give-card .charitable-mini-widget__other-input-wrap:focus-within {
  border-color: var(--donate-accent);
  box-shadow: inset 0 0 0 1.5px var(--donate-accent);
}
.give-card .charitable-mini-widget__currency-symbol {
  padding: 0 4px 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
  color: var(--ink);
  background: transparent;
  border-right: 0;
}
/* theme adds a grey border + white box to inputs; page ring would draw inside the wrapper */
.give-card .charitable-mini-widget .charitable-mini-widget__other-input,
.give-card .charitable-mini-widget .charitable-mini-widget__other-input:focus,
.give-card .charitable-mini-widget .charitable-mini-widget__other-input:focus-visible {
  padding: 12px 14px 12px 4px;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.give-card .charitable-mini-widget__other-input::placeholder { color: var(--ink-soft); opacity: 1; }

.give-card .charitable-mini-widget .charitable-mini-widget__cta {
  min-height: 52px;
  padding: 1.4rem 2rem;
  font-family: "Fjalla One", "Arial Narrow", sans-serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  border-radius: var(--radius-plate);
}
/* plugin's `.charitable-mini-widget button:focus` out-ranks the CTA and turns it white */
.give-card .charitable-mini-widget .charitable-mini-widget__cta:focus {
  background-color: var(--donate-accent);
  color: #fff;
}
.give-card .charitable-mini-widget .charitable-mini-widget__cta:hover {
  background-color: var(--donate-accent-hover);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .give-card .charitable-mini-widget .charitable-mini-widget__amount { transition: none; }
}

/* ============================================================
   Information Desk (Matching Gifts)
   ============================================================ */

.desk {
  background: var(--ink);
  color: var(--wall);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.desk-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.desk-icon {
  width: 56px;
  height: 56px;
  color: var(--beacon);
  flex: none;
}
.desk-icon svg { width: 100%; height: 100%; }
.desk h2 {
  
  font-weight: 800;
  color: #fff;
  margin: 0;
  font-size: clamp(2.375rem, 2.6vw, 3.75rem);
  margin-bottom: 0.8rem;
}
.desk p {
  color: var(--desk-text);
  max-width: 56ch;
  margin: 0 0 1rem;
}
.desk-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.2rem; }
.desk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid #fff;
  color: #fff;
  text-decoration: none;
  
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1.5rem 2.4rem;
  border-radius: var(--radius-pill);
  transition: border-color 0.2s var(--ease-signage), background 0.2s var(--ease-signage);
}
.desk-btn:hover { border-color: var(--beacon); background: color-mix(in srgb, var(--beacon) 12%, transparent); color: #fff; }
.desk-btn svg { width: 15px; height: 15px; }

/* ============================================================
   Entrance motion (settle-into-place, staggered, once)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-visible {
  animation: signLock 0.6s var(--ease-signage) forwards;
}
@keyframes signLock {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 760px) {
  .desk-inner { grid-template-columns: 1fr; }
  .give-card .charitable-mini-widget { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .give-card .charitable-mini-widget .charitable-mini-widget__amount { padding: 14px 40px 14px 14px; }
  .give-card .charitable-mini-widget .charitable-mini-widget__amount::after { top: 13px; right: 12px; }
  .give-card .charitable-mini-widget__amount-number { font-size: 18px; }
  .give-card .charitable-mini-widget__tabs { width: 100%; }
  .give-card-title { font-size: 2.2rem; }
  .give-card-icon { width: 5.6rem; height: 5.6rem; }
  .give-card-icon svg { width: 34px; height: 34px; }
  .give-card-icon--zelle svg,
  .give-card-icon--venmo svg { width: 30px; height: 30px; }
  .give-group-label { font-size: 1.3rem; padding-inline: 1.6rem; }
  .photo-hero {
    height: auto;
    min-height: 520px;
  }
  .photo-hero-scrim {
    background: linear-gradient(180deg, rgba(11,13,15,0.55) 0%, rgba(11,13,15,0.55) 40%, rgba(11,13,15,0.92) 100%);
  }
  .photo-hero-inner { align-items: flex-end; }
  .photo-hero-copy { max-width: none; padding-block: 2.75rem 2.25rem; }
}
/* ============================================================
   Credit card card — copy left (35%), donation widget right (65%)
   Stacks below 1024px, where a 65% column is too narrow for 3 amounts.
   ============================================================ */

@media (min-width: 1024px) {
  .give-card--wide .charitable-mini-widget { --cmw-other-row: 44px; }
  .give-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-card);
    row-gap: var(--space-stack);
    align-items: start;
  }
  .give-card--wide > .give-card-head { grid-column: 1; grid-row: 1; }
  .give-card--wide > .give-card-lede { grid-column: 1; grid-row: 2; }
  .give-card--wide > .charitable_mini_widget { grid-column: 2; grid-row: 1 / span 2; }

  /* compact widget scale to fit the narrower column */
  .give-card--wide .charitable-mini-widget { gap: 10px; }
  .give-card--wide .charitable-mini-widget .charitable-mini-widget__tab {
    min-height: 32px;
    padding: 0.8rem 0.6rem;
    font-size: 1.1rem;
  }
  .give-card--wide .charitable-mini-widget .charitable-mini-widget__amount { padding: 12px 36px 12px 12px; }
  .give-card--wide .charitable-mini-widget .charitable-mini-widget__amount::after {
    top: 50%;
    right: 12px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-size: 11px;
  }
  .give-card--wide .charitable-mini-widget__amount-number { font-size: 16px; }
  .give-card--wide .charitable-mini-widget .charitable-mini-widget__amount--other { font-size: 1.3rem; }
  .give-card--wide .charitable-mini-widget__currency-symbol { font-size: 16px; line-height: 42px; }
  .give-card--wide .charitable-mini-widget .charitable-mini-widget__other-input { padding-block: 8px; font-size: 16px; }
  .give-card--wide .charitable-mini-widget .charitable-mini-widget__cta {
    min-height: 44px;
    padding: 1rem 1.6rem;
  }
}

/* ============================================================
   Honorarium (in honor / in memory of) — inside the mini widget
   ============================================================ */

.hrf-honorarium { font-size: 1.5rem; color: var(--ink); }
.hrf-honorarium__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.hrf-honorarium input[type="checkbox"],
.hrf-honorarium input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--donate-accent);
}
.hrf-honorarium__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.2rem;
  margin: 0.4rem 0 0;
  padding: var(--space-stack);
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-plate);
  background: #fafafa;
}
.hrf-honorarium__fields[hidden] { display: none; }
.hrf-honorarium__legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: 800;
  font-size: 1.5rem;
  grid-column: 1 / -1;
}
.hrf-honorarium__types {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.hrf-honorarium__type {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 36px;
  cursor: pointer;
}
.hrf-honorarium__field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.hrf-honorarium__field--full { grid-column: 1 / -1; }
.hrf-honorarium__field label { font-size: 1.3rem; font-weight: 700; }
.hrf-honorarium__req { color: var(--status-fee); }
.donate-page .hrf-honorarium__field input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 1.2rem;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid #8c8c8c;
  border-radius: var(--radius-plate);
  box-shadow: none;
}
.donate-page .hrf-honorarium__field input:focus {
  border-color: var(--donate-accent);
  box-shadow: inset 0 0 0 1.5px var(--donate-accent);
}
.donate-page .hrf-honorarium__field input[aria-invalid="true"] { border-color: #b3261e; }
.hrf-honorarium__error { margin: 0; font-size: 1.3rem; color: #b3261e; }
.hrf-honorarium__error:empty { display: none; }
.hrf-honorarium__subhead {
  grid-column: 1 / -1;
  margin: 0.6rem 0 -0.2rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 760px) {
  .hrf-honorarium__fields { grid-template-columns: minmax(0, 1fr); }
}

/* PayPal payment tabs in the donation modal: the theme's button:focus adds a
   grey background and border. Keep the tab flat; active keeps its underline. */
.charitable-paypal-payment-method-tab:focus {
  background: transparent;
  border-width: 0 0 2px;
  border-color: transparent;
}

.charitable-paypal-payment-method-tab.active:focus {
  border-bottom-color: #0070ba;
}

/* Show "Pay with Card" before "PayPal" (markup is PayPal, Card). flex-end
   keeps the reversed tabs left-aligned. */
.charitable-paypal-payment-tabs {
  flex-direction: row-reverse;
  justify-content: flex-end;
}


#charitable-meta-fields{
  margin-top: 0;
  border-top: 0;
}