/*
 * Shared styles for /blog/{slug} article pages.
 *
 * Extracted from the inline <style> block that shipped with the first article, so the
 * second article does not start life as an 88-line copy-paste — the duplication issue
 * BetterRoofingPro#843 fixed on that side, ported here (#408). BetterRoofingPro's
 * equivalent is wwwroot/css/blog-article.css; keep the two shaped the same.
 *
 * Adding a new article: link this stylesheet instead of inlining a new <style> block.
 * If the new article needs a category color the existing rules do not cover, add a
 * .article-category-{modifier} rule here (see BlogRegistry.CategoryModifier).
 */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6; color: #1f2937; background: #fff;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

.article-main { padding-top: 64px; }
.article-layout { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.article-breadcrumb {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: #6b7280; margin-bottom: 2rem; flex-wrap: wrap;
}
.article-breadcrumb a { color: #059669; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb-sep { color: #d1d5db; }
.article-category {
    display: inline-block; background: #ecfdf5; color: #047857;
    padding: 0.3rem 0.85rem; border-radius: 20px;
    font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem;
}
.article-category-volunteers { background: #fffbeb; color: #b45309; }
.article-header h1 {
    font-size: 2.25rem; font-weight: 900; color: #111827;
    line-height: 1.2; margin-bottom: 0.75rem;
}
.article-meta { font-size: 0.87rem; color: #6b7280; margin-bottom: 2rem; }
.article-body p { margin-bottom: 1.25rem; line-height: 1.8; color: #374151; font-size: 1.02rem; }
.article-body h2 {
    font-size: 1.5rem; font-weight: 800; color: #111827;
    margin: 2.5rem 0 0.9rem; line-height: 1.25;
}
.article-body h3 {
    font-size: 1.15rem; font-weight: 700; color: #1f2937;
    margin: 1.75rem 0 0.65rem;
}
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.75; color: #374151; font-size: 1.02rem; }
.internal-link { color: #059669; text-decoration: underline; text-decoration-color: rgba(5,150,105,0.35); text-underline-offset: 3px; }
.internal-link:hover { color: #047857; }

/* Inline CTA box */
.article-cta {
    background: linear-gradient(135deg, #ecfdf5, #f5f3ff);
    border: 1px solid #a7f3d0; border-radius: 16px;
    padding: 2rem; margin: 2.5rem 0; text-align: center;
}
.article-cta h3 { font-size: 1.2rem; font-weight: 700; color: #064e3b; margin-bottom: 0.5rem; }
.article-cta p { color: #4b5563; margin-bottom: 1.25rem; font-size: 0.97rem; }
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600;
    font-size: 0.95rem; transition: all 0.25s; border: none; cursor: pointer;
}
.btn-primary { background: #059669; color: #fff; }
.btn-primary:hover { background: #047857; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,150,105,0.3); }
.btn-outline { background: transparent; color: #059669; border: 2px solid #059669; }
.btn-outline:hover { background: #ecfdf5; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; border-radius: 12px; }
.btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* End CTA */
.article-end-cta {
    background: linear-gradient(145deg, #064e3b 0%, #059669 55%, #7c3aed 100%);
    color: #fff; border-radius: 20px; padding: 3rem 2rem;
    margin-top: 3.5rem; text-align: center;
}
.article-end-cta h2 { font-size: 1.75rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; }
.article-end-cta p { color: rgba(255,255,255,0.92); margin-bottom: 1.5rem; font-size: 1.05rem; }
.btn-white { background: #fff; color: #047857; }
.btn-white:hover { background: #ecfdf5; transform: translateY(-1px); }
.btn-outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); }

.back-link { margin-top: 2.5rem; }
.back-link a { color: #059669; font-size: 0.92rem; font-weight: 600; }
.back-link a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .article-header h1 { font-size: 1.65rem; }
    .article-end-cta { padding: 2rem 1.25rem; }
    .article-end-cta h2 { font-size: 1.35rem; }
}