@import url('/css/donations.css');

.donation-page {
  --donation-shadow: 0 16px 45px rgba(18, 52, 38, .09);
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.donation-page .donation-eyebrow,
.donation-page .donation-kicker,
.donation-page .donation-hero-link span { color: #f4a0c7 !important; }
.donation-page .card-header i { color: #d23887 !important; }
.donation-page .donation-eyebrow-dark,
.donation-page .donation-intro a { color: #d23887 !important; }
.donation-page .donation-steps li.is-active > span {
  background: #d23887;
  color: #fff;
}
.donation-page .donation-steps li.is-active {
  border: 1px solid #d23887;
  background: #fff;
  box-shadow: 0 8px 24px rgba(210,56,135,.1);
}

.donation-page .donation-hero {
  display: grid;
  grid-template-columns: minmax(320px, 44%) 1fr;
  align-items: stretch;
  min-height: 520px;
  overflow: hidden;
  border-radius: .75rem;
  background: var(--donation-dark);
  box-shadow: var(--donation-shadow);
}
.donation-page .donation-hero-image {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.donation-page .donation-hero-overlay { display: none; }
.donation-page .donation-hero-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: none;
  padding: clamp(2.25rem, 5vw, 4.5rem);
}
.donation-page .donation-hero-link {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.donation-page .donation-hero-link span {
  display: inline-block;
  line-height: 1;
}
.donation-page .donation-hero h1 {
  font-size: clamp(2.9rem, 5vw, 4.7rem);
  line-height: 1;
}

.donation-page .donation-intro {
  margin-top: 1.25rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: .65rem;
}
.donation-page .donation-intro aside {
  border-radius: .55rem;
  box-shadow: 0 8px 24px rgba(18,52,38,.06);
}

.donation-page .donation-steps { margin: 1.5rem 0 2rem; }
.donation-page .donation-steps li {
  min-height: 86px;
  padding: 1.15rem 1.25rem;
  border: 0;
  border-radius: .55rem;
  box-shadow: 0 6px 20px rgba(18,52,38,.06);
}

.donation-page > .row > .col-12 > form,
.donation-page > .row > .col-12 > .card { max-width: 980px; }
.donation-page .card {
  margin-bottom: 1.25rem !important;
  border: 0;
  border-radius: .65rem;
  box-shadow: 0 8px 28px rgba(18,52,38,.07);
}
.donation-page form > .card > .card-header,
.donation-page > .row .col-12 > .card:not(.donation-review-hero) > .card-header {
  padding: 1.2rem 1.55rem;
  border-bottom: 1px solid var(--donation-line);
  background: #eef3ef;
  color: var(--donation-ink);
}
.donation-page form > .card > .card-header i,
.donation-page > .row .col-12 > .card:not(.donation-review-hero) > .card-header i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: .65rem;
  border-radius: 50%;
  background: #faeaf2;
  color: #d23887;
}
.donation-page .card-body { padding: clamp(1.4rem, 4vw, 2.5rem); }
.donation-page .form-group { margin-bottom: 1.3rem; }
.donation-page .form-group label {
  margin-bottom: .45rem;
  font-size: .78rem;
  letter-spacing: .015em;
}
.donation-page .form-control {
  min-height: 52px;
  padding: .75rem .9rem;
  border: 1px solid #c7d2c9;
  border-radius: .38rem;
  transition: border-color .15s, box-shadow .15s;
}
.donation-page textarea.form-control { min-height: 112px; line-height: 1.55; }
.donation-page .form-control:hover { border-color: #94aa9a; }
.donation-page .form-control:focus {
  border-color: #d23887;
  box-shadow: 0 0 0 .2rem rgba(210,56,135,.16);
}
.donation-page .donation-form-submit .btn,
.donation-page input[type=submit].btn {
  min-width: 220px;
  padding: .9rem 1.5rem;
  border-radius: .35rem;
  box-shadow: 0 8px 18px rgba(39,94,62,.18);
}
.donation-page input[type=file] {
  width: 100%;
  padding: 1.3rem;
  border: 2px dashed #a9bbaa;
  border-radius: .45rem;
}

.donation-page .donation-review-hero {
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  min-height: 330px;
  overflow: hidden;
  border-radius: .75rem;
  background: var(--donation-dark);
  box-shadow: var(--donation-shadow);
  color: #fff;
}
.donation-page .donation-review-hero .card-img-top {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.donation-page .donation-review-hero .card-body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(2rem, 5vw, 4rem);
}
.donation-page .donation-review-hero .card-title { color: #fff; }
.donation-page .donation-review-hero .card-text { color: #dfe9e2; line-height: 1.65; }

/* Coordinated site palette */
.donation-page {
  --donation-pink: #d23887;
  --donation-pink-dark: #b92e74;
  --donation-pink-soft: #f4a0c7;
  --donation-pink-wash: #faeaf2;
  --donation-bright-green: #49b947;
  --donation-green-wash: #e8f3e7;
}
.donation-page .donation-eyebrow,
.donation-page .donation-hero-link span {
  color: var(--donation-pink-soft) !important;
}
.donation-page .donation-hero-link {
  border-bottom-color: rgba(244,160,199,.82);
}
.donation-page .donation-intro {
  border-top: 4px solid var(--donation-bright-green);
  background: var(--donation-cream);
}
.donation-page .donation-eyebrow-dark,
.donation-page .donation-kicker {
  color: var(--donation-green) !important;
}
.donation-page .donation-intro aside {
  border-color: #d7ddcf;
  border-top-color: var(--donation-pink);
  background: rgba(255,255,255,.82);
}
.donation-page .donation-intro aside > span {
  background: var(--donation-pink-wash);
  color: var(--donation-pink);
}
.donation-page .donation-intro a {
  color: var(--donation-green) !important;
}
.donation-page .donation-intro a:hover {
  color: var(--donation-pink-dark) !important;
}
.donation-page .donation-steps li {
  border-top: 3px solid transparent;
  background: #fff;
}
.donation-page .donation-steps li > span {
  background: var(--donation-green-wash);
  color: var(--donation-green);
}
.donation-page .donation-steps li.is-active {
  border: 1px solid #efc1d8;
  border-top: 3px solid var(--donation-pink);
  background: #fff;
  box-shadow: 0 8px 24px rgba(210,56,135,.09);
}
.donation-page .donation-steps li.is-active > span {
  background: var(--donation-pink);
  color: #fff;
}
.donation-page form > .card > .card-header,
.donation-page > .row .col-12 > .card:not(.donation-review-hero) > .card-header {
  background: #f7f9f7;
  color: var(--donation-ink);
}
.donation-page form > .card > .card-header i,
.donation-page > .row .col-12 > .card:not(.donation-review-hero) > .card-header i {
  background: var(--donation-green-wash);
  color: var(--donation-green) !important;
}
.donation-page .form-control:focus {
  border-color: var(--donation-pink);
  box-shadow: 0 0 0 .2rem rgba(210,56,135,.14);
}
.donation-page .donation-form-submit .btn,
.donation-page input[type=submit].btn {
  border-color: var(--donation-pink);
  background: var(--donation-pink);
  color: #fff;
}
.donation-page .donation-form-submit .btn:hover,
.donation-page .donation-form-submit .btn:focus,
.donation-page input[type=submit].btn:hover,
.donation-page input[type=submit].btn:focus {
  border-color: var(--donation-pink-dark);
  background: var(--donation-pink-dark);
  color: #fff;
}
.donation-page input[type=file] {
  border-color: #b9cbbb;
  background: #f7faf7;
}
.donation-page mark {
  background: #fce8f2;
  color: var(--donation-ink);
}
.donation-page .btn-outline-dark {
  border-color: var(--donation-green);
  color: var(--donation-green);
}
.donation-page .btn-outline-dark:hover {
  border-color: var(--donation-green);
  background: var(--donation-green);
  color: #fff;
}

@media (max-width: 800px) {
  .donation-page .donation-hero,
  .donation-page .donation-review-hero { display: block; min-height: 0; }
  .donation-page .donation-hero-image,
  .donation-page .donation-review-hero .card-img-top { height: 260px; }
}
@media (max-width: 575px) {
  .donation-page { padding-bottom: 2rem; }
  .donation-page .donation-hero { min-height: 0; }
  .donation-page .donation-hero-image,
  .donation-page .donation-review-hero .card-img-top { height: 210px; }
  .donation-page .donation-hero-content { padding: 2rem 1.4rem; }
  .donation-page .donation-intro { padding: 1.5rem; }
  .donation-page .donation-form-submit .btn,
  .donation-page input[type=submit].btn { width: 100%; min-width: 0; }
}