/* Blog content uses the accepted foreground roles. All surface paint stays in blog.css. */
#main.pn-foreground {
  color: var(--pn-fg-primary);
  font: 400 var(--pn-type-body)/1.65 var(--pn-font-ui);
  letter-spacing: 0;
}

#main.pn-foreground :is(h1, h2, h3, h4, .btn, .btn-sm) {
  font-family: inherit;
  letter-spacing: 0;
}

#main.pn-foreground :is(h1, h2, h3, h4, p, li, a, blockquote, .breadcrumb-current) {
  overflow-wrap: anywhere;
}

#main.pn-foreground .blog-layout {
  grid-template-columns: minmax(0, 1fr) 20rem;
}

#main.pn-foreground :is(.blog-layout > *, .article-body, .blog-card, .related-card) {
  min-inline-size: 0;
}

#main.pn-foreground .blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

#main.pn-foreground .related-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

#main.pn-foreground .blog-layout > article > ul {
  padding-inline-start: var(--pn-space-5);
  margin-block-end: var(--pn-space-6);
}

#main.pn-foreground :is(.article-title, .blog-listing-header h1) {
  color: var(--pn-fg-primary);
  font-size: var(--pn-type-section);
  font-weight: 600;
  line-height: 1.3;
}

#main.pn-foreground :is(.article-body h2, .blog-layout > article > h2) {
  color: var(--pn-fg-primary);
  font-size: var(--pn-type-block);
  font-weight: 600;
  line-height: 1.35;
}

#main.pn-foreground :is(.article-body h3, .blog-card h2, .related-card h3, .article-cta h3) {
  font-size: var(--pn-type-info);
  font-weight: 600;
  line-height: 1.4;
  margin-block-end: var(--pn-space-2);
}

#main.pn-foreground :is(.article-body, .article-body strong, .article-body h3, .article-body blockquote, .article-body code, .article-body td, .breadcrumb-current, .related-card h3, .article-tags .tag) {
  color: var(--pn-fg-primary);
}

#main.pn-foreground :is(.article-lead, .blog-listing-header p, .blog-card-desc, .blog-card-excerpt, .sidebar-cta p, .related-card p) {
  color: var(--pn-fg-secondary);
  font-size: var(--pn-type-body);
  line-height: 1.65;
}

#main.pn-foreground .blog-card h2 a {
  color: var(--pn-fg-primary);
  font: inherit;
}

#main.pn-foreground :is(.article-category, .blog-card-category, .related-category, .toc-title, .sidebar-widget h4, .sidebar-cta h4) {
  color: var(--pn-fg-primary);
  font-size: var(--pn-type-body);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

#main.pn-foreground :is(.breadcrumb, .breadcrumb li, .article-meta, .article-tag, .article-tags .tag, .blog-card-date, .blog-card-meta, .blog-card-read-time, .related-card-date) {
  color: var(--pn-fg-primary);
  font-size: var(--pn-type-caption);
  line-height: 1.5;
}

#main.pn-foreground :is(.article-body a, .breadcrumb a, .toc a, .blog-layout > article > ul a, .sidebar-link-list a, .blog-card-link, .article-tag:hover) {
  color: var(--pn-fg-link);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: var(--pn-space-1);
}

#main.pn-foreground :is(.toc a, .blog-layout > article > ul a, .sidebar-link-list a, .blog-card-link) {
  font-size: var(--pn-type-body);
  line-height: 1.5;
}

#main.pn-foreground :is(.breadcrumb a, .toc a, .blog-layout > article > ul a, .sidebar-link-list a, .blog-card-link, .article-tag, .article-tags .tag, .sidebar-cta .btn-sm) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--pn-target-min);
}

#main.pn-foreground .sidebar-link-list a::before { color: currentColor; }
#main.pn-foreground .blog-card-link:hover { color: var(--pn-fg-primary); }

/* This transparent metadata row contains only text; no card paint is changed. */
#main.pn-foreground .blog-card-meta { opacity: 1; }

#main.pn-foreground .blog-card-tag {
  color: var(--pn-fg-on-dark);
  font-size: var(--pn-type-caption);
  line-height: 1.5;
  letter-spacing: 0;
}

#main.pn-foreground .article-cta h3 { color: var(--pn-fg-on-dark); }
#main.pn-foreground .article-cta p {
  color: var(--pn-fg-on-dark-muted);
  font-size: var(--pn-type-body);
  line-height: 1.65;
}

#main.pn-foreground .article-cta .btn {
  color: var(--pn-fg-on-brand);
  font-size: var(--pn-type-info);
  font-weight: 700;
  line-height: 1.5;
  max-inline-size: 100%;
  min-block-size: var(--pn-target-min);
}

/* The version-aware CTA already has a separate, fixed dark gradient. */
#main.pn-foreground .article-cta .btn.pn-download-version-cta {
  color: var(--pn-fg-on-solid-action);
}

#main.pn-foreground .pn-download-version {
  font-size: var(--pn-type-caption);
  letter-spacing: 0;
}

#main.pn-foreground .sidebar-cta .btn-sm {
  color: var(--pn-fg-on-brand);
  font-size: var(--pn-type-body);
  line-height: 1.5;
  justify-content: center;
  max-inline-size: 100%;
}

#main.pn-foreground :is(.article-body, .article-body table) {
  font-size: var(--pn-type-body);
  line-height: 1.5;
}

#main.pn-foreground .article-body :is(th, td) {
  min-inline-size: 8rem;
  text-align: start;
  overflow-wrap: anywhere;
}

#main.pn-foreground .article-body th { color: var(--pn-fg-primary); }

/* The table keeps its native display and node identity inside its own scrollport. */
#main.pn-foreground .pn-blog-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  margin-block-end: var(--pn-space-5);
}

#main.pn-foreground .pn-blog-scroll > table { margin-block-end: 0; }
#main.pn-foreground .article-body pre { max-inline-size: 100%; }
#main.pn-foreground .article-body pre code { color: var(--pn-fg-on-dark); }

#main.pn-foreground :focus-visible {
  outline: var(--pn-outline-width) solid var(--pn-fg-focus);
  outline-offset: var(--pn-outline-width);
}

#main.pn-foreground .article-cta :focus-visible {
  outline-color: var(--pn-fg-on-dark-focus);
}

@media (max-width: 860px) {
  #main.pn-foreground .blog-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #main.pn-foreground :is(a, .blog-card, .related-card) { transition: none; }
}