/* fixes.css — readability + responsive repairs (Oct 26 2026).
   Loaded LAST on every page so it overrides site.css, styles.css, chrome.css
   and the styles engage.js injects. Every rule here fixes a measured problem:
   text below WCAG AA contrast (4.5:1 body, 3:1 large), text that was
   invisible, or content wider than a phone screen. Delete a block to revert it. */

/* ---------- 1. Labels and links on dark heroes / dark bands ---------- */
/* .eyebrow uses dark teal (#007A7C) meant for white backgrounds; on the navy
   heroes it measured 2.8:1. Light teal measures ~7:1 on navy. */
.hero .eyebrow,
.page-hero .eyebrow,
.hero--page .eyebrow {
  color: #4DCFD0;
  background: rgba(77, 207, 208, 0.12);
  border-color: rgba(77, 207, 208, 0.35);
}
.hero .eyebrow::before,
.page-hero .eyebrow::before { background: #4DCFD0; box-shadow: 0 0 8px #4DCFD0; }

/* Text links inside heroes (e.g. "Go to In-Clinic Relief & Rehabilitation →") */
.hero a:not(.btn):not(.ix-btn):not(.btn-primary):not(.btn--primary):not(.btn--outline),
.page-hero a:not(.btn):not(.ix-btn) {
  color: #7FE0E1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero .ix-breadcrumbs,
.page-hero .ix-breadcrumbs,
.page-hero .ix-breadcrumbs span:not(.sep) { color: rgba(255, 255, 255, 0.78); }
.page-hero .ix-breadcrumbs a { text-decoration: none; }

/* Legacy heroes (styles.css pages) */
.hero--page .label,
.hero .label { color: rgba(255, 255, 255, 0.8); }
.hero--page .btn--outline { color: #7FE0E1; border-color: rgba(127, 224, 225, 0.6); }

/* ---------- 2. Buttons: white text on teal measured 3.1–3.9:1 ---------- */
/* Darker teal keeps the brand look and reaches ~5:1. Hover rules elsewhere
   are more specific (:hover) and still win. */
.btn--primary,
.btn-primary,
.ix-btn--primary,
.ladder-active-badge {
  background: linear-gradient(135deg, #007A7C 0%, #005E60 100%);
  color: #fff;
}
body .ixe-btn--teal { background: #007A7C; color: #fff; }

/* Orange buttons / tiers with white text measured 2.4:1 — use navy text. */
.btn-group .btn--primary[style*="orange"],
.cta-banner .btn--primary,
.nav__cta .btn--primary,
.asc-s.asc-4,
.asc-s.asc-4 b,
.asc-s.asc-4 small { color: #132848; }
.asc-s.asc-3,
.asc-s.asc-3 b,
.asc-s.asc-3 small { color: #fff; background-color: #007A7C; }

/* ---------- 3. Light-background text that was too faint ---------- */
body .ixe-eyebrow,
body .ixe-card__dim { color: #007A7C; }
body .ixe-sub__fallback { color: #007A7C; }             /* was white on white */
.skip-link { color: #007A7C; }
.triage-opt-btn span { color: #4A5568; }                  /* was 3.8:1 */
.mbhs-card--body .mbhs-badge { color: #047857; }          /* was 3.8:1 */
.card .more,
a.card span.more { color: #B45309; }                      /* orange text was 2.4:1 */
.contrast div:not(.on) .stat { color: #B45309; }          /* yellow on white was 1.5:1 */
.callout[style*="surface-alt"],
.callout[style*="surface-alt"] strong { color: var(--ink, #1B3664); } /* /method callout was white on white */
.service-block a,
.callout a,
.callout.fade-up a { color: #0F766E; }                    /* legacy teal links 3.5–3.7:1 */
.card span[style*="718096"] { color: #4A5568 !important; }

/* ---------- 4. Dark-theme pages (Executive, Restoration, Blueprint, Pilot, Apply) ---------- */
/* These five pages were built for a dark page background that no stylesheet
   supplied, so their translucent dark sections sat on white and headings
   rendered navy-on-navy or white-on-white. This restores the intended dark look. */
body.dark-theme {
  background: #0B1424;
  color: #CBD5E1;
}
body.dark-theme main h1,
body.dark-theme main h2,
body.dark-theme main h3,
body.dark-theme main h4,
body.dark-theme .hero-title,
body.dark-theme .section-title { color: #F8FAFC; }
body.dark-theme main p,
body.dark-theme main li,
body.dark-theme .hero-sub,
body.dark-theme .section-sub,
body.dark-theme main em { color: #CBD5E1; }
body.dark-theme .section-tag { color: #4DCFD0; }
body.dark-theme main .card,
body.dark-theme main [class*="card"]:not(.ix-btn) {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark-theme .comparison-table thead th { background: #132848; color: #F8FAFC; }
body.dark-theme .comparison-table td,
body.dark-theme .comparison-table th { color: #CBD5E1; border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .comparison-table td strong,
body.dark-theme .comparison-table tbody th { color: #F8FAFC; }
body.dark-theme main a:not(.btn):not(.btn-primary):not(.ix-btn):not([class*="btn"]) { color: #7FE0E1; }
body.dark-theme .btn-secondary,
body.dark-theme .btn-outline,
body.dark-theme .btn--outline { color: #7FE0E1; border-color: rgba(127, 224, 225, 0.55); }

/* ---------- 4b. Mind / Body / Heart / Soul cards ---------- */
/* Inside an 820px text column (/method) the 4-across grid left each card
   ~175px wide, and the label/description rows were side-by-side flex rows,
   so descriptions were cut off mid-word. 2x2 in text columns, stacked rows. */
.prose .mbhs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mbhs-card li { display: block; position: relative; padding-left: 1rem; }
.mbhs-card li::before { position: absolute; left: 0; top: 0.5em; margin: 0; }
.mbhs-card li strong { display: block; margin-bottom: 0.1rem; }
.mbhs-badge { white-space: normal; letter-spacing: 0.04em; line-height: 1.3; }
@media (max-width: 640px) { .prose .mbhs-grid { grid-template-columns: 1fr; } }

/* ---------- 5. Content wider than the screen ---------- */
/* Belt-and-braces: never allow sideways page scroll. `clip` (not `hidden`)
   keeps the sticky header working. */
html, body { overflow-x: clip; }
img, video, iframe, table { max-width: 100%; }

/* Footer variant on the clinical-engine pages laid logo + address + phone
   in one non-wrapping row (pushed up to 110px off-screen). */
.ix-footer__top .ix-footer__brand { display: block; }
.ix-footer__top .ix-footer__brand .ix-logo { display: inline-flex; margin-bottom: 0.75rem; }
.ix-footer__top { display: flex; flex-wrap: wrap; gap: 2rem; }
.ix-footer__top > * { min-width: 0; flex: 1 1 220px; }

@media (max-width: 640px) {
  /* Long button labels were set to never wrap (up to 441px wide). */
  .btn, .btn-primary, .btn--primary, .btn--outline, .btn-lg, .btn--lg,
  .ix-btn, a[class*="btn"] {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  a.float-bar-btn { white-space: nowrap; }
  .assess-stats-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; gap: 1.5rem; }
  .founder > * { min-width: 0; }
  .contrast { grid-template-columns: 1fr; }
  /* Inline two-column grids written into page HTML never collapsed on phones. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  /* Comparison tables scroll inside their box instead of pushing the page. */
  .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 6. Minimum readable text on phones ---------- */
  .gx-dose b { font-size: 0.85rem; }                       /* supplement doses were 10.9px */
  .chiro-dr-stat__lbl, .chiro-eyebrow, .chiro-chip,
  .cmd-engine-badge, .cmd-pillar-tag, .cmd-dim-tag,
  .kind-badge, .mbhs-badge,
  body .ixe-card__dim, body .ixe-eyebrow,
  .float-bar-sub { font-size: 12px; }
  .triage-opt-btn span { font-size: 0.85rem; }
}