/* Shared ARTICLE components - chrome-neutral so they render identically in the
 * blog chrome (.blog-wrap) and the SEO chrome (.seo-wrap): callouts, table of
 * contents, copy-code button, author byline, tag pills. Loaded by base.html (all
 * SEO pages) + blog_post.html. Prose typography stays per-chrome (seo.css /
 * the blog style block). Features are content-opt-in - styles only matter when
 * the markdown actually emits them. */

/* --- author byline (Medium/dev.to style) --- */
.byline { display: flex; gap: 12px; align-items: center; margin: 4px 0 18px; }
.byline .avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); display: block; }
.byline .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.byline .monogram { width: 100%; height: 100%; background: var(--brand-tint); color: var(--brand-deep); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.byline .name { font-weight: 700; color: var(--text-primary); text-decoration: none; display: block; line-height: 1.25; }
.byline .name:hover { color: var(--brand); }
.byline .meta { font-size: 13px; color: var(--text-muted); margin-top: 1px; }

/* --- table of contents (markdown `toc` extension) + heading anchors --- */
.toc { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin: 0 0 26px; font-size: 15px; }
.toc > ul { margin: 0; padding-left: 18px; }
.toc ul { margin: 4px 0; }
.headerlink { opacity: 0; margin-left: 6px; text-decoration: none; color: var(--text-muted); font-weight: 400; }
h2:hover .headerlink, h3:hover .headerlink { opacity: 1; }

/* --- markdown tables in article bodies (clean, aligned, full-width) --- */
.seo-article table, .blog-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.seo-article th, .seo-article td, .blog-body th, .blog-body td { border: 1px solid var(--border); padding: 9px 13px; text-align: left; vertical-align: top; line-height: 1.5; }
.seo-article thead th, .blog-body thead th { background: var(--bg-secondary); font-weight: 700; color: var(--text-primary); }
.seo-article tbody tr:nth-child(even), .blog-body tbody tr:nth-child(even) { background: var(--bg-secondary); }

/* --- callouts (markdown `admonition`: note / tip / warning) --- */
/* top + bottom margin so a callout clears whatever precedes it (e.g. a table). */
.admonition { border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 10px; padding: 12px 16px; margin: 22px 0; background: var(--bg-secondary); }
.admonition.tip { border-left-color: #1a9d6b; }
.admonition.warning { border-left-color: #d98300; }
.admonition-title { font-weight: 800; color: var(--text-primary); margin: 0 0 6px; text-transform: capitalize; }
.admonition p:last-child { margin-bottom: 0; }

/* --- copy-code button (article.js sets the <pre> to position:relative) --- */
.copy-btn { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; opacity: 0; transition: opacity .15s; }
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--brand-deep); border-color: var(--brand); }

/* --- tag pills --- */
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.article-tags span { font-size: 12.5px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; }

/* --- code syntax highlighting in DARK mode ---
 * hljs-github.min.css is tuned for a light background; its token colors go
 * low-contrast on the dark code surface. Remap them to a github-dark palette
 * so code stays readable in dark. Loaded on all SEO + blog pages. */
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote { color: #8b949e; }
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-doctag,
[data-theme="dark"] .hljs-formula { color: #ff7b72; }
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition { color: #a5d6ff; }
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet,
[data-theme="dark"] .hljs-link,
[data-theme="dark"] .hljs-meta { color: #79c0ff; }
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-name { color: #d2a8ff; }
[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-params,
[data-theme="dark"] .hljs-class .hljs-title { color: #ffa657; }
[data-theme="dark"] .hljs-deletion { color: #ffdcd7; }
[data-theme="dark"] .hljs-emphasis { font-style: italic; }
[data-theme="dark"] .hljs-strong { font-weight: 700; }