/* ═══════════════════════════════════════════════════════════════════════════════
   5.7 BLOG & CONTENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.blog-wrapper,
.blog-single {
  background-color: transparent !important;
}

.article-inner {
  padding: var(--space-8) !important;
}

.post-item .box,
article.post {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  margin-bottom: var(--space-8) !important;
  box-shadow: var(--shadow-lg) !important;
}

.post-item .box-image img,
.entry-image img {
  border-radius: var(--radius-lg) !important;
}

.entry-title a,
.entry-title {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-extrabold) !important;
  text-decoration: none !important;
  line-height: var(--leading-tight) !important;
}

.entry-title a:hover {
  color: var(--color-accent) !important;
}

.entry-meta,
.entry-meta a,
.entry-header-text .entry-category a {
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-widest) !important;
}

.single-post .entry-content {
  max-width: 720px !important;
  margin: 0 auto !important;
}

.entry-content p,
.entry-content li {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-loose) !important;
  color: var(--color-text-body) !important;
}

.entry-content a {
  color: var(--color-accent) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-glow);
  text-underline-offset: 3px;
  font-weight: var(--font-medium);
}

.entry-content a:hover {
  color: var(--color-accent-bright) !important;
  text-decoration-color: var(--color-accent);
}

blockquote {
  border-left: 4px solid var(--color-accent) !important;
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-body) !important;
  margin: var(--space-6) 0 !important;
  padding: var(--space-5) !important;
  font-style: italic;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-accent) !important;
  font-weight: var(--font-bold) !important;
  font-size: var(--text-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-4) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
}

.more-link:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-bg-void) !important;
}

.nav-previous a,
.nav-next a {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-bold);
}

.nav-previous a:hover,
.nav-next a:hover {
  color: var(--color-accent) !important;
}

.bt, .bb {
  border-color: var(--color-border) !important;
}

#comments,
.comments-area {
  background-color: transparent !important;
  margin-top: var(--space-12) !important;
}

.comments-title {
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4);
}

.fn {
  color: var(--color-accent) !important;
  font-weight: var(--font-extrabold) !important;
  text-transform: uppercase;
}

.comment-meta a {
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase;
}

.comment-reply-link {
  border: 1px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs) !important;
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.comment-reply-link:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-bg-void) !important;
}

#respond {
  padding: var(--space-8) !important;
  margin-top: var(--space-8);
}

#reply-title {
  color: var(--color-text-primary) !important;
}

#respond label {
  color: var(--color-text-secondary) !important;
}