@import "main.css";

/* ----------  POST HEADER  ---------- */
.blog-post-header{text-align:center;margin-bottom:3rem;border-bottom:1px solid var(--border);padding-bottom:2rem}
.blog-title{font-size:2.8rem;margin-bottom:1rem}
.blog-meta{font-size:.9rem;opacity:.7;margin-bottom:2rem}
.blog-header-image{border:1px solid var(--border);padding:1rem;margin:3rem 0}
.blog-header-image img{width:100%;height:auto;display:block}

/* ----------  TABLE OF CONTENTS  ---------- */
.toc{border:1px solid var(--border);padding:1.5rem 2rem;margin-bottom:3rem}
.toc h3{font-size:1.2rem;margin-bottom:1rem}
.toc ul{list-style:none;padding-left:0}
.toc li{margin-bottom:.5rem}
.toc a{color:var(--txt);text-decoration:underline;opacity:.8}

/* ----------  ARTICLE BODY  ---------- */
.blog-content{font-size:1.1rem;line-height:1.8}
.blog-content p{margin-bottom:1.5rem}
.blog-content h2{font-size:1.8rem;margin-top:3rem;margin-bottom:1.5rem}
.blog-content ul,.blog-content ol{padding-left:2rem;margin-bottom:1.5rem}
.blog-content blockquote{border-left:3px solid var(--txt);padding-left:1.5rem;margin:2rem 0;font-style:italic;opacity:.9}
.blog-content pre{background:var(--code-bg);border:1px solid var(--border);padding:1.5rem;margin:2rem 0;overflow-x:auto;font-size:.9rem}
.blog-content code{font-family:'Space Mono',monospace}
.in-content-image{border:1px solid var(--border);padding:1rem;margin:2rem 0}
.in-content-image img{width:100%;height:auto;display:block}
.in-content-image figcaption{font-size:.9rem;text-align:center;opacity:.7;margin-top:1rem}
.full-width-image{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-top:3rem;margin-bottom:3rem}
.full-width-image img{width:100%;height:auto;display:block}
.section-divider{border:0;height:1px;background:var(--border);margin:4rem 0}
.conclusion,.references{font-size:1.1rem;line-height:1.8}
.conclusion h2,.references h2{font-size:1.8rem;margin-bottom:1.5rem}
.references ul{list-style:none;padding-left:0}
.references li{margin-bottom:1rem}
.references a{color:var(--txt)}

/* ----------  AUTHOR BIO  ---------- */
.author-bio{display:flex;gap:1.5rem;align-items:center;border:1px solid var(--border);padding:2rem}
.author-bio img{width:80px;height:80px;border-radius:50%}
.author-bio p{font-size:.9rem;line-height:1.6;opacity:.9}
.author-bio a{color:var(--txt)}

/* ----------  POST TAGS  ---------- */
.blog-tags{margin-bottom:1.5rem}
.tag{display:inline-block;border:1px solid var(--border);padding:.2rem .6rem;font-size:.8rem;margin:.2rem .2rem 0 0;background:transparent;color:var(--txt);transition:background-color .2s,color .2s;text-decoration:none}
.tag:hover{background:var(--txt);color:var(--bg)}
.blog-tags .tag{margin-right:.4rem}

/* ----------  POST NAV  ---------- */
.post-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border);gap:1rem;flex-wrap:wrap}
.nav-btn{background:none;border:1px solid var(--border);color:var(--txt);padding:.75rem 1.5rem;text-decoration:none;transition:background .2s;max-width:40%}
.nav-btn:hover{background:var(--hover)}
.nav-btn.all-blogs{flex-grow:0}
.nav-btn.disabled{opacity:.4;pointer-events:none}

/* ----------  CALLOUTS (Obsidian-style)  ---------- */
.callout{border:1px solid var(--border);border-left:3px solid var(--txt);padding:1rem 1.25rem;margin:2rem 0;border-radius:4px;background:var(--code-bg)}
.callout-title{font-weight:700;margin-bottom:.5rem}
.callout-body p:last-child{margin-bottom:0}
.callout-note{border-left-color:#3b82f6}
.callout-tip{border-left-color:#10b981}
.callout-warning{border-left-color:#f59e0b}
.callout-danger,.callout-error{border-left-color:#ef4444}

/* ----------  CODE + SYNTAX HIGHLIGHT  ---------- */
.blog-content pre{background:#0d1117;border:1px solid #30363d;padding:1.5rem;margin:2rem 0;overflow-x:auto;font-size:.9rem;border-radius:6px}
.blog-content pre code{background:transparent;color:#c9d1d9;padding:0;font-size:.9rem}
.blog-content code{font-family:'Space Mono',monospace;background:var(--code-bg);padding:.15em .35em;border-radius:4px;font-size:.9em}
.dark-mode .blog-content code{background:#1e1e1e}

/* ----------  TOC SUB-ITEMS  ---------- */
.toc li.toc-sub{padding-left:1.25rem;font-size:.95rem}

@media(max-width:480px){.author-bio{flex-direction:column;text-align:center}}