/* PDFlyHQ — blog/typography.css
   Article prose. Shared by every post (linked individually via each post's
   Index.cshtml, not bundled — see the "why individual <link> tags" note in
   doc/V2/Blog Structure- Sample Blog Page.md). Scoped under .article-body
   so these overrides never bleed outside a post's content, same discipline
   components/*.css already uses scoping under .tool-app/.seo-section for.
   base/typography.css already styles h1-h4/p/a globally; this file only
   adds what long-form reading needs on top of that (spacing between
   blocks, lists, images, blockquote, inline code).

   Full width of the .tool-app shell (see header.css), not a narrow reading
   column — matches how every other section on the site (home's feature
   cards, FAQ list, tool grid) fills its container rather than centering a
   ch-capped block inside it. */

.article-body {
  margin-top: var(--space-8);
  font-size: var(--text-base);
  line-height: 1.75;
}

.article-body > * + * { margin-top: var(--space-5); }

.article-body h2 {
  margin-top: var(--space-10);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}
.article-body h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.article-body p { color: var(--color-text-secondary); }

.article-body ul,
.article-body ol {
  padding-left: var(--space-6);
  color: var(--color-text-secondary);
}
.article-body li + li { margin-top: var(--space-2); }
.article-body li::marker { color: var(--color-primary-500); font-weight: var(--font-semibold); }

.article-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.article-body blockquote {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary-500);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.article-body code {
  padding: 2px var(--space-2);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.article-body a { text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 768px) {
  .article-body { font-size: var(--text-md); }
}