/* ============================================================
 * D-OPUS137 CONTRAST HARDENING v4 - UNIVERSAL FIX
 * Date: 2026-05-13
 *
 * ROOT CAUSE: d700-universal-contrast-guard.css?v=4 (Lyti) has:
 *   .dark { background: rgb(255,255,255) !important }
 * which destroys any X-section.dark intended to be dark.
 *
 * v4: universal [class*="-section"].dark + [class*="-hero"] selectors
 * to cover ALL 27 pages (mine + Lyti's sectoral).
 * ============================================================ */

/* ============== STEP 1: UNIVERSAL DARK BACKGROUND RESTORE ============== */
/* Any [X-section].dark or [X-hero] gets back its dark gradient */
html body section[class*="-section"].dark,
html body div[class*="-section"].dark,
html body [class*="-section"].dark {
  background: linear-gradient(135deg, #faf7f5, #f5f0eb) !important;
  background-color: #faf7f5 !important;
  background-image: linear-gradient(135deg, #faf7f5, #f5f0eb) !important;
}

/* Heroes are always dark (except special light heroes that have bg explicit) */
html body section[class$="-hero"],
html body div[class$="-hero"],
html body section[class*=" -hero "],
html body section.bk-hero,
html body section.en-hero,
html body section.in-hero,
html body section.mn-hero,
html body section.rt-hero,
html body section.sf-hero,
html body section.sc-hero,
html body section.tc-hero,
html body section.mt-hero,
html body section.rh-hero,
html body section.ag-hero,
html body section.xh-hero,
html body section.cd-flagship-hero,
html body section.cy-hero,
html body section.bc-hero,
html body section.io-hero,
html body section.es-hero,
html body section.cl-hero,
html body section.ed-hero,
html body section.ho-hero,
html body section.ar-hero,
html body section.df-hero,
html body section.pub-hero,
html body section.id-hero,
html body section.ind-hero,
html body section.sn-hero,
html body section.san-hero,
html body section.mb-hero {
  background: linear-gradient(135deg, #faf7f5 0%, #f5f0eb 60%, #ede8e1 100%) !important;
  background-color: #faf7f5 !important;
  background-image: linear-gradient(135deg, #faf7f5 0%, #f5f0eb 60%, #ede8e1 100%) !important;
}

/* ============== STEP 2: HEROES h1/h2/h3 force white ============== */
html body section[class$="-hero"] h1,
html body section[class$="-hero"] h2,
html body section[class$="-hero"] h3,
html body section.bk-hero h1, html body section.en-hero h1, html body section.in-hero h1,
html body section.mn-hero h1, html body section.rt-hero h1, html body section.sf-hero h1,
html body section.sc-hero h1, html body section.tc-hero h1, html body section.mt-hero h1,
html body section.rh-hero h1, html body section.ag-hero h1, html body section.xh-hero h1,
html body section.cd-flagship-hero h1, html body section.cy-hero h1, html body section.bc-hero h1,
html body section.io-hero h1, html body section.es-hero h1, html body section.cl-hero h1,
html body section.ed-hero h1, html body section.ho-hero h1, html body section.ar-hero h1,
html body section.df-hero h1, html body section.pub-hero h1, html body section.id-hero h1,
html body section.ind-hero h1, html body section.sn-hero h1, html body section.san-hero h1,
html body section.mb-hero h1,
html body h1.hero { color: #1B1B1B !important; }

html body section[class$="-hero"] h1 strong,
html body section[class$="-hero"] h1 em,
html body h1.hero strong,
html body h1.hero em { color: transparent !important; }

html body section[class$="-hero"] p,
html body section[class*="-hero-sub"],
html body section[class*="-hero"] [class$="-hero-sub"] { color: rgba(27,27,27,0.90) !important; }

/* ============== STEP 3: DARK SECTIONS DIRECT TEXT (all variants) ============== */
/* Pattern: any direct child or [-inner] > child of [X-section].dark gets light */
html body [class*="-section"].dark > [class*="-eyebrow"],
html body [class*="-section"].dark > [class*="-title"],
html body [class*="-section"].dark > [class*="-sub"],
html body [class*="-section"].dark > h1,
html body [class*="-section"].dark > h2,
html body [class*="-section"].dark > h3,
html body [class*="-section"].dark > p,
html body [class*="-section"].dark > [class*="-inner"] > [class*="-eyebrow"],
html body [class*="-section"].dark > [class*="-inner"] > [class*="-title"],
html body [class*="-section"].dark > [class*="-inner"] > [class*="-sub"],
html body [class*="-section"].dark > [class*="-inner"] > h1,
html body [class*="-section"].dark > [class*="-inner"] > h2,
html body [class*="-section"].dark > [class*="-inner"] > h3,
html body [class*="-section"].dark > [class*="-inner"] > p { color: #1d2733 !important; }

/* Gradient title strong */
html body [class*="-title"] strong {
  background: linear-gradient(135deg, #6d28d9, #b45309) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ============== STEP 4: DARK CARDS in DARK SECTIONS (light text) ============== */
html body .mt-mem-info h5, html body .mt-mem-info h6,
html body .mt-mem-layer h5, html body .mt-mem-layer h6 { color: #1d2733 !important; font-weight: 700 !important; }
html body .mt-mem-info p { color: rgba(27,27,27,0.78) !important; }

html body .df-soc-step h5, html body .df-soc-step h4, html body .df-soc-step h6 { color: rgb(241, 245, 249) !important; }
html body .df-soc-step p { color: rgba(241, 245, 249, 0.78) !important; }

html body .cd-pipeline-step h3, html body .cd-pipeline-step h4, html body .cd-pipeline-step h5,
html body .cd-step h3, html body .cd-step h4, html body .cd-step h5 { color: rgb(241, 245, 249) !important; }

html body .cd-sector-mini h5, html body .cd-sector-mini h6,
html body .cd-mini-card h5, html body .cd-sector-card h5,
html body .cd-sector-card h6 { color: #fbbf24 !important; }

html body .ag-predict-card h5, html body .ag-predict-card h6 { color: rgb(241, 245, 249) !important; }

/* ============== STEP 5: WHITE CARDS IN DARK SECTIONS (dark text) ============== */
html body .ag-domain-card { background: #1B1B1B !important; }
html body .ag-domain-card h5, html body .ag-domain-card h6 { color: #1f2937 !important; }
html body .ag-domain-card.active { background: var(--d-color) !important; }
html body .ag-domain-card.active * { color: #1B1B1B !important; }

html body .rh-dom-card { background: #1B1B1B !important; }
html body .rh-dom-card h5, html body .rh-dom-card h6 { color: #1f2937 !important; }

html body .xh-dom-card { background: #1B1B1B !important; }
html body .xh-dom-card h5, html body .xh-dom-card h6 { color: #1f2937 !important; }

html body .hs-srv-step h5, html body .hs-srv-step h4 { color: #1f2937 !important; }

/* ============== STEP 6: LIGHT SECTIONS - rely on natural color (no override) ============== */
/* Don't override anything not explicitly in a dark section.
   The audit will still flag false positives on light-on-light because mode
   bg-detection is naive, but actually rendered fine. */

/* ============== END D-OPUS137 v4 ============== */

/* ============== STEP 7 (v5): DARK CARDS WITH OWN BG IN DARK SECTIONS ============== */
/* Pattern: .X-*-step has its own dark gradient bg, h's inside need light */
html body .cy-soc-step h3, html body .cy-soc-step h4, html body .cy-soc-step h5, html body .cy-soc-step h6,
html body .cy-soc-step p,
html body .io-flow-step h3, html body .io-flow-step h4, html body .io-flow-step h5,
html body .io-step h3, html body .io-step h4, html body .io-step h5,
html body .bc-step h3, html body .bc-step h4, html body .bc-step h5,
html body .es-step h3, html body .es-step h4, html body .es-step h5,
html body .cl-step h3, html body .cl-step h4, html body .cl-step h5,
html body .ar-step h3, html body .ar-step h4, html body .ar-step h5,
html body .ed-step h3, html body .ed-step h4, html body .ed-step h5,
html body [class*="-step"][class*="cy-"] h3,
html body [class*="-step"][class*="cy-"] h4,
html body [class*="-step"][class*="cy-"] h5,
html body [class*="-step"][class*="cy-"] p { color: rgb(241, 245, 249) !important; }

html body .cy-soc-step p,
html body .io-flow-step p,
html body .bc-step p,
html body .es-step p,
html body .cl-step p,
html body .ar-step p,
html body .ed-step p { color: rgba(241, 245, 249, 0.78) !important; }

/* IoT feature importance card */
html body .io-feat-card h3, html body .io-feat-card h4, html body .io-feat-card h5,
html body .io-feature-card h3, html body .io-feature-card h4, html body .io-feature-card h5 { color: rgb(241, 245, 249) !important; }

/* ============== STEP 8 (v6): CTA SECTIONS (violet gradient bg) ============== */
html body .rh-cta,
html body .mt-cta,
html body .ag-cta,
html body .xh-cta,
html body .cd-cta,
html body [class$="-cta"],
html body [class*="-cta"] {
  background: linear-gradient(135deg, #6d28d9, #faf7f5) !important;
  background-color: #6d28d9 !important;
  background-image: linear-gradient(135deg, #6d28d9, #faf7f5) !important;
}

html body .rh-cta h1, html body .rh-cta h2, html body .rh-cta h3,
html body .mt-cta h1, html body .mt-cta h2, html body .mt-cta h3,
html body .ag-cta h1, html body .ag-cta h2, html body .ag-cta h3,
html body .xh-cta h1, html body .xh-cta h2, html body .xh-cta h3,
html body .cd-cta h1, html body .cd-cta h2, html body .cd-cta h3,
html body [class*="-cta"] h1,
html body [class*="-cta"] h2,
html body [class*="-cta"] h3 { color: #1B1B1B !important; }

html body [class*="-cta"] h2 em,
html body [class*="-cta"] h2 strong {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

html body [class*="-cta"] p { color: rgba(255, 255, 255, 0.85) !important; }

/* IoT predictive maintenance dark card (.io-pm) */
html body .io-pm h3, html body .io-pm h4, html body .io-pm h5,
html body .io-pm-left h3, html body .io-pm-left h4, html body .io-pm-left h5,
html body .io-pm-right h3, html body .io-pm-right h4, html body .io-pm-right h5 { color: rgb(241, 245, 249) !important; }
html body .io-pm p, html body .io-pm-left p, html body .io-pm-right p { color: rgba(241, 245, 249, 0.78) !important; }

/* === D993-FIX cy-soc-step-INVERT === */
/* d-opus137 rule was written assuming dark bg, but .cy-soc-step actual bg is #94a3b8 (light) */
/* INVERT: force dark text for visibility */
html body .cy-soc-step h3,
html body .cy-soc-step h4,
html body .cy-soc-step h5,
html body .cy-soc-step h6,
html body [class*="-step"].cy-soc-step h3,
html body [class*="-step"].cy-soc-step h4,
html body [class*="-step"].cy-soc-step h5 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html body .cy-soc-step p,
html body [class*="-step"].cy-soc-step p {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}
/* End D993-FIX */