/* =================================================================== */
/* 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 TUESDAAY THEME
/* 4.0 WINTER HOLIDAY THEME
/* =================================================================== */
/* 1.0 THEME SWITCHBOARD (Show/Hide Logic)                             */
/* =================================================================== */

/* --- Default States (Hide Winter elements initially) --- */
.hero__title--winter-holiday {
  display: none;
}

/* --- Winter Holiday Theme Activation --- */
body.theme-winter-holiday .hero__bg-item--default,
body.theme-winter-holiday .hero__bg-item--giving-tuesday,
body.theme-winter-holiday .hero__action--default {
  display: none !important;
}

/* 1. Hide the "Give Today" text */
body.theme-winter-holiday .hero__title--default {
  display: none !important;
}

/* 2. Hide the "Giving Tuesday" Graphic */
body.theme-winter-holiday .hero__title--graphic {
  display: none !important;
}

/* 3. Show the "Celebrate 2025!" text */
body.theme-winter-holiday .hero__title--winter-holiday {
  display: block !important;
}

/* 4. Show Background & Action Buttons */
body.theme-winter-holiday .hero__bg-item--winter-holiday,
body.theme-winter-holiday .hero__action--theme {
  display: block !important;
}
/* --- Default States (Hide Winter elements initially) --- */
.hero__title--winter-holiday,
.donate-section__title--winter-holiday,
.donate-section__winter-image,
.winter-snowflake,
.hero__top-fade {
  display: none;
}
/* =================================================================== */
/* 2.0 HERO SECTION OVERRIDES                                          */
/* =================================================================== */

/* --- 2.1 The Container (Mobile Base) --- */
/* ADDED: body.theme-winter-holiday .hero */
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 --- */
/* ADDED: Winter selectors here */
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 --- */
/* ADDED: Winter selector here */
body.theme-giving-tuesday .hero .hero__content,
body.theme-winter-holiday .hero .hero__content {
  height: auto;
  margin-top: 0;
  width: 100%;
}

/* (You can keep 2.4 and 2.5 as they are, they looked correct in your file) */
/* --- 2.4 The Spacing Fix (Mobile Nav Clearance) --- */
/* Targeting the H1 specifically to push content down */
body.theme-giving-tuesday h1.hero__title--text {
  /* Adjust this value to clear your mobile Navigation */
  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 {
  /* Force widget to be a normal block element */
  display: block;
  position: relative;
  float: none;
  width: 100%;
  margin-top: 1rem;
}
/* FORCE THE WIDGET INTO THE 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) {
  /* Reset the H1 padding (Grid handles spacing now) */
  body.theme-giving-tuesday h1.hero__title--text {
    padding-top: 0;
  }

  /* Add padding to the main container for desktop breathing room */
  body.theme-giving-tuesday .hero {
    padding-top: 12rem;
    padding-bottom: 10rem;
  }

  /* Grid Layout */
  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";
  }

  /* Grid Area Assignments */
  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;
  }

  /* Visual Tweaks */
  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;
  }
}

/* =================================================================== */
/* 3.0 GIVING TUESDAAY THEME                                          */
/* =================================================================== */

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

/* --- 4.1 Typography for "Celebrate 2025" --- */
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;
}
/* --- Override Vertical Spacing for Winter Theme Only --- */
/* This overrides the 4rem padding set in Section 2.4 */
body.theme-winter-holiday h1.hero__title--text {
  padding-top: 2rem;
}

/* 3. Reset for Desktop (Grid handles placement) */
@media (min-width: 1200px) {
  body.theme-winter-holiday .hero__content {
    padding-top: 0 !important;
  }
}
/* --- 4.2 Background Image Handling (Winter Theme - Base) --- */

/* 1. CONTAINER FIX: Force the background layers to stretch to the actual bottom */
/* We target the entire chain: Layer -> Item -> Picture Tag */
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;

  /* Reset Height constraints so Top/Bottom takes over */
  height: auto !important;
  width: 100% !important;

  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important; /* Fixes picture tag collapsing */
}

/* 2. IMAGE POSITIONING: Sit at the bottom of the stretched container */
body.theme-winter-holiday .hero__bg-item--winter-holiday img {
  /* Full Width, Natural Height (No stretching, no zooming) */
  width: 100% !important;
  height: auto !important;

  /* Anchor to Bottom */
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;

  /* Ensure Top is unset so it doesn't stretch vertically */
  top: auto !important;

  /* Disable cover so we see the whole image without cropping */
  object-fit: unset !important;
  object-position: unset !important;
}
/* --- 4.3 Navigation Background (Figma Specs) --- */
/* We use a pseudo-element (::before) to create the gradient layer. */
body.theme-winter-holiday #main-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90x;
  background: linear-gradient(180deg, #133829 25%, rgba(19, 56, 41, 0) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px); /* Safari support */
  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;
}

/* Ensure the H1 doesn't add extra space */
body.theme-winter-holiday h1.hero__title--text {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* --- 4.4 Base Background Color --- */
/* Replaces the default Navy Blue background with Winter Green.
   Visible while images load or if transparency is used. 
*/
body.theme-winter-holiday .hero {
  background-color: #05511f !important;
  min-height: 0 !important;
  height: auto;
}
/* --- 4.6 Widget Styling (Winter Theme) --- */

/* 1. Update Widget Border & Background (Figma Styles) */
body.theme-winter-holiday .donation-widget {
  border: 2px solid #bc8118 !important; /* Holiday Gold */
  background: rgba(251, 251, 252, 0.1) !important;
  border-radius: 5px !important;
  /* backdrop-filter is usually handled in base CSS, but we can force it if needed */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  /* Ensure relative positioning so the bow sits correctly on the corner */
  position: relative !important;
  overflow: visible !important; /* CRITICAL: Allows bow to stick out of the box */
}

/* 2. The Bow Decoration */
body.theme-winter-holiday .donation-widget__decoration {
  display: block !important;
  position: absolute;
  z-index: 10;

  /* SIZE: Adjust these to match your actual image dimensions */
  width: 80px;
  height: 80px;

  /* POSITIONING: Sits on the top-right corner */
  top: -30px; /* Pulls it up to straddle the border */
  right: -10px; /* Pushes it slightly off the edge */

  /* IMAGE HANDLING */
  background-image: url("/assets/images/donate/bow.png"); /* <--- CHECK THIS PATH */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* 2. The Bow Decoration (Updated Sizing) */
body.theme-winter-holiday .donation-widget__decoration {
  display: block !important;
  position: absolute;
  z-index: 10;

  /* FIGMA SPECS */
  width: 64px;
  height: 58px;
  aspect-ratio: 32/29;

  /* POSITIONING */
  /* -25px is roughly half height, placing the center of the bow on the border line */
  top: -19px;
  right: 12px;

  /* IMAGE HANDLING */
  /* TODO: Update this path to your actual bow image location! */
  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 (Winter Theme) --- */

/* 1. Tabs Container: Gold GRADIENT Divider Line */
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;
}

/* 2. Active Tab: Gold Border Box (Seamless Connection) */
body.theme-winter-holiday .donation-widget__tab--active {
  /* Base Gold Border */
  border-color: #bc8118 !important;
  border-style: solid !important;
  border-width: 2px !important;

  /* REMOVE Bottom Border so it opens into the content */
  border-bottom-color: transparent !important;

  /* THE FIX: Square off bottom corners so lines go straight down */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  /* THE FIX: Push tab down 2px to overlap the divider line exactly */
  margin-bottom: -2px !important;

  /* Ensure it sits on top of the line (visually merging) */
  position: relative;
  z-index: 5;
}

/* 3. Amount Buttons: Gold Border (Solid) */
body.theme-winter-holiday
  .donation-widget__button:not(.donation-widget__button--secondary) {
  border-color: #bc8118 !important;
}

/* 4. Amount Buttons Hover State */
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 (Winter Theme)                       */
/* =================================================================== */

/* 1. Fade In Gradient (Top Transparent -> Bottom Green) */
body.theme-winter-holiday .donate-section__fade-in {
  background: linear-gradient(
    180deg,
    rgba(251, 251, 252, 0) 0%,
    #05511f 86.65%
  ) !important;
}

/* 2. Main Section Background (Solid Green) */
body.theme-winter-holiday .donate-section {
  background-color: #05511f !important;
  overflow: visible;
}

/* 3. Hide the Default Background Image (Reveal Green) */
body.theme-winter-holiday .donate-section__bg {
  display: none !important;
}

/* 4. Fade Out Gradient (Bottom Green -> Top Transparent) */
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 (Text & Image)                           */
/* =================================================================== */

/* 1. Hide Default Text */
body.theme-winter-holiday .donate-section__title--default {
  display: none !important;
}

/* 2. Show & Style Winter Text */
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; /* Center + Bottom Margin */
  text-align: left;
}

/* 3. Show & Style Winter Image */
body.theme-winter-holiday .donate-section__winter-image {
  display: block !important;
  max-width: 100%;
  height: auto;
  margin: 0 auto 2rem auto; /* Center + Bottom Spacing before subtitle */
}

/* 4. Subtitle Styling (Ensure visibility against green) */
body.theme-winter-holiday .donate-section__subtitle {
  color: #fbfbfc !important;
  font-weight: 600;
  width: 142px;
  margin: 0 auto;
  display: none !important; /* REMOVE THIS LINE IN ORDER TO TURN IT ON */
}

/* =================================================================== */
/* 4.10 Timer Styling (Winter Theme - Gold Vertical Stack)             */
/* =================================================================== */

/* 1. Container: Gold Border & Vertical Stack */
body.theme-winter-holiday .donate-section__timer {
  display: none !important; /* UPDATE THIS TO FLEX IN ORDER TO TURN IT ON */
  flex-direction: column !important; /* Stack blocks vertically */
  align-items: center !important;
  justify-content: center !important;

  /* The Gold Box Look */
  border: 1px solid #bc8118 !important;
  border-radius: 5px !important;
  padding: 2rem 1rem !important;
  width: 120px !important; /* Match screenshot narrow look */
  margin: 2rem auto 0 auto !important; /* Center it */
}

/* 2. Remove default spacing between blocks */
body.theme-winter-holiday .timer-block {
  margin: 0 0 1.5rem 0 !important; /* Space out the numbers vertically */
  text-align: center;
}
body.theme-winter-holiday .timer-block:last-child {
  margin-bottom: 0 !important;
}

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

/* 4. Typography: Small Labels */
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 (Winter Theme)                          */
/* =================================================================== */

/* 1. Style the decorative background box */
body.theme-winter-holiday .layered-image__bg {
  /* FIGMA STYLES */
  border-radius: 10px !important;
  border: 1.5px solid #bc8118 !important; /* Rounded 1.453px to 1.5px for better rendering */

  /* The Glassmorphism Gradient */
  background: linear-gradient(
    180deg,
    rgba(204, 157, 62, 0.2) 0%,
    rgba(204, 157, 62, 0.06) 100%
  ) !important;

  /* Blur Effect */
  backdrop-filter: blur(7.3px) !important;
  -webkit-backdrop-filter: blur(7.3px) !important; /* Safari support */

  /* RESET BASE STYLES */
  /* We must ensure the old solid blue/color is gone so the gradient shows */
  background-color: transparent !important;
  box-shadow: none !important; /* Remove standard drop shadows if present */
}

/* 2. Optional: Round the image corners to match */
/* Since the background has 10px radius, the image should usually match */
body.theme-winter-holiday .layered-image__frame,
body.theme-winter-holiday .layered-image__img {
  border-radius: 10px !important;
}
/* =================================================================== */
/* 4.12 Annual Impact Section (Winter Theme)                           */
/* =================================================================== */

/* 1. Pie Chart: Gold Tones Conic Gradient */
body.theme-winter-holiday .annual-impact-pie-chart {
  background: conic-gradient(
    /* Slice 1: Operations (14.4%) -> #E9D6AF */ #e9d6af 0% 14.4%,

    /* Slice 2: Events (15.6%) -> #DFB96D */ /* 14.4 + 15.6 = 30% */ #dfb96d
      14.4% 30%,

    /* Slice 3: Projects (70%) -> #BF8F31 */ /* 30 + 70 = 100% */ #bf8f31 30%
      100%
  ) !important;
}

/* 2. Legend Text Color (Global Override for this theme) */
/* Overrides the #fbfbfc white text from your base .pie-chart-legend li */
body.theme-winter-holiday .pie-chart-legend li {
  color: #192147 !important; /* DSA Navy Blue for contrast on gold */
}

/* 3. Legend Background Colors (The Pills) */

/* Slice 1 Legend: Operations */
body.theme-winter-holiday .annual-impact-pie-chart-operations {
  background-color: #e9d6af !important;
}

/* Slice 2 Legend: Events */
body.theme-winter-holiday .annual-impact-pie-chart-events {
  background-color: #dfb96d !important;
}

/* Slice 3 Legend: Projects */
body.theme-winter-holiday .annual-impact-pie-chart-projects {
  background-color: #bf8f31 !important;
}
/* =================================================================== */
/* 4.13 Hero Action Button (Winter Theme)                              */
/* =================================================================== */

/* Target the "Tax Law Updates" button specifically */
body.theme-winter-holiday .hero__action--theme {
  /* BACKGROUND GRADIENT */
  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;

  /* FIGMA TYPOGRAPHY */
  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; /* Determines the height of the text area */
  letter-spacing: 0.621px !important;
  text-transform: uppercase !important;

  /* FIGMA LAYOUT (New additions) */
  display: inline-flex !important;
  padding: 3px 30px !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 6rem;
}

/* Hover Effect */
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 (Shared Assets) --- */
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 (Figma Specs) --- */
body.theme-winter-holiday .hero__top-fade {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    
    /* FIGMA SPECS */
    width: 100%; /* Converted from 320px fixed width to full responsive width */
    height: 139px; /* Rounded from 138.789px */
    background: linear-gradient(180deg, #133829 25%, rgba(19, 56, 41, 0.00) 100%);
    backdrop-filter: blur(1px); /* Rounded from 0.897px */
    -webkit-backdrop-filter: blur(1px);
    
    /* LAYERING */
    z-index: 1; /* Sits on top of the image (z-0) but below content (z-5) */
    pointer-events: none; /* Ensures clicks pass through to the image/background */
}
/* =================================================================== */
/* 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; /* Safety for smaller screens */
    margin-left: auto !important; /* Kept centered */
    margin-right: auto !important; /* Kept centered */
  }
  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) {
  /* 1. HERO HEIGHT & IMAGE FIX (Fixes Green Space above Nav) */
  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;

    /* FIX 1: Fill the height + 2px extra to cover bottom gaps */
    height: calc(100% + 2px) !important;

    /* FIX 2: Crop edges so it fits without stretching */
    object-fit: cover !important;

    /* FIX 3: Keep the wave visible */
    object-position: center bottom !important;

    position: absolute !important;
    top: auto !important;
    left: 0 !important;

    /* FIX 4: Overlap the next section to seal the seam */
    bottom: -2px !important;
  }

  /* 2. LAYOUT RESET (Crucial) */
  /* Remove the negative margin we used on mobile to pull text up */
  body.theme-winter-holiday .hero__content {
    margin-top: 0 !important;
    padding-top: 0 !important;

    /* Grid Layout */
    grid-template-areas:
      "title    title"
      "subtitle widget"
      "actions  widget";
    gap: 0;
    align-items: start;
  }

  /* 3. MAIN TITLE (Centered & Wide) */
  body.theme-winter-holiday h1.hero__title--text {
    text-align: center;
    width: 100%; /* Ensure it spans the grid area */
    max-width: 889px; /* Limit the text width per your specs */
    margin: 0 auto 2rem auto !important; /* Center it */
    font-size: 99.2px !important;
  }

  /* 4. SUBTITLE (Left Aligned with Indent) */
  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;
  }

  /* 5. ACTIONS (Buttons) */
  body.theme-winter-holiday .hero__actions {
    justify-content: flex-start;
    margin-left: 3rem !important; /* Matches subtitle indent */
    padding-top: 0;
  }

  body.theme-winter-holiday .hero__action--theme {
    font-size: 27.2px !important;
    height: 85.4px !important;
    margin-top: 0 !important;
  }

  /* 6. WIDGET POSITION (Fixes "Too Far Right") */
  body.theme-winter-holiday .hero .donation-widget,
  body.theme-winter-holiday .hero .hero__widget-container {
    grid-area: widget;
    margin-top: 0 !important;

    /* ALIGNMENT FIX */
    justify-self: end;
    margin-right: 3rem !important; /* Adds cushion from the right edge */

    /* Ensure snowflakes can float out */
    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;
  }
  /* 7. SNOWFLAKES (Positioning) */

  /* Hero Snowflake (Top Left) */
  body.theme-winter-holiday .winter-snowflake--hero {
    top: 3%;
    left: -7%;
    width: 20vw !important;
    max-width: none !important;
  }

  /* Donate Section Snowflakes */
  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);
  }

  /* 8. DONATE SECTION (Ensure relative positioning for snowflakes) */
  body.theme-winter-holiday .donate-section__content {
    position: relative !important;
    align-items: flex-start;
  }
}

@media (min-width: 1400px) {
  /* 1. GRID RESET: Back to Two Columns */
  body.theme-winter-holiday .hero .hero__content {
    grid-template-areas:
      "title    widget" /* Title moves back to Column 1 */
      "subtitle widget"
      "actions  widget";

    /* Keep alignment */
    align-items: start;
    gap: 1rem 5%; /* Reset gap to standard desktop spacing */
  }
  body.theme-winter-holiday .hero {
    min-height: 1450px !important;
    padding-top: 13rem;
    padding-bottom: 23rem;
  }
  /* 2. TITLE: Left Alignment & Positioning */
  body.theme-winter-holiday h1.hero__title--text {
    text-align: left; /* Snap back to left */
    grid-area: title;
    margin: 12rem 0 0 3rem !important;
  }

  /* 3. WIDGET: Adjust position relative to new grid */
  body.theme-winter-holiday .hero .donation-widget,
  body.theme-winter-holiday .hero .hero__widget-container {
    /* Keep it pushed right, but maybe adjust the margin */
    margin-right: 8rem !important;
  }

  /* 4. SNOWFLAKE (Hero) - Reposition */
  /* Since the title is now on the left, we might need to move the snowflake 
       so it doesn't overlap the text awkwardly. */
  body.theme-winter-holiday .winter-snowflake--hero {
    top: -10%;
    left: -4%;
    width: 15vw !important;
  }

  /* 5. Support Section Spacing */
  /* Often needs more breathing room on giant screens */
  body.theme-winter-holiday .your-support {
    padding-top: 10rem !important;
  }
}
@media (min-width: 1700px) {
    
    body.theme-winter-holiday .hero {
        /* Increase height to reveal heads as image zooms in */
        min-height: 1650px !important; 
        
        /* Optional: Increase bottom padding if the wave gets too far from content */
        padding-bottom: 58rem !important; 
    }
    
    /* Adjust Snowflake position if needed */
    /* Usually on huge screens, we need to push it further left */
    body.theme-winter-holiday .winter-snowflake--hero {
        left: -850px; 
    }
}

@media (min-width: 1920px) {

    /* 1. HERO HEIGHT & SPACING */
    /* Increase height to ensure the "Heads" don't get cropped as image zooms in */
    body.theme-winter-holiday .hero {
        min-height: 1600px !important; 
        padding-top: 15rem !important;
    }

    /* 2. TITLE SPECS (Figma) */
    body.theme-winter-holiday h1.hero__title--text {
        font-size: 124px !important;
        width: 715px !important;
        max-width: none !important; /* Unlock previous constraints */
        
        /* Layout */
        margin-left: 10rem !important; /* Push deeper into the layout */
        margin-bottom: 2rem !important;
    }

    /* 3. SUBTITLE SPECS (Figma) */
    body.theme-winter-holiday h2.hero__subtitle {
        font-size: 50px !important;
        width: 760px !important;
        max-width: none !important;
        
        /* Align with Title */
        margin-left: 10rem !important; 
    }

    /* 4. ACTION BUTTON ALIGNMENT */
    body.theme-winter-holiday .hero__actions {
        margin-left: 10rem !important; /* Align with Title/Subtitle */
    }

    /* 5. WIDGET SPECS (Fix "Off Screen" Issue) */
    body.theme-winter-holiday .hero .donation-widget,
    body.theme-winter-holiday .hero .hero__widget-container {
        /* Force Figma Width */
        width: 694px !important;
        max-width: none !important;
        
        /* Positioning: Pull it away from the right edge */
        /* Increased from 8rem to 18rem to bring it onto the canvas */
        margin-right: 18rem !important; 
    }

    /* 6. SNOWFLAKES (Hero) */
    /* Push the snowflake further left since the column is wider */
    body.theme-winter-holiday .winter-snowflake--hero {
        left: -850px; 
        top: -100px;
    }
}

/* =================================================================== */
/* 4.15 Footer Styling (Winter Theme - Recolor)                        */
/* =================================================================== */

/* 1. Background Color Swap (Navy #192147 -> Green #133829) */
/* We target every layer that used the old blue background */
body.theme-winter-holiday .footer,
body.theme-winter-holiday .halftone-wrapper,
body.theme-winter-holiday .blue-blur {
    background-color: #133829 !important;
}

/* 2. Update the Halftone Gradient (The "Fade Up") */
body.theme-winter-holiday .halftone {
    /* Replaces var(--Navy-Blue-1000) with #133829 in the gradient */
    background: linear-gradient(to top, #133829 90%, white) !important;
}

/* 3. Update the Dots (Make them crisp White against the Green) */
body.theme-winter-holiday .halftone::after {
    /* We redefine the background image to use White instead of Indigo-100 */
    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;
}

/* 4. Typography Updates (Ensure readability on Green) */
/* body.theme-winter-holiday .footer h2, 
body.theme-winter-holiday .footer h3, 
body.theme-winter-holiday .footer p,
body.theme-winter-holiday .footer li,
body.theme-winter-holiday .footer address,
body.theme-winter-holiday .footer a {
    color: #FBFBFC !important; 
} */

/* 5. Input Fields (Email) - Gold Border */
/* body.theme-winter-holiday #email {
    background-color: #FBFBFC !important;
    border-color: #BC8118 !important; 
    color: #192147 !important; 
} */

/* 6. "Subscribe" Button - Gold Border */
/* body.theme-winter-holiday #join-form button {
    border-color: #BC8118 !important; 
    color: #FBFBFC !important;
    background-color: transparent;
}

body.theme-winter-holiday #join-form button:hover {
    background-color: #BC8118 !important; 
    color: #192147 !important; 
} */

/* 7. Footer "Donate" Button - Gold Gradient */
/* body.theme-winter-holiday .support-wrapper a {
    background: linear-gradient(90deg, #BC8118 0%, #CC9C3D 20%, #E9CE7E 50%, #CC9C3D 80%, #BC8118 100%) !important;
    border: none !important;
    color: #242424 !important; 
    font-weight: 700 !important;
} */

/* Styling for the container of the icons */
/* .social-links {
    display: flex;
    gap: 15px;
    font-size: 24px;
} */

/* The Gold Gradient Mask Effect */
/* .social-links i {
    background: linear-gradient(180deg, #F3DBA6 0%, #BF933C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
} */

/* Hover effect (optional - e.g., slightly lighter gold) */
/* .social-links i:hover {
    background: linear-gradient(180deg, #ffeebb 0%, #d4a54c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
} */