/* ============================================================
   BEST GROUP HEALTH — content-page-fixes.css
   Additional modern styles for .content-page layout
   ============================================================ */

/* ── Content Page Base Overrides ──────────────────────────── */
.content-page {
  /* Custom light-theme tokens */
  --cp-accent: #3b82f6;
  --cp-accent-hover: #2563eb;
  --cp-text: #0f172a;
  --cp-muted: #475569;
  --cp-lighter: #64748b;
  --cp-bg: #ffffff;
  --cp-surface: #f8fafc;
  --cp-border: #e2e8f0;
  --cp-radius: 12px;
  --cp-radius-lg: 20px;
  --cp-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --cp-shadow-hover: 0 12px 40px rgba(0,0,0,0.13);

  /* Override dark root theme variables so inline var() references resolve to light values */
  --text:    #0f172a;
  --text2:   #1e293b;
  --muted:   #64748b;
  --muted2:  #94a3b8;
  --bg:      #f8fafc;
  --bg-soft: #f0f7ff;
  --surface:  #ffffff;
  --surface2: #f8fafc;
  --border:   #e2e8f0;
  --border2:  #d1d5db;
}

/* ── Breadcrumb override for light hero bg ─────────────────── */
.content-page .breadcrumb span { color: #4b5e6e; }
.content-page .breadcrumb a { color: #4b5e6e; }
.content-page .breadcrumb a:hover { color: var(--cp-accent); }

/* ── Nav override for light pages ─────────────────────────── */
/* Handles both: body.content-page .nav (standalone quote page)
   and: div.content-page .nav (generated pages where nav is sibling) */
.content-page .nav,
body.content-page .nav {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #e2e8f0;
}
.content-page .nav-brand,
body.content-page .nav-brand { color: #0f172a; }
.content-page .nav-links a,
body.content-page .nav-links a { color: #475569; }
.content-page .nav-links a:hover,
.content-page .nav-links a.active,
body.content-page .nav-links a:hover,
body.content-page .nav-links a.active { color: #0f172a; background: #f1f5f9; }

/* ── Page Hero (content pages) ─────────────────────────────── */
.content-page .page-hero {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 50%, #f5f3ff 100%);
  border-bottom: 1px solid #dbeafe;
  padding: 80px 32px 64px;
  text-align: center;
}
.content-page .page-hero h1 {
  color: #0f172a;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 16px;
}
.content-page .page-hero p {
  color: #475569;
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto;
}
.content-page .kicker {
  background: rgba(59,130,246,0.09);
  color: #1d4ed8;
  border-color: rgba(59,130,246,0.2);
}

/* ── Stats Bar (content pages) ─────────────────────────────── */
.content-page .pg-stats {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.content-page .pg-stat-val { color: #0f172a; }
.content-page .pg-stat-val .accent { color: var(--cp-accent); }
.content-page .pg-stat-label { color: #64748b; }

/* ── Typography ────────────────────────────────────────────── */
.content-page .prose-body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #334155;
  max-width: 720px;
}
.content-page .prose-body h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.875rem);
  color: #0f172a;
  margin: 52px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}
.content-page .prose-body h3 {
  font-size: 1.25rem;
  color: #1e293b;
  margin: 40px 0 14px;
}
.content-page .prose-body h2:first-child,
.content-page .prose-body h3:first-child { margin-top: 0; }
.content-page .prose-body p { margin-bottom: 22px; }
.content-page .prose-body strong { color: #0f172a; font-weight: 600; }
.content-page .prose-body em { color: #475569; }

/* ── Callout Box ───────────────────────────────────────────── */
.content-page .callout {
  border-left: 4px solid var(--cp-accent);
  background: rgba(59,130,246,0.06);
  border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
  padding: 20px 24px;
  margin: 28px 0;
  color: #1e3a5f;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.content-page .callout.callout-green {
  border-color: #10b981;
  background: rgba(16,185,129,0.06);
  color: #064e3b;
}
.content-page .callout.callout-amber {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.06);
  color: #78350f;
}
.content-page .callout-title {
  font-weight: 700;
  color: var(--cp-accent);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Cards (content pages) ─────────────────────────────────── */
.content-page .card {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  box-shadow: var(--cp-shadow);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
              border-color 0.22s cubic-bezier(0.4,0,0.2,1);
}
.content-page .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cp-shadow-hover);
  border-color: rgba(59,130,246,0.25);
}
.content-page .card h3 { color: #0f172a; }
.content-page .card p  { color: #475569; }
.content-page .card-icon {
  background: rgba(59,130,246,0.09);
  color: var(--cp-accent);
}

/* ── Feature grid (content pages) ─────────────────────────── */
.content-page .features-grid .feature-card {
  background: #fff;
  border: 1px solid var(--cp-border);
  color: #0f172a;
}
.content-page .features-grid .feature-card:hover {
  border-color: rgba(59,130,246,0.3);
  background: #fafbff;
  transform: translateY(-5px);
  box-shadow: var(--cp-shadow-hover);
}
.content-page .features-grid .feature-icon {
  background: rgba(59,130,246,0.09);
  color: var(--cp-accent);
}
.content-page .features-grid .feature-card h3 { color: #0f172a; }
.content-page .features-grid .feature-card p  { color: #475569; }

/* ── Write cards (content pages) ───────────────────────────── */
.content-page .write-card {
  background: #f8fafc;
  border: 1px solid var(--cp-border);
  color: #0f172a;
}
.content-page .write-card:hover {
  border-color: var(--cp-accent);
  background: #f0f7ff;
  transform: translateY(-3px);
  box-shadow: var(--cp-shadow);
}
.content-page .write-card-num { color: var(--cp-accent); }
.content-page .write-card h3 { color: #0f172a; }
.content-page .write-card p  { color: #475569; }

/* ── FAQ (content pages) ───────────────────────────────────── */
.content-page .faq-list .faq-item {
  background: #fff;
  border: 1px solid var(--cp-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.content-page .faq-list .faq-item:hover { border-color: rgba(59,130,246,0.3); }
.content-page .faq-list details[open] { border-color: var(--cp-accent); }
.content-page .faq-q { color: #0f172a; }
.content-page .faq-q::after { color: #94a3b8; }
.content-page details[open] > .faq-q { color: var(--cp-accent); }
.content-page details[open] > .faq-q::after { color: var(--cp-accent); }
.content-page .faq-a { color: #475569; }

/* ── Group Calc sidebar (content pages) ────────────────────── */
.content-page .grp-calc {
  background: #fff;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow);
}
.content-page .grp-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.content-page .grp-input:focus {
  border-color: var(--cp-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.content-page .grp-tier-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
.content-page .grp-tier-btn:hover,
.content-page .grp-tier-btn.active {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
  background: rgba(59,130,246,0.08);
}
.content-page .grp-result {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.content-page .grp-result-row { border-color: #e2e8f0; }
.content-page .grp-result-label { color: #64748b; }
.content-page .grp-result-val { color: #0f172a; }
.content-page .grp-result-val.big { color: var(--cp-accent); }
.content-page .grp-disclaimer { color: #94a3b8; }
.content-page .grp-label { color: #475569; }

/* ── Side CTA (content pages) ──────────────────────────────── */
.content-page .side-cta {
  background: #fff;
  box-shadow: var(--cp-shadow);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
}
/* Explicit white text in the gradient header — prevents any cascade from darkening it */
.content-page .side-cta-head        { color: #fff; }
.content-page .side-cta-head h3     { color: #fff; }
.content-page .side-cta-head p      { color: rgba(255,255,255,0.82); }
.content-page .side-cta-links a     { color: rgba(255,255,255,0.7); }
.content-page .side-cta-links a:hover { color: #fff; }

/* ── Step Cards (content pages) ────────────────────────────── */
.content-page .step-card {
  background: #fff;
  border-color: var(--cp-border);
}
.content-page .step-card h3 { color: #0f172a; }
.content-page .step-card p  { color: #475569; }
.content-page .step-num     { color: var(--cp-accent); }

/* ── Carriers (content pages) ──────────────────────────────── */
.content-page .carrier-card {
  background: #fff;
  border-color: var(--cp-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.content-page .carrier-card:hover {
  border-color: rgba(59,130,246,0.3);
  box-shadow: var(--cp-shadow);
  transform: translateY(-3px);
}
.content-page .carrier-card img { opacity: 0.75; filter: none; }
.content-page .carrier-card span { color: #475569; }

/* ── Industry cards (content pages) ────────────────────────── */
.content-page .industry-card {
  background: #fff;
  border-color: var(--cp-border);
}
.content-page .industry-card:hover {
  border-color: rgba(59,130,246,0.3);
  background: #f0f7ff;
  transform: translateX(4px);
  box-shadow: var(--cp-shadow);
}
.content-page .industry-card span { color: #1e293b; }

/* ── Section heads (content pages) ─────────────────────────── */
.content-page .section-head h2 { color: #0f172a; }
.content-page .section-head p  { color: #475569; }

/* ── CTA dark (works on any page) ──────────────────────────── */
.content-page .cta-dark { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); }
.content-page .cta-dark h2 { color: #fff; }
.content-page .cta-dark p  { color: #94a3b8; }

/* ── Footer (content pages) ────────────────────────────────── */
.content-page .footer {
  background: #0f172a;
  border-color: rgba(255,255,255,0.07);
}

/* ── Buttons in content page ───────────────────────────────── */
.content-page .btn-outline {
  border-color: #cbd5e1;
  color: #334155;
}
.content-page .btn-outline:hover {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
}

/* ── Broker badge (content pages) ──────────────────────────── */
.content-page .broker-badge {
  background: #f8fafc;
  border-color: var(--cp-border);
}
.content-page .broker-badge-text { color: #475569; }
.content-page .broker-badge-text strong { color: #0f172a; }

/* ── Hero tags (content pages) ─────────────────────────────── */
.content-page .hero-tag {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}
.content-page .hero-tag:hover { border-color: var(--cp-accent); color: var(--cp-accent); }

/* ── Responsive 980px ──────────────────────────────────────── */
@media (max-width: 980px) {
  .content-page .page-hero { padding: 60px 24px 48px; }
  .content-page .prose-body { font-size: 1rem; }
  .content-page .grp-calc { max-width: 100%; }
}

/* ── Responsive 720px ──────────────────────────────────────── */
@media (max-width: 720px) {
  .content-page .page-hero { padding: 48px 20px 36px; }
  .content-page .page-hero h1 { font-size: 1.75rem; }
  .content-page .prose-body h2 { font-size: 1.375rem; }
  .content-page .prose-body h3 { font-size: 1.125rem; }
  .content-page .callout { padding: 16px 18px; }
  .content-page .grp-tier-row { grid-template-columns: repeat(3, 1fr); }
}