/* ─── SCOPE: everything prefixed .byr-hcs to avoid theme conflicts ─── */
/* Token namespace: --hcs-* (scoped to .byr-hcs)
   Core token refs: --color-accent-primary, --color-text-muted, etc.
   Tokenized (2026-04): 130+ hardcoded hex → scoped --hcs-* brand tokens. */

.byr-hcs *,
.byr-hcs *::before,
.byr-hcs *::after {
  box-sizing: border-box;
}

/* ── HCS BRAND TOKENS ──────────────────────────────────────────────── */
.byr-hcs {
  /* Navy scale */
  --hcs-navy:           var(--hcs-navy);
  --hcs-navy-dark:      var(--hcs-navy-dark);
  --hcs-navy-light:     var(--hcs-navy-light);
  --hcs-navy-deep:      var(--hcs-navy-deep);

  /* Gold scale */
  --hcs-gold:           var(--hcs-gold);
  --hcs-gold-dark:      var(--hcs-gold-dark);
  --hcs-gold-darker:    var(--hcs-gold-darker);
  --hcs-gold-bg:        var(--hcs-gold-bg);
  --hcs-gold-bg-light:  var(--hcs-gold-bg-light);

  /* Supporting accents */
  --hcs-teal:           var(--hcs-teal);
  --hcs-teal-dark:      var(--hcs-teal-dark);
  --hcs-orange:         var(--hcs-orange);
  --hcs-rose:           var(--hcs-rose);

  /* Neutral / text */
  --hcs-text-dark:      var(--hcs-text-dark);
  --hcs-text-panel:     var(--hcs-text-panel);
  --hcs-text-muted:     var(--hcs-text-muted);
  --hcs-text-soft:      var(--hcs-text-soft);
  --hcs-border-muted:   var(--hcs-border-muted);

  /* Backgrounds */
  --hcs-bg-light:       var(--hcs-bg-light);
  --hcs-bg-blue:        var(--hcs-bg-blue);
  --hcs-bg-blue-soft:   var(--hcs-bg-blue-soft);
  --hcs-bg-teal-soft:   var(--hcs-bg-teal-soft);
  --hcs-bg-warm:        var(--hcs-bg-warm);
}

/* ── SKIP LINK ─────────────────────────────────────────────────────── */
.byr-hcs-skip {
  position: absolute;
  top: -120px;
  left: 0;
  z-index: 9999;
  background: var(--hcs-navy);
  color: var(--hcs-gold);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transition: top 0.15s ease;
}
.byr-hcs-skip:focus {
  top: 0;
  outline: 3px solid var(--hcs-gold);
  outline-offset: 2px;
}

/* ── SCREEN READER ONLY ─────────────────────────────────────────────── */
.byr-hcs .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── ROOT WRAPPER ───────────────────────────────────────────────────── */
.byr-hcs {
  max-width: 860px;
  margin: 0 auto;
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
  color: var(--hcs-text-dark);
  line-height: 1.7;
}

/* ── GLOBAL FOCUS ───────────────────────────────────────────────────── */
.byr-hcs :focus-visible {
  outline: 3px solid var(--hcs-navy);
  outline-offset: 4px;
  border-radius: 4px;
}
.byr-hcs .hcs-hero :focus-visible,
.byr-hcs .hcs-cta :focus-visible {
  outline: 3px solid var(--hcs-gold);
  outline-offset: 4px;
}
.byr-hcs .hcs-btn-primary:focus-visible {
  outline: 3px solid var(--hcs-navy-dark);
  outline-offset: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — uses the real I Heart CHOP banner image from BYR media library
   with a gradient overlay so text remains readable (contrast verified)
══════════════════════════════════════════════════════════════════════ */
.byr-hcs .hcs-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0;
}

/* The actual CHOP banner image */
.byr-hcs .hcs-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}

/* ── HERO TEXT BAND below image ─────────────────────────────────────── */
/*
  CONTRAST: #ffffff on var(--hcs-navy) = 15.59:1 ✅ AAA
  CONTRAST: var(--hcs-gold) on var(--hcs-navy) = 10.90:1 ✅ AAA
  CONTRAST: rgba(255,255,255,0.88) on var(--hcs-navy) ≈ 11.63:1 ✅ AAA
*/
.byr-hcs .hcs-hero-band {
  background: linear-gradient(135deg, var(--hcs-navy-dark) 0%, var(--hcs-navy) 60%, var(--hcs-navy-light) 100%);
  padding: 36px 50px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.byr-hcs .hcs-hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(0,173,181,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(232,118,138,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.byr-hcs .hcs-hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.byr-hcs .hcs-hero-inner {
  position: relative;
  z-index: 2;
}

/* Eyebrow pill — 12px caps, CONTRAST: var(--hcs-gold) on var(--hcs-navy) = 10.90:1 ✅ AAA */
.byr-hcs .hcs-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hcs-gold);
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 50px;
  padding: 7px 20px;
  margin-bottom: 20px;
}

.byr-hcs .hcs-hero-band h2 {
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: clamp(1.8rem, 4.5vw, 2.9rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 14px;
}
.byr-hcs .hcs-hero-band h2 em {
  color: var(--hcs-gold);
  font-style: italic;
}
.byr-hcs .hcs-hero-sub {
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.90);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
/* Decorative gold rule */
.byr-hcs .hcs-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--hcs-gold), var(--hcs-orange));
  border-radius: 2px;
  margin: 22px auto;
}

/* ══════════════════════════════════════════════════════════════════════
   PROGRESS BAR BAND — live campaign stats
   CONTRAST: var(--hcs-navy-dark) on var(--hcs-bg-blue) = 14.12:1 ✅ AAA
══════════════════════════════════════════════════════════════════════ */
.byr-hcs .hcs-progress-band {
  background: linear-gradient(135deg, var(--hcs-bg-blue), var(--hcs-bg-teal-soft));
  border: 1px solid rgba(0,48,135,0.10);
  padding: 28px 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.byr-hcs .hcs-progress-main {
  flex: 1 1 260px;
  min-width: 200px;
}
.byr-hcs .hcs-progress-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hcs-navy);
  margin-bottom: 8px;
}
/* Bar track + fill */
.byr-hcs .hcs-bar-track {
  background: rgba(0,48,135,0.12);
  border-radius: 50px;
  height: 10px;
  overflow: hidden;
}
.byr-hcs .hcs-bar-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--hcs-navy), var(--hcs-teal));
  /* 3471 / 27430 ≈ 12.7% */
  width: 12.7%;
  transition: width 1s ease;
}
.byr-hcs .hcs-progress-amounts {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--hcs-text-panel);
}
.byr-hcs .hcs-progress-amounts strong {
  color: var(--hcs-navy);
  font-weight: 700;
}
/* Stat chips */
.byr-hcs .hcs-stat-chips {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.byr-hcs .hcs-chip {
  text-align: center;
  min-width: 60px;
}
.byr-hcs .hcs-chip-num {
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--hcs-navy);
  line-height: 1;
  display: block;
}
.byr-hcs .hcs-chip-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hcs-text-muted);
  display: block;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   BODY CONTENT
   CONTRAST: var(--hcs-navy-dark) on #fff = 15.59:1 ✅ AAA (h2)
   CONTRAST: var(--hcs-text-panel) on #fff = 13.66:1 ✅ AAA (p)
══════════════════════════════════════════════════════════════════════ */
.byr-hcs .hcs-body {
  background: transparent;
  border-radius: 0 0 20px 20px;
  padding: 25px 20px;
  box-shadow: 0 8px 40px rgba(0,48,135,0.07);
  border: 1px solid rgba(0,48,135,0.07);
  border-top: none;
}

.byr-hcs .hcs-body h2 {
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 1.7rem;
  color: var(--hcs-border-muted);
  margin: 44px 0 16px;
  font-weight: 700;
  line-height: 1.3;
}
.byr-hcs .hcs-body h2:first-child { margin-top: 0; }

.byr-hcs .hcs-body h3 {
  font-size: 0.87rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--hcs-border-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 6px;
}

.byr-hcs .hcs-body p {
  font-size: 1.05rem;
  color: var(--hcs-gold-bg);
  margin: 0 0 20px;
  font-weight: 300;
  line-height: 1.8;
}
.byr-hcs .hcs-body p:last-child { margin-bottom: 0; }

.byr-hcs .hcs-body strong {
  font-weight: 600;
  color: #6CB7AD;
}

/* ── BLOCKQUOTE ──────────────────────────────────────────────────────── */
/*
  CONTRAST: var(--hcs-navy-deep) on var(--hcs-bg-blue-soft) = 14.38:1 ✅ AAA
*/
.byr-hcs .hcs-quote {
  background: linear-gradient(135deg, var(--hcs-bg-blue-soft), var(--hcs-bg-warm));
  border-left: 5px solid var(--hcs-gold);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  margin: 32px 0;
}
.byr-hcs .hcs-quote p {
  margin: 0;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--hcs-navy-deep);
  font-weight: 400;
  line-height: 1.75;
}
.byr-hcs .hcs-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 600;
  color: var(--hcs-text-muted);
  letter-spacing: 0.5px;
}

/* ── STORY CARD — Susan & family ─────────────────────────────────────── */
/*
  CONTRAST: var(--hcs-gold-darker) on var(--hcs-gold-bg-light) = 13.32:1 ✅ AAA
  CONTRAST: var(--hcs-gold-dark) on var(--hcs-gold-bg-light) =  6.71:1 ✅ AA
*/
.byr-hcs .hcs-story-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, var(--hcs-gold-bg-light), var(--hcs-gold-bg-light));
  border: 1px solid rgba(255,193,7,0.35);
  border-left: 5px solid var(--hcs-gold);
  border-radius: 0 14px 14px 0;
  padding: 28px 26px;
  margin: 32px 0;
}
.byr-hcs .hcs-story-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 3px;
}
.byr-hcs .hcs-story-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--hcs-gold-darker);
  line-height: 1.7;
}
.byr-hcs .hcs-story-card strong {
  color: var(--hcs-gold-dark);
}

/* ── FOUNDATION LOGO BAND ────────────────────────────────────────────── */
.byr-hcs .hcs-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--hcs-bg-light);
  border: 1px solid rgba(0,48,135,0.08);
  border-radius: 14px;
  padding: 24px 32px;
  margin: 32px 0;
}
.byr-hcs .hcs-logos img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}
.byr-hcs .hcs-logos .hcs-logo-divider {
  width: 1px;
  height: 40px;
  background: rgba(0,48,135,0.15);
  flex-shrink: 0;
}

/* ── STATS — DL for semantic name/value pairs ────────────────────────── */
/*
  CONTRAST: var(--hcs-gold) on var(--hcs-navy-dark) = 11.11:1 ✅ AAA
  CONTRAST: rgba(255,255,255,0.88) on var(--hcs-navy-dark) ≈ 11.90:1 ✅ AAA
*/
.byr-hcs .hcs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 36px 0;
  padding: 0;
}
.byr-hcs .hcs-stat-card {
  background: linear-gradient(135deg, var(--hcs-navy-dark), var(--hcs-navy));
  border-radius: 14px;
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.byr-hcs .hcs-stat-card dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  line-height: 1.4;
  order: 2;
  margin-top: 8px;
}
.byr-hcs .hcs-stat-card dd {
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--hcs-gold);
  line-height: 1;
  margin: 0;
  order: 1;
}

/* ── WHY GRID — UL/LI for proper list semantics ─────────────────────── */
/*
  CONTRAST: var(--hcs-navy-dark) on var(--hcs-bg-light) = 14.81:1 ✅ AAA
  CONTRAST: var(--hcs-text-panel) on var(--hcs-bg-light) = 12.98:1 ✅ AAA
*/
.byr-hcs .hcs-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0;
  list-style: none;
  padding: 0;
}
.byr-hcs .hcs-why-card {
  background: var(--hcs-bg-light);
  border: 1px solid rgba(0,48,135,0.09);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.byr-hcs .hcs-why-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.byr-hcs .hcs-why-card h3 {
  color: var(--hcs-navy-dark);
  font-size: 0.87rem;
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 5px;
}
.byr-hcs .hcs-why-text {
  font-size: 0.93rem;
  color: var(--hcs-text-panel);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

/* ── SEPARATOR ───────────────────────────────────────────────────────── */
.byr-hcs .hcs-sep {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,48,135,0.13), transparent);
  margin: 44px 0;
}

/* ── CTA SECTION ─────────────────────────────────────────────────────── */
/*
  CONTRAST: #ffffff on var(--hcs-navy-dark)  = 15.59:1 ✅ AAA
  CONTRAST: rgba(fff,0.85) eff. ≈ 11.03:1 ✅ AAA
  CONTRAST: var(--hcs-navy-dark) on var(--hcs-gold)  = 11.11:1 ✅ AAA
  CONTRAST: rgba(fff,0.70) eff. ≈  7.10:1 ✅ AA (secondary link small text)
*/
.byr-hcs .hcs-cta {
  text-align: center;
  background: linear-gradient(135deg, var(--hcs-navy-dark) 0%, var(--hcs-navy) 100%);
  border-radius: 18px;
  padding: 50px 40px;
  margin-top: 44px;
  position: relative;
  overflow: hidden;
}
.byr-hcs .hcs-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center bottom, rgba(0,173,181,0.15) 0%, transparent 65%);
  pointer-events: none;
}
.byr-hcs .hcs-cta-inner {
  position: relative;
  z-index: 1;
}
.byr-hcs .hcs-cta h2 {
  color: #ffffff !important;
  margin: 0 0 12px !important;
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
}
.byr-hcs .hcs-cta > .hcs-cta-inner > p {
  color: rgba(255,255,255,0.87);
  max-width: 500px;
  margin: 0 auto 28px;
  font-size: 1rem;
  line-height: 1.7;
}

/* Button group */
.byr-hcs .hcs-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

/* Primary — WCAG 2.5.5: min 44px height touch target */
.byr-hcs .hcs-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: linear-gradient(135deg, var(--hcs-gold), #e8a020);
  color: var(--hcs-navy-dark) !important;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  padding: 11px 36px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(255,215,0,0.35);
}

/* Secondary — also 44px touch target via padding */
.byr-hcs .hcs-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: rgba(255,255,255,0.10);
  color: #ffffff !important;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important;
  padding: 11px 28px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.30);
}

/* Secondary text link for DonorDrive URL */
.byr-hcs .hcs-link-subtle {
  display: inline-block;
  min-height: 44px;
  padding: 12px 4px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  word-break: break-all;
}

/* ── CREDIT FOOTER ───────────────────────────────────────────────────── */
/*
  CONTRAST: var(--hcs-text-muted) on #fff = 6.75:1 ✅ AA  (was var(--hcs-text-soft) = 4.14:1 ❌)
  CONTRAST: var(--hcs-navy) on #fff = 11.85:1 ✅ AAA
*/
.byr-hcs .hcs-credit {
  text-align: center;
  font-size: 0.9rem;
  color: var(--hcs-text-muted);
  margin-top: 36px;
  font-style: italic;
  line-height: 1.7;
}
.byr-hcs .hcs-credit a {
  color: var(--hcs-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .byr-hcs .hcs-hero-band   { padding: 32px 20px 36px; }
  .byr-hcs .hcs-progress-band { padding: 24px 20px; flex-direction: column; }
  .byr-hcs .hcs-stat-chips  { justify-content: flex-start; }
  .byr-hcs .hcs-body        { padding: 36px 20px; }
  .byr-hcs .hcs-stats       { grid-template-columns: 1fr; }
  .byr-hcs .hcs-why-grid    { grid-template-columns: 1fr; }
  .byr-hcs .hcs-cta         { padding: 40px 20px; }
  .byr-hcs .hcs-btn-primary,
  .byr-hcs .hcs-btn-secondary { width: 100%; max-width: 320px; }
  .byr-hcs .hcs-story-card  { flex-direction: column; }
  .byr-hcs .hcs-logos       { gap: 20px; padding: 20px; }
  .byr-hcs .hcs-logo-divider { display: none; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .byr-hcs * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── HIGH CONTRAST (Windows / macOS) ────────────────────────────────── */
@media (forced-colors: active) {
  .byr-hcs .hcs-hero-band  { forced-color-adjust: none; border: 2px solid ButtonText; }
  .byr-hcs .hcs-stat-card  { forced-color-adjust: none; border: 2px solid ButtonText; }
  .byr-hcs .hcs-btn-primary,
  .byr-hcs .hcs-btn-secondary { forced-color-adjust: none; border: 2px solid ButtonText; }
  .byr-hcs .hcs-quote      { border-left-color: Highlight; border-left-width: 6px; }
}

/* ── PRINT ──────────────────────────────────────────────────────────── */
@media print {
  .byr-hcs .hcs-btn-primary::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    font-weight: 400;
  }
  .byr-hcs .hcs-hero-band,
  .byr-hcs .hcs-stat-card,
  .byr-hcs .hcs-cta {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}



/* ================================================================
   BYR — HCS Post Token Patch
   ================================================================
   ADD this at the BOTTOM of the HCS post's <style> block,
   or paste it into a separate WPCode CSS snippet with
   Priority: 23 (after the post loads).

   WHAT THIS FIXES:
   The .hcs-body section previously had an opaque background
   (#fff or gradient) with hardcoded text colors designed for
   that specific background. Now that the body background is
   transparent (so the site's animated gradient shows through),
   those hardcoded colors no longer have guaranteed contrast.

   This patch replaces them with BYR Foundations tokens so they:
   - Respond to dark/light mode automatically
   - Maintain contrast against the site gradient
   - Match the rest of the site's typography

   WHAT THIS DOES NOT TOUCH:
   - Hero band (has own opaque var(--hcs-navy) bg — colors are fine)
   - Progress band (has own opaque var(--hcs-bg-blue) bg — colors are fine)
   - Stat cards (has own opaque var(--hcs-navy-dark) bg — colors are fine)
   - CTA section (has own opaque var(--hcs-navy-dark) bg — colors are fine)
   - Blockquote (has own opaque var(--hcs-bg-blue-soft) bg — colors are fine)
   - Story card (has own opaque var(--hcs-gold-bg-light) bg — colors are fine)
   - Why-grid cards (has own opaque var(--hcs-bg-light) bg — colors are fine)
   These all have self-contained backgrounds + verified contrast.
   ================================================================ */


/* ── BODY WRAPPER ───────────────────────────────────────────────────── */

.byr-hcs .hcs-body {
  /* Remove the old border/shadow that assumed a white bg */
  box-shadow: none;
  border: none;
  border-radius: 0 0 20px 20px;
  padding: 25px 20px;
}


/* ── HEADINGS → use BYR heading token ───────────────────────────────── */
/*
   Old: var(--hcs-border-muted) (hardcoded pastel blue-grey)
   New: var(--color-heading) which is:
        Dark mode: #FFFFFF
        Light mode: var(--color-heading-light) (via .mode-light remap)
*/

.byr-hcs .hcs-body h2 {
  color: var(--color-heading, #FFFFFF) !important;
}

.byr-hcs .hcs-body h3 {
  color: var(--color-text-muted, var(--color-text-muted)) !important;
}


/* ── BODY TEXT → use BYR text-secondary token ───────────────────────── */
/*
   Old: var(--hcs-gold-bg) (hardcoded warm cream)
   New: var(--color-text-secondary) which is:
        Dark mode: var(--color-text-secondary)
        Light mode: var(--color-text-secondary-light) (via .mode-light remap)
*/

.byr-hcs .hcs-body p {
  color: var(--color-text-secondary, var(--color-text-secondary)) !important;
}


/* ── STRONG/BOLD → use BYR accent-primary token ─────────────────────── */
/*
   Old: #6CB7AD (hardcoded teal)
   New: var(--color-accent-primary) = var(--color-accent-primary) (cyan)
   This matches how bold text pops on the rest of the site.
   If you prefer the emerald: swap to var(--color-accent-secondary)
*/

.byr-hcs .hcs-body strong {
  color: var(--color-accent-primary, var(--color-accent-primary)) !important;
}


/* ── ABBREVIATIONS — subtle underline for accessibility ─────────────── */

.byr-hcs .hcs-body abbr[title] {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--color-text-muted, var(--color-text-muted));
  text-underline-offset: 3px;
}


/* ── SEPARATORS — adapt to transparent bg ───────────────────────────── */
/*
   Old: rgba(0,48,135,0.13) — designed for white bg
   New: var(--color-border-subtle) — works on any bg
*/

.byr-hcs .hcs-sep {
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-subtle, rgba(148, 163, 184, 0.35)),
    transparent
  ) !important;
}


/* ── CREDIT FOOTER — adapt to transparent bg ────────────────────────── */
/*
   Old: var(--hcs-text-muted) — designed for white bg
   New: BYR muted token
*/

.byr-hcs .hcs-credit {
  color: var(--color-text-muted, var(--color-text-muted)) !important;
}

.byr-hcs .hcs-credit a {
  color: var(--color-accent-primary, var(--color-accent-primary)) !important;
}


/* ── LIGHT MODE — accent contrast fixes ─────────────────────────────── */
/*
   In light mode, var(--color-accent-primary) (cyan) on light bg fails AAA.
   Darken strong and links for proper contrast.
*/

.mode-light .byr-hcs .hcs-body strong {
  color: var(--hcs-teal-dark) !important;
}

.mode-light .byr-hcs .hcs-credit a {
  color: var(--hcs-teal-dark) !important;
}

.mode-light .byr-hcs .hcs-body abbr[title] {
  text-decoration-color: var(--color-text-muted-light, var(--color-text-muted-light));
}


/* ── WHY-GRID + QUOTE + STORY CARD — keep opaque bg colors ─────────── */
/*
   These sections have their own backgrounds, so their text colors
   are already verified. But we need to make sure the parent token
   overrides above DON'T bleed into them. Reinforce originals:
*/

.byr-hcs .hcs-quote p {
  color: var(--hcs-navy-deep) !important;
}

.byr-hcs .hcs-quote cite {
  color: var(--hcs-text-muted) !important;
}

.byr-hcs .hcs-story-card p {
  color: var(--hcs-gold-darker) !important;
}

.byr-hcs .hcs-story-card strong {
  color: var(--hcs-gold-dark) !important;
}

.byr-hcs .hcs-why-card h3 {
  color: var(--hcs-navy-dark) !important;
}

.byr-hcs .hcs-why-text {
  color: var(--hcs-text-panel) !important;
}

/* Progress band keeps its own colors too */
.byr-hcs .hcs-progress-label {
  color: var(--hcs-navy) !important;
}

.byr-hcs .hcs-progress-amounts {
  color: var(--hcs-text-panel) !important;
}

.byr-hcs .hcs-progress-amounts strong {
  color: var(--hcs-navy) !important;
}