/* =================================================================== */
/* PAGE:      Donations Page (Themes)                                  */
/* FILE:      donate-themes.css                                        */
/* =================================================================== */
/* Table of Contents
/* 1.0 THEME SWITCHBOARD (Show/Hide Logic) 
/* 2.0 HERO SECTION OVERRIDES     
/* 3.0 GIVING TUESDAY THEME
/* 4.0 WINTER HOLIDAY THEME
/* 5.0 WINTER MEDIA QUERIES
/* 6.0 NEW YEAR THEME
/* =================================================================== */

/* =================================================================== */
/* 1.0 THEME SWITCHBOARD (Show/Hide Logic)                             */
/* =================================================================== */

/* --- Default States (Hide Theme elements initially) --- */
.hero__title--winter-holiday,
.hero__title--new-year,
.hero__new-year-text-link,
.hero__subtitle-two--new-year,
.donate-section__title--winter-holiday,
.donate-section__title--new-year,
.donate-section__winter-image,
.donate-section__new-year-image,
.donate-section__subtitle--new-year,
.donate-section__button--new-year,
.winter-snowflake,
.new-year-fireworks,
.hero__top-fade,
.hero-bg-img__fade-in {
  display: none;
}

/* ================================= */
/* WINTER HOLIDAY ACTIVATION         */
/* ================================= */
body.theme-winter-holiday .hero__bg-item--default,
body.theme-winter-holiday .hero__bg-item--giving-tuesday,
body.theme-winter-holiday .hero__bg-item--new-year,
body.theme-winter-holiday .hero__action--default,
body.theme-winter-holiday .hero__title--default,
body.theme-winter-holiday .hero__title--graphic {
  display: none !important;
}

/* Show Winter Elements */
body.theme-winter-holiday .hero__title--winter-holiday,
body.theme-winter-holiday .hero__bg-item--winter-holiday,
body.theme-winter-holiday .hero__action--theme,
body.theme-winter-holiday .donate-section__title--winter-holiday,
body.theme-winter-holiday .donate-section__winter-image,
body.theme-winter-holiday .hero__top-fade {
  display: block !important;
}

/* ================================= */
/* NEW YEAR ACTIVATION               */
/* ================================= */
/* 1. Hide Default & Winter Specific Items */
body.theme-new-year .hero__bg-item--default,
body.theme-new-year .hero__bg-item--giving-tuesday,
body.theme-new-year .hero__bg-item--winter-holiday,
body.theme-new-year .hero__action--default,
body.theme-new-year .hero__title--default,
body.theme-new-year .hero__title--graphic,
body.theme-new-year .donate-section__title--default,
body.theme-new-year .donate-section__bg, /* Hide Donate Background Image */
body.theme-new-year a.hero__action--winter-only, /* Hide Tax Button */
body.theme-new-year .donate-section__subtitle {
  /* Hide Default Subtitle */
  display: none !important;
}

/* 2. Show New Year Elements */
body.theme-new-year .hero__title--new-year,
body.theme-new-year .hero__bg-item--new-year,
body.theme-new-year .hero__subtitle-two--new-year,
body.theme-new-year .donate-section__title--new-year,
body.theme-new-year .donate-section__new-year-image,
body.theme-new-year .hero__new-year-text-link {
  display: block !important;
}

body.theme-new-year .hero__action--theme {
  display: inline-flex !important;
}

/* Re-enable the specific New Year subtitle */
body.theme-new-year .donate-section__subtitle--new-year {
  display: block !important;
}

body.theme-new-year .donate-section__button--new-year {
  display: inline-block !important;
}

/* =================================================================== */
/* 2.0 HERO SECTION OVERRIDES                                          */
/* =================================================================== */

/* --- 2.1 The Container (Mobile Base) --- */
body.theme-giving-tuesday .hero,
body.theme-winter-holiday .hero {
  min-height: 100vh;
  height: auto;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 5;
  padding-top: 0;
  padding-bottom: 4rem;
}

/* --- 2.2 The Background Image --- */
body.theme-giving-tuesday .hero__bg-layer,
body.theme-giving-tuesday .hero__bg-item,
body.theme-winter-holiday .hero__bg-layer,
body.theme-winter-holiday .hero__bg-item {
  top: 0;
  height: 100%;
}

/* --- 2.3 The Content Layout --- */
body.theme-giving-tuesday .hero .hero__content,
body.theme-winter-holiday .hero .hero__content {
  height: auto;
  margin-top: 0;
  width: 100%;
}

/* --- 2.4 The Spacing Fix (Mobile Nav Clearance) --- */
body.theme-giving-tuesday h1.hero__title--text {
  padding-top: 4rem;
  margin-top: 0;
}

/* --- 2.5 The Widget (Mobile Flow) --- */
body.theme-giving-tuesday .hero .donation-widget,
body.theme-giving-tuesday .hero .hero__widget-container {
  position: relative !important;
  display: block !important;
  height: auto !important;
  width: 100% !important;
  float: none !important;
  margin-top: 2rem;
}

/* =================================================================== */
/* DESKTOP LAYOUT (1200px+)                                        */
/* =================================================================== */

@media (min-width: 1200px) {
  body.theme-new-year #main-header::before {
    height: 165px;
  }
  body.theme-giving-tuesday h1.hero__title--text {
    padding-top: 0;
  }

  body.theme-giving-tuesday .hero {
    padding-top: 12rem;
    padding-bottom: 10rem;
  }

  body.theme-giving-tuesday .hero .hero__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content min-content;
    gap: 1rem 5%;
    padding-inline: 5%;
    align-items: start;
    grid-template-areas:
      "title    widget"
      "subtitle widget"
      "actions  widget";
  }

  body.theme-giving-tuesday .hero .hero__title {
    grid-area: title;
  }
  body.theme-giving-tuesday .hero .hero__subtitle {
    grid-area: subtitle;
  }
  body.theme-giving-tuesday .hero .hero__actions {
    grid-area: actions;
  }

  body.theme-giving-tuesday .hero .donation-widget,
  body.theme-giving-tuesday .hero .hero__widget-container {
    grid-area: widget;
    margin: 0;
  }

  body.theme-giving-tuesday .hero-title-image {
    width: 535px;
    margin-left: -2.1rem;
  }

  body.theme-giving-tuesday .hero__subtitle {
    text-align: left;
    max-width: 550px;
    margin-bottom: 2rem;
  }

  body.theme-giving-tuesday .hero__actions {
    margin-left: 0;
    align-items: flex-start;
  }
}

/* =================================================================== */
/* 4.0 WINTER HOLIDAY THEME                                          */
/* =================================================================== */

/* --- 4.1 Typography --- */
body.theme-winter-holiday .hero__title--winter-holiday {
  color: #fbfbfc;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font-family: "Barlow", sans-serif;
  font-size: 51.6px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.58px;
  text-transform: uppercase;
  display: block !important;
  margin-bottom: 1.5rem;
}

body.theme-winter-holiday h1.hero__title--text {
  padding-top: 2rem;
}

@media (min-width: 1200px) {
  body.theme-winter-holiday .hero__content {
    padding-top: 0 !important;
  }
}

/* --- 4.2 Background Image (Winter) --- */
body.theme-winter-holiday .hero__bg-layer,
body.theme-winter-holiday .hero__bg-item--winter-holiday,
body.theme-winter-holiday .hero__bg-item--winter-holiday picture {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  width: 100% !important;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.theme-winter-holiday .hero__bg-item--winter-holiday img {
  width: 100% !important;
  height: auto !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  top: auto !important;
  object-fit: unset !important;
  object-position: unset !important;
}

/* --- 4.3 Navigation Background --- */
body.theme-winter-holiday #main-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #133829 25%, rgba(19, 56, 41, 0) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body.theme-winter-holiday .hero__content {
  margin-top: 0 !important;
  padding-top: 7rem !important;
  padding-bottom: 0;
}

body.theme-winter-holiday h1.hero__title--text {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* --- 4.4 Base Background --- */
body.theme-winter-holiday .hero {
  background-color: #05511f !important;
  min-height: 0 !important;
  height: auto;
}

/* --- 4.6 Widget Styling (Winter/Shared Gold) --- */
body.theme-winter-holiday .donation-widget {
  border: 2px solid #bc8118 !important;
  background: rgba(251, 251, 252, 0.1) !important;
  border-radius: 5px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: relative !important;
  overflow: visible !important;
}

body.theme-winter-holiday .donation-widget__decoration {
  display: block !important;
  position: absolute;
  z-index: 10;
  width: 64px;
  height: 58px;
  aspect-ratio: 32/29;
  top: -19px;
  right: 12px;
  background-image: url("/assets/images/donate/holiday/christmas/christmas-red-gold-bow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- 4.7 Widget Content Styling --- */
body.theme-winter-holiday .donation-widget__tabs {
  border-bottom: 2px solid transparent !important;
  border-image-source: linear-gradient(
    90deg,
    #bc8118 0%,
    #c89534 13.94%,
    #d7b057 30.77%,
    #f3e49a 51.44%,
    #d7b057 70.19%,
    #c89534 84.62%,
    #bc8118 100%
  ) !important;
  border-image-slice: 1 !important;
}

body.theme-winter-holiday .donation-widget__tab--active {
  border-color: #bc8118 !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-bottom-color: transparent !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: -2px !important;
  position: relative;
  z-index: 5;
}

body.theme-winter-holiday
  .donation-widget__button:not(.donation-widget__button--secondary) {
  border-color: #bc8118 !important;
}

body.theme-winter-holiday
  .donation-widget__button:not(.donation-widget__button--secondary):hover {
  border-color: #bc8118 !important;
  box-shadow: 0 0 8px rgba(188, 129, 24, 0.4);
}

/* --- 4.8 Donate Section Backgrounds --- */
body.theme-winter-holiday .donate-section__fade-in {
  background: linear-gradient(
    180deg,
    rgba(251, 251, 252, 0) 0%,
    #05511f 86.65%
  ) !important;
}

body.theme-winter-holiday .donate-section {
  background-color: #05511f !important;
  overflow: visible;
}

body.theme-winter-holiday .donate-section__bg {
  display: none !important;
}

body.theme-winter-holiday .donate-section__fade-out {
  background: linear-gradient(
    0deg,
    rgba(251, 251, 252, 0) 0%,
    #05511f 86.65%
  ) !important;
}

/* --- 4.9 Donate Section Content --- */
body.theme-winter-holiday .donate-section__title--default {
  display: none !important;
}

body.theme-winter-holiday .donate-section__title--winter-holiday {
  display: block !important;
  color: #fbfbfc !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: 1.05px !important;
  width: 246px;
  max-width: 100%;
  margin: 0 auto 2rem auto;
  text-align: left;
}

body.theme-winter-holiday .donate-section__winter-image {
  display: block !important;
  max-width: 100%;
  height: auto;
  margin: 0 auto 2rem auto;
}

body.theme-winter-holiday .donate-section__subtitle {
  color: #fbfbfc !important;
  font-weight: 600;
  width: 142px;
  margin: 0 auto;
  display: none !important;
}

/* --- 4.10 Timer Styling --- */
body.theme-winter-holiday .donate-section__timer {
  display: none !important; /* Update to flex to show */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #bc8118 !important;
  border-radius: 5px !important;
  padding: 2rem 1rem !important;
  width: 120px !important;
  margin: 2rem auto 0 auto !important;
}

body.theme-winter-holiday .timer-block {
  margin: 0 0 1.5rem 0 !important;
  text-align: center;
}
body.theme-winter-holiday .timer-block:last-child {
  margin-bottom: 0 !important;
}

body.theme-winter-holiday .timer-value {
  color: #ffffff !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1;
  display: block;
}

body.theme-winter-holiday .timer-label {
  color: #ffffff !important;
  font-size: 0.8rem !important;
  text-transform: capitalize;
  opacity: 0.8;
}

/* --- 4.11 Support Section Images --- */
/* body.theme-winter-holiday .layered-image__bg {
  border-radius: 10px !important;
  border: 1.5px solid #bc8118 !important;
  background: linear-gradient(
    180deg,
    rgba(204, 157, 62, 0.2) 0%,
    rgba(204, 157, 62, 0.06) 100%
  ) !important;
  backdrop-filter: blur(7.3px) !important;
  -webkit-backdrop-filter: blur(7.3px) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.theme-winter-holiday .layered-image__frame,
body.theme-winter-holiday .layered-image__img {
  border-radius: 10px !important;
} */

/* --- 4.12 Annual Impact --- */
body.theme-winter-holiday .annual-impact-pie-chart {
  background: conic-gradient(
    #e9d6af 0% 14.4%,
    #dfb96d 14.4% 30%,
    #bf8f31 30% 100%
  ) !important;
}

body.theme-winter-holiday .pie-chart-legend li {
  color: #192147 !important;
}

body.theme-winter-holiday .annual-impact-pie-chart-operations {
  background-color: #e9d6af !important;
}
body.theme-winter-holiday .annual-impact-pie-chart-events {
  background-color: #dfb96d !important;
}
body.theme-winter-holiday .annual-impact-pie-chart-projects {
  background-color: #bf8f31 !important;
}

/* --- 4.13 Hero Action Button --- */
body.theme-winter-holiday .hero__action--theme {
  background: linear-gradient(
    90deg,
    #bc8118 0%,
    #cc9c3d 20.67%,
    #e9ce7e 37.98%,
    #f3e59c 49.52%,
    #e9ce7e 61.06%,
    #cc9c3d 78.85%,
    #bc8118 95.19%
  ) !important;
  border: none !important;
  color: #242424 !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 21px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 46.588px !important;
  letter-spacing: 0.621px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  padding: 3px 30px !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 6rem;
}

body.theme-winter-holiday .hero__action--theme:hover {
  box-shadow: 0 0 15px rgba(188, 129, 24, 0.6) !important;
  transform: translateY(-2px);
  color: #242424 !important;
}

/* --- 4.14 Winter Snowflakes --- */
body.theme-winter-holiday .winter-snowflake {
  position: absolute;
  background-image: url("/assets/images/donate/holiday/christmas/snowflakes.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 20;
  pointer-events: none;
}

/* --- 4.15 Hero Top Fade --- */
body.theme-winter-holiday .hero__top-fade {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 139px;
  background: linear-gradient(180deg, #133829 25%, rgba(19, 56, 41, 0) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 1;
  pointer-events: none;
}

/* =================================================================== */
/* 5.0 MEDIA QUERIES (Winter Theme)                                    */
/* =================================================================== */

@media (min-width: 576px) {
  body.theme-winter-holiday .hero {
    min-height: 1289px !important;
  }
  body.theme-winter-holiday h2.hero__subtitle {
    width: 449px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.theme-winter-holiday .hero__action--theme {
    margin-top: 8rem;
  }
  body.theme-winter-holiday .your-support {
    padding-top: 7rem !important;
  }
  body.theme-winter-holiday .donate-section__title--winter-holiday {
    width: 299px;
  }
}
@media (min-width: 768px) {
  body.theme-winter-holiday .hero {
    min-height: 1580px !important;
  }
  body.theme-winter-holiday h1.hero__title--text {
    font-size: 86.8px;
    width: 648px;
  }
  body.theme-winter-holiday .donation-widget__decoration {
    width: 152.811px;
    height: 137.804px;
    transform: rotate(34.393deg);
    top: -51px;
    right: -55px;
  }
  body.theme-winter-holiday h2.hero__subtitle {
    width: 528px !important;
    font-size: 35px;
  }
  body.theme-winter-holiday .hero__action--theme {
    margin-top: 16rem;
  }
  body.theme-winter-holiday .donate-section__title--winter-holiday {
    width: 510px;
  }
  body.theme-winter-holiday .donate-section__winter-image {
    max-width: 323px;
  }
}
@media (min-width: 992px) {
  body.theme-winter-holiday .winter-snowflake--hero {
    display: block !important;
    aspect-ratio: 434 / 358;
    height: auto !important;
    width: 25vw !important;
    max-width: 434px !important;
    top: 6%;
    left: -9%;
    transform: rotate(0deg);
  }
  body.theme-winter-holiday .hero__widget-container {
    position: relative !important;
  }
  body.theme-winter-holiday h1.hero__title--text {
    width: 775px;
    margin-bottom: 8rem;
  }
}

@media (min-width: 1200px) {
  body.theme-winter-holiday .hero {
    min-height: 1275px !important;
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  body.theme-winter-holiday .hero__bg-layer,
  body.theme-winter-holiday .hero__bg-item--winter-holiday {
    height: 100% !important;
    top: 0 !important;
    margin-top: 0 !important;
    z-index: 0 !important;
    overflow: visible !important;
  }
  body.theme-winter-holiday .hero__bg-item--winter-holiday img {
    width: 100% !important;
    height: calc(100% + 2px) !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    position: absolute !important;
    top: auto !important;
    left: 0 !important;
    bottom: -2px !important;
  }
  body.theme-winter-holiday .hero__content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    grid-template-areas: "title title" "subtitle widget" "actions widget";
    gap: 0;
    align-items: start;
  }
  body.theme-winter-holiday h1.hero__title--text {
    text-align: center;
    width: 100%;
    max-width: 889px;
    margin: 0 auto 2rem auto !important;
    font-size: 99.2px !important;
  }
  body.theme-winter-holiday h2.hero__subtitle {
    text-align: left;
    font-size: 40px !important;
    width: 489px !important;
    margin-left: 3rem !important;
    margin-right: 0 !important;
    align-self: end;
  }
  body.theme-winter-holiday .hero__actions {
    justify-content: flex-start;
    margin-left: 3rem !important;
    padding-top: 0;
  }
  body.theme-winter-holiday .hero__action--theme {
    font-size: 27.2px !important;
    height: 85.4px !important;
    margin-top: 0 !important;
  }
  body.theme-winter-holiday .hero .donation-widget,
  body.theme-winter-holiday .hero .hero__widget-container {
    grid-area: widget;
    margin-top: 0 !important;
    justify-self: end;
    margin-right: 3rem !important;
    position: relative !important;
    overflow: visible !important;
  }
  body.theme-winter-holiday .donate-section__title--winter-holiday {
    font-size: 2.25rem !important;
  }
  body.theme-winter-holiday .donate-section__winter-image {
    margin-top: 8rem;
    max-width: 450px;
  }
  body.theme-winter-holiday .winter-snowflake--hero {
    top: 3%;
    left: -7%;
    width: 20vw !important;
    max-width: none !important;
  }
  body.theme-winter-holiday .winter-snowflake--donate-top {
    display: block !important;
    width: 180px;
    height: 180px;
    top: -72px;
    left: -28px;
    transform: rotate(0deg);
  }
  body.theme-winter-holiday .winter-snowflake--donate-bottom {
    display: block !important;
    width: 200px;
    height: 200px;
    bottom: -72px;
    right: -43px;
    transform: rotate(180deg);
  }
  body.theme-winter-holiday .donate-section__content {
    position: relative !important;
    align-items: flex-start;
  }
}

@media (min-width: 1400px) {
  body.theme-winter-holiday .hero .hero__content {
    grid-template-areas: "title widget" "subtitle widget" "actions widget";
    align-items: start;
    gap: 1rem 5%;
  }
  body.theme-winter-holiday .hero {
    min-height: 1450px !important;
    padding-top: 13rem;
    padding-bottom: 23rem;
  }
  body.theme-winter-holiday h1.hero__title--text {
    text-align: left;
    grid-area: title;
    margin: 12rem 0 0 3rem !important;
  }
  body.theme-winter-holiday .hero .donation-widget,
  body.theme-winter-holiday .hero .hero__widget-container {
    margin-right: 8rem !important;
  }
  body.theme-winter-holiday .winter-snowflake--hero {
    top: -10%;
    left: -4%;
    width: 15vw !important;
  }
  body.theme-winter-holiday .your-support {
    padding-top: 10rem !important;
  }
}
@media (min-width: 1700px) {
  body.theme-winter-holiday .hero {
    min-height: 1650px !important;
    padding-bottom: 58rem !important;
  }
  body.theme-winter-holiday .winter-snowflake--hero {
    left: -850px;
  }
}
@media (min-width: 1920px) {
  body.theme-winter-holiday .hero {
    min-height: 1600px !important;
    padding-top: 15rem !important;
  }
  body.theme-winter-holiday h1.hero__title--text {
    font-size: 124px !important;
    width: 715px !important;
    max-width: none !important;
    margin-left: 10rem !important;
    margin-bottom: 2rem !important;
  }
  body.theme-winter-holiday h2.hero__subtitle {
    font-size: 50px !important;
    width: 760px !important;
    max-width: none !important;
    margin-left: 10rem !important;
  }
  body.theme-winter-holiday .hero__actions {
    margin-left: 10rem !important;
  }
  body.theme-winter-holiday .hero .donation-widget,
  body.theme-winter-holiday .hero .hero__widget-container {
    width: 694px !important;
    max-width: none !important;
    margin-right: 18rem !important;
  }
  body.theme-winter-holiday .winter-snowflake--hero {
    left: -850px;
    top: -100px;
  }
}

/* Footer Styling (Winter) */
body.theme-winter-holiday .footer,
body.theme-winter-holiday .halftone-wrapper,
body.theme-winter-holiday .blue-blur {
  background-color: #133829 !important;
}
body.theme-winter-holiday .halftone {
  background: linear-gradient(to top, #133829 90%, white) !important;
}
body.theme-winter-holiday .halftone::after {
  background-image:
    radial-gradient(
      circle at center,
      #fbfbfc var(--stop1),
      transparent var(--stop2),
      #fbfbfc
    ),
    radial-gradient(
      circle at center,
      #fbfbfc var(--stop1),
      transparent var(--stop2),
      #fbfbfc
    ) !important;
}

/* =================================================================== */
/* 6.0 NEW YEAR THEME                                                  */
/* =================================================================== */

.hero__bg-item .hero__bg-layer.hero__bg-item--new-year {
  bottom: 0;
}
/* --- 6.1 Hero Typography --- */
body.theme-new-year .hero__title--new-year {
  color: #fbfbfc;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font-family: "Barlow", sans-serif;
  font-size: 51.6px;
  font-weight: 700;
  letter-spacing: 2.58px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-top: 2rem;
  text-align: left;
  width: 251px;
}
@media (min-width: 576px) {
  body.theme-new-year .hero__title--new-year {
    width: 422px;
  }
}

body.theme-new-year .hero__subtitle-two--new-year {
  display: none !important;
}

/* --- 6.2 Hero Layout & Background (Mobile Base) --- */
body.theme-new-year .hero {
  background-color: #242424 !important; /* Forces the dark background */
  min-height: auto; /* Allows content to define height */
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
  padding-bottom: 0 !important;
  overflow: hidden;
}

/* 1. BACKGROUND CONTAINER: Anchored firmly to the bottom */
body.theme-new-year .hero__bg-layer,
body.theme-new-year .hero__bg-item--new-year {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: 0 !important;
  display: block !important;
  overflow: visible !important;
  order: 10;
  margin-top: auto;
}

/* 2. THE IMAGE: Block display, natural height, full width */
body.theme-new-year .hero__bg-item--new-year img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  position: relative; /* Necessary so the fade can sit on top of it */
  z-index: 0;
}

/* 3. THE FADE: Sits exactly atop the image */
body.theme-new-year .hero-bg-img__fade-in {
  display: block;
  position: absolute;
  top: -224px; /* Sticks to the top edge of the image container */
  left: 0;
  width: 100%;
  height: 228px; /* Fixed height for the fade area */
  /* Gradient: Blends from Dark (Top) to Image Grey (Bottom) */
  background: linear-gradient(0deg, #cbcbcb 0%, #242424 100%);
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 1200px) {
  body.theme-new-year .hero-bg-img__fade-in {
    display: none;
  }
}
/* 4. CONTENT: Padded bottom to prevent overlap */
body.theme-new-year .hero__content {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  position: static;
  z-index: 5; /* Ensures text/widget sits ABOVE the background/image */

  /* Pushes content up so it doesn't cover the heads in the photo */
  padding-bottom: 2rem !important;
  order: 1;
}

/* --- 6.3 Content Reordering (Mobile) --- */
/* 1. Title */
body.theme-new-year .hero__title--new-year {
  order: 1;
  z-index: 5;
}

/* 2. Widget & Link Container */
body.theme-new-year .hero__widget-container {
  order: 2;
  width: 100%;
  margin-bottom: 2rem;
}

/* 3. Subtitle ("You're not just supporting...") */
body.theme-new-year .hero__subtitle {
  order: 3;
  color: #fbfbfc !important;
  text-align: left;
  margin-bottom: 0;
  position: relative;
  z-index: 5;
}
@media (min-width: 992px) {
  body.theme-new-year .hero__subtitle {
    width: 578px;
  }
}
/* 4. Actions (The Button) */
body.theme-new-year .hero__actions {
  order: 4;
  position: static; /* Button itself is absolute below */
}

/* Text Link (Inside Widget Container) */
body.theme-new-year .hero__new-year-text-link {
  display: block !important;
  color: #fbfbfc;
  font-family: "Montserrat", sans-serif;
  font-size: 1.175rem;
  text-align: left;
  margin: 1.5rem auto 0 auto;
  width: 190px;
}
body.theme-new-year .hero__new-year-text-link a {
  text-decoration: underline;
}
@media (min-width: 768px) {
  body.theme-new-year .hero__new-year-text-link {
    font-size: 1.4rem;
    width: 235px;
    padding-left: 0.5rem;
  }
}

/* BUTTON: Absolute Position above the wave */
body.theme-new-year .hero__action--theme:not(.hero__action--winter-only) {
  /* Color and Layout Styles */
  background: linear-gradient(
    90deg,
    #bc8118 0%,
    #cc9c3d 20.67%,
    #e9ce7e 37.98%,
    #f3e59c 49.52%,
    #e9ce7e 61.06%,
    #cc9c3d 78.85%,
    #bc8118 95.19%
  ) !important;
  border: none !important;
  border-radius: 15px;
  display: inline-flex !important;
  width: max-content;
  align-self: center;
  padding: 10px 14px 10px 14px !important;

  /* Font Styles */
  color: #242424 !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  text-decoration: none;

  /* Positioning Styles */
  position: absolute !important;
  bottom: 5%;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 10;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- 6.3 Your Support Section */
/* body.theme-new-year .layered-image__bg {
  border-radius: 10px !important;
  border: 1.5px solid #bc8118 !important;
  background: linear-gradient(
    180deg,
    rgba(204, 157, 62, 0.2) 0%,
    rgba(204, 157, 62, 0.06) 100%
  ) !important;
  backdrop-filter: blur(7.3px) !important;
  -webkit-backdrop-filter: blur(7.3px) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.theme-new-year .layered-image__frame,
body.theme-new-year .layered-image__img {
  border-radius: 10px !important;
} */
/* --- 6.4 Donate Section --- */
body.theme-new-year .donate-section {
  background-color: #242424 !important;
  position: relative;
  z-index: 5;
  margin-top: -2px;
  padding-top: 5rem;
  overflow: visible;
}

body.theme-new-year .donate-section__fade-in {
  background: linear-gradient(180deg, #fbfbfc 0%, #242424 100%) !important;
}
body.theme-new-year .donate-section__fade-out {
  background: linear-gradient(180deg, #242424 0%, #fbfbfc 100%) !important;
}

body.theme-new-year .donate-section__title--new-year {
  color: #fbfbfc !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  margin: 0 auto 2rem auto;
  text-align: left;
  line-height: normal;
  width: 260px;
}
@media (min-width: 768px) {
  body.theme-new-year .donate-section__title--new-year {
    width: 525px;
    margin-left: 1rem;
    font-size: 2rem !important;
  }
}
body.theme-new-year .donate-section__new-year-image {
  width: 240px;
  height: auto;
  margin: 3rem auto 2rem auto;
}

body.theme-new-year .donate-section__subtitle--new-year {
  color: #fbfbfc !important;
  font-family: "Montserrat", san-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: normal;
  margin-top: 2rem;
  letter-spacing: 1px;
  width: 180px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.theme-new-year .donate-section__subtitle--new-year {
    width: 365px;
    font-size: 2rem;
  }
}
body.theme-new-year .donate-section__timer {
  display: flex !important; /* Update to flex to show */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7.5px !important;
  border: 3px solid #d7b057 !important;
  background: rgba(251, 251, 252, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  padding: 2rem 1rem !important;
  width: 120px !important;
  margin: 2rem auto 0 auto !important;
}
@media (min-width: 768px) {
  body.theme-new-year .donate-section__timer {
    flex-direction: row !important;
    width: 386px !important;
  }
}
/* --- 6.5 Fireworks --- */
body.theme-new-year .new-year-fireworks {
  display: block !important;
  position: absolute;
  z-index: 1 !important;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/assets/images/donate/holiday/new_year/fireworks.png");
  overflow: visible !important;
}
body.theme-new-year .new-year-fireworks--hero {
  top: 5%;
  right: -147px;
  width: 286px;
  height: 237px;
  aspect-ratio: 286/237;
  overflow: visible;
  z-index: 1;
}
@media (min-width: 576px) {
  body.theme-new-year .new-year-fireworks--hero {
    top: 2%;
    right: -7%;
  }
}
@media (min-width: 768px) {
  body.theme-new-year .new-year-fireworks--hero {
    top: -1%;
    right: -12%;
    width: 403px;
    height: 334px;
  }
}
body.theme-new-year .new-year-fireworks--donate-top {
  top: -65px;
  right: -145px;
  width: 286px;
  height: 237px;
}
@media (min-width: 768px) {
  body.theme-new-year .new-year-fireworks--donate-top {
    width: 403px;
    height: 334px;
    top: -17px;
    right: -175px;
  }
}
body.theme-new-year .new-year-fireworks--donate-bottom {
  display: none;
}

/* --- 6.6 Annual Impact Colors --- */
body.theme-new-year .annual-impact-pie-chart {
  background: conic-gradient(
    #e9d6af 0% 14.4%,
    #dfb96d 14.4% 30%,
    #bf8f31 30% 100%
  ) !important;
}
body.theme-new-year .pie-chart-legend li {
  color: #192147 !important;
}
body.theme-new-year .annual-impact-pie-chart-operations {
  background-color: #e9d6af !important;
}
body.theme-new-year .annual-impact-pie-chart-events {
  background-color: #dfb96d !important;
}
body.theme-new-year .annual-impact-pie-chart-projects {
  background-color: #bf8f31 !important;
}

/* --- 6.7 Footer & Header --- */
body.theme-new-year .footer,
body.theme-new-year .halftone-wrapper,
body.theme-new-year .blue-blur {
  background-color: #242424 !important;
}
body.theme-new-year .halftone {
  background: linear-gradient(to top, #242424 90%, white) !important;
}
body.theme-new-year .halftone::after {
  background-image:
    radial-gradient(
      circle at center,
      #fbfbfc var(--stop1),
      transparent var(--stop2),
      #fbfbfc
    ),
    radial-gradient(
      circle at center,
      #fbfbfc var(--stop1),
      transparent var(--stop2),
      #fbfbfc
    ) !important;
}
body.theme-new-year #main-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;

  /* Updated Spec */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0) 82%
  );
  /* Blur Spec - I commented these out because they were occluding the fireworks */
  /* backdrop-filter: blur(0.9px); /* Rounded slightly for browser consistency
  -webkit-backdrop-filter: blur(0.9px); */

  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  body.theme-new-year #main-header::before {
    height: 100px;
  }
}
/* --- 6.8 Widget Styling --- */
body.theme-new-year .hero__widget-container {
  left: 0;
  top: 0;
}
body.theme-new-year .donation-widget {
  border-radius: 7.5px !important;
  border: 3px solid #d7b057 !important;
  background: rgba(251, 251, 252, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: none !important;
  z-index: 1;
  margin: 0 auto;
}

body.theme-new-year .donation-widget__tabs {
  border-bottom: 2px solid transparent !important;
  border-image-source: linear-gradient(
    90deg,
    #bc8118 0%,
    #c89534 13.94%,
    #d7b057 30.77%,
    #f3e49a 51.44%,
    #d7b057 70.19%,
    #c89534 84.62%,
    #bc8118 100%
  ) !important;
  border-image-slice: 1 !important;
}
body.theme-new-year .donation-widget__tab--active {
  border: 1.141px solid var(--dw-color-text);
  border-color: #d7b057 !important;
  border-bottom: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: -2px !important;
  position: relative;
  z-index: 5;
}
body.theme-new-year
  .donation-widget__button:not(.donation-widget__button--secondary) {
  border-color: #d7b057 !important;
}
body.theme-new-year
  .donation-widget__button:not(.donation-widget__button--secondary):hover {
  border-color: #d7b057 !important;
  box-shadow: 0 0 8px rgba(188, 129, 24, 0.4);
}

/* --- 6.9 Next Section Reset --- */
body.theme-new-year .your-support {
  margin-top: -2px !important;
  margin-bottom: 4rem;
  padding-top: 4rem !important;
  position: relative;
  z-index: 10;
  background-color: #fbfbfc;
}
body.theme-new-year .donate-section__button--new-year {
  display: flex !important;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 14px;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  background: linear-gradient(
    90deg,
    #bc8118 0%,
    #cfa042 20.67%,
    #e4c572 37.98%,
    #f2e49b 49.52%,
    #e4c572 62.5%,
    #cfa042 78.85%,
    #bc8118 95.19%
  );
  color: #242424;
  font-family: "Barlow Condensed";
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 46.588px; /* 221.849% */
  letter-spacing: 0.621px;
  text-transform: uppercase;
}
/* =================================================================== */
/* 6.10 RESPONSIVE LAYOUT (New Year Media Queries)                     */
/* =================================================================== */
@media (min-width: 576px) {
  body.theme-new-year .hero__action--theme:not(.hero__action--winter-only) {
    bottom: 7% !important;
  }
}
@media (min-width: 768px) {
  body.theme-new-year .hero {
    min-height: 1100px !important;
  }
  body.theme-new-year .hero__bg-item--new-year img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }

  body.theme-new-year h1.hero__title--new-year {
    font-size: 86.8px;
    width: 100%;
    max-width: 669px;
    margin: 0 auto 1rem auto;
  }

  /* Reset Button Position for Tablet/Desktop */
  body.theme-new-year .hero__action--theme:not(.hero__action--winter-only) {
    bottom: 11% !important;
  }
}

@media (min-width: 1200px) {
  /* 1. CONTAINER RESET */
  body.theme-new-year .hero {
    display: block !important; /* Critical override for mobile flex */
    aspect-ratio: 1200 / 1252 !important;
    min-height: auto;
    padding-top: 5rem !important;
    padding-bottom: 10rem !important;
    position: relative;
    margin-bottom: -4px !important;
    overflow: visible !important;
  }

  /* 2. BACKGROUND LAYER RESET */
  body.theme-new-year .hero__bg-layer,
  body.theme-new-year .hero__bg-item--new-year {
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    height: calc(100% + 1px) !important;
    width: 100% !important;
    z-index: 0;
    order: unset !important;
    margin-top: 0 !important;
  }

  /* Combined Image Rules */
  body.theme-new-year .hero__bg-item--new-year img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    bottom: 0 !important;
  }

  /* 3. GRID LAYOUT & CONTENT RESET */
  body.theme-new-year .hero__content {
    position: relative !important;
    display: grid !important;
    width: 100%;
    height: 100%;
    grid-template-areas:
      "title      title"
      ".          widget"
      ".   widget"
      "subtitle    widget" !important;
    align-items: start !important;
    grid-template-rows: min-content min-content min-content min-content;

    /* Reset all spacing/order from mobile */
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    order: unset !important;
  }

  /* 4. GRID ITEMS */

  /* Title (Merged H1 and Class rules) */
  body.theme-new-year h1.hero__title--new-year {
    grid-area: title;
    order: unset;
    max-width: 760px;
    font-size: 99.2px !important;
    text-align: center;
    margin: 0 auto 1rem auto !important;
    padding-top: 1rem;
  }

  /* Widget (Merged Container and Widget rules) */
  body.theme-new-year .hero__widget-container {
    grid-area: widget;
    order: unset;
    position: relative !important;
    justify-self: start;

    /* Layout/Sizing */
    width: 100%;
    max-width: 578px;
    margin: 0 !important;
  }
  /* Subtitle */
  body.theme-new-year .hero__subtitle {
    grid-area: subtitle;
    text-align: left;
    justify-self: start;
    width: 515px;
    margin-left: 3rem !important;
    padding-bottom: 2rem;
  }

  /* Button (Consolidated styles + padding) */
  body.theme-new-year .hero__actions {
    display: none !important;
    grid-area: actions;
    justify-self: start;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.theme-new-year .hero__action--theme:not(.hero__action--winter-only) {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    display: inline-flex !important;
    width: max-content;

    margin: 2rem 0 5rem 3rem !important;

    font-size: 2.25rem !important;
    padding: 2rem 3rem !important;

    /* justify-self: start; */
  }

  /* 5. EXTRAS */
  body.theme-new-year .hero__new-year-text-link {
    text-align: left;
    font-size: 1.625rem;
    width: 270px;
  }

  body.theme-new-year .new-year-fireworks--hero {
    width: 464px;
    height: 385px;
    top: -5%;
    right: -9%;
  }
  body.theme-new-year .donate-section {
    min-height: auto !important;
    padding-bottom: 5rem;
  }
  body.theme-new-year .donate-section__details,
  body.theme-new-year .donate-section__message {
    display: contents !important;
  }
  body.theme-new-year .donation-wrapper {
    grid-area: widget;
    grid-row: 3 / 6; /* This parent now spans the rows correctly */
    align-self: start;
    margin: 0 !important;
    display: flex; /* Keep this if you need internal flex alignment */
    flex-direction: column;
  }
  body.theme-new-year .donate-section__content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two Equal Columns */
    grid-template-areas:
      "title title"
      "action action"
      "widget image"
      "widget text"
      "widget timer";
    grid-template-rows: auto auto min-content min-content min-content;
    column-gap: 2rem;
    row-gap: 0rem;
    align-items: start;
  }
  body.theme-new-year .donate-section__title--new-year {
    grid-area: title;
    width: 867px;
    font-size: 27.2px !important;
    margin: 12rem auto 4rem auto;
  }
  body.theme-new-year .donate-section__button--new-year {
    grid-area: action;
    margin-bottom: 4rem;
  }

  body.theme-new-year .donation-widget {
    align-self: start;
    margin: 0 0 0 5rem;
  }

  body.theme-new-year .donate-section__new-year-image {
    grid-area: image;
    width: 295px;
    align-self: end;
    margin: 0 auto;
  }

  body.theme-new-year .donate-section__subtitle--new-year {
    grid-area: text;
    margin-bottom: -5rem !important;
    align-self: end;
  }

  body.theme-new-year .donate-section__timer {
    grid-area: timer;
    align-self: end;
    margin-top: 0rem !important;
  }
  body.theme-new-year .new-year-fireworks--donate-bottom {
    display: block;
    width: 403px;
    height: 334px;
    bottom: -17px;
    left: -175px;
    transform: rotate(180deg);
  }
}

@media (min-width: 1400px) {
  body.theme-new-year .hero {
    aspect-ratio: 1400 / 1227 !important;
  }
  body.theme-new-year .hero__content {
    grid-template-rows: 12rem 37rem min-content min-content !important;
    grid-template-areas:
      "title    title"
      ".        widget"
      ". widget"
      "subtitle  widget" !important;
    padding-left: calc(4rem + 5vw);
    padding-right: calc(4rem + 5vw);
  }
  body.theme-new-year .hero__subtitle {
    width: 620px;
  }
}
@media (min-width: 1920px) {
  body.theme-new-year .hero {
    aspect-ratio: 1920 / 1726 !important;
    padding-top: 20rem !important;
    background-color: #fbfbfc !important;
  }
  body.theme-new-year .hero__content {
    grid-template-areas:
      "title widget" /* Row 2: Title is now here! */
      ". widget" /* Row 3: Subtitle */
      "subtitle widget" /* Row 4: Actions */ !important;
    grid-template-rows: 47rem min-content min-content !important;
  }
  body.theme-new-year h1.hero__title--new-year {
    font-size: 124px !important;
    margin: 0 !important;
    padding: 0px !important;
    margin-top: -29px !important;
    text-align: left;
    grid-area: title;
  }
  body.theme-new-year .hero__subtitle {
    width: 760px;
    margin: 0 0 2rem 0 !important;
    padding: 0;
    align-self: end;
  }
  body.theme-new-year .hero__action--theme:not(.hero__action--winter-only) {
    margin: 0 !important;
  }
  body.theme-new-year .hero__widget-container {
    justify-self: center;
    max-width: 58rem;
    margin: 0 !important;
  }

  body.theme-new-year .new-year-fireworks--hero {
    width: 1046px;
    height: 867px;
    top: -29%;
    left: 63%;
  }
  body.theme-new-year .donate-section {
    min-height: 1550px;
  }
  body.theme-new-year .donate-section__content {
    row-gap: 2rem;
  }
  body.theme-new-year .donate-section__title--new-year {
    width: 1505px;
    font-size: 2.85rem !important;
  }
  body.theme-new-year .donate-section__button--new-year {
    font-size: 2.85rem !important;
    padding: 1rem 3rem;
  }
  body.theme-new-year .donate-section__new-year-image {
    width: 400px;
  }
  body.theme-new-year .donate-section__timer {
    width: 694px !important;
    justify-content: space-around !important;
  }
  body.theme-new-year .donate-section__subtitle--new-year {
    width: 694px;
    font-size: 2.85rem !important;
    margin-bottom: -2.5rem;
  }
  body.theme-new-year .donation-widget{
    margin: 0 auto;
  }
  body.theme-new-year .donation-widget__tab {
    font-size: 1.675rem !important;
  }
}
/* ======================================================= */
/* FIX: Override Floating Wrapper for New Year Mobile Stack */
/* ======================================================= */
body.theme-new-year .hero .donation-wrapper--floating {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  width: 100% !important;
}