/* ==========================================================================
   Blog posts: breadcrumb, table of contents, heading anchors, topic navigation.
   Design System tokens only (--bc-*). Loaded by blog pages only.
   ========================================================================== */

/* Anchor jumps must clear the sticky header */
h2[id], h3[id], section[id] { scroll-margin-top: var(--bc-space-9); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Breadcrumb ---------- */
.cp-crumbs { background: var(--bc-paper-alt); border-bottom: 1px solid var(--bc-line); }
.cp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-2); margin: 0; padding: var(--bc-space-3) 0; list-style: none; font-size: var(--bc-text-sm); line-height: 1.4; color: var(--bc-ink-soft); }
.cp-crumbs li + li::before { content: "/"; margin-right: var(--bc-space-2); color: var(--bc-ink-soft); }
.cp-crumbs a { color: var(--bc-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.cp-crumbs a:hover { color: var(--bc-ink); }
.cp-crumbs [aria-current] { color: var(--bc-ink); }

/* ---------- Table of contents ---------- */
.cp-toc { padding-block: var(--bc-space-6); background: var(--bc-paper); }
.cp-toc__nav {
  max-width: 68ch;
  padding: var(--bc-space-4);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
}
.cp-toc__title { margin: 0 0 var(--bc-space-3); font-family: var(--bc-font-display); font-weight: 700; font-size: var(--bc-text-xl); line-height: 1.2; color: var(--bc-ink); }
.cp-toc__list { margin: 0; padding-left: var(--bc-space-5); }
.cp-toc__list li { margin: 0 0 var(--bc-space-2); }
.cp-toc__list a { display: inline; padding: 0; color: var(--bc-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.cp-toc__list a:hover { color: var(--bc-ink); }
@media (min-width: 640px) { .cp-toc__nav { padding: var(--bc-space-5); } }

/* ---------- Blog index: topic navigation and grouped sections ---------- */
.cp-topics { padding-block: var(--bc-space-5); background: var(--bc-paper); }
.cp-topics__label { margin: 0 0 var(--bc-space-3); font-family: var(--bc-font-display); font-weight: 700; font-size: var(--bc-text-lg); color: var(--bc-ink); }
.cp-topics__list { display: flex; flex-wrap: wrap; gap: var(--bc-space-2); margin: 0; padding: 0; list-style: none; }
.cp-topics__list a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--bc-space-4);
  border: 1.5px solid var(--bc-ink-soft); border-radius: var(--bc-radius);
  color: var(--bc-ink); text-decoration: none; font-weight: 600; background: var(--bc-surface);
}
.cp-topics__list a:hover { border-color: var(--bc-accent-dark); color: var(--bc-accent-dark); }
.cp-blog-group h2 { font-family: var(--bc-font-display); font-weight: 700; font-size: var(--bc-text-2xl); text-transform: none; letter-spacing: 0; margin: 0 0 var(--bc-space-5); }