/**
 * GFS Kit Hotfix v1
 * Date: 2026-05-21
 * Purpose:
 *   Override Elementor / Hello-Elementor / WooCommerce styles that win the
 *   cascade against gfs-kit.css (due to higher specificity, later load order,
 *   or the theme's font-family stack).
 *
 * Diagnosed bugs (Chrome MCP DevTools scan of /shop/ on 2026-05-21):
 *   - .msl-h1..h4 rendering in font "Secular One" (theme heading font) and
 *     color rgb(0,109,180) (Elementor link blue) instead of Inter + navy.
 *   - .msl-num--amber stat number rendering in navy because
 *     .msl-pattern-stat .n (specificity 0,2,0) beats .msl-num--amber (0,1,0).
 *   - .msl-btn--amber rendering with blue link text color from <a> inheritance.
 *   - .msl-pattern-step h4 inside <table> fallback inheriting Secular One.
 *
 * Strategy:
 *   Override at `body` selector level with !important, on a tightly scoped set
 *   of properties (color, font-family). Does NOT touch gfs-kit.css. Loaded
 *   after gfs-kit.css and after Elementor/theme styles via wp_enqueue_style
 *   dependency + late priority (99) in functions.php.
 */

/* ---- Headings inside msl-patterns: force Inter + ink-strong ---- */
body .msl-h1,
body .msl-h2,
body .msl-h3,
body .msl-h4,
body .msl-pattern-tldr h3,
body .msl-pattern-step h4 {
  font-family: var(--msl-font) !important;
  color: var(--msl-ink-strong) !important;
}

/* ---- Stat number: amber variant must beat .msl-pattern-stat .n ---- */
body .msl-num--amber,
body .msl-pattern-stat .n.msl-num--amber {
  color: var(--msl-amber) !important;
}
body .msl-num--accent {
  color: var(--msl-down, var(--msl-amber)) !important;
}

/* ---- Stat card type: keep kit font + colors ---- */
body .msl-pattern-stat .l,
body .msl-pattern-stat .d {
  color: var(--msl-muted) !important;
  font-family: var(--msl-font) !important;
}
body .msl-pattern-stat .n {
  font-family: var(--msl-font) !important;
}

/* ---- Kicker: amber, kit font ---- */
body .msl-kicker {
  color: var(--msl-amber) !important;
  font-family: var(--msl-font) !important;
}

/* ---- Lead: muted, kit font ---- */
body .msl-lead {
  color: var(--msl-muted) !important;
  font-family: var(--msl-font) !important;
}

/* ---- On-dark surfaces (CTA navy band) ---- */
body .msl-on-dark .msl-h1,
body .msl-on-dark .msl-h2,
body .msl-on-dark .msl-h3,
body .msl-on-dark .msl-h4 {
  color: #fff !important;
}
body .msl-on-dark .msl-kicker {
  color: var(--msl-amber) !important;
}
body .msl-on-dark .msl-lead {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ---- Step layout: nested-div AND <table> fallback (Page 2/shop) ---- */
body .msl-pattern-step h4,
body table h4 {
  font-family: var(--msl-font) !important;
  color: var(--msl-ink-strong) !important;
}
body .msl-pattern-step p,
body table p {
  color: var(--msl-muted) !important;
  font-family: var(--msl-font) !important;
}

/* ---- Buttons: amber button text must be ink-strong, not link blue ---- */
body a.msl-btn,
body a.msl-btn--amber,
body .msl-btn,
body .msl-btn--amber {
  color: var(--msl-ink-strong) !important;
  text-decoration: none !important;
  font-family: var(--msl-font) !important;
  font-weight: 700 !important;
}
body a.msl-btn:hover,
body a.msl-btn--amber:hover {
  color: var(--msl-ink-strong) !important;
  text-decoration: none !important;
}