/* Blog index and article pages. Long-form reading, same tokens as the rest. */

.blog-index,
.article {
  border-top: none;
}

.post-meta {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.post-meta a {
  color: var(--accent);
}

/* Index -------------------------------------------------------------- */
.post-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.post-card {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.post-card:last-child {
  border-bottom: none;
}

.post-card h2 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}

.post-card h2 a {
  text-decoration: none;
}

.post-card h2 a:hover {
  color: var(--accent);
}

.post-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}

.post-link:hover {
  text-decoration: underline;
}

/* Article ------------------------------------------------------------ */
.draft-flag {
  background: #fff4d6;
  border: 1px solid #e0a800;
  border-radius: var(--radius);
  color: #5c4600;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
}

.article h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
}

.article .lede {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.article-body {
  font-size: 1.05rem;
}

.article-body h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
}

.article-body h3 {
  font-size: 1.08rem;
  margin-top: 1.75rem;
}

.article-body p,
.article-body li {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.article-body strong {
  color: var(--ink);
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.65rem;
}

.article-body a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* A post that embeds a CTA puts a .btn inside .article-body, where the prose
   link rule above outranks .btn on specificity and repaints the label in the
   accent it is already sitting on - an accent rectangle with an invisible word
   in it. The closing CTA never hit this because it renders outside the body.
   Scoped to .article-cta rather than to every .btn in prose, so a future
   .btn-ghost in an article still gets its own color. */
.article-cta .btn {
  color: #fff;
  text-decoration: none;
}

.article-body blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1rem;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.article-body th,
.article-body td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* Wide content must scroll inside itself, never the page. */
.article-body :is(table, pre) {
  display: block;
  overflow-x: auto;
}

/* Table headers borrow the feature-page comparison table's treatment, so a
   column head reads the same way wherever the site sets two things side by
   side. */
.article-body thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  border-bottom-width: 2px;
}

.article-body tbody th {
  font-weight: 600;
  color: var(--ink);
  vertical-align: top;
}

.article-body td {
  color: var(--ink-soft);
  vertical-align: top;
}

/* Shown only in the stacked layout at the end of this file, where a cell no
   longer has a visible column header above it. */
.article-col-label {
  display: none;
}

/* The short answer, at the top of a post whose title asks a question. It is
   the paragraph a search result quotes and the one a reader in a hurry stops
   at, so it reads as its own object rather than as the first of three
   indistinguishable paragraphs. Accent rule from the blockquote, tinted
   surface from .article-cta - a new emphasis, not a new palette. */
.article-answer {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.article-answer p:last-child {
  margin-bottom: 0;
}

/* Table of contents. Long posts only, and deliberately quieter than
   .article-answer directly above it: this is navigation, not an argument, and
   two tinted blocks stacked would read as one confused object. Outline only. */
.article-toc {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.article-toc h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.article-toc ol {
  margin: 0;
  padding-left: 1.15rem;
  gap: 0.45rem;
  font-size: 0.97rem;
}

/* The header is sticky, so an anchor landing flush with the viewport top puts
   the heading it was aimed at underneath it. */
.article-body :is(h2, h3)[id] {
  scroll-margin-top: 5rem;
}

.post-updated {
  margin-top: 2rem;
  font-size: 0.88rem;
  font-style: italic;
}

/* Inside the body it is an interruption between two sections, so it is spaced
   like one. The closing card below the article keeps its larger top margin. */
.article-body .article-cta {
  margin: 2.5rem 0;
}

.article-cta {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.article-cta h2 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.article-cta p {
  font-size: 0.97rem;
}

@media (max-width: 40rem) {
  .article-cta .btn {
    width: 100%;
    text-align: center;
  }

  /* At this width a two-column table scrolls sideways behind a gesture nothing
     advertises, and the second column - the half carrying the answer - starts
     off-screen. Each row becomes a card instead: the same move .compare-table
     makes on the feature pages, for the same reason. */
  .article-body table,
  .article-body tbody,
  .article-body tr,
  .article-body tbody th,
  .article-body td {
    display: block;
  }

  .article-body table {
    overflow-x: visible;
  }

  /* The header row stays in the DOM. The <th scope="col"> is what associates
     each cell with its column for a screen reader, and display: none would
     take that away; its visible job passes to .article-col-label. */
  .article-body thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .article-body tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
  }

  .article-body tbody th {
    padding: 0 0 0.6rem;
    font-size: 1rem;
  }

  .article-body tbody td {
    padding: 0.6rem 0 0;
    border-bottom: 0;
  }

  /* A row that opens with a <td> rather than a row header starts flush with
     the top of its card. */
  .article-body tbody tr > td:first-child {
    padding-top: 0;
  }

  .article-col-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
  }

  /* SVG text scales with the graphic, not independently of it - at this
     width the trend chart's 15 year-ticks get too small to read even
     though the point labels (the numbers actually meant to be quoted) stay
     legible. Dropping every other year buys enough horizontal room to size
     the rest back up, rather than leaving all 15 crowded and tiny. */
  .trend-chart-wrap .year-alt {
    display: none;
  }

  .trend-chart-wrap .axis-label {
    font-size: 0.78rem;
  }
}

/* Roof replacement cost pages -------------------------------------------- */

.breadcrumb-nav {
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.breadcrumb-nav a {
  color: var(--ink-soft);
}

.breadcrumb-nav a:hover {
  color: var(--accent);
}

.breadcrumb-nav a::after {
  content: "/";
  margin: 0 0.4rem;
  color: var(--line);
}

.cities-in-state,
.related-links {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.cities-in-state h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

.cities-in-state ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0;
  margin: 0;
}

.related-links {
  font-size: 0.95rem;
}

.state-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem 1.5rem;
  padding: 0;
  margin: 2.5rem 0 0;
}

/* Stats posts ---------------------------------------------------------
   A citable one-liner has to survive being lifted out of the page entirely
   - into a search snippet, an AI Overview, a screenshot in someone else's
   roundup - so each number gets its own card rather than sitting inside a
   sentence a quote would mangle. Same big-figure treatment as .stat-value
   on the homepage's inverted stats bar, rebuilt here in the article's own
   light surface rather than reused directly - that component is dark and
   full-bleed, this one has to sit inside prose. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 1.75rem;
}

.stat-card {
  background: var(--bg);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stat-card .stat-figure {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-card .stat-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The trend chart is inline SVG in the article body (trusted content, same
   as everything else in .article-body) styled from here rather than inline,
   so it inherits theme tokens the same way the rest of the post does. Built
   static and fully labeled on purpose: the audience for this specific chart
   includes someone embedding it in their own piece or a screenshot of it,
   neither of which can see a hover state. */
.trend-chart-wrap {
  margin: 0 0 1rem;
}

.trend-chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.trend-chart-wrap .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.trend-chart-wrap .axis-label {
  font-size: 0.68rem;
  fill: var(--ink-soft);
  font-family: var(--font);
}

.trend-chart-wrap .point-label {
  font-size: 0.7rem;
  font-weight: 700;
  fill: var(--ink);
  font-family: var(--font);
}

.trend-chart-wrap .ytd-label {
  font-size: 0.62rem;
  fill: var(--ink-soft);
  font-family: var(--font);
}

.chart-caption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}