/* Blog article styles — makes imported legacy HTML readable */
.blog-article-content {
  color: var(--color-surface-700);
  font-size: 1.05rem;
  line-height: 1.8;
}
.blog-article-content h1,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
  color: var(--color-surface-900);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.blog-article-content h1 { font-size: 2rem; }
.blog-article-content h2 { font-size: 1.6rem; }
.blog-article-content h3 { font-size: 1.35rem; }
.blog-article-content h4 { font-size: 1.15rem; }
.blog-article-content p { margin-bottom: 1.25rem; }
.blog-article-content ul, .blog-article-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.blog-article-content ul { list-style: disc; }
.blog-article-content ol { list-style: decimal; }
.blog-article-content li { margin-bottom: 0.5rem; }
.blog-article-content a { color: var(--color-primary-600); text-decoration: underline; }
.blog-article-content a:hover { color: var(--color-primary-700); }
.blog-article-content img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1.5rem 0; border: 1px solid var(--color-surface-200); }
.blog-article-content blockquote { border-left: 4px solid var(--color-primary-500); padding-left: 1rem; margin: 1.5rem 0; color: var(--color-surface-600); font-style: italic; }
.blog-article-content code { background: var(--color-surface-100); padding: 0.2rem 0.4rem; border-radius: 0.375rem; font-family: var(--font-mono); font-size: 0.9em; }
.blog-article-content pre { background: var(--color-surface-900); color: var(--color-surface-50); padding: 1rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; }
.blog-article-content pre code { background: transparent; padding: 0; color: inherit; }
.blog-article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.blog-article-content th, .blog-article-content td { border: 1px solid var(--color-surface-200); padding: 0.75rem; text-align: left; }
.blog-article-content th { background: var(--color-surface-100); font-weight: 600; }
.blog-article-content .container,
.blog-article-content .row { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.blog-article-content .row { display: flex; flex-wrap: wrap; gap: 1rem; }
.blog-article-content [class*="col-"] { flex: 1 1 0%; min-width: 260px; }
.blog-article-content .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--color-primary-600); color: white !important; border-radius: 0.5rem; text-decoration: none; margin: 0.25rem 0; }
.blog-article-content .btn:hover { background: var(--color-primary-700); }
.blog-article-content .card { background: white; border: 1px solid var(--color-surface-200); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.blog-article-content .card-body { padding: 0; }
.blog-article-content .alert { padding: 1rem; border-radius: 0.75rem; margin: 1rem 0; }
.blog-article-content .alert-info { background: #eff6ff; color: #1e40af; }
.blog-article-content .alert-warning { background: #fffbeb; color: #92400e; }
.blog-article-content .alert-success { background: #ecfdf5; color: #065f46; }
.blog-article-content .alert-danger { background: #fef2f2; color: #991b1b; }