/* ==========================================================================
        PAGE: END OF YEAR CAMPAIGN (EOYC) 2026
        FILE: eoyc.css
========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
/*
  1.0 - Line Height Controls
      1.1 - Utilities
  2.0 - Hero
      2.1 - .hero--eoyc, background & blur
      2.2 - Content, text, fade-out
      2.3 - Fundraising tank
      2.4 - Hero cards
      2.5 - Hero card titles
  3.0 - Common Text Styles
  4.0 - Donation
      4.1 - Color bar
      4.2 - Donation title
  5.0 - Merch
  6.0 - Inspire
  7.0 - Protect
  8.0 - Local
  9.0 - Footer & Newsletter
      9.1 - Footer base & fades
      9.2 - News line
      9.3 - Newsletter form
  10.0 - Tablet Overrides (576px, 768px)
  11.0 - Desktop Overrides (1200px)
  12.0 - Large Desktop Overrides (1621px)
*/

/* ==========================================================================
   1.0 - Line Height Controls
   ========================================================================== */

.hero__text--body,
.hero__text--title,
.hero__text--subtitle,
.hero__wide-text,
.hero__card__title-long,
.donation__card__title,
.donation__header-title,
.merch__header__text,
.inspire__title,
.p-bold,
.inspire__body,
.inspire__quote,
.inspire__attribution,
.protect__title,
.protect__card__body,
.protect__subtitle,
.protect__body,
.local__card__body,
.local__body,
.local__subtitle {
  line-height: 100%;
}
@media (min-width: 1200px) {
  .hero__text--body,
  .hero__text--title,
  .hero__text--subtitle,
  .hero__wide-text,
  .hero__card__title-long,
  .donation__card__title,
  .donation__header-title,
  .merch__header__text,
  .inspire__title,
  .p-bold,
  .inspire__body,
  .inspire__quote,
  .inspire__attribution,
  .protect__title,
  .protect__card__body,
  .protect__subtitle,
  .protect__body,
  .local__card__body,
  .local__body,
  .local__subtitle {
    line-height: 130%;
  }
}
/* --- 1.1 Utilities --- */
.quote {
  font-style: italic;
}
/* ==========================================================================
   2.0 - Hero
   ========================================================================== */

/* --- 2.1 .hero--eoyc, background & blur --- */
.hero--eoyc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #4787ad;
  position: relative;
}

.hero--eoyc > .hero__bg-blur,
.hero--eoyc > .hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.hero__bg-blur {
  height: 135px;
  background: linear-gradient(
    180deg,
    rgba(52, 144, 197, 0.65) 57.72%,
    rgba(52, 144, 197, 0) 100.05%
  );
  backdrop-filter: blur(1.794019103050232px);
  z-index: 10;
}

.hero__bg {
  width: 100%;
  z-index: 0;
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- 2.2 Content, text, fade-out --- */
.hero__content {
  width: 260px;
  margin: 0 auto;
  padding-top: 11rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  z-index: 2;
}
.hero__wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
@media (min-width: 1200px) {
  .hero__text br {
    display: none;
  }
}

.hero__text--body,
.hero__text--title,
.hero__text--subtitle,
.hero__wide-text {
  text-align: center;
  color: #fbfbfb;
  letter-spacing: 5%;
  font-weight: bold;
}

.hero__wide-text {
  text-wrap: unset;
}
@media (min-width: 768px) {
  .hero__wide-text br {
    display: none;
  }
}
.hero__fade-out {
  width: 100%;
  height: 175px;
  background: linear-gradient(
    to bottom,
    #4787ad 25%,
    var(--Neutral-Indigo-100) 100%
  );
}

/* --- 2.3 Fundraising tank --- */
.fundraising-tank,
.fundraising-tank__img {
  margin: 0 auto;
  height: auto;
  box-shadow: 3.98px 3.98px 3.98px 0px #00000040;
  border-radius: 12px;
}
.fundraising-tank {
  margin-bottom: 4rem;
}

/* --- 2.4 Hero cards --- */
.hero__cards__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 0;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hero__card.hero__card-odd {
  padding: 0;
}
.hero__card {
  width: 100%;
}
.hero__card,
.hero__card-expanded,
.hero__card__image-widget-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 3rem 0;
  align-items: center;
  justify-content: center;
}
.hero__card__image-widget-container {
  gap: 4rem;
  padding: 0;
}
.hero__card__image,
.hero__card__image img {
  width: 100%;
  height: auto;
}
@media (min-width: 576px) {
  .hero__card,
  .hero__card-expanded,
  .hero__card__image-widget-container {
    gap: 2.5rem;
    padding: 1rem 0;
  }
  .hero__card__image,
  .hero__card__image img {
    margin: -2rem auto -4rem auto;
  }
}
@media (min-width: 768px) {
  .hero__card,
  .hero__card-expanded,
  .hero__card__image-widget-container {
    gap: 4.5rem;
    padding: 1rem 0;
  }
  .hero__card__image,
  .hero__card__image img {
    margin: -2rem auto -4rem auto;
  }
}
/* --- 2.5 Hero card titles --- */
.txt-gold {
  color: #f3bf6b;
  font-weight: 800;
}
.hero__card__title,
.hero__card__title-long {
  color: var(--font-color-heading);
  font-weight: bold;
}
.hero__card__title,
.hero__card__title-long {
  width: 260px;
}
.hero__card__title br {
  display: none;
}
@media (min-width: 576px) {
  .hero__card__title {
    text-wrap: pretty;
    padding-top: 2rem;
  }
  .hero__card__title br {
    display: block;
  }
}
@media (min-width: 768px) {
  .hero__card-odd .hero__card__title {
    margin-top: -8rem;
  }
  /* TODO: ask P&R if they prefer this setting or if I shoudl comment out the next two lines */
  .hero__text--body {
    text-wrap: pretty;
  }
  .hero__text--body br {
    display: none;
  }
}

/* ==========================================================================
   3.0 - Common Text Styles
   ========================================================================== */
.hero__card__title,
.hero__card__title-long,
.donation__card__title,
.donation__header-title,
.inspire__title,
.merch__header__text,
.p-bold,
.inspire__body,
.inspire__quote,
.inspire__attribution,
.protect__title,
.protect__card__body,
.protect__subtitle,
.protect__body,
.local__title,
.local__card__body,
.local__body,
.local__subtitle {
  text-align: center;
  letter-spacing: 5%;
}

/* ==========================================================================
   4.0 - Donation
   ========================================================================== */
.donation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 3rem auto;
}
@media (min-width: 768px) {
  .header {
    gap: 3rem;
    margin: 3rem auto;
  }
}
.donation__cards__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}

.donation__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 260px;
}
.donation__card__title br {
  display: none;
}
@media (min-width: 576px) {
  .donation__card__title br {
    display: block;
  }
}
/* --- 4.1 Color bar --- */
.eoyc-color-bar .blue {
  background-color: #c4ecf9;
}

.eoyc-color-bar .green {
  background-color: #96deff;
}

.eoyc-color-bar .purple {
  background-color: #2ab1ff;
}

.eoyc-color-bar .yellow {
  background-color: #18506d;
}

/* --- 4.2 Donation title --- */
.donation__header-title {
  color: #1c2627;
}

/* ==========================================================================
   5.0 - Merch
   ========================================================================== */
.merch__fade-in {
  width: 100%;
  height: 175px;
  background: linear-gradient(
    to bottom,
    var(--Neutral-Indigo-100) 25%,
    #5192b8 100%
  );
}

.merch__header__title,
.merch__header__text {
  text-align: center;
  color: var(--font-color-heading);
}
.merch__header__text {
  font-weight: bold;
}
@media (min-width: 576px) {
  .merch__header__title,
  .merch__header__text {
    text-wrap: pretty;
  }
}
.merch-fade-out {
  width: 100%;
  height: 175px;
  background: linear-gradient(
    to bottom,
    #5192b8 25%,
    var(--Neutral-Indigo-100) 100%
  );
}

.merch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  background-color: #5192b8;
}

.merch__buttons-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 270px;
  height: fit-content;
  padding: 2rem 0;
}
.merch__buttons--row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.merch__button {
  width: 270px;
  height: 112px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 0px #00000040;
}

.merch__button__image {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   6.0 - Inspire
   ========================================================================== */
.inspire {
  width: 260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3rem 0;
}

.p-bold {
  color: #38499c;
  font-size: var(--fs-h6);
  font-weight: bold;
  text-align: center;
}

.inspire__body {
  font-weight: 500;
  font-size: var(--fs-body);
}

.c-layered-image {
  background: linear-gradient(
    180deg,
    #ceedf7 0%,
    #a0d1e8 25%,
    #73b6d9 50%,
    #3490c5 75%
  );
  border-radius: 50%;
}
.inspire__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.inspire__quote {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-weight: 500;
}

.inspire__attribution {
  font-weight: 500;
}

/* ==========================================================================
   7.0 - Protect
   ========================================================================== */
.protect {
  width: 260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 0;
}
.protect__cards__container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.protect__card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.protect__subtitle {
  color: #38499c;
  font-weight: 700;
}
/* ==========================================================================
   8.0 - Local
   ========================================================================== */
.local {
  width: 260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.local__title {
  width: 280px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
@media (min-width: 576px) {
  .local__title {
    width: 100%;
  }
}
.local__cards__container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.local__card {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

.local__card__body {
  font-weight: 500;
}

.local__body {
  font-weight: 500;
}

.local__card__body--bold {
  font-weight: 700;
}

.local__subtitle {
  color: #38499c;
  font-weight: 700;
}

/* ==========================================================================
   9.0 - Footer
   ========================================================================== */

/* --- 9.1 Footer base & fades --- */
.footer {
  background-color: #5192b8;
}

.footer--eoyc {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.footer--eoyc > .footer__bg,
.footer--eoyc > .footer__fade-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

.footer--eoyc > .membership-wrapper,
.footer--eoyc > .newsletter-wrapper,
.footer--eoyc > .wide-footer {
  position: relative;
  z-index: 2;
}

.membership-wrapper--footer {
  padding-top: 16rem;
}

.footer__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.footer__fade-in {
  width: 100%;
  height: 175px;
  background: linear-gradient(
    to bottom,
    var(--Neutral-Indigo-100) 25%,
    #2d6d93 94%
  );
}

/* --- 9.2 News line --- */
.news-line {
  width: 75%;
}

/* --- 9.3 Newsletter form --- */
#email {
  color: var(--Neutral-Indigo-100);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1.25px solid var(--Neutral-Indigo-100) !important;
  backdrop-filter: blur(10px);
}

#email::placeholder {
  color: var(--Neutral-Indigo-100);
  opacity: 1;
}

#email::-webkit-input-placeholder {
  color: var(--Neutral-Indigo-100);
  opacity: 1;
}

.email-input-wrapper {
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.2);
}

.contact-wrapper h3 {
  color: var(--font-color-heading);
}

#join {
  margin: 2rem auto;
}
/* ==========================================================================
   10.0 - Tablet Overrides (576px, 768px)
   ========================================================================== */
@media (min-width: 576px) {
  .hero__content,
  .inspire,
  .hero__card__title,
  .hero__card__title-long,
  .merch__header,
  .donation__card,
  .protect,
  .local {
    width: 507px;
  }
}
@media (min-width: 768px) {
  .hero__content,
  .inspire,
  .hero__card__title,
  .hero__card__title-long,
  .merch__header,
  .donation__card,
  .protect,
  .local {
    width: 645px;
  }
}
/* ==========================================================================
   11.0 - Desktop Overrides (1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .hero__content,
  .inspire,
  .hero__card__title,
  .hero__card__title-long,
  .merch__header,
  .donation__card,
  .protect,
  .local {
    width: 1066px;
  }
  .hero__text--title,
  .hero__text--subtitle,
  .hero__text--body {
    text-align: left;
  }
  .hero__text--title br,
  .hero__text--subtitle br {
    display: none;
  }
  .hero__wrapper--two {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-evenly;
    align-items: start;
    row-gap: 3.5rem;
  }
  .hero__wrapper--two > .membership-wrapper {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .hero__wrapper--two > .fundraising-tank {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    justify-self: end;
  }
  .hero__wrapper--two > .hero__wide-text {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .membership-wrapper:not(.membership-wrapper--footer) {
    width: 48.34rem;
  }
  .membership-wrapper:not(.membership-wrapper--footer) .membership-widget {
    width: 48.34rem;
    padding: 2.8175rem 4.469rem;
    gap: 2rem;
  }
  .membership-wrapper:not(.membership-wrapper--footer)
    .membership-widget__grid {
    max-width: 100%;
  }
  .hero__wrapper--two .fundraising-tank {
    width: 24.63rem;
  }
  .hero__wrapper--two .fundraising-tank__img {
    width: 100%;
  }
  .hero__cards__container {
    padding-top: 8rem;
  }
  .hero__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero__card-odd > .hero__card__image {
    order: 2;
  }
  .hero__card-odd > .hero__card__title {
    text-align: left;
    width: 508px;
    justify-self: center;
    text-wrap: pretty;
  }
  .hero__card__title br {
    display: none;
  }

  .hero__card-even__text .hero__card__title,
  .hero__card-even__text .hero__card__title-long {
    text-align: right;
    width: 530px;
    justify-self: center;
    text-wrap: pretty;
  }
  .hero__card-even__text {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .hero__card-expanded {
    display: flex;
    flex-direction: column;
  }
  .hero__card__image-widget-container {
    flex-direction: row;
  }
  .hero__card__image-widget-container .hero__card_image {
    order: 2;
  }
  .donation__card,
  .protect__card,
  .local__card {
    flex-direction: row;
    justify-content: space-between;
  }
  .card-odd .donation__card__title,
  .card-even .protect__card__body--wrapper,
  .card-even .local__card__body--wrapper {
    order: 2;
  }
  .donation__card__title {
    text-align: left;
    max-width: 471px;
  }
  .merch__header__text {
    max-width: 950px;
    margin: 0 auto;
  }
  .merch__buttons-container {
    width: 1066px;
    flex-direction: column;
  }
  .merch__buttons--row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1rem;
  }
  .merch__button {
    width: 338px;
    height: 141px;
    border-radius: 5px;
    box-shadow: 2.51px 2.51px 2.51px 0px #00000040;
  }
  .inspire__header p {
    text-align: left;
  }
  .inspire__quote {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9rem;
  }
  .inspire__text-wrapper {
    max-width: 516px;
  }
  .anya-layered-image {
    margin: 0 !important;
    --bg-size: 440px !important;
    --frame-size: 423px !important;
  }
  .inspire__quote,
  .inspire__attribution {
    text-align: left;
  }
  .protect__card__body--wrapper,
  .local__card__body--wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .protect__card__body {
    max-width: 535px;
    text-align: left;
  }
  .local__card__body {
    width: 490px;
    text-align: left;
  }
  .footer--eoyc #join-form #email {
    width: 700px;
  }
}
/* ==========================================================================
   12.0 - Large Desktop Overrides (1621px)
   ========================================================================== */
@media (min-width: 1621px) {
  .hero__content,
  .donation__cards__container,
  .merch__header,
  .inspire,
  .protect,
  .local,
  .local__card {
    width: 1452px;
  }

  .hero__wrapper--two > .membership-wrapper,
  .hero__wrapper--two .fundraising-tank {
    margin: 0 auto;
  }
  .hero__wrapper--two {
    column-gap: 0;
    row-gap: 9.5rem;
  }
  .hero__card-odd > .hero__card__title {
    width: 650px;
  }
  .hero__card-even__text .hero__card__title,
  .hero__card-even__text .hero__card__title-long {
    width: 634px;
  }
  .hero__card__title {
    padding-top: 6rem;
  }
  .hero__card-expanded {
    gap: 9rem;
  }
  .hero__card-even__text {
    margin-left: 9rem;
  }
  .hero__card__image-widget-container {
    column-gap: 16rem;
  }
  .membership-wrapper:not(.membership-wrapper--footer) .membership-widget {
    gap: 2.5rem;
  }
  .hero__wrapper--two .fundraising-tank {
    width: 25.7rem;
  }
  .donation__card {
    width: 100%;
  }
  .donation__cards__container {
    justify-content: space-between;
  }
  .donation__card__title {
    max-width: 677px;
  }
  .donation__card__title br {
    display: none;
  }
  .inspire__text-wrapper {
    max-width: 739px;
  }

  .anya-layered-image {
    margin: 0 !important;
    --bg-size: 580px !important;
    --frame-size: 557px !important;
  }
  .local__card__body--wrapper,
  .local__card__body {
    width: 731px;
  }
  .local__subtitle {
    padding-top: 6rem;
    text-wrap: auto;
  }
  .news-line {
    width: 1452px;
  }
}
@media (min-width: 1920px) {
  .hero__wrapper--two .fundraising-tank {
    width: 27.2rem;
  }
}