:root {
  /* Inherit global variables; only add specifics */
}

.blog-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  padding: 6rem 1.5rem 3rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 25%, var(--background-color)) 0%, var(--background-color) 70%);
  overflow: hidden;
}
body.light-mode .blog-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 15%, var(--background-color)) 0%, var(--background-color) 70%);
}
.blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 35%, color-mix(in srgb, var(--accent-color) 30%, transparent) 0%, transparent 60%),
              radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-color) 20%, transparent) 0%, transparent 55%);
  opacity: .45;
  pointer-events: none;
}
.blog-hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; width: 100%; }
.blog-hero-meta { display:flex; gap:.8rem; flex-wrap:wrap; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-secondary-color); margin-bottom:1rem; }
.blog-hero-title { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height:1.15; margin:0 0 1.25rem; font-weight:700; color: var(--text-primary-color); }
.blog-hero-excerpt { font-size: clamp(1rem, 2vw, 1.25rem); line-height:1.55; color: var(--text-secondary-color); }

/* (Removed skeleton shimmer styles) */

.blog-layout { display:grid; grid-template-columns: minmax(0,1fr) 280px; gap:3rem; max-width:1100px; margin:0 auto; padding:3rem 1.5rem 4rem; }
@media (max-width: 1050px){ .blog-layout { grid-template-columns: 1fr; } #blog-toc { order:2; position:sticky; top:5rem; } }

.blog-article { min-width:0; }
.blog-post-content { font-size:1.05rem; line-height:1.75; }
.blog-post-content > *:first-child { margin-top:0; }
.blog-post-content p { margin:0 0 1.4rem; color: var(--text-primary-color); }
.blog-post-content h2, .blog-post-content h3, .blog-post-content h4 { scroll-margin-top: 90px; font-weight:600; line-height:1.25; }
.blog-post-content h2 { font-size:1.9rem; margin:3.2rem 0 1.3rem; position:relative; }
.blog-post-content h2::after { content:""; position:absolute; left:0; bottom:-6px; width:72px; height:3px; background:var(--accent-color); border-radius:2px; }
.blog-post-content h3 { font-size:1.45rem; margin:2.4rem 0 1rem; }
.blog-post-content h4 { font-size:1.2rem; margin:2rem 0 .85rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.blog-post-content ul, .blog-post-content ol { margin:0 0 1.6rem 1.3rem; padding-left:1rem; }
.blog-post-content li { margin:.4rem 0; }
.blog-post-content blockquote { margin:2.4rem 0; padding:1.2rem 1.4rem 1.2rem 1.2rem; background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color)); border-left:4px solid var(--accent-color); border-radius:6px; font-style:italic; color: var(--text-primary-color); position:relative; }
.blockquote cite { display:block; margin-top:.75rem; font-style:normal; font-size:.85rem; color: var(--text-secondary-color); }
.blog-post-content code { background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color)); padding:.25rem .45rem; border-radius:4px; font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace; font-size:.85em; }
.blog-post-content pre { position:relative; margin:2rem 0; background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color)); padding:1rem 1.1rem; border-radius:10px; overflow:auto; border:1px solid var(--border-color); }
.blog-post-content pre code { background:none; padding:0; font-size:.85rem; }
.blog-post-content img { border-radius:14px; margin:2.2rem auto; display:block; max-width:100%; height:auto; box-shadow:0 4px 28px -6px rgba(0,0,0,.4); }
.blog-post-content figure { margin:2.4rem 0; }
.blog-post-content figcaption { margin-top:.75rem; text-align:center; font-size:.8rem; color: var(--text-secondary-color); letter-spacing:.5px; }
.blog-post-content table { width:100%; border-collapse:collapse; margin:2.6rem 0; font-size:.95rem; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; }
.blog-post-content th, .blog-post-content td { padding:.75rem .9rem; text-align:left; border-bottom:1px solid var(--border-color); }
.blog-post-content th { background: color-mix(in srgb, var(--accent-color) 35%, var(--surface-color)); color: var(--text-on-accent); font-weight:600; }
.blog-post-content tr:last-child td { border-bottom:none; }
.blog-post-content a { color: var(--accent-color); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-color) 55%, transparent); text-underline-offset: 3px; transition: color .25s; }

/* Ensure body wrapper uses theme colors */
.blog-post-content-body, .blog-post-content-body * { color: var(--text-primary-color); }

body:not(.light-mode) .blog-post-content-body p { color: var(--text-primary-color); }

/* Force override of any inline (e.g., Quill) dark-mode colors that remain black */
body:not(.light-mode) .blog-post-content-body,
body:not(.light-mode) .blog-post-content-body *:not(img):not(video):not(canvas):not(svg) {
  color: var(--text-primary-color) !important;
}
body:not(.light-mode) .blog-post-content-body a { color: var(--accent-color) !important; }
body:not(.light-mode) .blog-post-content-body code { color: var(--text-on-accent) !important; }
.blog-post-content a:hover { color: var(--text-primary-color); }

.blog-post-footer { margin:4.5rem 0 0; padding-top:2.5rem; border-top:1px solid var(--border-color); }
.blog-post-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.blog-post-tags strong { font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-secondary-color); }
.blog-post-tag { background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color)); padding:.4rem .75rem; border-radius:50px; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; border:1px solid color-mix(in srgb, var(--accent-color) 40%, transparent); color: var(--text-primary-color); transition: background .25s, color .25s; }
.blog-post-tag:hover { background: var(--accent-color); color: var(--text-on-accent); }

.blog-post-share { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin-bottom:2.2rem; }
.blog-post-share strong { font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-secondary-color); }
.share-btn { padding:.55rem 1rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; background: var(--surface-color); color: var(--text-primary-color); border:1px solid var(--border-color); border-radius:40px; display:inline-flex; align-items:center; gap:.45rem; transition: all .25s; }
.share-btn:hover { background: var(--accent-color); color: var(--text-on-accent); border-color: var(--accent-color); transform: translateY(-2px); }

.blog-post-navigation { display:flex; justify-content:space-between; gap:1rem; margin:4.5rem 0 0; padding-top:2.5rem; border-top:1px solid var(--border-color); }
.blog-post-navigation .nav-link { display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; letter-spacing:.5px; padding:.65rem 1rem; border-radius:40px; background: var(--surface-color); border:1px solid var(--border-color); color: var(--text-primary-color); text-transform:uppercase; font-weight:600; transition: all .25s; }
.blog-post-navigation .nav-link:hover { background: var(--accent-color); color: var(--text-on-accent); border-color: var(--accent-color); }

/* TOC */
.blog-toc { position:sticky; top:110px; height:fit-content; align-self:start; }
.blog-toc .toc-inner { background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color)); border:1px solid var(--border-color); padding:1.25rem 1.1rem 1.4rem; border-radius:14px; backdrop-filter:blur(6px); max-height:70vh; overflow:auto; }
.blog-toc h2 { font-size:.8rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; margin:0 0 .9rem; color: var(--text-secondary-color); }
#toc-list { display:flex; flex-direction:column; gap:.35rem; font-size:.75rem; }
#toc-list a { color: var(--text-secondary-color); text-decoration:none; line-height:1.4; padding:.35rem .4rem; border-radius:6px; transition: background .2s, color .25s; }
#toc-list a:hover { background: color-mix(in srgb, var(--accent-color) 15%, var(--surface-color)); color: var(--text-primary-color); }
#toc-list a.active { background: var(--accent-color); color: var(--text-on-accent); }

/* Reading progress bar */
.reading-progress { position:fixed; top:0; left:0; width:100%; height:4px; background: var(--accent-color); transform: scaleX(0); transform-origin:left; z-index:1000; transition: transform .1s ease; }

/* Loading / error states */
.blog-loading, .blog-error { text-align:center; padding:4rem 1.5rem; }
.blog-loading i, .blog-error i { font-size:2rem; margin-bottom:1rem; color: var(--accent-color); }
.blog-error i { color:#ff6b6b; }

/* Responsive */
@media (max-width: 1050px){ .blog-toc { display:none !important; } }
@media (max-width: 780px){ .blog-hero { padding:5rem 1.2rem 2.6rem; } .blog-layout { padding:2.2rem 1rem 3.2rem; } .blog-post-content h2 { font-size:1.6rem; margin:2.6rem 0 1.1rem; } .blog-post-content h3 { font-size:1.25rem; } }
@media (max-width: 520px){ .blog-post-navigation { flex-direction:column; } .blog-post-content h2 { font-size:1.45rem; } .blog-post-content h3 { font-size:1.15rem; } }