/* =====================================================================
   Dwellverse — Blog Article layout & typography
   Loaded ONLY on individual /blog/*.html article pages, after the main
   stylesheet. Purpose: keep the whole article in ONE consistent reading
   column (the hero, key-takeaways, stat block and author bio previously
   rendered full-bleed while the body was boxed to 860px), and clean up
   typography, spacing and the unstyled FAQ questions.
   Scoped to classes used on article pages, so city/neighborhood landing
   pages that share .neighborhood-hero are unaffected (they don't load
   this file).
   ===================================================================== */

:root { --article-col: 860px; }

/* ---------- 1. One column: pull the full-bleed blocks into line ---------- */
.neighborhood-hero,
.guide-hero {
    background: none;
    text-align: left;
    padding: 6.5rem 0 0;
    min-height: 0;
}
.neighborhood-hero-content,
.guide-hero {
    max-width: var(--article-col);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.neighborhood-hero-content { padding: 0 2rem; }
.guide-hero { padding-left: 2rem; padding-right: 2rem; }
.hero-text { max-width: 100%; }

.stat-citation,
.author-bio {
    max-width: var(--article-col);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Body containers → same column */
.section-white > .container,
.blog-content,
.guide-content {
    max-width: var(--article-col) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- 2. Breadcrumb ---------- */
.neighborhood-hero .breadcrumb,
.guide-hero .breadcrumb {
    font-size: 0.85rem;
    color: #8a7968;
    margin-bottom: 1.25rem;
}
.neighborhood-hero .breadcrumb a,
.guide-hero .breadcrumb a { color: #b08968; text-decoration: none; }
.neighborhood-hero .breadcrumb a:hover,
.guide-hero .breadcrumb a:hover { text-decoration: underline; }

/* ---------- 3. Title ---------- */
.neighborhood-hero h1,
.guide-hero h1 {
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1f2933;
    margin: 0 0 1.25rem;
}

/* ---------- 4. Meta row (author / date / reviewed) ---------- */
.blog-meta {
    gap: 0.85rem 1.25rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid #eee;
}

/* ---------- 5. Key-takeaways & stat cards ---------- */
.key-takeaways { margin: 1.75rem 0 0 !important; }
.stat-citation { margin-top: 2rem; margin-bottom: 0.5rem; }

/* ---------- 6. Body typography (prose = direct children of the body) ---------- */
.section-white > .container > p,
.blog-content > p,
.blog-content > div > p,
.guide-content > p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #3d4451;
    margin: 0 0 1.35rem;
}
.section-white > .container > p.speakable-intro,
.blog-content > p.speakable-intro,
.blog-content > div > p.speakable-intro {
    font-size: 1.15rem;
    color: #2d3436;
}
.section-white > .container > h2,
.blog-content > h2,
.blog-content > div > h2,
.guide-content > h2,
.blog-faq > h2,
.faq-section > h2 {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1f2933;
    margin: 2.75rem 0 1rem;
    scroll-margin-top: 100px;
}
.section-white > .container > h3,
.blog-content > h3,
.blog-content > div > h3,
.guide-content > h3 {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 700;
    color: #2d3436;
    margin: 2rem 0 0.75rem;
}
.section-white > .container > ul,
.section-white > .container > ol,
.blog-content > ul, .blog-content > ol,
.blog-content > div > ul, .blog-content > div > ol,
.guide-content > ul, .guide-content > ol {
    margin: 0 0 1.5rem;
    padding-left: 1.4rem;
    line-height: 1.8;
    color: #3d4451;
}
.section-white > .container > ul > li,
.section-white > .container > ol > li,
.blog-content li, .guide-content li { margin-bottom: 0.5rem; }

.section-white > .container > p a,
.section-white > .container li a,
.blog-content a, .guide-content a {
    color: #b08968;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.section-white > .container > p a:hover,
.section-white > .container li a:hover,
.blog-content a:hover, .guide-content a:hover { color: #8a7968; }

.section-white > .container > p strong,
.section-white > .container > ul strong,
.blog-content strong, .guide-content strong { color: #1f2933; }

/* ---------- 7. Tables ---------- */
.section-white > .container table,
.blog-content table, .guide-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.section-white > .container th,
.section-white > .container td,
.blog-content th, .blog-content td,
.guide-content th, .guide-content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #ececec;
}
.section-white > .container thead th,
.blog-content thead th, .guide-content thead th {
    background: #f8f6f3;
    border-bottom: 2px solid #e2d6c8;
    font-weight: 700;
    color: #2d3436;
}

/* ---------- 8. Table of contents ---------- */
.blog-toc {
    border: 1px solid #ececec;
    background: #faf9f7 !important;
}
.blog-toc h3 { margin-top: 0; }
.blog-toc a { color: #b08968; text-decoration: none; }
.blog-toc a:hover { text-decoration: underline; }

/* ---------- 9. FAQ (answers already visible; clean the question chrome) ---------- */
.blog-faq .faq-item {
    border: 1px solid #ececec;
    border-left: 3px solid #b08968;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.85rem;
    background: #fff;
}
.blog-faq .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2933;
    font-family: inherit;
    cursor: default;
}
.blog-faq .faq-icon { display: none; }
.blog-faq .faq-answer { margin-top: 0.6rem; }
.blog-faq .faq-answer p {
    margin: 0;
    color: #3d4451;
    line-height: 1.75;
    font-size: 1rem;
}

/* ---------- 10. Related / also-like / CTA spacing polish ---------- */
.blog-related h3,
.blog-also-like h3 { color: #1f2933; }
.blog-related ul { padding-left: 1.25rem; line-height: 1.9; }
.blog-related a { color: #b08968; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 768px) {
    .neighborhood-hero, .guide-hero { padding-top: 5.5rem; }
    .neighborhood-hero-content,
    .guide-hero { padding-left: 1.25rem; padding-right: 1.25rem; }
    .stat-citation, .author-bio {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important;
    }
    .neighborhood-hero h1, .guide-hero h1 { font-size: 1.8rem; }
    .section-white > .container > p,
    .blog-content > p, .guide-content > p { font-size: 1rem; }
    .section-white > .container > h2,
    .blog-content > h2, .guide-content > h2 { font-size: 1.4rem; }
}