/* /give/give-2027.css: pushed onto `styles` by /give/specific-advanced.wrap.
   The giving app (/give/assets/homepage-*.js + .css, a Vite build) was made for
   the legacy Bootstrap site. This sheet dresses it in the 2027 language without
   touching the app: hero band, navy Featured band, cream causes band, the
   donor form as .input fields beside a navy "Today's Gift" card, a gold closing
   band. The app's class names carry a build hash (homepage-module__cards___tJTe9),
   so they are matched by prefix ([class*="…module__cards"]) to survive rebuilds.
   Some sections carry inline backgrounds, hence the !important on those. */

/* ── Bootstrap 3 stand-ins the app's markup leans on (grid, forms, glyphicons) ── */
#homepage-root .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5, 1.5rem); }
#homepage-root .row { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-inline: calc(-1 * var(--space-4, 1rem)); }
#homepage-root [class*="col-"] { position: relative; width: 100%; min-height: 1px; padding-inline: var(--space-4, 1rem); box-sizing: border-box; }
@media (min-width: 768px) { #homepage-root .col-sm-6 { width: 50%; } }
#homepage-root .checkbox { display: block; margin: var(--space-2, .5rem) 0; }
#homepage-root .checkbox-inline { display: inline-flex; gap: var(--space-2, .5rem); align-items: baseline; }
#homepage-root .glyphicon { font: var(--fa-font-solid); display: inline-block; }
#homepage-root .glyphicon-chevron-left::before { content: "\f053"; }
#homepage-root .glyphicon-chevron-right::before { content: "\f054"; }
#homepage-root .glyphicon-remove::before { content: "\f00d"; }
#homepage-root .glyphicon-remove-circle::before { content: "\f057"; }
#homepage-root .glyphicon-link::before { content: "\f0c1"; }
#homepage-root .glyphicon-link { font-size: .6em; vertical-align: middle; }
#homepage-root .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the fund descriptions arrive as HTML wrapped in a literal <body>, which
   picked up the page body rules (flex, full viewport height) */
#homepage-root body { display: contents; }

/* ── type: serif headings like the rest of the site ── */
#homepage-root :is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--au-navy);
}
#homepage-root > div > section { padding-block: var(--space-10, 4rem); }

/* ── hero: the photo, with the legacy page's signature title block -- a big
   two-line "Online / Giving" in a navy box that sits on the photo's lower edge
   and drops into the navy band below, the intro line set beside it. Now in the
   2027 type (serif display), with a gold rule along the box's top.
   --give-box is the box width; --give-drop how far it hangs into the band. ── */
#homepage-root {
  --give-box: clamp(17rem, 34vw, 27rem);
  --give-drop: clamp(5rem, 9vw, 8rem);
}
#homepage-root > div > section:has([class*="module__maintitle"]) {
  position: relative;
  z-index: 1;                  /* the box hangs over the next band */
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 40vw, 480px);
  padding: 0;
  background: url("/i/homepage-hero/give/hero-072024.jpg") center 40% / cover no-repeat !important;
}
@media (max-width: 760px) {
  #homepage-root > div > section:has([class*="module__maintitle"]) {
    background-image: url("/i/large/give/hero-072024.jpg") !important;
  }
}
#homepage-root > div > section:has([class*="module__maintitle"]) > .container { width: 100%; }
#homepage-root [class*="module__maintitle"] {
  flex: 0 0 auto;
  width: var(--give-box);
  margin: 0 0 calc(-1 * var(--give-drop)) var(--space-4, 1rem);
  padding: var(--space-6, 2rem) var(--space-6, 2rem) var(--space-6, 2rem);
  background: var(--au-navy);
  border-top: 5px solid var(--au-gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
#homepage-root [class*="module__maintitle"] h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.2vw, 5.75rem);
  line-height: .98;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
}
#homepage-root [class*="module__titlebreak"] { display: inline; }

/* ── Featured: navy band; the intro line sits beside the hanging title box ── */
#homepage-root .background_color_chathams-blue { background: var(--au-navy) !important; padding-top: 0; }
#homepage-root [class*="module__titleintro"] {
  flex: 1 1 0;
  width: auto;
  max-width: 34rem;
  min-height: var(--give-drop);
  margin: 0 0 var(--space-8, 3rem) calc(var(--give-box) + var(--space-8, 3rem));
  padding: var(--space-5, 1.5rem) var(--space-4, 1rem) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
/* phones: the box spans the width and hangs a little; the intro goes under it */
@media (max-width: 700px) {
  #homepage-root { --give-drop: 3.75rem; }   /* hang half the (one-line) box below the photo so the people stay visible */
  #homepage-root [class*="module__maintitle"] {
    width: auto;
    flex: 1 1 auto;
    margin-right: var(--space-4, 1rem);
    padding: var(--space-5, 1.5rem);
  }
  /* one line, "Online Giving", while it fits; it wraps to two on a very narrow screen */
  #homepage-root [class*="module__maintitle"] h1 { font-size: clamp(2.25rem, 10.5vw, 4rem); white-space: normal; text-wrap: balance; }
  #homepage-root [class*="module__titlebreak"] { display: none; }
  #homepage-root [class*="module__titleintro"] {
    min-height: 0;
    margin: 0 0 var(--space-6, 2rem);
    padding-top: calc(var(--give-drop) + var(--space-5, 1.5rem));
  }
}
#homepage-root .background_color_chathams-blue h2 {
  margin: 0 0 var(--space-6, 2rem);
  font-size: var(--text-2xl);
  color: var(--au-white);
}
#homepage-root [class*="module__cards"] { gap: var(--space-5, 1.5rem); }

/* ── cards (Featured + the causes carousel) ── */
#homepage-root [class*="card-module__card"] {
  margin: 0;
  max-width: none;
  padding: 0 var(--space-4, 1rem) var(--space-4, 1rem);
  gap: var(--space-3, .75rem);
  background: var(--au-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
#homepage-root [class*="card-module__card"][class*="card-module__highlight"] {
  margin: 0;
  border: 0;
  box-shadow: 0 0 0 3px var(--au-gold), var(--shadow-md);
}
#homepage-root [class*="card-module__image"] {
  width: calc(100% + 2 * var(--space-4, 1rem));
  margin: 0 calc(-1 * var(--space-4, 1rem));
  aspect-ratio: 3 / 2;
}
#homepage-root [class*="card-module__name"] {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--au-navy);
}
#homepage-root [class*="card-module__info"] {
  --button-bg: rgba(0, 26, 51, 0.75);
  top: var(--space-2, .5rem);
  right: var(--space-2, .5rem);
  font-size: 1.25rem;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--button-bg);
}
#homepage-root [class*="card-module__info"]:hover { --button-bg: var(--au-navy); }

/* app buttons -> .btn look: navy, rounded; selected / primary = gold */
#homepage-root [class*="button-module__action"] {
  --button-bg: var(--au-navy);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  padding: .7em 1.2em;
  transition: background .15s, box-shadow .15s;
}
#homepage-root [class*="button-module__action"]:hover { --button-bg-highlight: var(--au-navy-light); }
#homepage-root input:checked + label[class*="button-module__action"],
#homepage-root [class*="module__gold"] {
  --button-bg: var(--au-gold);
  background: var(--au-gold) !important;
  color: var(--au-navy-deep) !important;
}

/* the app colours its own confirm / cancel buttons inline (bright blue, red):
   confirm -> gold primary, cancel -> outline */
#homepage-root [class*="button-module__action"][style*="0070c5" i] {
  background: var(--au-gold) !important;
  color: var(--au-navy-deep) !important;
}
#homepage-root [class*="button-module__action"][style*="0070c5" i]:hover { background: var(--au-gold-light) !important; }
#homepage-root [class*="button-module__action"][style*="cc3333" i] {
  background: transparent !important;
  color: var(--au-navy) !important;
  box-shadow: inset 0 0 0 2px var(--au-gray-300);
}
#homepage-root [class*="button-module__action"][style*="cc3333" i]:hover { box-shadow: inset 0 0 0 2px var(--au-navy); }

/* ── Departments & Causes: cream band ── */
#homepage-root > div > section[style*="f3f3f3"] { background: var(--au-cream) !important; }
#homepage-root [class*="module__controls___"] h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  font-size: var(--text-2xl);
}
#homepage-root [class*="module__controls___"][class*="module__floating"] {
  background: rgba(250, 248, 245, 0.95);
  box-shadow: 0 1px 0 var(--au-gray-200);
}
#homepage-root [class*="module__shownAll"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: .35em .9em;
  border: 2px solid var(--au-gold);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--au-navy);
  cursor: pointer;
}
#homepage-root [class*="module__shownAll"]:hover { background: var(--au-gold); color: var(--au-navy-deep); }
#homepage-root [class*="module__controls___"] > input,
#homepage-root .form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--text-base);
  color: var(--au-text);
  background: var(--au-white);
  border: 2px solid var(--au-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
}
#homepage-root [class*="module__controls___"] > input { width: auto; min-width: 14rem; }
#homepage-root :is([class*="module__controls___"] > input, .form-control):focus {
  outline: none;
  border-color: var(--au-gold);
}
#homepage-root .form-control[readonly] { background: var(--au-cream); }
#homepage-root [class*="module__horizontal-cards-container___"] > button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--au-navy);
}
#homepage-root [class*="module__horizontal-cards-container___"] > button:hover { background: var(--au-navy); color: var(--au-white); }
#homepage-root [class*="module__horizontal-cards___"] { padding: var(--space-2, .5rem) var(--space-1, .25rem) var(--space-4, 1rem); }

/* ── donor form + Today's Gift ── */
#homepage-root [class*="form-module__form"] { gap: var(--space-8, 3rem); align-items: start; }
#homepage-root [class*="form-module__left"] {
  gap: var(--space-3, .75rem) var(--space-4, 1rem);
  padding: 0;
  /* 1fr columns won't shrink below an input's natural width: at 320px the form
     ran 37px off the screen */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#homepage-root [class*="form-module__form___"] > * { min-width: 0; }
/* donor form beside the cart: the form the narrower column (4 parts to the
   cart's 5; at most ~31rem in the 1200px container, a comfortable width for
   short fields), both shrinking together. Side by side down to 880px; below that one centred column, cart
   first (what you are giving, then who you are), capped so nothing stretches
   across a tablet. */
#homepage-root [class*="form-module__form___"] {
  grid-template-columns: minmax(17rem, 4fr) minmax(20rem, 5fr);
}
#homepage-root [class*="form-module__right___"] { container-type: inline-size; }
@container (max-width: 400px) {
  #homepage-root [class*="form-module__card"] > img { width: 6.5rem; height: 5rem; }
}
@media (max-width: 880px) {
  #homepage-root [class*="form-module__form___"] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8, 3rem);
    max-width: 40rem;
    margin-inline: auto;
  }
  #homepage-root [class*="form-module__right___"] { order: -1; position: static; }
}
/* signed in, the app puts "Continue as <name>" across 3 of the form's 4 columns
   and "or Logout" in the 4th. Wide form: keep that, one line, both buttons the
   same height (Logout an outline, the secondary choice). Narrow form (the 4th
   column can't hold "or Logout"): two full-width lines. */
#homepage-root form[class*="form-module__left"] { container: giveform / inline-size; }
#homepage-root form[class*="form-module__left"] > [class*="button-module__action"][style*="span 3"] {
  grid-column: 1 / span 3 !important;
  max-width: 100%;
}
#homepage-root form[class*="form-module__left"] > :has(> a[href*="logout"]) {
  grid-column: 4 !important;
  display: flex;
  align-items: stretch;
  gap: var(--space-2, .5rem);
  color: var(--au-warm-gray);
}
#homepage-root form[class*="form-module__left"] > :has(> a[href*="logout"]) > a[href*="logout"] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--au-navy) !important;
  box-shadow: inset 0 0 0 2px var(--au-gray-300);
  padding: .7em .9em;
}
/* "or" sits on the text baseline of the buttons */
#homepage-root form[class*="form-module__left"] > :has(> a[href*="logout"]) { align-items: center; }
#homepage-root form[class*="form-module__left"] > :has(> a[href*="logout"]) > a[href*="logout"] { align-self: stretch; }
#homepage-root form[class*="form-module__left"] > :has(> a[href*="logout"]) > a[href*="logout"]:hover { box-shadow: inset 0 0 0 2px var(--au-navy); }
@container giveform (max-width: 28.75rem) {   /* below ~460px the 4th column is under the ~103px "or Logout" needs */
  #homepage-root form[class*="form-module__left"] > [class*="button-module__action"][style*="span 3"],
  #homepage-root form[class*="form-module__left"] > :has(> a[href*="logout"]) { grid-column: 1 / -1 !important; }
}
#homepage-root form[class*="form-module__left"] > div:has(> a[href*="/login"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, .5rem) var(--space-4, 1rem);
}
#homepage-root form[class*="form-module__left"] > div:has(> a[href*="/login"]) > div { margin: 0 !important; }
#homepage-root .form-control { min-width: 0; }
#homepage-root [class*="form-module__left"] > h1 { margin: 0 0 var(--space-4, 1rem); font-size: var(--text-2xl); }
#homepage-root .form-group { margin: 0; }
#homepage-root .form-group > label {
  display: block;
  margin-bottom: var(--space-1, .25rem);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--au-navy);
}
#homepage-root .form-group > p { margin: 0; font-size: var(--text-sm); color: var(--au-warm-gray); }
#homepage-root .form-group small { display: block; margin-top: var(--space-1, .25rem); }
#homepage-root .form-group:has(> :is(input, textarea):required) > label::after { color: var(--au-error); }
#homepage-root [class*="form-module__right___"] {
  top: calc(var(--header-h, 72px) + var(--space-4, 1rem));
  padding: var(--space-5, 1.5rem);
  background: var(--au-navy) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--au-white);
}
#homepage-root [class*="form-module__right___"] h3 {
  margin: 0;
  font-size: var(--text-xl) !important;
  color: var(--au-white);
}
#homepage-root [class*="form-module__right___"] > div:first-child {
  align-items: baseline;
  padding-bottom: var(--space-3, .75rem);
  margin-bottom: var(--space-2, .5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#homepage-root [class*="form-module__right___"] > div:first-child > span { margin: 0 !important; color: var(--au-gold-light) !important; font-weight: 600; }
#homepage-root [class*="form-module__right___"] a:not([class*="button-module"]) { color: var(--au-gold-light) !important; }
#homepage-root [class*="form-module__card"] { border-radius: var(--radius-md); color: var(--au-text); }
#homepage-root [class*="form-module__right___"] [class*="form-module__card"] a { color: var(--au-navy-light) !important; }
/* "Add another gift" (inline slate blue) -> outline on the navy card */
#homepage-root [class*="button-module__action"][style*="487093" i] {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  padding: .6em !important;
}
#homepage-root [class*="button-module__action"][style*="487093" i]:hover { box-shadow: inset 0 0 0 2px var(--au-white); }
#homepage-root [class*="radio-toggle-module__radio-toggle-group"] { background: var(--au-navy-deep) !important; border-radius: var(--radius-md); }
#homepage-root [class*="radio-toggle-module__radio-toggle___"] {
  --radio-checked-bg: var(--au-gold);
  --radio-checked-color: var(--au-navy-deep);
  --radio-border-radius: var(--radius-md);   /* the amount choices in the popup were square */
  font-weight: 600;
}
/* the fund photo beside each gift: its grid column is min-content, and the
   base img { max-width: 100% } resolved against that to 0 wide, hiding it */
#homepage-root [class*="form-module__card"] > img {
  width: 10rem;
  max-width: none;
  height: 7.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
@media (max-width: 480px) {
  #homepage-root [class*="form-module__card"] > img { width: 6.5rem; height: 5rem; }
}
/* give-2027.js swaps a missing photo for an initials tile; the app hides a
   failed gift photo with an inline visibility:hidden, which would hide the tile */
#homepage-root img[data-give-tile] { visibility: visible !important; }
/* narrow phones: let the gift cards shrink with the panel */
#homepage-root [class*="form-module__card"] { grid-template-columns: auto minmax(0, 1fr); }
#homepage-root [class*="form-module__right___"] :is([class*="form-module__rightfloat"], [class*="form-module__rightsticky"]) { min-width: 0; }
#homepage-root [class*="form-module__card"] > div[style*="space-between"] { flex-wrap: wrap; gap: var(--space-1, .25rem) var(--space-4, 1rem) !important; }
@media (max-width: 380px) {
  #homepage-root [class*="form-module__card"] > img { width: 5rem; height: 4rem; }
  #homepage-root [class*="form-module__right___"] { padding: var(--space-4, 1rem); }
}

/* ── closing band: gold, navy text (was light blue) ── */
#homepage-root > div > section[style*="8dbae3"] {
  background: var(--au-gold) !important;
}
#homepage-root > div > section[style*="8dbae3"] > .container { gap: var(--space-4, 1rem); justify-items: center; }
#homepage-root > div > section[style*="8dbae3"] h2 {
  margin: 0;
  font-size: var(--text-2xl);
  color: var(--au-navy-deep) !important;
}

/* ── breathing room around titles (the app spaces them for Bootstrap's
   heading margins, which base.css zeroes) ── */
#homepage-root [class*="module__controls___"] { margin: 0 0 var(--space-4, 1rem); }
#homepage-root [class*="module__controls___"] ~ p { margin: 0 0 var(--space-6, 2rem); max-width: 48rem; }
#homepage-root [class*="card-module__name"] { padding-top: var(--space-2, .5rem); }
#homepage-root > div > section[style*="8dbae3"] > .container { gap: var(--space-5, 1.5rem); }
#homepage-root [class*="form-module__right___"] > div:first-child { padding-bottom: var(--space-4, 1rem); margin-bottom: var(--space-4, 1rem); }
#homepage-root [class*="dialog-module__body"] > h3 { margin: 0 3.25rem var(--space-4, 1rem) 0; font-size: var(--text-xl); }
#homepage-root [class*="dialog-module__body"] > p { margin: 0 0 var(--space-6, 2rem); line-height: 1.6; }
#homepage-root [class*="dialog-module__body"] > h4 {
  margin: 0 0 var(--space-3, .75rem);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--au-navy);
}
#homepage-root [class*="dialog-module__body"] > a { display: inline-block; margin-block: var(--space-2, .5rem) var(--space-4, 1rem) !important; }
#homepage-root [class*="dialog-module__body"] > div:last-child { gap: var(--space-3, .75rem) !important; }
/* the "discard your changes?" confirm: a bare text div right on top of its buttons */
#homepage-root [class*="dialog-module__body"]:not([class*="popover-module"]) > div:first-child:not(:last-child) {
  margin-bottom: var(--space-5, 1.5rem);
  font-size: var(--text-md);
  line-height: 1.5;
}
#homepage-root [class*="popover-module__close"] { border-radius: 50%; width: 2.5rem; height: 2.5rem; padding: 0; margin: -.5em -.5em -2.5rem auto; }

/* ── dialogs (fund info, gift amount picker) ──
   base.css zeroes every margin, which pins a modal <dialog> to the top-left
   corner; margin:auto is how the browser centres it. */
#homepage-root dialog:modal { margin: auto; }
/* The app dims the page with a fixed <div> inside the dialog. When a long fund
   description makes the dialog scroll, the browser paints that blur only
   inside the dialog's scroll box: a dark strip a few px wider than the popup.
   The dialog's own ::backdrop (which the app switches off) is not clipped, so
   the dimming moves there; the div stays, transparent, to keep its click. */
#homepage-root dialog:modal::backdrop {
  display: block;
  opacity: 1;
  background: rgba(0, 26, 51, 0.55);
  -webkit-backdrop-filter: blur(5px) saturate(.8);
  backdrop-filter: blur(5px) saturate(.8);
}
#homepage-root [class*="dialog-module__backdrop"] {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}
#homepage-root [class*="dialog-module__body"],
#homepage-root [class*="popover-module__body"] {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5, 1.5rem);
}

@media (max-width: 760px) {
  #homepage-root > div > section { padding-block: var(--space-8, 3rem); }
  #homepage-root [class*="module__controls___"] > input { width: 100%; }
}