/* Shared presentation for the NationBuilder Donation v2 form. */
.donation-engagement-content {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: clamp(4rem, 7vw, 7rem);
  background: #fff;
}

.tax-reset-calculator-2026 {
  margin-bottom: 6rem;
}

.donation-engagement-hero {
  .engagement-shell {
    width: min(100% - clamp(2rem, 5vw, 4rem), 100rem);
    margin-inline: auto;
  }

  .engagement-hero {
    margin-inline: calc(50% - 50vw);
    padding-top: clamp(4rem, 6vw, 6rem);
    background: var(--brand-pale);
  }

  .engagement-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
  }

  .engagement-hero__title {
    margin: 0;
    color: var(--brand-purple);
    font-size: clamp(3rem, 6vw, 5rem);

    span {
      color: var(--brand-teal);
    }
  }

  .engagement-hero__lede {
    max-width: 49.25rem;
    margin: 0;
    color: var(--brand-purple);
    font-family: "Reddit Sans Condensed", sans-serif;
    font-size: clamp(1.25rem, 1.6vw, 1.875rem);
    font-weight: 800;
    line-height: 1.6;
    text-transform: uppercase;

    mark {
      padding-inline: 0.15em;
      background: var(--brand-teal);
      color: #fff;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  }

  .engagement-hero__figure {
    position: relative;
    top: 2rem;
    margin: 0 0 -2rem;

    img {
      display: block;
      width: 100%;
      height: clamp(19rem, 29.3vw, 35.125rem);
      object-fit: cover;
      object-position: center 42%;
    }
  }
}

.donation-engagement-hero .engagement-intro {
  margin-inline: calc(50% - 50vw);
  padding: clamp(4rem, 6vw, 7.5rem) 0 clamp(2.5rem, 4vw, 4rem);
  background: #fff;

  >.engagement-shell>p:first-child {
    max-width: 65.875rem;
    margin: 0 auto;
    color: var(--brand-purple);
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.35rem, 1.67vw, 2rem);
    font-weight: 600;
    line-height: 1.4;
  }

  /* no left-right padding on join */
  >.engagement-shell--join>p:first-child {
    padding-top: 30px;
  }

  /* donate requires some additional padding */
  >.engagement-shell--donate>p:first-child {
    padding: 30px min(5vw, 50px) 0px min(5vw, 50px);
    text-align: center;
  }

}

.donation-shell--engagement {
  max-width: 66.125rem;
  margin: 0 auto;

  >.container,
  >.container>.row,
  .col-12.col-lg-8 {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .col-12.col-lg-4 {
    display: none;
  }

  .donation-form-container {
    padding: clamp(2rem, 3vw, 3.125rem) clamp(1.5rem, 3vw, 2.625rem) 2.625rem !important;
    border: 4px solid var(--brand-teal);
    border-radius: 0;
    box-shadow: none !important;

    h2,
    h3.h4 {
      color: var(--brand-purple);
      font-family: "Reddit Sans Condensed", sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }

    h2 {
      margin-bottom: 2rem;
      font-size: clamp(2.25rem, 4vw, 3.5rem);
    }

    hr {
      border-color: rgb(68 58 132 / 20%);
    }

    .submit-button {
      width: 100%;
      min-height: 4rem;
      margin-top: 1rem;
      padding-inline: 3.125rem;
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--brand-purple);
      color: #fff;
      font-family: "Manrope", sans-serif;
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.04em;

      &:hover,
      &:focus-visible {
        background: #fff;
        color: var(--brand-purple);
      }
    }
  }
}

.slug-donate .donation-form-container {

  >h2,
  >#intro {
    display: none;
  }
}

.slug-join {
  .engagement-hero__figure img {
    height: clamp(18rem, 29.3vw, 32.25rem);
    object-position: center 35%;
  }

  .engagement-intro {
    padding-bottom: clamp(2rem, 3vw, 3.125rem);

    >.engagement-shell>p:first-child {
      font-size: clamp(1.3rem, 1.46vw, 1.75rem);
    }
  }

  .engagement-intro__detail {
    max-width: 65.875rem;
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    color: var(--brand-purple);
    font-family: "Manrope", sans-serif;
    font-size: clamp(1rem, 1vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;

    &.engagement-intro__detail--renew { margin-top: 1rem; }

    a {
      color: var(--brand-teal);
    }
  }

  .donation-form-container--join {
    padding-top: clamp(2.25rem, 4vw, 3.75rem) !important;

    >form>section:first-of-type .donation-v2-amount {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 0 0 clamp(1.75rem, 3vw, 2.625rem);
      padding-bottom: clamp(1.75rem, 3vw, 2.625rem);
      border-bottom: 1px solid rgb(68 58 132 / 20%);
      color: var(--brand-purple);
      font-family: "Reddit Sans Condensed", sans-serif;
      font-size: clamp(2rem, 3vw, 2.625rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      text-transform: uppercase;

      .nb_donation_v2_interval {
        font-size: clamp(1.1rem, 1.5vw, 1.375rem);
      }
    }
  }
}


.donate-page {
  padding: 0px 4vw 30px 4vw;

  .donate-page__shell {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    width: min(100% - clamp(2rem, 5vw, 4rem), 66.125rem);
    margin-inline: auto;
  }
}

.thank-you-donation {
  padding: 0px 4vw 30px 4vw;

  .thank-you-donation__shell {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    width: min(100% - clamp(2rem, 5vw, 4rem), 66.125rem);
    margin-inline: auto;
  }

  .thank-you-donation__figure {
    margin: 0;

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .thank-you-donation__title {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-align: center;
  }

  .thank-you-donations__block {
    color: var(--brand-purple);
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.0625rem, 1.2vw + 0.75rem, 1.75rem);
    font-weight: 400;
    line-height: 1.45;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }

    p {
      margin: 0 0 1.5em;
    }

    /* Lead-in bold paragraphs (e.g. "Leave a message of support!") get
       extra breathing room above so they read as inline headings. */
    p:has(strong) {
      margin-top: 1.5em;
    }

    /* The final bold-lead paragraph ("Leave your message of support") sits
       just above the feedback form. Give it more space above so it reads
       as a lead-in to the form rather than the tail of the prose. */
    >p:has(strong):last-child {
      margin-top: clamp(1.75rem, 3vw, 2.5rem);
    }

    ul {
      margin: 1.125rem 0;
      padding-left: 1.25em;
    }

    li+li {
      margin-top: 0.75rem;
    }

    li::marker {
      color: var(--brand-teal);
    }

    a {
      color: inherit;
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
  }

  /* Feedback form, boxed like the contact page. */
  .thank-you-donation__form {
    >form {
      display: grid;
      gap: clamp(1.75rem, 3vw, 2.625rem);
      padding: clamp(1.75rem, 3vw, 3.125rem) clamp(1.25rem, 2.7vw, 2.625rem);
      border: 4px solid var(--brand-teal);
    }

    .form-group {
      margin: 0;
    }

    .form-control-material {
      position: static;
      margin: 0;
      padding: 0;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      -webkit-mask-image: none;
      mask-image: none;

      &::before,
      &::after {
        display: none;
      }
    }

    .floating-label,
    .form-group>label,
    .custom-control-label {
      display: block;
      position: static;
      margin: 0 0 0.45rem;
      color: var(--brand-purple);
      font-family: "Reddit Sans Condensed", Manrope, sans-serif;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2;
      transform: none;
    }

    .form-control {
      width: 100%;
      min-height: 3.4rem;
      padding: 0.75rem 1.25rem;
      border: 1px solid rgb(68 58 132 / 20%);
      border-radius: 0;
      background: #fff;
      color: var(--brand-purple);
      font: inherit;
    }

    textarea.form-control {
      min-height: 15.6875rem;
      resize: vertical;
    }

    .custom-control {
      display: flex;
      align-items: flex-start;
      padding: 0.25rem 0;
    }

    .custom-control-input {
      position: static;
      flex: 0 0 1rem;
      width: 1rem;
      height: 1rem;
      margin: 0.15rem 0.75rem 0 0;
      accent-color: var(--brand-teal);
    }

    .custom-control-label {
      flex: 1 1 auto;
      margin: 0;

      &::before,
      &::after {
        display: none;
      }
    }

    .submit-button {
      width: 100%;
      min-height: 5rem;
      margin: 0;
      border: 2px solid var(--brand-purple);
      border-radius: var(--radius-pill);
      background: var(--brand-purple);
      color: #fff;
      font-family: "Manrope", sans-serif;
      font-size: 1.125rem;
      font-weight: 700;

      &:hover,
      &:focus-visible {
        background: #fff;
        color: var(--brand-purple);
      }
    }
  }
}

/* Standard Donation v2 routes share the form treatment without the engagement hero. */
.donation-standard-content {
  margin-top: 0;
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
  background: var(--brand-pale);
}

.donation-shell--standard {
  max-width: 66.125rem;
  margin: 0 auto;

  >.container,
  >.container>.row,
  .col-12.col-lg-8 {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .col-12.col-lg-4 {
    display: none;
  }

  .donation-form-container {
    padding: clamp(2rem, 3vw, 3.125rem) clamp(1.5rem, 3vw, 2.625rem) 2.625rem !important;
    border: 4px solid var(--brand-teal);
    border-radius: 0;
    box-shadow: none !important;

    h2,
    h3.h4,
    .submit-container,
    .submit-container p {
      color: var(--brand-purple);
      font-family: "Reddit Sans Condensed", sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }

    h2 {
      margin-bottom: 2rem;
      font-size: clamp(2.25rem, 4vw, 3.5rem);
    }

    hr {
      border-color: rgb(68 58 132 / 20%);
    }

    .submit-container,
    .submit-container p {
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      text-align: left;
    }

    .submit-button {
      width: 100%;
      min-height: 4rem;
      margin-top: 1rem;
      padding-inline: 3.125rem;
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--brand-purple);
      color: #fff;
      font-family: "Manrope", sans-serif;
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.04em;

      &:hover,
      &:focus-visible {
        background: #fff;
        color: var(--brand-purple);
      }
    }
  }
}

.donation-shell {
  .donation-form-container {
    .form-control-material {
      position: static;
      overflow: visible;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    .floating-label,
    .form-group>label,
    .custom-control-label {
      display: block;
      position: static;
      width: auto;
      margin: 0 0 0.5rem;
      color: var(--brand-purple);
      font-family: "Reddit Sans Condensed", Manrope, sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.0225em;
      line-height: 1.2;
      transform: none;
    }

    .form-control,
    .custom-select,
    .StripeElement[data-payments-element-type="card"] {
      width: 100%;
      min-height: 3.4rem;
      padding: 0.7rem 1.25rem;
      border: 1px solid rgb(var(--secondary-rgb) / 20%);
      border-radius: 0;
      background: #fff;
      color: var(--brand-purple);
      font: inherit;
      -webkit-mask-image: none !important;
      mask-image: none !important;

      &:focus {
        border-color: var(--brand-teal);
        box-shadow: 0 0 0 3px rgb(0 185 188 / 20%);
      }
    }

    .form-control-material-custom-select .custom-select {
      padding-right: 3.25rem;
      background-image: linear-gradient(45deg, transparent 50%, var(--brand-purple) 50%), linear-gradient(135deg, var(--brand-purple) 50%, transparent 50%);
      background-position: calc(100% - 1.45rem) 50%, calc(100% - 1.05rem) 50%;
      background-repeat: no-repeat;
      background-size: 0.45rem 0.45rem, 0.45rem 0.45rem;
    }

    .StripeElement[data-payments-element-type="card"]:focus-within {
      border-color: var(--brand-teal);
      box-shadow: 0 0 0 3px rgb(0 185 188 / 20%);
    }

    .input-group {

      >.form-control,
      .input-group-prepend>.input-group-text {
        border-radius: 0;
      }
    }

    .donation-other-input-container {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      margin-block: 1rem;

      .input-group-prepend {
        display: flex;
        flex: 0 0 auto;
        margin: 0 -1px 0 0;
      }

      .form-control {
        flex: 1 1 auto;
        min-width: 0;
      }
    }

    .input-group-prepend>.input-group-text {
      border-color: rgb(var(--secondary-rgb) / 20%);
      background: var(--brand-purple);
      color: #fff;
      font-weight: 700;
    }

    .donation-v2-occurence-radio {
      .form-group {
        margin: 0;
      }

      fieldset {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 1.5rem;
        margin: 0;
        padding: 0;
      }

    }

    .donation-v2-occurence-radio .custom-control,
    .custom-checkbox {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-height: 1.5rem;
      margin: 0;
      padding: 0 0 1rem;
    }

    .donation-v2-occurence-radio .custom-control {
      padding-bottom: 0;
    }

    .donation-v2-occurence-radio .custom-control-input,
    .custom-checkbox .custom-control-input {
      position: static;
      flex: 0 0 1rem;
      width: 1rem;
      height: 1rem;
      margin: 0;
      opacity: 1;
      accent-color: var(--brand-purple);
    }

    .donation-v2-occurence-radio .custom-control-label,
    .custom-checkbox .custom-control-label {
      display: block;
      flex: 0 1 auto;
      margin: 0;

      &::before,
      &::after {
        display: none;
      }
    }

    .custom-control-input:checked~.custom-control-label::before {
      border-color: var(--brand-purple);
      background-color: var(--brand-purple);
    }

    #donation-v2-amounts {
      .custom-control-label {
        min-height: 4rem;
        margin: 0;
        padding-inline: 3.125rem;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--brand-purple);
        color: #fff;
        font-family: "Manrope", sans-serif;
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: -0.04em;
      }

      .custom-control-input:checked~.custom-control-label {
        background: var(--brand-teal);
        color: var(--brand-purple);
      }
    }
  }
}

.donation-shell {
  .donation-legal-notice {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--brand-teal);
    background: var(--brand-pale);
    color: var(--brand-purple);
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;

    p {
      margin: 0 0 1rem;

      &:last-child {
        margin-bottom: 0;
      }
    }

    a {
      color: inherit;
      font-weight: 800;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
  }
}

@media (width <=800px) {
  .donation-engagement-hero .engagement-hero__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .donation-engagement-hero .engagement-hero__lede {
    max-width: 42rem;
  }
}