/* =====================================================
   1. HEADER + NAV (Unchanged)
===================================================== */
#masthead,
#masthead.site-header,
#masthead .header-nav-box,
.site-header {
  background-color: #F3E1DC !important;
  box-shadow: none !important;
  border: none !important;
}

#masthead .site-title a,
#masthead .header-nav-box a {
  color: #333 !important;
}

#masthead .header-nav-box .row.py-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 768px) {
  #masthead .header-nav-box .row.py-3 {
    flex-direction: column;
  }
}

/* /* =====================================================
   2. LATEST CASE — LEFT / RIGHT WITH CENTER LINE
===================================================== */

#Cause-dec .col-lg-4 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-bottom: 50px !important;
}

/* Card container */
.cause-item,
.causes-box {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  background: #FFF2F4 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 35px rgba(0,0,0,0.15) !important;
}

/* IMAGE — LEFT */
.cause-item img,
.causes-box img {
  width: 40% !important;
  object-fit: cover !important;
}

/* CONTENT — RIGHT */
.cause-inner-main {
  width: 60% !important;
  padding: 35px 45px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

/* 🔥 CENTER YELLOW LINE */
.cause-item::before,
.causes-box::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40%;
  width: 6px;
  background: #FFCC00;
}

/* Text styles */
.cause-inner-main h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1F2937 !important;
  margin-bottom: 12px;
}

.cause-inner-main p {
  font-size: 15px !important;
  color: #4B5563 !important;
  line-height: 1.6;
}

/* Button spacing */
.cause-inner-main .cause_btn {
  margin-top: 20px;
}

/* =====================================================
   MOBILE FIX — LATEST CASE (FINAL CLEAN VERSION)
===================================================== */
@media (max-width: 768px) {

  /* Card layout */
  .cause-item,
  .causes-box {
    display: block !important;
    position: relative !important;
  }

  /* Image full width */
  .cause-item img,
  .causes-box img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* REMOVE vertical yellow line */
  .cause-item::before,
  .causes-box::before {
    content: none !important;
  }

  /* Add horizontal yellow divider */
  .cause-item img::after {
    content: "" !important;
    display: block !important;
    height: 6px !important;
    width: 100% !important;
    background: #FFCC00 !important;
  }

  /* Content area */
  .cause-inner-main {
    width: 100% !important;
    padding: 28px 24px !important;
    text-align: left !important;
  }

  /* Fix text spacing */
  .cause-inner-main h3 {
    margin-top: 10px !important;
  }

  /* Button center */
  .cause-inner-main .cause_btn {
    margin-top: 18px !important;
  }
}


/* =====================================================
   3. BUTTON FIX (THE "NUCLEAR" OVERRIDE)
   We reset text-fill and z-index to stop overlapping.
===================================================== */

/* Default State */
.cause_btn a,
.cause_btn a span {
  background: #C97D7D !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important; /* Ensure z-index works */
  z-index: 1 !important;
}

/* HOVER STATE - Force Black Text */
/* We target the specific classes seen in your inspector (.px-3.py-2) to be safe */
#Cause-dec .cause_btn:hover a,
#Cause-dec .cause_btn a:hover,
#Cause-dec .cause_btn:hover a.px-3,
#Cause-dec .cause_btn a:hover span {
  
  /* 1. Change Background */
  background-color: #E8B4B8 !important;
  background-image: none !important; /* Remove any gradients hiding text */

  /* 2. Force Text Color (Standard) */
  color: #000000 !important;

  /* 3. Force Text Fill (Modern Browsers) - This is likely the culprit */
  -webkit-text-fill-color: #000000 !important;
  fill: #000000 !important;

  /* 4. Layering Priority */
  position: relative !important;
  z-index: 9999 !important; /* Sit on top of everything */
  opacity: 1 !important;
  visibility: visible !important;
}

/* =====================================================
   4. MOBILE RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .cause-item,
  #Cause-dec .col-lg-4:nth-child(even) .cause-item {
    flex-direction: column !important;
  }

  .cause-item img {
    width: 100% !important;
    height: 250px !important;
  }

  .cause-item .desc,
  .cause-item .cause-content-wrap,
  .cause-item .cause-inner-main,
  #Cause-dec .col-lg-4:nth-child(even) .cause-item .cause-inner-main {
    width: 100% !important;
    padding: 25px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 8px solid #FFCC00 !important; 
  }
}

/* =====================================================
   5. FORMS
===================================================== */
.contact-section-form {
  background: #F7E4E1 !important;
  border-radius: 20px !important;
  padding: 40px !important;
}

.contact-section-form input[type="submit"] {
  background: #C05A73 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
}

.contact-section-form input[type="submit"]:hover {
  color: #000000 !important;
}

/* ================================
   DISABLE STICKY / MOVING HEADER
================================ */

#masthead {
  position: relative !important;
  top: auto !important;
}

body .is-sticky,
body .sticky-menu,
body .sticky-header {
  position: relative !important;
}

/* Force header to scroll normally */
.header-wrap,
.header-nav-box {
  position: relative !important;
  transform: none !important;
}

/* =====================================================
   CHANGE HEADER 'DONATE NOW' BUTTON COLOR
===================================================== */

/* =====================================================
   MATCH HEADER BUTTON TO 'MAKE A DONATION' BUTTON
===================================================== */

/* =====================================================
   HEADER BUTTON - GLOW EFFECT
===================================================== */

/* 1. Normal State */
#masthead .head_btn a {
    background-color: #554b59 !important; /* Dark Purple */
    color: #ffffff !important;            /* White Text */
    border: 2px solid #554b59 !important; 
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

/* 2. Hover State (White with Purple GLOW) */
#masthead .head_btn a:hover {
    background-color: #ffffff !important; /* White Background */
    color: #554b59 !important;            /* Dark Purple Text */
    border: 1
			1px solid #554b59 !important; 
    
    /* THE GLOW: Strong blur with purple color instead of black */
    box-shadow: 0 0 20px rgba(85, 75, 89, 0.7) !important; 
    
    /* Optional: Slight lift to make it pop */
    transform: translateY(-2px) !important; 
}