@import url("https://use.typekit.net/nmd4drm.css"); /* the gala's typekit: sweet-sans-pro + griffon */

/* ==========================================================================
   Chabad of Milford-HCW — Centennial Fund fundraising campaign
   Reskinned to the "100 Years Strong" Gala design language.

   Pulled from the gala's own stylesheet, nothing invented:
     • white canvas, navy #264478, gold #D3A728 (hover #A8851F)
     • the nautical line-art at FULL saturation framing the hero,
       the gold seal as the dominant hero element (gala scale)
     • floating rounded white nav bar over the art (gala chrome)
     • white ↔ navy full-bleed banding rhythm (goal band, footer)
     • sweet-sans-pro everywhere, uppercase + wide letter-spacing;
       griffon serif for large display section titles
     • the signature framed pill: navy button in a white-gap / navy ring
       (box-shadow: 0 0 0 3px #fff, 0 0 0 5px #264478); hover lifts to gold
   Loaded via the Fundraising App "CSS URL" field.
   ========================================================================== */

:root {
  --cf-navy: #264478; /* the gala navy */
  --cf-gold: #d3a728; /* the gala interactive/accent gold */
  --cf-gold-2: #b8901d; /* darker gold for hairlines / tagline */
  --cf-gold-dk: #a8851f; /* the gala button-hover gold */
  --cf-gold-lt: #e2bd4e; /* readable gold for text on navy (brand gold is only 4.3:1 there) */
  --cf-ink: #333333; /* body copy */

  --cf-serif: "griffon", serif; /* large display titles only */
  --cf-sans: "sweet-sans-pro", sans-serif; /* everything else */

  --cf-banner: url("https://w3.chabad.org/media/images/1374/Onrb13748278.jpg");
  --cf-seal: url("https://w2.chabad.org/media/images/1374/xUmy13748142.png");
  --cf-logo: url("https://w2.chabad.org/media/images/1374/DYwD13748140.png");
}

/* ---- Canvas — white, like the gala ------------------------------------- */
html body.cco_body {
  background: #fff;
}
.fs-root .fs-container,
.fs-root .fs-about-partners-container,
.fs-root .fs-campaign-info {
  background: #fff;
}
html body.cco_body .fs-container {
  position: relative;
}

/* Font normalization — force the gala sans onto every text element (beats the
   theme's `html body.cco_body p{Muli}`, Patua One on amounts, Raleway on the
   rest). Icon glyphs live on child <span class="glyphicon">/.fa and keep their
   own font rules, so they are untouched. Griffon display titles are set with
   higher-specificity rules below and win over this. */
html body.cco_body .fs-root,
html body.cco_body .fs-root h1,
html body.cco_body .fs-root h2,
html body.cco_body .fs-root h3,
html body.cco_body .fs-root h4,
html body.cco_body .fs-root h5,
html body.cco_body .fs-root h6,
html body.cco_body .fs-root p,
html body.cco_body .fs-root em,
html body.cco_body .fs-root strong,
html body.cco_body .fs-root li,
html body.cco_body .fs-root td,
html body.cco_body .fs-root label,
html body.cco_body .fs-root address,
html body.cco_body .fs-root .fs-about-text,
html body.cco_body .fs-root .fs-about-text *,
html body.cco_body .fs-root .fs-goal .fs-total-raised-amount,
html body.cco_body .fs-root .fs-goal .fs-percent-complete-amount,
html body.cco_body .fs-root .fs-goal-amount,
html body.cco_body .fs-root input,
html body.cco_body .fs-root select,
html body.cco_body .fs-root textarea {
  font-family: var(
    --cf-sans
  ); /* font only — never color here (colors are set
                                    per-context so dark bands like the footer keep
                                    their own white text) */
}
.fs-root .fs-about-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--cf-ink);
}

/* ---- The framed pill (the gala's signature button) --------------------- */
.fs-root .fs-header .donate-button .donate-button-text,
.fs-root .fs-donate .button-wrapper .btn,
.fs-root .fs-donate a.btn,
.fs-root .fs-donate .js-action-open-donate.btn,
.fs-root .fs-partners .js-action-open-donate,
.fs-root .fs-partners #temporaryDonateButton,
.fs-root .fs-partners .fs-btn-view-all,
.fs-root .fs-top-tools .js-action-open-donate,
.fs-root .fs-top-tools a.common-donate,
html body.cco_body .fs-full-donate-form.js-donate-form .fs-btn-donate {
  background: var(--cf-navy);
  color: #fff !important;
  font-family: var(--cf-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 15px;
  border: 0;
  border-radius: 50px;
  padding: 13px 30px;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--cf-navy);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease;
}
/* hover — the gala never shifts color on hover: same navy fill, ring widens
   5px→6px, 2px lift, opacity .9 (verified from its stylesheet) */
.fs-root
  .fs-header
  .donate-button:not(.about-modal-btn)
  .donate-button-text:hover,
.fs-root .fs-donate .button-wrapper .btn:hover,
.fs-root .fs-donate a.btn:hover,
.fs-root .fs-partners #temporaryDonateButton:hover,
.fs-root .fs-partners .js-action-open-donate:hover,
.fs-root .fs-partners .fs-btn-view-all:hover,
.fs-root .fs-top-tools .js-action-open-donate:hover,
.fs-root .fs-top-tools a.common-donate:hover,
html body.cco_body .fs-full-donate-form.js-donate-form .fs-btn-donate:hover {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--cf-navy);
  transform: translateY(-2px);
  opacity: 0.9;
}
/* "About Campaign" hero button hidden — the about text already appears below,
   and its modal is unstyled theme chrome */
.fs-root .fs-header .donate-button.about-modal-btn {
  display: none;
}

/* ---- Top bar — the gala's floating rounded white nav over the art ------- */
html body.cco_body .fs-header-top {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 94%);
  z-index: 4; /* the template modal overlay is only z-index 5 — stay under it */
  background: #fff;
  border: 2px solid var(--cf-navy);
  border-radius: 15px;
  box-shadow: none; /* the gala pill is flat — hairline border, no shadow */
  padding: 10px 10px;
}
/* the theme's inner .container is fixed at 1170px — wider than the bar; let it
   fill the bar instead so nothing pokes past the rounded edge */
html body.cco_body .fs-header-top .container {
  width: 100%;
  max-width: 100%;
  padding: 0 18px;
}
html body.cco_body .fs-header-top .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
/* dissolve the template's dropped logo pennant — logo sits inline in the bar */
.fs-root .fs-logo-container {
  position: static !important;
  background: transparent !important;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  display: inline-block;
}
.fs-root .fs-logo-container .fs-bottom-triangle,
.fs-root .fs-logo-container .fs-bottom-triangle-border {
  display: none;
}
/* the theme's pennant pseudo-elements linger invisibly and sit on top of the
   Facebook share button — remove them outright */
.fs-root .fs-logo-container::before,
.fs-root .fs-logo-container::after {
  content: none !important;
  display: none !important;
}
/* swap the colored shield mark for the gala's monotone logo */
.fs-root .fs-logo-container img.fs-logo {
  content: var(--cf-logo);
  width: auto;
  height: 52px;
  object-fit: contain;
  margin: 0;
}
.fs-root .fs-top-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.fs-root .fs-top-tools .fs-top-tools-buttons {
  display: flex;
  align-items: center;
}
.fs-root .fs-top-tools .js-action-open-donate,
.fs-root .fs-top-tools a.common-donate {
  padding: 9px 22px;
  letter-spacing: 2px;
  /* inline-flex + line-height:1 — the theme's line-height sat the label low in the pill */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* inside the bar the framed pill's outer ring needs air on all sides */
  margin: 5px 8px;
}
/* share icons ship with an inline grey (#666) background — recolor to navy,
   round, gold on hover (inline styles force !important) */
.fs-root .fs-top-tools .a2a_svg {
  background-color: var(--cf-navy) !important;
  border-radius: 50% !important;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
/* hover fades, gala-style — no color shift */
.fs-root .fs-top-tools .a2a_kit a:hover .a2a_svg {
  opacity: 0.7;
}
/* only Facebook + email ship; twitter and the AddToAny "+" are hidden */
.fs-root .fs-top-tools .a2a_button_twitter,
.fs-root .fs-top-tools .a2a_dd {
  display: none !important;
}
/* .fs-share-tools IS the a2a kit — the widget caps it at 110px (block), which
   wraps the 4th icon; let it size to its icons on one line */
.fs-root .fs-top-tools .fs-share-tools {
  margin-right: 14px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
}
.fs-root .fs-top-tools .baruch_hashem {
  color: var(--cf-navy);
  font-family: var(--cf-sans);
  position: static;
  margin: 0 2px 0 12px;
  float: none; /* the theme nudges it past the bar edge */
}

/* ---- Hero — the art at FULL gala saturation, seal at gala scale ---------- */
html body.cco_body .fs-header {
  /* cover, like the gala's .ct-intro (its box is 1013px tall at 1280) — the art
     is far wider than 16:9, so cover crops the sides; keep the hero near 1013
     so the crop matches the gala's */
  background: #fff var(--cf-banner) center top / cover no-repeat;
  border: 0;
  margin: 0;
  min-height: 96vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 165px 0 55px; /* top clears the floating bar */
}
/* the gala runs this artwork with NO overlay — its own white middle carries the
   text. Kill the theme's near-opaque navy overlay outright. */
html body.cco_body .fs-header::before {
  background: none;
}
.fs-root .fs-header .container.text-center {
  width: 100%;
}
/* one soft pool of "sea-mist" behind the whole title block — the artwork
   already speaks in clouds and spray, so the mask reads as weather, not UI.
   closest-side puts the fade's zero exactly at the box edges (no hard cut);
   the extra vertical padding gives the fade room to breathe. The text-shadow
   halo below finishes the job out at the fade's thin edges. */
.fs-root .fs-header .page-header {
  border: 0;
  margin: 0;
  padding: 44px 15px 30px;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 255, 255, 0.97) 50%,
    rgba(255, 255, 255, 0.82) 74%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* the gold seal — the hero's centerpiece, like the gala */
.fs-root .fs-header .page-header::before {
  content: "";
  display: block;
  width: 110px;
  height: 137px; /* deliberately small — the fund outlives the gala,
                                    the seal is a mark here, not the headline (per Mendel) */
  margin: 0 auto 26px;
  background: var(--cf-seal) center / contain no-repeat;
}
/* org eyebrow */
.fs-root .fs-header .page-header h1 small {
  display: block;
  font-family: var(--cf-sans);
  font-weight: 400;
  color: var(--cf-navy);
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
/* campaign title */
.fs-root .fs-header .page-header h1 {
  margin: 0 auto;
  max-width: 780px;
}
.fs-root .fs-header .page-header h1 br {
  display: none;
} /* forced break adds nothing */
.fs-root .fs-header .page-header h1 span {
  display: block;
  font-family: var(--cf-sans);
  font-weight: 600;
  color: var(--cf-navy);
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: 3px;
  text-transform: uppercase;
}
/* tagline — navy, matching the gala's hero supporting text */
.fs-root .fs-header .page-header h2 {
  font-family: var(--cf-sans);
  font-weight: 400;
  color: var(--cf-navy);
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 18px 0 34px;
}
/* halo on the letterforms themselves — carries legibility where the mist above
   has thinned (the widest title line reaches into the fade zone) */
.fs-root .fs-header .page-header h1 span,
.fs-root .fs-header .page-header h1 small,
.fs-root .fs-header .page-header h2 {
  text-shadow:
    0 0 6px #fff,
    0 0 14px #fff,
    0 0 26px rgba(255, 255, 255, 0.9);
}
.fs-root .fs-header .donate-flex {
  gap: 18px;
}

/* ---- Goal — full-bleed NAVY band (the gala's white↔navy rhythm) ---------- */
html body.cco_body .fs-goal {
  background: var(--cf-navy);
  border: 0;
  padding: 46px 0;
}
/* the theme stamps a ghost "goal" watermark graphic behind the text — remove */
html body.cco_body .fs-goal .fs-goal-text {
  background-image: none;
}
.fs-root .fs-goal .fs-goal-text strong {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--cf-sans);
  letter-spacing: 5px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.fs-root .fs-goal .fs-goal-amount {
  color: #fff;
  font-family: var(--cf-sans);
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 42px;
  line-height: 1.1;
}
.fs-root .fs-goal .fs-goal-graph {
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}
/* the fill is set by a deep 4-class theme selector (light blue) — out-specify it */
html body.cco_body .fs-goal .fs-goal-graph .fs-goal-graph-fill {
  background: var(--cf-gold);
}
.fs-root .fs-goal .fs-goal-graph-value {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--cf-sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  margin-top: 12px;
}
.fs-root .fs-goal .fs-goal-graph-value .fs-total-raised-amount,
.fs-root .fs-goal .fs-goal-graph-value .fs-percent-complete-amount {
  color: var(--cf-gold-lt);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
}

/* ---- Countdown hidden (per request) + quick donate ----------------------- */
.fs-root .fs-campaign-info .fs-countdown {
  display: none;
}
.fs-root .fs-campaign-info [class*="triangle"] {
  display: none;
}
.fs-root .fs-campaign-info .fs-countdowndonate .row {
  display: block;
}
.fs-root .fs-campaign-info .fs-donate {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 90px 20px;
  background: transparent;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
/* section title — small griffon sub-head at the gala's H2.form-header scale
   (21px, ls 3px, uppercase) but NAVY: the gala's gold is ~2:1 contrast on
   white, too weak for reading text at this size */
.fs-root .fs-campaign-info .fs-donate::before {
  content: "Make Your Centennial Gift";
  display: block;
  flex-basis: 100%;
  font-family: var(--cf-serif);
  color: var(--cf-navy);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 21px;
  margin: 0 0 8px;
}
/* both children carry col-md-6 (50% width) — neutralize so the pair truly centers */
.fs-root .fs-donate .fs-donate-amounts,
.fs-root .fs-donate .button-wrapper {
  width: auto;
  max-width: none;
  flex: none;
  float: none;
  padding: 0;
  margin: 0;
}
.fs-root .fs-donate .fs-donate-amounts {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 2px solid var(--cf-navy);
  border-radius: 50px;
  padding: 7px 8px 7px 24px;
}
.fs-root .fs-donate .fs-amount-dollar {
  color: var(--cf-navy);
  font-family: var(--cf-sans);
  font-size: 22px;
  font-weight: 600;
}
.fs-root .fs-donate .fs-amount {
  border: 0;
  box-shadow: none;
  background: transparent;
  width: 130px;
  font-size: 22px;
  color: var(--cf-navy);
  font-family: var(--cf-sans);
}

/* ---- About + donors — stacked, centered composition ---------------------- */
/* unfloat the bootstrap 8/4 split: one centered reading column, donors beneath */
html body.cco_body .fs-about-partners-container > .row {
  display: flex;
  flex-direction: column;
  margin: 0;
}
html body.cco_body .fs-about-partners-container .fs-about {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  float: none;
  padding: 26px 24px 30px;
}
/* section header (the col has no heading of its own) */
html body.cco_body .fs-about-partners-container .fs-about::before {
  content: "About the Campaign";
  display: block;
  text-align: center;
  /* the page's one large griffon moment — the gala's H1.form-header pattern
     (griffon 32px navy uppercase) */
  font-family: var(--cf-serif);
  color: var(--cf-navy);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 32px;
  margin: 0 0 30px;
}
.fs-root .fs-about-text p strong {
  color: var(--cf-navy);
}
.fs-root .fs-about-text p:first-child strong {
  font-weight: 400;
  color: var(--cf-navy);
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.3px;
}
/* keep the about copy fully expanded — no "Read More" clamp (JS sets an inline
   height + overflow:hidden, so !important is required to defeat it) */
.fs-root .fs-about-text.js-about-text {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.fs-root .fs-btn-read-more,
.fs-root .js-btn-read-more {
  display: none !important;
}

/* donors — full-width centered band under the story */
html body.cco_body .fs-about-partners-container .fs-partners {
  width: 100%;
  max-width: 1000px;
  margin: 48px auto 0;
  float: none;
  background: #fff;
  padding: 40px 24px 96px;
  /* the gala's section separator: a soft gold hairline */
  border: 0;
  border-top: 1px solid rgba(211, 167, 40, 0.35);
}
.fs-root .fs-partners .text-center {
  background: transparent;
  border-top: 0;
}
html body.cco_body .fs-root .fs-partners h3 {
  text-align: center;
  margin: 0 0 30px;
  font-family: var(--cf-serif);
  font-size: 21px;
}
.fs-root .fs-partners h3 span {
  /* navy griffon sub-head, same pattern as the quick-donate title */
  font-family: var(--cf-serif);
  color: var(--cf-navy);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 21px;
}

.fs-root .fs-partners h3 b {
  font-family: var(--cf-serif);
}
.fs-root .fs-partners .fs-partners-list-container {
  margin: 0;
}
.fs-root .fs-partners .fs-partners-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 0;
}
.fs-root .fs-partners .fs-partner-container {
  float: none;
  width: auto;
}

.fs-root .fs-partners .fs-btn-view-all,
.fs-root .fs-partners .js-action-open-donate,
.fs-root .fs-partners #temporaryDonateButton {
  margin: 34px 10px 0;
}

@media (max-width: 520px) {
  .fs-root .fs-partners .fs-partner-container {
    width: 100%;
  }

  .fs-root .fs-partners .fs-btn-view-all {
    font-size: 12px;
  }
}
/* Donor entries — render client-side once donations come in (also inside the
   expanded "View All Donors" sidebar). The gala's language is white space and
   hairlines, not containers — so no card at all: a plain centered text stack
   with a short gold hairline between name and amount. The !important flags are
   needed throughout: the theme styles these with deep 4-class selectors (its
   amount is Patua One and even won against a 3-class font override). */
html body.cco_body .fs-partner,
html body.cco_body .fs-partner-dedication {
  background: transparent !important;
}
html body.cco_body .fs-partner {
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 6px 18px !important;
  text-align: center;
}
html body.cco_body .fs-partner .fs-bottom-triangle {
  display: none !important;
}
html body.cco_body .fs-partner-name {
  color: var(--cf-navy) !important;
  font-family: var(--cf-sans) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px !important;
  line-height: 1.4;
  /* short gold hairline under the name — the gala's separator, not a box */
  padding-bottom: 10px;
  margin-bottom: 10px;
  background: linear-gradient(rgba(211, 167, 40, 0.6), rgba(211, 167, 40, 0.6))
    bottom center / 28px 1px no-repeat;
}
html body.cco_body .fs-partner-donation-amount {
  /* navy, not gold — brand gold on white is 2.25:1, unreadable at this size;
     the gold hairline above stays as the accent */
  color: var(--cf-navy) !important;
  font-family: var(--cf-sans) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: 1px;
}
html body.cco_body .fs-partner-dedication {
  color: rgba(38, 68, 120, 0.75) !important;
  font-family: var(--cf-sans) !important;
  font-style: italic;
  font-size: 11px !important;
}
/* the expanded donors sidebar's collapse handle ships as a grey #d8d8d8 strip
   with a dark ">>". The strip becomes an invisible full-height hit area; the
   ">>" glyph (in a separate tether-positioned float) becomes a small round
   navy button with the site's ring treatment. */
html body.cco_body .fs-btn-close-sidebar {
  background: transparent !important;
}
html body.cco_body .fs-btn-close-partners-float .fs-btn-text {
  display: block;
  width: 36px;
  height: 36px;
  margin: -14px 0 0 -18px;
  background: var(--cf-navy);
  border-radius: 50%;
  color: #fff !important;
  font-family: var(--cf-sans);
  font-size: 12px;
  line-height: 36px;
  text-align: center;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px var(--cf-navy);
  transition: opacity 0.2s ease;
}
html body.cco_body .fs-btn-close-partners-float .fs-btn-text:hover {
  opacity: 0.85;
}

/* ---- Footer — gala navy band, centered, monotone logo -------------------- */
html body.cco_body .fs-footer {
  background: var(--cf-navy);
  padding: 64px 0 48px;
}
/* the gala footer leads with the white logo, centered */
html body.cco_body .fs-footer .container::before {
  content: "";
  display: block;
  width: 170px;
  height: 110px;
  margin: 0 auto 30px;
  background: var(--cf-logo) center / contain no-repeat;
  filter: brightness(0) invert(1); /* the monotone logo is navy — knock it to white */
}
html body.cco_body .fs-footer .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}
html body.cco_body .fs-footer .row > div {
  width: 100%;
  float: none;
  text-align: center;
}
.fs-root .fs-footer,
.fs-root .fs-footer address,
.fs-root .fs-footer * {
  color: #fff;
}
html body.cco_body .fs-footer address {
  font-family: var(--cf-sans);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
html body.cco_body .fs-footer .row > div:nth-of-type(1) h3 {
  font-family: var(--cf-sans);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
  margin: 0 0 10px;
}
html body.cco_body .fs-footer h3.fs-copyright {
  font-family: var(--cf-sans);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 22px 0 0;
  text-align: center;
  float: none;
}

/* ---- Donate modal + About modal ----------------------------------------
   NB: when the donate modal opens, its .fs-full-donate-form is moved OUTSIDE
   .fs-root, so every modal rule is scoped under html body.cco_body (always an
   ancestor), never .fs-root. The doubled .fs-full-donate-form.js-donate-form
   (both classes always sit on the form element) is deliberate: the theme styles
   the amount pills with 5-class selectors, and this is the 5th class that
   outguns them without !important. --------------------------------------------*/

/* font normalization for the modal (it sits outside .fs-root, so the page-wide
   normalization above doesn't reach it) */
html body.cco_body .fs-full-donate-form.js-donate-form,
html body.cco_body .fs-full-donate-form.js-donate-form h2,
html body.cco_body .fs-full-donate-form.js-donate-form h3,
html body.cco_body .fs-full-donate-form.js-donate-form h4,
html body.cco_body .fs-full-donate-form.js-donate-form p,
html body.cco_body .fs-full-donate-form.js-donate-form label,
html body.cco_body .fs-full-donate-form.js-donate-form .fs-option-name,
html body.cco_body .fs-full-donate-form.js-donate-form .fs-option-name div,
html body.cco_body .fs-full-donate-form.js-donate-form input,
html body.cco_body .fs-full-donate-form.js-donate-form select,
html body.cco_body .fs-full-donate-form.js-donate-form textarea,
html body.cco_body .modal-title,
html body.cco_body .modal-body,
html body.cco_body .modal-body p,
html body.cco_body .modal-body h2 {
  font-family: var(--cf-sans);
  color: var(--cf-ink);
}

/* the featherlight card: navy-tinted backdrop, floating rounded card */
html body.cco_body .featherlight {
  background: rgba(13, 26, 48, 0.72);
}
html body.cco_body .featherlight .featherlight-content {
  border: 0;
  border-radius: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 30px 90px rgba(7, 18, 38, 0.5);
  max-height: 92vh;
}
/* header band: navy, gold hairline, refined close */
html body.cco_body .fs-donate-header {
  background: var(--cf-navy);
  padding: 24px 30px;
  border-bottom: 1px solid var(--cf-gold);
}
html body.cco_body .fs-donate-header h2,
html body.cco_body .fs-donate-header .fs-text h2 {
  font-family: var(--cf-sans);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 400;
  font-size: 19px;
  margin: 0;
}
html body.cco_body .fs-donate-header .fs-btn-close {
  color: #fff;
  opacity: 0.75;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}
html body.cco_body .fs-donate-header .fs-btn-close:hover {
  color: var(--cf-gold);
  opacity: 1;
}

/* body rhythm: consistent vertical cadence, gold tick under section titles */
html body.cco_body .fs-donate-body {
  padding: 10px 12px 44px;
}
html body.cco_body .fs-full-donate-form.js-donate-form .fs-donate-body h3 {
  font-family: var(--cf-sans);
  color: var(--cf-navy);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  font-size: 15px;
  margin: 28px 0 18px;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donate-body
  h3::after {
  content: "";
  display: block;
  width: 34px;
  border-top: 2px solid var(--cf-gold);
  margin-top: 9px;
}

/* preset amount options → the theme wraps each amount in <label> > <span> >
   <div class="…">. The theme styles that inner <div> as a grey box with
   !important, so we make THAT div our navy-outlined pill (rather than nesting a
   second border) — hence the !important flags here. */
html body.cco_body .fs-full-donate-form.js-donate-form .fs-donation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
html body.cco_body .fs-full-donate-form.js-donate-form .fs-donation-option {
  display: inline-block;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
/* radio only — .fs-other is also a .fs-donation-option, and a bare `input`
   selector here would swallow its $-amount <input type=number> too */
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donation-option
  input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donation-option
  .fs-option-name
  div {
  border: 2px solid var(--cf-navy) !important;
  background: #fff !important;
  border-radius: 50px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  box-shadow: none !important;
  min-width: 88px;
  text-align: center;
  font-size: 15px;
  color: var(--cf-navy);
  font-family: var(--cf-sans);
  font-weight: 600;
  letter-spacing: 1px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donation-option:hover
  .fs-option-name
  div {
  background: var(--cf-navy) !important;
  color: #fff;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donation-option:has(input:checked)
  .fs-option-name
  div {
  background: var(--cf-navy) !important;
  color: #fff;
}
/* the "Other" option uses .js-other-label + a custom $ input-group */
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-other
  .js-other-label {
  border: 2px solid var(--cf-navy) !important;
  background: #fff !important;
  border-radius: 50px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  color: var(--cf-navy);
  min-width: 88px;
  text-align: center;
  font-size: 15px;
  font-family: var(--cf-sans);
  font-weight: 600;
  letter-spacing: 1px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-other:hover
  .js-other-label,
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-other
  .js-other-label:hover {
  background: var(--cf-navy) !important;
  color: #fff;
}
/* on a real click the theme's JS adds .selected to the label AND sets its text
   white — with our white pill background that's white-on-white, so the selected
   state must fill navy like the preset pills */
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-other
  .js-other-label.selected {
  background: var(--cf-navy) !important;
  color: #fff !important;
}
html body.cco_body .fs-full-donate-form.js-donate-form .fs-other-amount {
  border: 2px solid var(--cf-navy) !important;
  border-radius: 50px;
  overflow: hidden;
  padding-left: 12px;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-other-amount
  .input-group-addon {
  background: transparent !important;
  border: 0 !important;
  color: var(--cf-navy);
  font-weight: 600;
  font-size: 18px;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-other-amount
  .form-control {
  border: 0 !important;
}
/* inputs → clean navy underline */
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donate-inner
  .form-control {
  border: 0;
  border-bottom: 2px solid rgba(38, 68, 120, 0.25);
  border-radius: 0;
  box-shadow: none;
  color: var(--cf-navy);
  font-family: var(--cf-sans);
  background: transparent;
}
/* form controls get Raleway from a source no readable stylesheet exposes (it
   survives a (0,5,3) same-order probe; not !important, since inline style beats
   it). Specificity can't be reasoned against an invisible opponent — this is the
   one deliberate !important font override in the file. */
html body.cco_body .fs-full-donate-form.js-donate-form input,
html body.cco_body .fs-full-donate-form.js-donate-form select,
html body.cco_body .fs-full-donate-form.js-donate-form textarea,
html body.cco_body .fs-full-donate-form.js-donate-form label {
  font-family: var(--cf-sans) !important;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donate-inner
  .form-control:focus {
  border-bottom-color: var(--cf-navy);
  box-shadow: none;
}
html
  body.cco_body
  .fs-full-donate-form.js-donate-form
  .fs-donate-inner
  .form-control::placeholder {
  color: #7d8798;
  opacity: 1;
}
/* selects (country, exp. month/year) share the underline treatment above; the
   "Not recurring" select lives in sites-recurring-options' NESTED shadow DOM
   and cannot be reached by page CSS at all — it keeps its native look */
/* native controls in navy */
html body.cco_body .fs-full-donate-form.js-donate-form input[type="checkbox"],
html body.cco_body .fs-full-donate-form.js-donate-form input[type="radio"] {
  accent-color: var(--cf-navy);
}
/* submit: room to breathe */
html body.cco_body .fs-full-donate-form.js-donate-form .fs-btn-donate {
  margin-top: 26px;
  padding: 14px 44px;
  font-size: 16px;
}
/* Bootstrap About modal matches the donate card */
html body.cco_body .modal-title {
  font-family: var(--cf-sans);
  color: var(--cf-navy);
  text-transform: uppercase;
  letter-spacing: 3px;
}
html body.cco_body .modal-header {
  border-bottom-color: rgba(38, 68, 120, 0.15);
}
html body.cco_body .modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(7, 18, 38, 0.5);
}

/* Shadow-DOM web components in the donate modal (Lit). Their shadow trees are
   isolated from this sheet, so font/color are set on the HOST (inheritable, so
   they reach inside) and `::part(main)` styles the one exposed part on
   <donation-summary>. */
html body.cco_body donation-summary,
html body.cco_body sites-recurring-options,
html body.cco_body donate-fee-message {
  font-family: var(--cf-sans);
  color: var(--cf-navy);
}
/* donation summary band: warm cream instead of utility grey */
html body.cco_body donation-summary::part(main) {
  font-family: var(--cf-sans);
  color: var(--cf-navy);
  background: #f7f4ec;
  border-top: 1px solid var(--cf-gold);
  padding: 26px 0;
}

/* ---- Thank-you ---------------------------------------------------------- */
.fs-root .fs-thank-you .fs-title {
  color: var(--cf-gold);
}
.fs-root .fs-thank-you .fs-title,
.fs-root .fs-thank-you h2 {
  font-family: var(--cf-sans);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
  /* the floating bar returns to a normal in-flow bar on small screens */
  html body.cco_body .fs-header-top {
    position: static;
    transform: none;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
  }
  html body.cco_body .fs-header-top .row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  html body.cco_body .fs-header {
    padding-top: 50px;
    min-height: 0;
  }
}
@media (max-width: 767px) {
  /* one compact bar row — logo left, share tools right; the hero's big pill
     owns the CTA on phones, a second DONATE 60px above it was just clutter */
  html body.cco_body .fs-header-top {
    padding: 6px 0;
  }
  html body.cco_body .fs-header-top .row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .fs-root .fs-logo-container img.fs-logo {
    height: 40px;
  }
  .fs-root .fs-top-tools .js-action-open-donate,
  .fs-root .fs-top-tools a.common-donate {
    display: none;
  }
  /* the art fills the lower hero and reaches FULL saturation at the bottom —
     content sits on white that dissolves into the sea, and a strip of pure
     artwork anchors the fold above the navy goal band */
  html body.cco_body .fs-header {
    background: #fff var(--cf-banner) center bottom / auto 58% no-repeat;
    padding: 20px 0 150px;
  }
  html body.cco_body .fs-header::before {
    background: linear-gradient(
      180deg,
      #fff 0%,
      #fff 30%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.55) 66%,
      rgba(255, 255, 255, 0) 82%
    );
  }
  /* the desktop mist pool is redundant under the linear fade — its 44px of
     top padding was the dead white gap above the seal */
  .fs-root .fs-header .page-header {
    padding: 8px 15px 0;
    background: none;
  }
  .fs-root .fs-header .page-header::before {
    width: 96px;
    height: 120px;
    margin-bottom: 18px;
  }
  .fs-root .fs-goal .fs-goal-amount {
    font-size: 32px;
  }
  .fs-root .fs-campaign-info .fs-donate {
    flex-flow: column nowrap;
    padding: 64px 20px;
  }
  html body.cco_body .fs-about-partners-container .fs-about {
    padding-top: 10px;
  }
  html body.cco_body .fs-donate-header {
    padding: 18px 22px;
  }
  html body.cco_body .fs-donate-header h2 {
    font-size: 20px;
    letter-spacing: 1.5px;
  }
}