/* ============================================================
   wordpress/selectpdf-2026/assets/css/blog.css

   Theme-only overrides + post-layout styles. Loaded AFTER spdf.css
   so the cascade order is:
     1. spdf.css  (base / components / chrome / pages) - the .NET site copy
     2. blog.css  (this file)        - WP-specific extensions

   All colors/typography reference the existing --spdf-* tokens in base.css
   so the blog automatically picks up dark mode + future palette swaps.

   Sectioning:
     1. Layout primitives (two-col grid)
     2. Featured post block
     3. Post cards (home grid + archive list)
     4. Article body (single + page)
     5. Sidebar widgets
     6. Pagination + post nav
     7. Search form
     8. WP block editor frontend tweaks (alignwide, captions, etc.)
   ============================================================ */

/* ── 1. Layout primitives ──────────────────────────────────── */
.spdf-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .spdf-blog-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.spdf-blog-main { min-width: 0; }  /* prevent grid item from overflowing on long URLs */

.spdf-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 720px) {
  .spdf-blog-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── 2. Featured post ──────────────────────────────────────── */
.spdf-blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--spdf-surface);
  border: 1px solid var(--spdf-line);
  border-radius: 16px;
  padding: 28px;
  margin: 0 0 40px;
}
@media (max-width: 880px) {
  .spdf-blog-featured { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}

.spdf-blog-featured-thumb {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--spdf-line);
}
.spdf-blog-featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spdf-blog-featured-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spdf-accent);
  margin-bottom: 8px;
}
.spdf-blog-featured-title {
  font-family: inherit;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.spdf-blog-featured-title a {
  color: var(--spdf-text);
  text-decoration: none;
}
.spdf-blog-featured-title a:hover { color: var(--spdf-accent); }
.spdf-blog-featured-excerpt {
  color: var(--spdf-text-dim);
  font-size: 15px;
  line-height: 1.55;
  margin: 12px 0 16px;
}

/* ── 3. Post cards (home grid + archive list) ──────────────── */
.spdf-blog-card {
  background: var(--spdf-panel);
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.spdf-blog-card:hover {
  border-color: var(--spdf-line-strong);
  transform: translateY(-1px);
}
.spdf-blog-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--spdf-surface);
}
.spdf-blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spdf-blog-card-body { padding: 18px 20px 22px; }
.spdf-blog-card-title {
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 8px 0 10px;
}
.spdf-blog-card-title a {
  color: var(--spdf-text);
  text-decoration: none;
}
.spdf-blog-card-title a:hover { color: var(--spdf-accent); }
.spdf-blog-card-excerpt {
  color: var(--spdf-text-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  /* Clamp to 3 lines so cards in the same grid row stay even */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Post meta (date / author / category chip) ─────────────── */
.spdf-blog-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--spdf-text-mute);
  font-size: 12.5px;
}
.spdf-blog-meta-sep { color: var(--spdf-text-mute); }
.spdf-blog-meta-cat {
  color: var(--spdf-accent);
  text-decoration: none;
  font-weight: 600;
}
.spdf-blog-meta-cat:hover { text-decoration: underline; }

/* ── 4. Article body (single + page) ──────────────────────── */
.spdf-blog-article { min-width: 0; }
.spdf-blog-hero {
  margin: 0 0 28px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: var(--spdf-surface);
}
.spdf-blog-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spdf-blog-article-head { margin: 0 0 28px; }
.spdf-blog-article-head .spdf-display { margin-bottom: 12px; }

/* Article body baseline. Imported WP posts/pages have BARE HTML (no
   spdf-* classes on h2/p/a/etc.) - the rules below map each element to
   the equivalent design-system style so we get the same look without
   touching post HTML.
   Each rule's comment names the canonical class it's mirroring, so if
   the design system shifts you can grep the source and stay in sync. */
.spdf-blog-article-body {
  /* Baseline body type - between .spdf-body (15px) and .spdf-lede (18px).
     Long-form blog content reads better at the lede-ish scale. */
  color: var(--spdf-text);
  font-family: var(--spdf-font-body);
  font-size: 16.5px;
  line-height: 1.7;
}
.spdf-blog-article-body > * { margin: 0 0 18px; }
.spdf-blog-article-body p { margin: 0 0 18px; }

/* ── Headings: mirror .spdf-display + per-level scale from base.css ── */
/* All display headings share font-family/weight/letter-spacing from
   .spdf-display. Per-level font-size comes from .spdf-h1/h2/h3/h4. */
.spdf-blog-article-body h1,
.spdf-blog-article-body h2,
.spdf-blog-article-body h3,
.spdf-blog-article-body h4 {
  font-family: var(--spdf-font-display);              /* .spdf-display */
  font-weight: var(--spdf-display-weight);            /* .spdf-display */
  letter-spacing: var(--spdf-display-letter);         /* .spdf-display */
  color: var(--spdf-text);                            /* .spdf-display */
  text-wrap: balance;                                 /* .spdf-display */
}
/* h1 is unusual in post body (post title already used spdf-h1 / h2 in the
   article header). When it does appear, treat as h2-scale so it doesn't
   eclipse the page title. */
.spdf-blog-article-body h1 {
  font-size: var(--spdf-h2);                          /* mirrors .spdf-h2 */
  line-height: var(--spdf-h2-lh);
  margin: 56px 0 16px;
}
.spdf-blog-article-body h2 {
  font-size: var(--spdf-h2);                          /* mirrors .spdf-doc-h2 + .spdf-h2 */
  line-height: var(--spdf-h2-lh);
  margin: 56px 0 16px;
}
.spdf-blog-article-body h3 {
  font-size: clamp(28px, 3.2vw, 44px);                /* mirrors .spdf-h3 */
  line-height: 1.05;
  margin: 40px 0 12px;
}
.spdf-blog-article-body h4 {
  font-size: 24px;                                    /* mirrors .spdf-h4 */
  line-height: 1.2;
  margin: 28px 0 10px;
}
/* h5 / h6 are rare. Drop to body-font, weight 600, mono-uppercase
   respectively - matches how the .NET pages handle sub-section labels
   (.spdf-strong for h5, .spdf-caption / .spdf-eyebrow for h6). */
.spdf-blog-article-body h5 {
  font-family: var(--spdf-font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--spdf-text);                            /* mirrors .spdf-strong */
  margin: 24px 0 8px;
}
.spdf-blog-article-body h6 {
  font-family: var(--spdf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spdf-text-mute);                       /* mirrors .spdf-kicker .t */
  margin: 24px 0 8px;
}

/* ── Inline elements: mirror .spdf-inlink / .spdf-strong ──────────── */
.spdf-blog-article-body a {                           /* mirrors .spdf-inlink */
  color: var(--spdf-accent);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.spdf-blog-article-body a:hover { text-decoration: underline; }
.spdf-blog-article-body strong,
.spdf-blog-article-body b {                           /* mirrors .spdf-strong */
  color: var(--spdf-text);
  font-weight: 600;
}
.spdf-blog-article-body em,
.spdf-blog-article-body i { font-style: italic; }
.spdf-blog-article-body small {
  font-size: 0.875em;
  color: var(--spdf-text-dim);
}

/* ── Lists ────────────────────────────────────────────────────────── */
.spdf-blog-article-body ul,
.spdf-blog-article-body ol {
  margin: 0 0 18px 0;
  padding: 0 0 0 24px;
}
.spdf-blog-article-body li { margin: 0 0 6px; }
.spdf-blog-article-body li > ul,
.spdf-blog-article-body li > ol { margin: 8px 0 0 0; }

/* ── Blockquote ───────────────────────────────────────────────────── */
.spdf-blog-article-body blockquote {
  border-left: 3px solid var(--spdf-accent);
  padding: 4px 0 4px 18px;
  margin: 24px 0;
  color: var(--spdf-text-dim);
  font-style: italic;
}
.spdf-blog-article-body blockquote p { margin: 0 0 8px; }
.spdf-blog-article-body blockquote p:last-child { margin: 0; }

/* ── Images + figures ─────────────────────────────────────────────── */
.spdf-blog-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.spdf-blog-article-body figure { margin: 24px 0; }
.spdf-blog-article-body figcaption {                  /* mirrors .spdf-caption */
  font-family: var(--spdf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--spdf-text-mute);
  text-align: center;
  margin-top: 8px;
}

/* ── Inline code + bare pre (legacy lang:* pres handled in §4b) ───── */
.spdf-blog-article-body code,
.spdf-blog-article-body kbd,
.spdf-blog-article-body samp {                        /* mirrors .spdf-code-inline */
  font-family: var(--spdf-font-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--spdf-chip);
  color: var(--spdf-chip-text);
}
.spdf-blog-article-body pre {                         /* mirrors .spdf-code-pre + .spdf-code */
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--spdf-code);
  color: var(--spdf-code-text);
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  font-family: var(--spdf-font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre;
  overflow: auto;
}
.spdf-blog-article-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Horizontal rule ──────────────────────────────────────────────── */
.spdf-blog-article-body hr {                          /* mirrors .spdf-hr */
  border: 0;
  height: 1px;
  background: var(--spdf-line);
  margin: 40px 0;
}

/* ── Tables ───────────────────────────────────────────────────────── */
.spdf-blog-article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14.5px;
  margin: 24px 0;
}
.spdf-blog-article-body th,
.spdf-blog-article-body td {
  border-bottom: 1px solid var(--spdf-line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.spdf-blog-article-body tr:last-child > th,
.spdf-blog-article-body tr:last-child > td {
  border-bottom: 0;
}
.spdf-blog-article-body th {
  background: var(--spdf-surface);
  font-weight: 600;
  color: var(--spdf-text);
}

/* ── 4b. Legacy code samples (Crayon + Responsive Tabs) ────────
   The legacy WordPress posts were authored with two abandoned plugins
   we can't / don't load on the new install:
     - Crayon Syntax Highlighter: <pre class="lang:c# decode:true" title="Hello World">code</pre>
     - Responsive Tabs:           <div class="rtbs rtbs_convert"><div class="rtbs_menu">…</div><div class="rtbs_content">…</div>…</div>
   We adopt them visually to the new code-block / code-tabs look without
   editing post HTML. The JS that enhances <pre class="lang:..."> with a
   header + COPY button, and re-wires .rtbs tab clicks, lives in blog.js.
   ────────────────────────────────────────────────────────────── */

/* ── Crayon — bare pre.lang:* (fallback before JS runs / if JS fails) ─ */
.spdf-blog-article-body pre[class*="lang:"] {
  background: var(--spdf-code);
  color: var(--spdf-code-text);
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: var(--spdf-font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  overflow: auto;
  white-space: pre;
  margin: 24px 0;
}

/* ── Crayon — JS-enhanced wrapper (mirrors .spdf-code chrome) ───────── */
.spdf-blog-code {
  background: var(--spdf-code);
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
}
.spdf-blog-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--spdf-code-line);
  background: var(--spdf-code-head);
  font-family: var(--spdf-font-mono);
  font-size: 11px;
  color: var(--spdf-code-file);
  letter-spacing: 0.06em;
}
.spdf-blog-code-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spdf-blog-code-lang {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--spdf-code-copy-border);
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.spdf-blog-code-copy {
  flex-shrink: 0;
  background: transparent;
  color: var(--spdf-code-copy);
  border: 1px solid var(--spdf-code-copy-border);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--spdf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background .15s;
}
.spdf-blog-code-copy:hover { background: var(--spdf-code-copy-hover); }

/* ── Line-number gutter + code body ──────────────────────────────────
   enhancePre() (and the .spdf-blog-tabs widget) wrap each <pre> in a flex
   ".spdf-blog-code-body" with a ".spdf-qs-gutter" column beside it.
   spdf.js's spdfHighlightAll() fills the gutter (one <span>N</span> per
   source line). The gutter's look (color / border-right / mono font) comes
   from pages.css's .spdf-qs-gutter; here we only flex the row, align the
   metrics to the blog pre (13.5px / 1.65 / 18px top pad), and strip the
   inner pre's own card chrome.

   The `.spdf-blog-code-body > pre` reset must out-specify the legacy
   `.spdf-blog-article-body pre[class*="lang:"]` rule (0,2,1). This selector
   is (0,2,1) too and comes later in the file, so it wins — that's what
   stops the enhanced Crayon pres from painting a second border INSIDE the
   wrapper's border (the "double inner border" bug). */
.spdf-blog-article-body .spdf-blog-code-body {
  display: flex;
  overflow: hidden;
}
.spdf-blog-article-body .spdf-blog-code-body > pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: pre;
  overflow-x: auto;
  /* keep padding / font from the bare pre rule above */
}
.spdf-blog-article-body .spdf-blog-code-body > .spdf-qs-gutter {
  padding: 18px 14px;
  font-size: 13.5px;
  line-height: 1.65;
}

/* ── Standalone .bordered_content (legacy, NOT inside .rtbs_content) ─
   These were one-off code-style boxes (API request samples, config
   snippets) in legacy posts. blog.js converts each into a <pre> +
   .spdf-blog-code chrome (header + COPY), then appends any <i> attribution
   footer below. The .bordered_content envelope itself is just spacing -
   the inner .spdf-blog-code owns the border / background / padding. */
.spdf-blog-article-body .bordered_content {
  margin: 24px 0;
  border: 0;
  padding: 0;
  background: transparent;
}
/* Reset margin on the inner .spdf-blog-code so we don't double-stack
   the 24px gap (the .bordered_content envelope already provides it). */
.spdf-blog-article-body .bordered_content > .spdf-blog-code {
  margin: 0;
}
/* Attribution footer (e.g. "Code snippet uses SelectPdf API Client...")
   below the code block, dashed separator above. */
.spdf-blog-article-body .bordered_content > i {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--spdf-code-line);
  font-family: var(--spdf-font-body);
  font-style: normal;
  font-size: 12.5px;
  color: var(--spdf-code-file);
}
.spdf-blog-article-body .bordered_content > i a {
  color: var(--spdf-accent);
}
/* Specificity note: the rtbs-case rule
   `.spdf-blog-article-body .rtbs_content .bordered_content` (0,3,0)
   beats the standalone rule above (0,2,0), so .bordered_content INSIDE
   .rtbs_content keeps its dark-cream code-block styling. The standalone
   rule only applies when there's no .rtbs_content ancestor. */

/* ── Responsive Tabs — .rtbs widget ───────────────────────────────── */
.spdf-blog-article-body .rtbs {
  margin: 24px 0;
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--spdf-code);
}
/* The plugin shipped a handful of hidden config divs (slug, breakpoint,
   inactive_tab_background, color). They were never visible; keep them
   that way. (Their inline `display:none` is intact because the JS
   enhancer only strips inline styles from .rtbs_content / .bordered_content
   / .rtbs_menu a - the config divs are matched by class here as a belt
   for the suspender, in case someone later strips ALL inline styles.) */
.spdf-blog-article-body .rtbs > .rtbs_slug,
.spdf-blog-article-body .rtbs > .rtbs_inactive_tab_background,
.spdf-blog-article-body .rtbs > .rtbs_breakpoint,
.spdf-blog-article-body .rtbs > .rtbs_color {
  display: none;
}

/* Tab strip (matches .spdf-tabs in components.css). Flex container so the
   COPY button injected by blog.js sits at the right edge, next to the tabs. */
.spdf-blog-article-body .rtbs_menu {
  display: flex;
  align-items: stretch;
  background: var(--spdf-code-head);
  border-bottom: 1px solid var(--spdf-code-line);
}
.spdf-blog-article-body .rtbs_menu ul {
  flex: 1;
  min-width: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.spdf-blog-article-body .rtbs_menu ul::-webkit-scrollbar { display: none; }

/* COPY button injected by blog.js into a tab strip (legacy .rtbs_menu
   OR modern .spdf-blog-tabs-nav). Visual styling is context-agnostic so
   it works in both ancestors; positioning quirks per-context live with
   the respective tab-strip rules below / in §4d. Mirrors .spdf-code-copy
   in components.css. */
.spdf-blog-article-body .spdf-blog-rtbs-copy {
  flex-shrink: 0;
  align-self: center;
  background: transparent;
  color: var(--spdf-code-copy);
  border: 1px solid var(--spdf-code-copy-border);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--spdf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.spdf-blog-article-body .spdf-blog-rtbs-copy:hover {
  background: var(--spdf-code-copy-hover);
}
/* In the legacy .rtbs widget the menu has tabs on the left and the
   button gets pushed to the right with both side margins. */
.spdf-blog-article-body .rtbs_menu .spdf-blog-rtbs-copy {
  margin-right: 12px;
  margin-left: 12px;
}
.spdf-blog-article-body .rtbs_menu li {
  margin: 0;
  list-style: none;
}
/* Mobile toggle (zero-width-non-joiner ☓ button) was an accordion fallback
   on narrow screens. We use horizontal scroll instead - hide it. */
.spdf-blog-article-body .rtbs_menu li.mobile_toggle { display: none; }
.spdf-blog-article-body .rtbs_menu li a {
  display: block;
  padding: 12px 18px;
  /* JS strips inline style="background:#57c9e0" off active tab links;
     this sets the visual baseline once the inline style is gone. */
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--spdf-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--spdf-text-dim);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.spdf-blog-article-body .rtbs_menu li a:hover {
  color: var(--spdf-text);
}
.spdf-blog-article-body .rtbs_menu li.current a,
.spdf-blog-article-body .rtbs_menu li a.active {
  color: var(--spdf-text);
  border-bottom-color: var(--spdf-accent);
}

/* Content panes. JS strips the inline style="border-top:7px solid #57c9e0"
   off each pane so our border-top: 0 lands without a specificity fight. */
.spdf-blog-article-body .rtbs_content {
  display: none;
  padding: 0;
  border-top: 0;
}
.spdf-blog-article-body .rtbs_content.active {
  display: block;
}

/* The inner code container the plugin wrapped each snippet in. The legacy
   inline style was: border:0 !important; padding:10px 10px 20px 5px !important.
   JS strips it, then this rule takes over. Padding is 0 here because the
   code-body (gutter + pre) and the footer own their own padding now — the
   gutter must sit flush against the left edge to match the .NET pages. */
.spdf-blog-article-body .rtbs_content .bordered_content {
  border: 0;
  padding: 0;
  font-family: var(--spdf-font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--spdf-code-text);
  background: var(--spdf-code);
}
/* The trailing "Code snippet uses ..." italic note inside each tab pane.
   Sits below the code-body; the .bordered_content has no padding now, so
   the note carries its own horizontal padding + dashed top separator. */
.spdf-blog-article-body .rtbs_content .bordered_content i {
  display: block;
  margin-top: 0;
  padding: 10px 22px 18px;
  border-top: 1px dashed var(--spdf-code-line);
  font-style: normal;
  font-family: var(--spdf-font-body);
  font-size: 12.5px;
  color: var(--spdf-code-file);
}
.spdf-blog-article-body .rtbs_content .bordered_content i a {
  color: var(--spdf-accent);
}

/* The <pre data-hl="lang"> that JS injects into each pane to feed the
   highlighter, now wrapped in a .spdf-blog-code-body with a line-number
   gutter. Inherits fonts/colors from .bordered_content. Non-wrapping
   (was pre-wrap) so each source line maps to exactly one gutter row;
   long lines scroll horizontally instead. The (0,3,1) specificity here
   beats the generic `.spdf-blog-code-body > pre` reset (0,2,1). */
.spdf-blog-article-body .rtbs_content .spdf-blog-rtbs-pre {
  margin: 0;
  padding: 18px 22px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  white-space: pre;
  overflow-x: auto;
}

/* ── 4d. Modern .spdf-blog-tabs widget (new-post authoring) ──────
   Mirrors the .rtbs widget look + the .spdf-code chrome on the .NET
   marketing pages. Authored by hand in a Custom HTML block - see
   docs/Wordpress-Theme.md §12 for the copy-paste markup template.
   ──────────────────────────────────────────────────────────── */
.spdf-blog-article-body .spdf-blog-tabs {
  margin: 24px 0;
  border: 1px solid var(--spdf-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--spdf-code);
}
.spdf-blog-article-body .spdf-blog-tabs-nav {
  display: flex;
  align-items: stretch;
  background: var(--spdf-code-head);
  border-bottom: 1px solid var(--spdf-code-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.spdf-blog-article-body .spdf-blog-tabs-nav::-webkit-scrollbar { display: none; }
.spdf-blog-article-body .spdf-blog-tab {
  flex-shrink: 0;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--spdf-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--spdf-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.spdf-blog-article-body .spdf-blog-tab:hover {
  color: var(--spdf-text);
}
.spdf-blog-article-body .spdf-blog-tab.is-active {
  color: var(--spdf-text);
  border-bottom-color: var(--spdf-accent);
}
/* The COPY button JS appends to the nav uses the same .spdf-blog-rtbs-copy
   class as the legacy widget; visual styling is shared (§4b). The modern
   nav has no ul wrapper, so we push the button to the right with
   margin-left:auto and add right padding to keep it off the border. */
.spdf-blog-article-body .spdf-blog-tabs-nav .spdf-blog-rtbs-copy {
  margin-left: auto;
  margin-right: 12px;
}
.spdf-blog-article-body .spdf-blog-tab-pane { display: none; }
.spdf-blog-article-body .spdf-blog-tab-pane.is-active { display: block; }
/* The author's <pre> sheds its own card chrome via the shared
   `.spdf-blog-code-body > pre` reset above — the widget owns the border. */

/* Tags below article body */
.spdf-blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid var(--spdf-line);
}
.spdf-blog-tag {
  background: var(--spdf-surface);
  border: 1px solid var(--spdf-line);
  color: var(--spdf-text-dim);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.spdf-blog-tag:hover {
  color: var(--spdf-accent);
  border-color: var(--spdf-accent);
}

/* Prev / next post nav at bottom of single */
.spdf-blog-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--spdf-line);
}
.spdf-blog-postnav-link {
  display: block;
  padding: 16px 18px;
  background: var(--spdf-panel);
  border: 1px solid var(--spdf-line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--spdf-text);
  transition: border-color .15s;
}
.spdf-blog-postnav-link:hover { border-color: var(--spdf-line-strong); }
.spdf-blog-postnav-link.is-next { text-align: right; }
.spdf-blog-postnav-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spdf-text-mute);
  margin-bottom: 4px;
}
.spdf-blog-postnav-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .spdf-blog-postnav { grid-template-columns: 1fr; }
  .spdf-blog-postnav-link.is-next { text-align: left; }
}

/* ── 5. Sidebar widgets ────────────────────────────────────── */
.spdf-blog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.spdf-blog-widget {
  background: var(--spdf-panel);
  border: 1px solid var(--spdf-line);
  border-radius: 10px;
  padding: 18px 20px;
}
.spdf-blog-widget-title {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--spdf-text);
  margin: 0 0 12px;
}
.spdf-blog-widget-list,
.spdf-blog-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spdf-blog-widget-list li,
.spdf-blog-widget ul li {
  border-bottom: 1px solid var(--spdf-line);
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
}
.spdf-blog-widget-list li:last-child,
.spdf-blog-widget ul li:last-child { border-bottom: 0; }
.spdf-blog-widget a {
  color: var(--spdf-text);
  text-decoration: none;
}
.spdf-blog-widget a:hover { color: var(--spdf-accent); }
.spdf-blog-widget ul .children {
  padding-left: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--spdf-line);
}

/* ── 6. Pagination ──────────────────────────────────────────── */
.spdf-blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 32px 0 8px;
}
.spdf-blog-pager-item .page-numbers {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--spdf-line);
  border-radius: 8px;
  color: var(--spdf-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color .15s, color .15s;
}
.spdf-blog-pager-item .page-numbers:hover {
  border-color: var(--spdf-line-strong);
  color: var(--spdf-accent);
}
.spdf-blog-pager-item .page-numbers.current {
  background: var(--spdf-accent);
  color: var(--spdf-accent-ink);
  border-color: var(--spdf-accent);
}
.spdf-blog-pager-item .page-numbers.dots {
  border: 0;
  color: var(--spdf-text-mute);
}

/* Multi-page article nav (wp_link_pages) */
.spdf-blog-pages {
  font-size: 14px;
  color: var(--spdf-text-dim);
  margin: 16px 0;
}
.spdf-blog-pages a,
.spdf-blog-pages > .post-page-numbers {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 2px;
  border: 1px solid var(--spdf-line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--spdf-text);
}

/* ── 7. Search form ─────────────────────────────────────────── */
.spdf-blog-search { width: 100%; }
.spdf-blog-search-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.spdf-blog-search-row .spdf-input { flex: 1; min-width: 0; }
.spdf-blog-search-wrap { max-width: 480px; margin: 24px auto 0; }

/* ── 8. WP block editor frontend extras ────────────────────── */
/* Wide / full block alignment - WordPress sends these classes when the
   block has Align Wide / Align Full applied. We let them stretch beyond
   the article content column but capped at the block-inner max-width. */
.spdf-blog-article-body .alignwide {
  margin-left: calc(50% - 50vw + 32px);
  margin-right: calc(50% - 50vw + 32px);
  max-width: none;
}
.spdf-blog-article-body .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.spdf-blog-article-body .alignleft  { float: left;  margin: 0 18px 8px 0; max-width: 50%; }
.spdf-blog-article-body .alignright { float: right; margin: 0 0 8px 18px; max-width: 50%; }
.spdf-blog-article-body .aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* WP gallery defaults inside article body */
.spdf-blog-article-body .wp-block-gallery,
.spdf-blog-article-body .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 24px 0;
}
.spdf-blog-article-body .wp-block-gallery img { border-radius: 6px; }

/* ── Misc page chrome ──────────────────────────────────────── */
.spdf-block-inner-narrow {
  max-width: 720px;
  margin: 0 auto;
}
.spdf-blog-archive-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spdf-accent);
  margin-bottom: 8px;
}