/* Blog Typography */
.blog-article { max-width: 100%; }
.blog-title { font-size: 2.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
.blog-meta { color: #64748b; font-size: 0.9rem; display: flex; align-items: center; flex-wrap: wrap; }
.blog-meta a { color: #4F46E5; text-decoration: none; }
.featured-image { width: 100%; max-height: 500px; object-fit: cover; }

/* Content Styles */
.blog-content { font-size: 1.05rem; line-height: 1.85; color: #334155; }
.blog-content h2 { font-size: 1.6rem; font-weight: 700; margin: 2.5rem 0 1rem; padding-top: 1rem; }
.blog-content h3 { font-size: 1.3rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.blog-content p { margin-bottom: 1.25rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; }
.blog-content blockquote { border-left: 4px solid #4F46E5; padding: 1rem 1.5rem; margin: 1.5rem 0; background: #f8fafc; border-radius: 0 8px 8px 0; font-style: italic; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content a { color: #4F46E5; text-decoration: underline; }
.blog-content code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.blog-content pre { background: #1e293b; color: #e2e8f0; padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
.blog-content pre code { background: none; color: inherit; padding: 0; }
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.blog-content table th, .blog-content table td { border: 1px solid #e2e8f0; padding: 0.75rem; }
.blog-content table th { background: #f8fafc; font-weight: 600; }

/* Table of Contents */
.blog-toc { border: 1px solid #e2e8f0; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { padding: 4px 0; }
.toc-list li a { color: #4F46E5; text-decoration: none; font-size: 0.9rem; }
.toc-list li a:hover { text-decoration: underline; }
.toc-sub { padding-left: 1.5rem !important; }

/* Author Box */
.author-box { background: #f8fafc; border-radius: 12px; padding: 1.5rem; border: 1px solid #e2e8f0; }
.author-avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.author-avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: 6px; }
.author-box h4 { font-size: 0.85rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.author-box h5 { font-size: 1.1rem; }
.author-box h5 a { color: #1e293b; text-decoration: none; }
.author-social a { color: #64748b; font-size: 1.2rem; }
.author-social a:hover { color: #4F46E5; }

/* FAQ Section */
.blog-faq h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.blog-faq .accordion-button { font-weight: 600; }
.blog-faq .accordion-body { line-height: 1.7; }

/* Blog Cards (listing) */
.blog-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.blog-card h2 a:hover { color: #4F46E5 !important; }

/* Blog Tags */
.blog-tags .badge { font-size: 0.8rem; padding: 6px 12px; border: 1px solid #e2e8f0; }
.blog-tags .badge:hover { background: #4F46E5 !important; color: #fff !important; border-color: #4F46E5; }

/* Related Posts */
.related-posts h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.related-posts .card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Sidebar */
.blog-sidebar .card { border-radius: 12px; }
.blog-sidebar h6 { font-weight: 600; margin-bottom: 0.75rem; }

/* Responsive */
@media (max-width: 768px) {
    .blog-title { font-size: 1.6rem; }
    .blog-content { font-size: 1rem; }
    .author-avatar-lg { width: 60px; height: 60px; }
}