/* ============================================================
   BIGGER HEARTS — DECORATIVE HEART LAYER
   Brings the heart-cluster brand identity through every page:
   floating watermark hearts, heart-marked lists, heart dividers,
   heart-prefixed eyebrows, heart-cornered cards.

   Important: this layer is purely decorative — every heart uses
   aria-hidden via CSS pseudo-elements, so screen readers ignore
   them. They don't replace any content; they support it.
   ============================================================ */


/* ============================================================
   1. EYEBROW TAGS — small heart before the small caps label
      e.g. "♥ WHAT WE DO", "♥ OUR STORY", "♥ DONATE"
   ============================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  flex-shrink: 0;
}


/* ============================================================
   2. HEART BULLET LISTS
      Add class="heart-list" to any <ul> for red heart bullets
   ============================================================ */

ul.heart-list,
.program-body ul {
  list-style: none;
  padding-left: 0;
}

ul.heart-list li,
.program-body ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--space-1);
}

ul.heart-list li::before,
.program-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.95rem;
  height: 0.95rem;
  background-color: var(--pink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
}


/* ============================================================
   3. HEART DIVIDER — three hearts in a row, between sections
      <div class="heart-divider"></div>
   ============================================================ */

.heart-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-4) auto;
  padding: 0;
  max-width: 200px;
}

.heart-divider::before,
.heart-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--blush-deep), transparent);
}

.heart-divider-marks {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pink);
}

.heart-divider-marks::before,
.heart-divider-marks::after {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--blush-deep);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
}

.heart-divider-marks > span {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  background-color: var(--pink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
}


/* ============================================================
   4. HEART WATERMARK — large soft heart in section backgrounds
      Decorates hero areas, "Our story" sections, etc.
      Sits behind content as a brand presence.
   ============================================================ */

.heart-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
  background-color: var(--pink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
}

.heart-watermark--xl  { width: 400px; height: 400px; }
.heart-watermark--lg  { width: 280px; height: 280px; }
.heart-watermark--md  { width: 180px; height: 180px; }
.heart-watermark--sm  { width: 100px; height: 100px; }

/* Position variants */
.heart-watermark--top-right    { top: -60px;    right: -60px; }
.heart-watermark--top-left     { top: -40px;    left: -40px; }
.heart-watermark--bottom-right { bottom: -80px; right: -40px; }
.heart-watermark--bottom-left  { bottom: -60px; left: -60px; }
.heart-watermark--mid-right    { top: 40%; right: -100px; }
.heart-watermark--mid-left     { top: 40%; left: -100px; }


/* ============================================================
   5. FLOATING DECORATIVE HEARTS — scattered through the cream
      Used on sections that have space to breathe. Adds the
      cluster-of-hearts feeling to background areas.
   ============================================================ */

.hearts-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hearts-scatter::before,
.hearts-scatter::after {
  content: '';
  position: absolute;
  background-color: var(--pink);
  opacity: 0.08;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
}

.hearts-scatter::before {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 5%;
  transform: rotate(-15deg);
}

.hearts-scatter::after {
  width: 90px;
  height: 90px;
  bottom: 15%;
  right: 8%;
  transform: rotate(20deg);
  opacity: 0.07;
  background-color: var(--rose);
}


/* ============================================================
   6. CARD CORNERS — small heart in corner of cards/panels
   ============================================================ */

.card-with-heart {
  position: relative;
  overflow: hidden;
}

.card-with-heart::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background-color: var(--pink);
  opacity: 0.08;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  pointer-events: none;
}


/* ============================================================
   7. PROGRAM IMPACT ICONS — already heart-shaped on cards
      Add a subtle heart background to each card icon
   ============================================================ */

.program-impact-icon {
  position: relative;
}

.program-impact-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--pink);
  opacity: 0.12;
  border-radius: inherit;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / 75% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / 75% no-repeat;
  pointer-events: none;
}


/* ============================================================
   8. PROGRAM CARDS — heart watermark in the top-right of image
      Adds a subtle brand mark to every program card.
   ============================================================ */

.program-card .program-card-image {
  position: relative;
}

.program-card .program-card-image::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background-color: var(--white);
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  pointer-events: none;
}


/* ============================================================
   9. SECTION CONTAINERS — make heart-watermark positioning work
   ============================================================ */

.section-with-hearts,
.home-hero,
.home-impact,
.home-donate,
.donate-hero,
.program-hero,
.program-cta,
.programs-grid-section,
.about-hero,
.about-mvv {
  position: relative;
  overflow: hidden;
}


/* ============================================================
   10. CTA SECTIONS — heart watermarks behind big donate prompts
   ============================================================ */

.home-donate,
.program-cta {
  position: relative;
}

.home-donate::before,
.program-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4%;
  transform: translateY(-50%) rotate(-12deg);
  width: 120px;
  height: 120px;
  background-color: var(--pink);
  opacity: 0.10;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

.home-donate::after,
.program-cta::after {
  content: '';
  position: absolute;
  top: 25%;
  right: 4%;
  transform: rotate(18deg);
  width: 90px;
  height: 90px;
  background-color: var(--rose);
  opacity: 0.12;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

@media (min-width: 768px) {
  .home-donate::before,
  .program-cta::before {
    width: 200px;
    height: 200px;
    left: 6%;
  }
  .home-donate::after,
  .program-cta::after {
    width: 140px;
    height: 140px;
    right: 6%;
  }
}

/* Ensure CTA content sits above the decorations */
.home-donate > .container,
.program-cta > .container {
  position: relative;
  z-index: 1;
}


/* ============================================================
   11. PULL QUOTES — replace generic quote mark with heart
   ============================================================ */

.program-pull-quote,
.story-pull-quote {
  position: relative;
  padding-left: var(--space-5);
}

.program-pull-quote::before,
.story-pull-quote::before {
  content: '';
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  width: 28px;
  height: 28px;
  background-color: var(--pink);
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  pointer-events: none;
}


/* ============================================================
   12. HEART BAND — small horizontal pattern of hearts that
       can appear above/below sections as a visual divider.
   ============================================================ */

.heart-band {
  height: 32px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='32' viewBox='0 0 40 32'><path fill='%23C8283C' opacity='0.18' d='M20 26C12 20 7 14 7 9c0-3 2-5 5-5 2 0 4 1 5 3 1-2 3-3 5-3 3 0 5 2 5 5 0 5-5 11-13 17z'/></svg>");
  background-repeat: repeat-x;
  background-size: 40px 32px;
  background-position: center;
  margin: 0;
  pointer-events: none;
}


/* ============================================================
   13. RESPECT REDUCED MOTION
      Decorative hearts are static, but disable any potential
      animations on them for users who prefer reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .heart-watermark,
  .hearts-scatter::before,
  .hearts-scatter::after {
    animation: none !important;
  }
}


/* ============================================================
   14. HEADER — small heart accent stripe between header and content
       Subtle brand band under the masthead.
   ============================================================ */

.site-header {
  position: relative;
}

.site-header::after {
  /* Coloured stripe at the very bottom of the header */
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--pink) 15%,
    var(--rose) 50%,
    var(--pink) 85%,
    transparent 100%
  );
  opacity: 0.75;
  pointer-events: none;
}


/* ============================================================
   15. FOOTER — heart pattern band at the top edge
   ============================================================ */

.site-footer {
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><path fill='%23C8283C' opacity='0.35' d='M24 19C16 14 11 9 11 5c0-2 2-4 4-4 2 0 3 1 4 2 1-1 2-2 4-2 2 0 4 2 4 4 0 4-5 9-13 14z'/></svg>");
  background-repeat: repeat-x;
  background-size: 48px 24px;
  background-position: center top;
  pointer-events: none;
}


/* ============================================================
   16. HERO IMAGE — heart accent badge in the top-left corner
       Sits inside the image (visible) with a soft white outline
       so it pops against any photo behind it.
   ============================================================ */

.home-hero-image,
.donate-hero-image {
  position: relative;
}

.home-hero-image::before,
.donate-hero-image::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 50px;
  height: 50px;
  z-index: 2;
  background-color: var(--pink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88C20 70 8 48 8 30c0-12 10-22 22-22 8 0 16 4 20 12 4-8 12-12 20-12 12 0 22 10 22 22 0 18-12 40-42 58z'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

@media (max-width: 768px) {
  .home-hero-image::before,
  .donate-hero-image::before {
    width: 36px;
    height: 36px;
    top: 12px;
    left: 12px;
  }
}