/* ---------- SaveForWealth — Article Styles (Updated v3) ---------- */
:root {
  --sfw-bg: #ffffff;
  --sfw-text: #0f172a;        /* slate-900 */
  --sfw-muted: #475569;       /* slate-600 */
  --sfw-border: #e2e8f0;      /* slate-200 */
  --sfw-accent: #0ea5e9;      /* sky-500 */
  --sfw-accent-ink: #0369a1;  /* sky-700 */
  --sfw-note-bg: #f0f9ff;     /* sky-50 */
  --sfw-radius: 14px;
  --sfw-shadow: 0 4px 20px rgba(2, 6, 23, 0.06);
  --sfw-maxw: 90ch;           /* wider reading width */
  --sfw-leading: 1.5;         /* tighter line-spacing than before */
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfw-bg: #0b1220;
    --sfw-text: #e5e7eb;
    --sfw-muted: #94a3b8;
    --sfw-border: #1f2937;
    --sfw-accent: #38bdf8;     /* lighter blue in dark mode */
    --sfw-accent-ink: #7dd3fc; /* matching underline + headings */
    --sfw-note-bg: #082f49;
    --sfw-shadow: none;
  }
}

/* Base container */
.sfw-article {
  color: var(--sfw-text);
  background: var(--sfw-bg);
  max-width: var(--sfw-maxw);
  margin-inline: auto;
  padding: 1.5rem 2rem;
  line-height: var(--sfw-leading);
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1.03rem); /* slightly smaller base text */
  letter-spacing: 0.18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-shadow: var(--sfw-shadow);
  border: 1px solid var(--sfw-border);
  border-radius: var(--sfw-radius);
}

/* Desktop wider */
@media (min-width: 992px) {
  .sfw-article { max-width: 95ch; }
}

/* Remove accidental <br> spacing */
.sfw-article br { display: none; }

/* ---------- Headings ---------- */
.sfw-article h1,
.sfw-article h2 {
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--sfw-accent-ink); /* blue headings */
}

.sfw-article h1 {
  font-size: clamp(1.75rem, 2.2vw + 1.2rem, 2.4rem);
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* Blue underline matching heading */
.sfw-article h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 56px;
  background: var(--sfw-accent-ink);
  border-radius: 3px;
  opacity: 0.9;
}

.sfw-article h2 {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  margin-top: 1.6rem;
  padding-top: 0.25rem;
}

/* Tagline under H1 */
.sfw-article .tagline {
  font-size: 0.95rem;
  margin-top: -0.2rem;
  margin-bottom: 0.9rem;
  color: var(--sfw-muted);
  letter-spacing: 0.2px;
}

/* ---------- Paragraphs ---------- */
.sfw-article p {
  margin: 0.55rem 0 0.65rem;
  color: var(--sfw-text);
}

.sfw-article p + h2,
.sfw-article ul + h2 {
  margin-top: 1.4rem;
}

/* ---------- Lists ---------- */
.sfw-article ul {
  margin: 0.25rem 0 0.6rem 0; /* tighter spacing */
  padding-left: 1.15rem;
}

.sfw-article li {
  margin: 0.15rem 0;          /* reduced spacing */
  padding-left: 0.25rem;
}

.sfw-article ul li::marker {
  content: "▹ ";
  color: var(--sfw-accent);
  font-weight: 700;
}

/* ---------- Inline emphasis ---------- */
.sfw-article strong { font-weight: 750; }
.sfw-article em { font-style: italic; }

/* ---------- Small text ---------- */
.sfw-article .muted,
.sfw-article small {
  color: var(--sfw-muted);
  font-size: 0.95em;
}

/* ---------- Callout box ---------- */
.sfw-article .article-note {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--sfw-note-bg);
  border: 1px solid rgba(14,165,233,0.25);
  border-left: 4px solid var(--sfw-accent);
  border-radius: calc(var(--sfw-radius) - 6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--sfw-text);
}

.sfw-article .article-note strong {
  color: var(--sfw-accent-ink);
}

/* ---------- Links ---------- */
.sfw-article a {
  color: var(--sfw-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.sfw-article a:hover { opacity: 0.9; }

/* ---------- Print ---------- */
@media print {
  .sfw-article {
    box-shadow: none;
    border: none;
    background: #fff;
    color: #000;
  }
  .sfw-article a { color: #000; text-decoration: none; }
  .sfw-article .article-note {
    border-left-color: #000;
    background: #fff;
  }
}