/* Shared by the blog editor (TinyMCE content_css) and the public blog pages so both render the same */
/* Every margin is explicit because the public pages load Bootstrap and the editor iframe does not */

/* Hero image: blank size keeps the image ratio up to 400px tall; per-post width/height arrive as inline styles */
.blog-hero-frame { max-width: 900px; margin-left: auto; margin-right: auto; border-radius: 14px; overflow: hidden; }
.blog-hero-frame img { display: block; width: 100%; height: auto; max-height: 400px; object-fit: cover; }

.blog-content {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .95rem;
    line-height: 1.8;
    color: #374151;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.blog-content * { box-sizing: border-box; }
.blog-content > :first-child { margin-top: 0; }

.blog-content p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.8; color: #374151; }

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 { font-family: inherit; font-style: normal; letter-spacing: normal; color: #0f172a; }

.blog-content h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.3; margin: 2rem 0 .75rem; }
.blog-content h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin: 2rem 0 .75rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.blog-content h2:first-child { border-top: none; padding-top: 0; }
.blog-content h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 1.5rem 0 .5rem; color: #1e293b; }
.blog-content h4 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 1.25rem 0 .5rem; color: #1e293b; }
.blog-content h5 { font-size: .95rem; font-weight: 700; line-height: 1.4; margin: 1rem 0 .5rem; color: #1e293b; }
.blog-content h6 { font-size: .85rem; font-weight: 700; line-height: 1.4; margin: 1rem 0 .5rem; color: #1e293b; }

.blog-content ul,
.blog-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin: 0 0 .3rem; font-size: .95rem; line-height: 1.8; color: #374151; }
.blog-content li > p { margin: 0; }
.blog-content li > ul,
.blog-content li > ol { margin: .3rem 0 0; }

.blog-content img { max-width: 100%; height: auto; vertical-align: middle; border-style: none; }
.blog-content figure { display: table; margin: 0 0 1rem; }
.blog-content figure.align-center { margin-left: auto; margin-right: auto; }
.blog-content figure.align-left { float: left; margin-right: 1rem; }
.blog-content figure.align-right { float: right; margin-left: 1rem; }
.blog-content figcaption { display: table-caption; caption-side: bottom; padding-top: .35rem; font-size: .85rem; color: #64748b; text-align: center; }
.blog-content iframe,
.blog-content video { max-width: 100%; border: 0; }
.blog-content::after { content: ""; display: table; clear: both; }

.blog-content a,
.blog-content a:hover,
.blog-content a:focus-visible { color: #16a34a; text-decoration: underline; }
.blog-content strong,
.blog-content b { font-weight: 700; color: #0f172a; }
.blog-content em,
.blog-content i { font-style: italic; }
.blog-content u { text-decoration: underline; }
.blog-content s { text-decoration: line-through; }
.blog-content sub,
.blog-content sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
.blog-content sub { bottom: -.25em; }
.blog-content sup { top: -.5em; }

.blog-content blockquote { margin: 1.25rem 0; padding: .75rem 1.25rem; border-left: 4px solid #16a34a; border-radius: 0 8px 8px 0; background: #f0fdf4; font-style: italic; color: #374151; }
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content hr { margin: 2rem 0; border: none; border-top: 1px solid #e2e8f0; color: inherit; opacity: 1; }
.blog-content code { padding: 2px 6px; border-radius: 4px; background: #f1f5f9; font-family: 'Courier New', Courier, monospace; font-size: .88rem; color: #dc2626; }
.blog-content pre { margin: 0 0 1rem; padding: 1rem; overflow: auto; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-family: 'Courier New', Courier, monospace; font-size: .85rem; line-height: 1.6; }
.blog-content pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

.blog-content table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-size: .9rem; }
.blog-content th,
.blog-content td { padding: .5rem .75rem; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.blog-content th { background: #f8fafc; font-weight: 700; color: #0f172a; }