/* ═══════════════════════════════════════════
   Blog Post Styles
   Code highlighting & article typography
   ═══════════════════════════════════════════ */

/* ── Blog post layout ── */
.blog-post__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  flex-wrap: wrap;
}

.blog-post__body {
  padding-top: 16px;
}

/* ── Blog post cover image ── */
.blog-post__cover {
  margin: 24px 0 8px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.blog-post__cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Article typography ── */
.blog-post__body h2 {
  margin: 40px 0 16px;
  font-size: 1.35rem;
}

.blog-post__body h3 {
  margin: 32px 0 12px;
  font-size: 1.1rem;
}

.blog-post__body p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.blog-post__body ul,
.blog-post__body ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.blog-post__body li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.blog-post__body blockquote {
  border-left: 3px solid var(--accent);
  padding: 12px 20px;
  margin: 20px 0;
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

.blog-post__body blockquote p {
  color: var(--text-secondary);
  margin-bottom: 0;
}

.blog-post__body a {
  font-weight: 500;
}

.blog-post__body img {
  border-radius: var(--radius);
  margin: 20px 0;
}

.blog-post__body hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 40px 0;
}

/* ── Code blocks (syntax highlighting — VS Code Dark) ── */
.blog-post__body pre {
  background: #1e1e2e;
  border: 1px solid #2a2a3e;
  border-radius: var(--radius);
  padding: 20px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 20px 0;
  color: #d4d4d4;
}

/* ── Titled code blocks (filename tab) ── */
.code-titled {
  margin: 20px 0;
}

.code-titled__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #9e9eaa;
  background: #16161e;
  border: 1px solid #2a2a3e;
  border-bottom: none;
  padding: 8px 16px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.code-titled pre {
  margin: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* ── Copy button ── */
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #2a2a3e;
  border: 1px solid #3a3a4e;
  border-radius: var(--radius-sm);
  color: #6e6e7e;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
}

pre:hover .code-copy {
  opacity: 1;
}

.code-copy:hover {
  color: #d4d4d4;
  background: #3a3a4e;
}

.code-copy.copied {
  color: #22c55e;
  opacity: 1;
}

.blog-post__body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

.blog-post__body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Prism.js token colors (One Dark / VS Code inspired) ── */
.blog-post__body pre code .token {
  background: none;
  padding: 0;
  border-radius: 0;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a6a7a;
  font-style: italic;
}

.token.punctuation {
  color: #808090;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #e0956c;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a8d4a0;
}

.token.operator,
.token.entity,
.token.url {
  color: #6ec8d8;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #d1a0e8;
}

.token.function,
.token.class-name {
  color: #7abcf0;
}

.token.regex,
.token.important,
.token.variable {
  color: #d1a0e8;
}

/* ── Callout boxes ── */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.9rem;
}
.callout--warning {
  border-left-color: #e8a838;
}
.callout--danger {
  border-left-color: #e85d4a;
}
.callout--tip {
  border-left-color: #4ade80;
}

/* ── Mermaid diagrams ── */
.mermaid {
  background: #1e1e2e;
  border: 1px solid #2a2a3e;
  border-radius: var(--radius);
  padding: 24px 16px;
  margin: 20px 0;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}
.mermaid svg {
  max-width: 100%;
  height: auto;
}