/* =======================================================================
 * Blog single post — blog-post.css
 * Layout: two-column sticky-TOC sidebar (left) + article card (right).
 * Enqueued on is_singular('post') via inc/enqueue.php.
 * Sections: SEC-46 header · SPEC-08 layout · SEC-48 prose · SEC-49
 *           pullquote · SEC-51 code · SEC-52 plugin-cta · SEC-53 author
 *           · SEC-54 related.
 * ======================================================================= */

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-body);
    line-height: var(--lh-normal);
  }

  /* ── Container ──────────────────────────────────────────────────────── */
  .container { max-width: var(--container-base); margin: 0 auto; padding: 0 var(--container-px); }
  .container-wide { max-width: calc(var(--container-base) + 120px); margin: 0 auto; padding: 0 var(--container-px); }
  @media (min-width: 1281px) { .container { max-width: var(--container-md); } .container-wide { max-width: calc(var(--container-md) + 120px); } }
  @media (min-width: 1601px) { .container { max-width: var(--container-lg); } .container-wide { max-width: calc(var(--container-lg) + 120px); } }
  @media (min-width: 1921px) { .container { max-width: var(--container-xl); } .container-wide { max-width: calc(var(--container-xl) + 120px); } }

  /* ── Reading progress bar ───────────────────────────────────────────── */
  .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--reading-progress-height);
    background: var(--reading-progress-bg);
    z-index: calc(var(--z-sticky) + 20);
  }
  .reading-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--reading-progress-color);
    transition: width 0.1s linear;
  }

  /* ===== SEC-46 · blog-post-header ===================================== */
  .sec-46 { padding: var(--space-16) 0 var(--space-10); background: var(--bg-page); }
  .bp-header { text-align: center; max-width: 780px; margin: 0 auto; }
  .bp-topic-chip {
    display: inline-block;
    padding: var(--topic-chip-padding);
    background: var(--topic-chip-bg);
    color: var(--topic-chip-text);
    font-size: var(--topic-chip-size);
    font-weight: var(--topic-chip-weight);
    letter-spacing: var(--topic-chip-tracking);
    text-transform: uppercase;
    border-radius: var(--topic-chip-radius);
    text-decoration: none;
    margin-bottom: var(--space-6);
  }
  .bp-h1 {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--text-heading);
    margin: 0 0 var(--space-5) 0;
  }
  .bp-dek {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--text-xl);
    line-height: var(--lh-relaxed);
    color: var(--text-body);
    margin: 0 0 var(--space-8) 0;
  }
  .bp-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--fw-medium);
  }
  .bp-meta-author { color: var(--text-heading); font-weight: var(--fw-semibold); }
  .bp-meta-sep { color: var(--text-subtle); }

  /* ===== SPEC-08 · two-column article layout ============================ */
  .bp-layout-wrap {
    padding: var(--space-10) 0 var(--space-20);
    background: var(--bg-page);
  }

  .bp-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-8);
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--container-px);
  }

  /* ── TOC sidebar ─────────────────────────────────────────────────────── */
  .bp-toc-sidebar {
    position: sticky;
    top: 130px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    /* Hide scrollbar but keep scrollability */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .bp-toc-sidebar::-webkit-scrollbar { width: 4px; }
  .bp-toc-sidebar::-webkit-scrollbar-track { background: transparent; }
  .bp-toc-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

  .bp-toc-inner {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  .bp-toc-label {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-heading);
    margin: 0 0 var(--space-4) 0;
  }

  .bp-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* TOC links */
  .toc-link {
    display: block;
    padding: 7px 4px 7px 14px;
    border-left: 2px solid transparent;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    color: #0f172a;
    text-decoration: none;
    word-break: break-word;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .toc-link:hover {
    color: #0f172a;
    border-left-color: var(--border-strong);
    background: var(--bg-muted);
  }
  .toc-link.is-active {
    color: var(--accent-text);
    border-left-color: var(--accent);
    background: var(--accent-soft);
    font-weight: var(--fw-medium);
  }

  /* Heading level indentation */
  .toc-link[data-level="1"] { padding-left: 14px; font-weight: var(--fw-semibold); font-size: var(--text-lg); }
  .toc-link[data-level="2"] { padding-left: 14px; font-size: var(--text-md); }
  .toc-link[data-level="3"] { padding-left: 26px; font-size: var(--text-base); color: var(--text-heading); }
  .toc-link[data-level="4"] { padding-left: 38px; font-size: var(--text-base); color:var(--text-heading); }
  .toc-link[data-level="5"] { padding-left: 48px; font-size: var(--text-sm); color: var(--text-heading); }
  .toc-link[data-level="6"] { padding-left: 56px; font-size: var(--text-sm); color: var(--text-heading); }

  /* ── Article content card ─────────────────────────────────────────────── */
  .bp-content {
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-16) var(--space-12);
  }

  /* ===== SEC-48 · blog-post-prose ======================================= */
  .bp-prose {
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--prose-body-size);
    line-height: var(--prose-body-leading);
    color: var(--text-body);
  }
  .bp-prose p { margin: 0 0 var(--prose-paragraph-gap) 0; }
  .bp-prose p strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
  .bp-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
  .bp-prose a:hover { color: var(--accent-hover); }

  /* Headings inside prose — all get scroll-margin for sticky nav offset */
  .bp-prose h1,
  .bp-prose h2,
  .bp-prose h3,
  .bp-prose h4,
  .bp-prose h5,
  .bp-prose h6 { scroll-margin-top: 108px; }

  .bp-prose h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--text-5xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--text-heading);
    margin: var(--prose-h2-top) 0 var(--prose-h2-bottom) 0;
  }
  .bp-prose h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--text-3xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--text-heading);
    margin: var(--prose-h2-top) 0 var(--prose-h2-bottom) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }
  .bp-prose h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--text-xl);
    line-height: var(--lh-snug);
    color: var(--text-heading);
    margin: var(--prose-h3-top) 0 var(--prose-h3-bottom) 0;
  }
  .bp-prose h4 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--text-lg);
    color: var(--text-heading);
    margin: var(--space-8) 0 var(--space-3) 0;
  }
  .bp-prose h5 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--text-base);
    color: var(--text-heading);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    margin: var(--space-6) 0 var(--space-2) 0;
  }
  .bp-prose h6 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    margin: var(--space-5) 0 var(--space-2) 0;
  }

  /* Lists */
  .bp-prose ul, .bp-prose ol { margin: 0 0 var(--prose-paragraph-gap) 0; padding-left: var(--space-6); }
  .bp-prose ul li, .bp-prose ol li { margin-bottom: var(--prose-list-gap); }

  /* Tables */
  .bp-prose table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; font-size: var(--text-md); }
  .bp-prose thead th { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--border-strong); font-family: var(--font-body); font-weight: var(--fw-semibold); color: var(--text-heading); background: var(--bg-muted); }
  .bp-prose tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
  .bp-prose tbody tr:last-child td { border-bottom: 0; }
  .bp-prose tbody td strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

  /* Images */
  .bp-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); display: block; margin: var(--space-8) 0; }
  .bp-prose figure { margin: var(--space-10) 0; }
  .bp-prose figcaption { font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin-top: var(--space-3); }

  /* Inline code */
  .bp-prose code {
    background: var(--code-inline-bg);
    padding: var(--code-inline-padding);
    border-radius: var(--code-inline-radius);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-heading);
  }
  .bp-prose pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
  }

  /* Blockquote */
  .bp-prose blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--text-lg);
    color: var(--text-heading);
    font-style: italic;
  }
  .bp-prose blockquote p { margin: 0; }

  /* Horizontal rule */
  .bp-prose hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-12) 0;
  }

  /* ===== SEC-49 · blog-pullquote ======================================== */
  .bp-pullquote {
    padding: var(--pullquote-padding);
    border-left: var(--pullquote-border);
    padding-left: var(--space-6);
    font-family: var(--pullquote-font);
    font-size: var(--pullquote-size);
    font-weight: var(--pullquote-weight);
    color: var(--pullquote-color);
    line-height: var(--lh-snug);
    margin: var(--space-10) 0;
  }
  .bp-pullquote strong { color: var(--accent-hover); }

  /* ===== SEC-51 · blog-code-block ======================================= */
  .bp-code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--code-padding);
    border-radius: var(--code-radius);
    font-family: var(--code-font);
    font-size: var(--code-size);
    line-height: var(--code-leading);
    overflow-x: auto;
    margin: var(--space-8) 0;
    white-space: pre;
  }

  /* ===== SEC-52 · blog-inline-plugin-cta ================================ */
  .bp-plugin-cta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
    margin: var(--space-12) 0;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
  }
  .bp-plugin-cta:hover { border-color: var(--border-strong); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
  .bp-plugin-cta-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent-hover); font-weight: var(--fw-bold); font-family: var(--font-display); font-size: var(--text-lg); }
  .bp-plugin-cta-body { flex: 1; }
  .bp-plugin-cta-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px 0; }
  .bp-plugin-cta-title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-lg); color: var(--text-heading); margin: 0 0 4px 0; }
  .bp-plugin-cta-sub { font-size: var(--text-sm); color: var(--text-body); margin: 0; }
  .bp-plugin-cta-arrow { flex-shrink: 0; color: var(--text-heading); font-weight: var(--fw-semibold); }

  /* ===== SEC-53 · blog-post-footer (author box) ========================= */
  .bp-post-footer { max-width: var(--prose-measure); margin: var(--space-12) auto 0; }
  .bp-author { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
  .bp-author-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, #E0F2FE 0%, #F0FDFA 100%); display: flex; align-items: center; justify-content: center; color: var(--accent-hover); font-weight: var(--fw-bold); font-family: var(--font-display); font-size: var(--text-xl); }
  .bp-author-body { flex: 1; }
  .bp-author-name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-lg); color: var(--text-heading); margin: 0 0 2px 0; }
  .bp-author-role { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
  .bp-author-bio { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }

  /* ===== SEC-54 · blog-related-posts ==================================== */
  .sec-54 { padding: var(--section-py) 0; background: var(--bg-page); border-top: 1px solid var(--divider); }
  .sec-54-header { text-align: center; max-width: 680px; margin: 0 auto var(--space-10); }
  .sec-54-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3); }
  .sec-54-h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-4xl); color: var(--text-heading); margin: 0; }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1100px; margin: 0 auto; }
  .related-card { display: block; padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
  .related-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .related-chip { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
  .related-title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--text-heading); margin: 0; }

  /* ===== SEC-08 · freshness marker ====================================== */
  .last-updated { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: var(--space-4) 0 0 0; padding: 0; opacity: 0.7; }
  .last-updated time { font-variant-numeric: tabular-nums; }

  /* ===== RESPONSIVE ====================================================== */

  /* Tablet: narrow TOC */
  @media (max-width: 1100px) {
    .bp-layout { grid-template-columns: 220px 1fr; gap: var(--space-6); }
    .bp-content { padding: var(--space-12) var(--space-8); }
  }

  /* Mobile: single column, TOC above content */
  @media (max-width: 900px) {
    .bp-layout {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    .bp-toc-sidebar {
      position: static;
      max-height: 280px;
      overflow-y: auto;
    }
    .bp-toc-inner { border-radius: var(--radius-lg); }
    .bp-content {
      padding: var(--space-10) var(--space-5);
      border-radius: var(--radius-lg);
      box-shadow: none;
    }
    .bp-layout-wrap { padding: var(--space-6) 0 var(--space-16); }
    .bp-layout { padding: 0 var(--space-4); }
    .related-grid { grid-template-columns: 1fr; }
  }

  /* Small mobile */
  @media (max-width: 640px) {
    .bp-h1 { font-size: var(--text-4xl); }
    .bp-meta { gap: var(--space-1) var(--space-2); font-size: var(--text-xs); }
    .bp-content { padding: var(--space-8) var(--space-4); }
    .bp-toc-sidebar { max-height: 220px; }
  }

  @media (max-width: 900px) {
    .bp-h1 { font-size: var(--text-5xl); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    html { scroll-behavior: auto; }
  }