/* ===== BLOG POST =====
 * Typography and content overrides for individual posts.
 */

/* ---- Post body ---- */
.content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* ---- Headings ---- */
h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.content h2,
.content h3 {
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-title-text);
}

/* ---- Date accent ---- */
.date {
  font-size: 0.875rem;
  color: var(--color-footer-text);
  border-left: 3px solid var(--color-accent);
  padding-left: 0.75rem;
  margin-bottom: 1.5rem;
}

/* ---- Links ---- */
.content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted currentcolor;
  transition: border-bottom-style 0.15s ease;
}

.content a:hover {
  border-bottom-style: solid;
}

/* ---- Blockquote ---- */
.content blockquote {
  border-left: 3px solid var(--color-section-border);
  padding-left: 1rem;
  color: var(--color-text);
  font-style: italic;
  margin: 1.5rem 0;
}

/* ---- Inline code ---- */
.content code {
  background: color-mix(in srgb, var(--color-card-border) 85%, transparent);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9em;
  color: var(--color-accent);
}

/* ---- Code blocks ---- */
.content pre code {
  background: var(--color-section-bg);
  color: var(--color-text);
  padding: 1rem;
  display: block;
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
  font-size: 0.9rem;
}

/* ---- Fade-in animation ---- */
article {
  animation: fade-in 0.4s ease-out both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}