/* =========================================================
   DONATE: the page people give from, and its thank-you page
   Markup: donations/templates/donations/donate.html (the form)
           donations/templates/donations/thanks.html (after it is sent)
   Tokens, type, buttons and badges come from css/wfc.css; the form
   fields come from css/components.css. Behaviour: js/donate.js.

   The pages read as one worksheet: a green header, then a row for each
   step, with its heading on the left and the thing to use on the right.
   The account details are never on these pages (they go by email), so
   there are no styles for showing them.
   ========================================================= */

/* ---------- Header: the title and the three steps ---------- */

.wfc-give {
  --crumb: rgba(255, 255, 255, 0.84);
  padding: 8px 8px 0;
  background: var(--wfc-paper);
}

.wfc-give__card {
  padding-top: clamp(24px, 3vw, 40px);
  border-radius: 20px;
  background: var(--wfc-forest);
  color: var(--wfc-paper);
}

.wfc-give__top {
  display: grid;
  gap: 20px 48px;
  margin-top: clamp(32px, 6vw, 88px);
}

/* Without the steps under it (the page after the form, or no ways to give yet). */
.wfc-give__top:last-child {
  padding-bottom: clamp(32px, 5vw, 64px);
}

/* The page after the form: a shorter header, with a line above the title
   that says the form went through. */
.wfc-give--short .wfc-give__title {
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
}

.wfc-give--short .wfc-give__top {
  margin-top: 14px;
}

.wfc-give--short .wfc-give__top:last-child {
  padding-bottom: clamp(28px, 4vw, 48px);
}

.wfc-give__thanks {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: clamp(24px, 3.5vw, 44px) 0 0;
  font-family: var(--wfc-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--wfc-sun);
  overflow-wrap: anywhere;
}

.wfc-give__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--wfc-display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  color: var(--wfc-paper);
  text-wrap: balance;
}

.wfc-give__lead {
  margin: 0;
  max-width: 32ch;
  font-family: var(--wfc-text);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

/* The steps are a real sequence, so they are numbered. */
.wfc-give__steps {
  display: grid;
  margin: clamp(32px, 5vw, 64px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  list-style: none;
  counter-reset: step;
}

.wfc-give__steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-content: start;
  gap: 4px 12px;
  padding-block: 22px 26px;
  counter-increment: step;
}

.wfc-give__steps li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}

/* The step this page is for: a yellow line along its top edge */
.wfc-give__steps li[aria-current="step"] {
  box-shadow: inset 0 3px 0 var(--wfc-sun);
}

.wfc-give__steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--wfc-display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: 2.75rem;
  line-height: 0.82;
  color: var(--wfc-sun);
}

.wfc-give__steps strong {
  font-family: var(--wfc-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--wfc-paper);
}

.wfc-give__steps span {
  font-family: var(--wfc-text);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 768px) {
  .wfc-give__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wfc-give__steps li {
    padding-block: 26px 34px;
    padding-right: 28px;
  }

  .wfc-give__steps li + li {
    padding-left: 28px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.26);
  }
}

@media (min-width: 992px) {
  .wfc-give__top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* ---------- A step's row: heading on the left, what to use on the right ---------- */

.wfc-give-row {
  display: grid;
  gap: 32px 64px;
}

.wfc-give-row__intro {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 16px;
}

.wfc-give-row__intro > p {
  margin: 0;
  max-width: 34rem;
  font-family: var(--wfc-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--wfc-slate);
}

.wfc-give-row__intro > .wfc-give-row__step {
  margin-bottom: -4px;
  font-family: var(--wfc-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--wfc-forest);
}

.wfc-give-row__intro > .wfc-give-row__label {
  margin-top: 20px;
  font-family: var(--wfc-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--wfc-ink);
}

.wfc-give-row__areas {
  width: 100%;
  max-width: 26rem;
  margin: -4px 0 0;
  padding: 0;
  border-top: 1px solid #cbd5cc;
  list-style: none;
}

.wfc-give-row__areas li {
  border-bottom: 1px solid #cbd5cc;
}

.wfc-give-row__areas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 10px;
  font-family: var(--wfc-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--wfc-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.wfc-give-row__areas a::after {
  content: "\2192";
  color: var(--wfc-forest);
  transition: transform 0.3s var(--wfc-ease);
}

.wfc-give-row__areas a:hover {
  color: var(--wfc-forest);
}

.wfc-give-row__areas a:hover::after {
  transform: translateX(4px);
}

.wfc-give-row__areas a:focus-visible {
  outline: 3px solid var(--wfc-forest);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (min-width: 992px) {
  .wfc-give-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  /* The heading stays in view while a long list or form scrolls past it. */
  .wfc-give-row__intro {
    position: sticky;
    top: calc(var(--wfc-header-h) + 32px);
  }
}

/* Less air above it than a section usually has, so the message is in view as the page opens. */
.wfc-give--short + .wfc-section {
  padding-top: clamp(40px, 6vw, 96px);
}

/* ---------- The form: "Tell us about your gift" ---------- */

.wfc-giftform {
  padding: clamp(20px, 3.5vw, 40px);
  border-radius: 24px;
  background: var(--wfc-mist);
}

.wfc-giftform .wfc-form__error {
  margin-bottom: 20px;
}

/* Two fields side by side keep their boxes level when one has a line of help under it. */
.wfc-giftform .wfc-field {
  align-content: start;
}

/* A field left without a neighbour takes the whole row. */
.wfc-giftform .wfc-form__row > .wfc-field:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.wfc-giftform .wfc-form__error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The site's other forms have no drop-down lists; these match their text boxes. */
.wfc-giftform select {
  display: block !important; /* the theme's script hides every select and puts a look-alike beside it (below) */
  width: 100%;
  height: 56px; /* the height the text boxes come out at */
  padding: 14px 44px 14px 18px;
  border: 1px solid #b9c4bb;
  border-radius: 14px;
  background: var(--wfc-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317231c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 16px;
  font-family: var(--wfc-text);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wfc-ink);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfc-giftform select:focus {
  border-color: var(--wfc-forest);
  box-shadow: 0 0 0 3px rgba(11, 102, 35, 0.18);
  outline: none;
}

/* The theme's look-alike list (js/main.js). The real one above is kept: it
   works with a keyboard and a screen reader, and opens the phone's own picker. */
.wfc-giftform .nice-select {
  display: none !important;
}

/* The amount with its currency beside it */
.wfc-field__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.75rem;
  gap: 10px;
}

.wfc-field__hint,
.wfc-field__error {
  margin: 0;
  font-family: var(--wfc-text);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--wfc-slate);
}

.wfc-field__error {
  font-weight: 600;
  color: #8f1d1d;
}

.wfc-giftform [aria-invalid="true"] {
  border-color: #b42318;
}

/* Kept out of sight and out of reach: only programs fill it in. */
.wfc-field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- The messages on the thank-you page ---------- */

.wfc-next {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: clamp(22px, 3.5vw, 40px);
  border-radius: 24px;
  background: var(--wfc-paper);
}

/* On a white section */
.wfc-next--mist {
  background: var(--wfc-mist);
}

.wfc-next p {
  margin: 0;
  max-width: 38rem;
  font-family: var(--wfc-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--wfc-slate);
}

.wfc-next strong {
  color: var(--wfc-ink);
  overflow-wrap: anywhere;
}

.wfc-next p a {
  color: var(--wfc-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wfc-next__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .wfc-give-row__areas a::after {
    transition: none;
  }
}