/* Article surfaces inherit the active site's palette; light styling stays intact. */
html[data-theme="dark"] .single-blog-hero,
html[data-theme="dark"] .single-blog-article,
html[data-theme="dark"] .single-blog-sidebar .single-blog-sidecard,
html[data-theme="dark"] .comments-area,
html[data-theme="dark"] .blog-story-card {
  background: var(--surface-strong, #202830);
  color: var(--text, #f4f6f8);
  border-color: var(--line, rgba(255, 255, 255, .18));
}
html[data-theme="dark"] .single-blog-hero {
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft, 0 12px 32px #0003);
}
html[data-theme="dark"] .comment-body,
html[data-theme="dark"] .comment-respond,
html[data-theme="dark"] .single-blog-category-item,
html[data-theme="dark"] .single-blog-article__body blockquote {
  background: var(--surface-soft, var(--surface-strong, #202830));
  color: var(--text, #f4f6f8);
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-theme="dark"] .single-blog-category-item:hover {
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--brand);
}
html[data-theme="dark"] .single-blog-hero :is(h1, h2, h3, strong),
html[data-theme="dark"] .comments-area :is(h2, h3, label, .fn),
html[data-theme="dark"] .single-blog-article__body :is(h2, h3, h4, h5, h6) {
  color: var(--text, #f4f6f8);
}
html[data-theme="dark"] .single-blog-hero__author span,
html[data-theme="dark"] .comments-area :is(.comment-notes, .logged-in-as, .comment-metadata, .says),
html[data-theme="dark"] .single-blog-article__body :is(p, li),
html[data-theme="dark"] .single-blog-category-item__meta {
  color: var(--muted, #c4cbd1);
}
html[data-theme="dark"] .single-blog-hero .blog-label,
html[data-theme="dark"] .single-blog-category-item__tag {
  color: var(--brand-strong, var(--text));
  background: var(--brand-soft, transparent);
}
html[data-theme="dark"] .comment-form :is(textarea, input[type="text"], input[type="email"], input[type="url"]) {
  background: var(--page-bg, #10151a);
  color: var(--text, #f4f6f8);
  border-color: var(--line, rgba(255, 255, 255, .25));
  color-scheme: dark;
}
html[data-theme="dark"] .comment-form :is(textarea, input)::placeholder {
  color: var(--muted, #c4cbd1);
  opacity: 1;
}
html[data-theme="dark"] .comment-form :is(textarea, input):focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: none;
}
html[data-theme="dark"] .single-blog-related-nav__button {
  background: var(--surface-soft, var(--surface-strong));
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .single-blog-article__body :is(table, th, td) {
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .single-blog-article__body :is(th, tr:nth-child(even)) {
  background: var(--surface-soft, var(--surface-strong));
}
/* The sidebar follows page scrolling; its full content remains in document flow. */
.single-blog-layout { align-items: start; }
.single-blog-layout .single-blog-sidebar {
  position: relative; top: auto; align-self: stretch; display: block;
  min-width: 0; max-height: none; overflow: visible; padding: 0;
}
.directory-sidebar-content { display: flex; flex-direction: column; gap: var(--space-md, 20px); }
.directory-sidebar-content > * { flex-shrink: 0; }
.single-blog-sidebar .sidebar-ad-banner img,
.single-blog-sidebar .directory-banner img { display:block;width:100%;height:auto;max-width:100%;object-fit:contain; }
.single-blog-article__body :is(h2,h3,h4,h5,h6) { scroll-margin-top:calc(var(--directory-article-sticky-top,132px) + 16px); }
@media(max-width:980px){.single-blog-layout .single-blog-sidebar {position:static;align-self:start}.directory-sidebar-content{transform:none!important}}
