/*
 * landing-cost.css — cost-content sections (landing pillar + /estimator explainer)
 * ═══════════════════════════════════════════════════════════
 * PATH: public/css/landing-cost.css
 * ROLE: Prose styling for the 2026 cost content added in the SEO round
 *       (WP-E4): the landing page's #cost / #why sections and the
 *       explainer copy under the estimator tool. Loaded from the
 *       `styles` section of app/Views/public/landing.php and
 *       app/Views/public/estimator/roofing.php — roofing.css,
 *       public.css and roof-estimator.css belong to other packages and
 *       are not touched. Tables reuse .guide-table from public.css.
 * CREATED: 2026-09-21
 */

/* ── Shared prose column ─────────────────────────────────────────── */
.cost-prose {
    max-width: 820px;
    margin: 0 auto;
    color: var(--text-dark);
    font-size: 1rem;
    line-height: 1.7;
}
.cost-prose > h2 {
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(1.45rem, 3vw, 1.95rem);
    line-height: 1.25;
    margin: 2.5rem 0 0.9rem;
}
.cost-prose > h2:first-child { margin-top: 0; }
.cost-prose h3 {
    font-family: var(--font-body, sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--dark);
    margin: 2rem 0 0.6rem;
}
.cost-prose p { margin: 0 0 1.05rem; }
.cost-prose a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.cost-prose a:hover { color: var(--teal); }

/* Snippet-bait answer paragraph directly under the pillar H2 */
.cost-answer {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--dark);
}

/* Worked examples + scope lists: the numbers lead, so the marker is dropped
   and the row is indented off a rule instead. */
.cost-examples,
.cost-includes {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
}
.cost-examples li,
.cost-includes li {
    border-left: 3px solid var(--border);
    padding: 0.15rem 0 0.15rem 0.9rem;
    margin-bottom: 0.7rem;
}
.cost-examples li strong { color: var(--teal-dark); white-space: nowrap; }

/* The pillar band sits between the white guide cards and the tinted
   "why quotes differ" band, so it keeps a plain paper background. */
.cost-section { background-color: #fff; }

/* ── /estimator explainer ────────────────────────────────────────── */
/* Sits under .roofest-layout inside .roofest-wrap (max-width 920px), so it
   only needs its own top rule and rhythm. */
.roofest-copy {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}
.roofest-copy .cost-prose { max-width: none; }

@media (max-width: 575.98px) {
    .cost-prose { font-size: 0.97rem; }
    .cost-answer { font-size: 1.02rem; }
    .cost-examples li strong { white-space: normal; }
}