/* Natural wrapping for content pages. Keep display type out of navigation and widgets. */
main :is(h1, h2, h3, h4) {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

.page-hero h1,
.blog-hero h1,
body.service-page .page-hero h1 {
  max-width: 24ch;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

main .section h2,
main .cta-band h2,
body.service-page .section h2,
body.service-page .cta-band h2 {
  max-width: 28ch;
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.025em;
}

main :is(.feat-card, .info-box, .pstep) h3 {
  line-height: 1.35;
  letter-spacing: -.01em;
}

main :is(.section, .page-hero, .blog-hero) :is(p, li) {
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.blog-article .post-main > h1 {
  max-width: 26ch;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.025em;
}

/* Article headings otherwise inherit the paragraph's 1.78 line height. */
.blog-article :is(.post-body, .post-faq, .post-cta) h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.blog-article .post-body h3 {
  line-height: 1.35;
}

.blog-article .article-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 24px 0;
  overscroll-behavior-x: contain;
}

.blog-article .article-table-scroll:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.blog-article .post-body .article-table-scroll table {
  min-width: 36rem;
  margin: 0;
  table-layout: auto;
}

.blog-article .post-body :is(th, td) {
  overflow-wrap: normal;
  word-break: normal;
}

.blog-article .table-scroll-hint {
  display: none;
}

.blog-article .post-body :is(p, li) {
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.blog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-card,
.blog-card-body {
  min-width: 0;
}

.blog-card-body {
  gap: 12px;
  padding: 24px;
}

.blog-card .blog-tag,
.blog-card h3,
.blog-card.featured h3 {
  margin-bottom: 0;
}

.blog-card h3 {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.blog-card.featured h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.3;
}

/* Readable excerpts, without ellipses that cut off the sentence. */
.blog-card p,
.blog-card.featured p {
  display: block;
  flex: none;
  overflow: visible;
  max-height: none;
  -webkit-line-clamp: unset;
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

.blog-card-meta {
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 8px;
}

.blog-card-meta > span {
  min-width: 0;
}

@media (max-width: 960px) {
  #commercial-repair-options .feat-grid,
  #roof-leak-repair .feat-grid,
  #gutter-repair-options .feat-grid,
  .blog-article .article-local {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .blog-grid,
  .blog-article .article-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-card-body,
  .blog-card.featured .blog-card-body {
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .blog-article .table-scroll-hint {
    display: block;
    margin: 20px 0 -12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .mob-sticky {
    gap: 8px;
    padding: 8px;
  }

  .mob-sticky .sticky-call,
  .mob-sticky .sticky-book {
    min-width: 0;
    min-height: 44px;
    padding: 10px 6px;
    white-space: nowrap;
  }

  .mob-sticky .sticky-call {
    flex: 1 1 45%;
    gap: 5px;
    font-size: 11px;
  }

  .mob-sticky .sticky-call svg {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
  }

  .mob-sticky .sticky-book {
    flex: 1 1 55%;
    font-size: 10.5px;
    letter-spacing: .04em;
  }
}

/* Supersede the old phone-only !important heading sizes. */
@media (max-width: 375px) {
  .page-hero h1,
  .blog-hero h1,
  body.service-page .page-hero h1 {
    font-size: 2rem !important;
    letter-spacing: -.035em !important;
  }

  main .section h2,
  main .cta-band h2,
  body.service-page .section h2,
  body.service-page .cta-band h2 {
    font-size: 1.75rem !important;
  }
}