/* Styling for the rendered HTML body of a blog post.
 *
 * Shared by:
 *   - home/templates/home/blog/blog_detail.html (public post page)
 *   - admin_dashboard/templates/admin_dashboard/blog_post_preview.html
 *     (Save & Preview from the admin form)
 *
 * Both wrap the post's content (post.content|safe) in <div class="blog-body">,
 * so this single stylesheet keeps the preview visually identical to the
 * public render.
 *
 * Page-chrome styling (breadcrumb, hero header, sidebar, related-posts
 * card, share buttons, etc.) stays in blog_detail.html as page-specific
 * inline <style> — it doesn't belong on the admin preview.
 */

.blog-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #374151;
}

.blog-body h2,
.blog-body h3,
.blog-body h4 {
    color: #1f2937;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-body p {
    margin-bottom: 1.5rem;
}

.blog-body blockquote {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-left: 4px solid #1a5336;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: #1f2937;
}

.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.blog-body ul,
.blog-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.blog-body li {
    margin-bottom: 0.5rem;
}

.blog-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.blog-body table th,
.blog-body table td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem;
}

.blog-body table th {
    background-color: #f9fafb;
    font-weight: 600;
}

/* CKEditor 5 renders image-with-caption as <figure class="image">. */
.blog-body figure.image {
    margin: 1rem 0;
    text-align: center;
}

.blog-body figure.image img {
    margin: 0;
}

.blog-body figure.image figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
}