/* Pedersen Foundation — Textured variant overrides
   Replaces white/light section backgrounds with the limestone-teal texture.
   Uses background-attachment: fixed so the texture reads as one continuous
   surface behind the whole page — sections feel like they're cut out of it.
*/

/* ─── Page-level texture ─── */
body {
  background-color: #f0ebe3;
  background-image: url('../assets/images/pedersen-texture-limestone-teal-wide.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ─── White / off-white / teal-light sections: go transparent
       so the body texture shows through.
       Explicitly preserve solid bg on dark/teal sections.      ─── */
.section:not(.bg-teal):not(.bg-dark),
.section.bg-light,
.section.bg-teal-lt {
  background: transparent;
}

.section.bg-dark {
  background: var(--teal-dark) !important;
}

.section.bg-teal {
  background: var(--teal) !important;
}

/* ─── Slightly warmer section dividers ─── */
:root {
  --border: #c8d8d4;
}

/* ─── Goal cards: frosted glass over the texture ─── */
.goal-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(27, 107, 94, 0.1);
  border-top: 3px solid var(--teal);
}

/* ─── Survey link block: slightly opaque ─── */
.survey-link-block {
  background: rgba(234, 244, 242, 0.8);
}

/* ─── Eligibility pills: match the warmer bg ─── */
.eligibility-list li {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ─── FAQ details: subtle panel separation ─── */
.faq-list details {
  background: transparent;
}

/* ─── Header: very slight texture bleed instead of stark white ─── */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(27, 107, 94, 0.12);
}

/* ─── Dark / teal sections stay fully opaque ─── */
.bg-teal,
.bg-dark,
.cta-band,
.hero,
.site-footer {
  background-attachment: scroll; /* don't inherit fixed on these */
}

/* ─── Mobile: pure CSS texture — no image, no scaling issues.
       Turbulence used as alpha mask only; speckle color is constant
       dark sage (#b4c4bc / #a8b8b2) so it reads against the warm cream base. ─── */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-image: none;
    background-color: #fef8ea;
  }

  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(254,248,234,0.97);
  }
}

  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #f0ebe3;
    background-image: url('../assets/images/pedersen-texture-limestone-teal-wide.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}

  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #f0ebe3;
    background-image: url('../assets/images/teal-vertical.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}

  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
}