/*
 * Shared styles for /blog/{slug} article pages.
 *
 * Extracted from a ~90-line <style> block that was duplicated byte-for-byte (apart from
 * two comment lines) across all four blog-*.html article files — see issue #843. This is
 * the union of every rule any one of the four articles used, including every
 * .article-category-{modifier} variant (leads / estimate / production — "ai" has none
 * and relies on the base .article-category color, matching the original markup).
 *
 * Adding a new article: link this stylesheet instead of inlining a new <style> block.
 * If the new article needs a category color the existing modifiers don't cover, add a
 * new .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: #2563eb; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb-sep { color: #d1d5db; }
.article-category {
    display: inline-block; background: #eff6ff; color: #2563eb;
    padding: 0.3rem 0.85rem; border-radius: 20px;
    font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem;
}
.article-category-leads { background: #f0fdf4; color: #15803d; }
.article-category-estimate { background: #fff7ed; color: #c2410c; }
.article-category-production { background: #f5f3ff; color: #6d28d9; }
.article-category-costing { background: #fefce8; color: #a16207; }
.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; }

/*
 * Interactive blog components (blog-components.css, BPG-Platform#359 / ADR-027 step 4).
 *
 * That stylesheet is a VERBATIM copy of the platform's canonical file and reads all of its
 * colours as `var(--bp-*, <neutral fallback>)` so a product can theme it without a copy edit.
 * Until this block existed the components rendered in the fallback greys and blues, which
 * happen to sit close to BetterRoofingPro's palette — an accidental match, not a declared
 * dependency. Every token blog-components.css reads is listed here, on `.article-body` (its
 * own scope) rather than `:root`, so nothing outside an article body is affected.
 * BetterGather's wwwroot/css/blog-article.css carries the same block in its emerald palette;
 * keep the two shaped the same.
 *
 * Contrast is measured against white, not assumed. `--bp-accent` paints small text
 * (`.bp-source-link` at 12.8px, `.bp-chart-tip`, the active tab) and is the ground under
 * white text on a chosen compare column, so it is #1d4ed8 at 6.7:1 rather than #2563eb at
 * 5.2:1 — both pass, and the darker one is what the focus ring needs anyway.
 * `--bp-border-strong` is a control boundary (1.4.11, 3:1): #6b7280 is 4.8:1 where the
 * canonical fallback #9ca3af is 2.6:1. `--bp-success` is BetterRoofingPro's own #15803d
 * (5.0:1). The chart series keep the brand blue first, because a fill is judged against its
 * neighbours rather than against the page.
 */
.article-body {
    --bp-accent: #1d4ed8;
    --bp-muted: #6b7280;
    --bp-panel: #eff6ff;
    --bp-border: #c7d2fe;
    --bp-border-strong: #6b7280;
    --bp-input-bg: #fff;
    --bp-focus: #1d4ed8;
    --bp-success: #15803d;
    --bp-danger: #b91c1c;
    --bp-danger-bg: #fef2f2;
    --bp-series-1: #2563eb;
    --bp-series-2: #059669;
    --bp-series-3: #d97706;
    --bp-series-4: #7c3aed;
}
.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: #2563eb; text-decoration: underline; text-decoration-color: rgba(37,99,235,0.35); text-underline-offset: 3px; }
.internal-link:hover { color: #1d4ed8; }

/* Inline CTA box */
.article-cta {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #c7d2fe; border-radius: 16px;
    padding: 2rem; margin: 2.5rem 0; text-align: center;
}
.article-cta h3 { font-size: 1.2rem; font-weight: 700; color: #1e3a8a; 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: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.3); }
.btn-outline { background: transparent; color: #2563eb; border: 2px solid #2563eb; }
.btn-outline:hover { background: #eff6ff; }
.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, #1e3a8a 0%, #3b82f6 50%, #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.9); margin-bottom: 1.5rem; font-size: 1.05rem; }
.btn-white { background: #fff; color: #2563eb; }
.btn-white:hover { background: #f0f4ff; 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: #2563eb; 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; }
}