/* ═══════════════════════════════════════
   BLOG.CSS - one stylesheet for every blog page
   Blog page: intro, then a card for every post
   Article pages: post header, "in this article" list, article text, key
   takeaways, comparison table, call to action box, share buttons, more posts
═══════════════════════════════════════ */

/* ── BLOG PAGE INTRO ── */
/* Navy band with white text, the same as the services overview page. */
.blog-intro {
  background: var(--navy);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.blog-intro .container { max-width: 900px; }
.blog-intro .eyebrow { color: var(--white); }
/* Heading styled after the logo, the same as the other page heroes: big
   block capitals, with the middle line in red between two red rules. */
.hero-title {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.hero-title span { display: block; }
/* White lettering on the navy background with a red drop shadow set just
   off the letters, the same as the light gray heroes. */
.hero-title-main {
  color: var(--white);
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--navy),
    0 0 2px var(--navy),
    2px 2px 0 var(--navy),
    3px 3px 0 var(--navy),
    5px 5px 0 var(--red),
    6px 6px 0 var(--red);
}
.hero-title-sub {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
  color: var(--red);
  font-size: clamp(1.4rem, 2.7vw, 2.5rem);
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}
.hero-title-loc {
  color: var(--white);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
  text-align: center;
}
/* The red button sits on navy here, so hover goes white instead of navy. */
.blog-intro .btn:not(.btn-light):hover,
.blog-intro .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
/* "Roofing Tips" is shorter than "Integrity Roofing", so it is set larger to
   fill the same width as the titles on the other main pages. */
.blog-intro .hero-title-main { font-size: clamp(3.6rem, 7.8vw, 7.25rem); }
.blog-intro .hero-title-sub { font-size: clamp(1.6rem, 3.2vw, 2.9rem); }
.blog-intro .hero-title-loc { font-size: clamp(1.4rem, 2.6vw, 2.3rem); }
.blog-intro .lead { font-size: 1.2rem; margin-bottom: 1.75rem; }
.blog-intro .btn-group { justify-content: center; }

/* ── ALL POSTS ── */
.blog-list { background: var(--light-gray); }

/* ── POST HEADER ── */
.post-hero {
  background: var(--page-gray);
  padding: 2.5rem 0 3rem;
  border-bottom: var(--border);
}
.post-hero .container { max-width: 1000px; }
/* Home / Blog / Category trail above the headline. */
.post-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin-bottom: 1rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--warm-dark-gray); }
.post-crumbs a { color: var(--navy); text-decoration: none; }
.post-crumbs a:hover { color: var(--red); }
.post-crumbs [aria-current] { color: var(--red); }
.post-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  margin-bottom: 1rem;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--warm-dark-gray);
}
.post-meta span + span::before { content: "\2022"; margin-right: 1.25rem; color: var(--red); }
.post-hero-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.post-hero-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── POST LAYOUT ── */
/* The "in this article" list sits beside the text on wide screens and stays
   in view while reading. */
.post { background: var(--white); }
.post .container {
  display: grid;
  grid-template-columns: 270px minmax(0, 760px);
  gap: 3.5rem;
  justify-content: center;
  align-items: start;
}
/* The article keeps its own column even when the list beside it is not shown. */
.post-body { grid-column: 2; }
.post-toc {
  position: sticky;
  top: calc(var(--topbar-height) + var(--nav-height) + 1.5rem);
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  background: var(--white);
}
.post-toc-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.7rem;
}
.post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.post-toc li + li { margin-top: 1.1rem; }
.post-toc a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.post-toc a:hover { color: var(--red); }

/* ── ARTICLE TEXT ── */
.post-body { font-size: 1.15rem; line-height: 1.75; }
.post-body > p { margin-bottom: 1.25rem; }
.post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--navy);
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: var(--border);
}
.post-body h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--red);
  margin: 2rem 0 0.75rem;
}
.post-body a { color: var(--red); font-weight: 700; }
.post-body a:hover { color: var(--navy); }
/* Red square bullets, the same as the lists on the service pages. */
.post-body ul {
  list-style: none;
  margin: 0 0 1.5rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.post-body ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
}
.post-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  background: var(--red);
}
/* A list where each item is a bold question followed by its answer. */
.post-body ul.post-qa { font-family: var(--font-body); font-weight: 500; font-size: 1.1rem; line-height: 1.65; color: var(--text); }
.post-body ul.post-qa li { margin-bottom: 1rem; }
.post-body ul.post-qa strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
}
.post-figure {
  margin: 2rem 0;
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.post-figure img { width: 100%; }
.post-figure figcaption {
  padding: 0.6rem 1rem;
  border-top: var(--border);
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}

/* ── KEY TAKEAWAYS ── */
.post-takeaways {
  margin-bottom: 2rem;
  background: var(--light-gray);
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
}
.post-takeaways-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.8rem;
}
.post-body .post-takeaways ul { margin-bottom: 0; }
.post-body .post-takeaways li:last-child { margin-bottom: 0; }

/* ── COMPARISON TABLE ── */
.post-table-wrap { margin: 1.5rem 0 2rem; }
.post-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--border);
  font-size: 1rem;
  line-height: 1.45;
}
.post-table th,
.post-table td {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--navy);
  text-align: left;
  vertical-align: top;
}
.post-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-table tbody th {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
}
.post-table tbody tr:nth-child(even) { background: var(--light-gray); }
/* The row for the type we recommend. */
.post-table tbody tr.is-pick th { color: var(--red); }

/* ── CALL TO ACTION BOX ── */
.post-cta {
  margin: 2.75rem 0 0;
  background: var(--navy);
  color: var(--white);
  border-radius: 6px;
  padding: 2rem;
}
.post-body .post-cta h2 {
  color: var(--white);
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.post-cta p { margin-bottom: 1.1rem; }
/* Lists, sub-headings and text links inside the navy box are white. */
.post-body .post-cta ul { color: var(--white); }
.post-body .post-cta h3 { color: var(--white); margin-top: 1.25rem; }
.post-body .post-cta p a { color: var(--white); }
.post-cta .btn-group { margin-top: 1.5rem; }
.post-body .post-cta a.btn { font-weight: 700; }
.post-body .post-cta a.btn { color: var(--white); }
.post-body .post-cta a.btn-light { color: var(--navy); }
.post-body .post-cta a.btn-light:hover { color: var(--white); }
/* Red button on navy: hover goes white instead of navy. */
.post-body .post-cta a.btn:not(.btn-light):hover,
.post-body .post-cta a.btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* ── SHARE BUTTONS ── */
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: var(--border);
}
.post-share[hidden] { display: none; }
.post-share-label {
  margin: 0 0.4rem 0 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
}
.post-body a.post-share-btn { color: var(--navy); }
.post-share-btn:hover,
.post-share-btn:focus-visible,
.post-body a.post-share-btn:hover { border-color: var(--red); color: var(--red); }
.post-share-btn[hidden] { display: none; }
.post-share-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
/* Text message sharing only makes sense on a phone. */
.post-share-btn[data-share="sms"] { display: none; }

/* ── MORE POSTS ── */
.more-posts {
  background: var(--light-gray);
  border-top: var(--border);
}
/* Blog posts keep the plain section heading, not the logo-style one the main
   pages use (see main.css). */
.more-posts .section-head .eyebrow {
  display: block;
  max-width: none;
  color: var(--navy);
  font-size: 1.23rem;
  letter-spacing: 0.18em;
  white-space: normal;
}
.more-posts .section-head .eyebrow::before,
.more-posts .section-head .eyebrow::after { content: none; }
.more-posts .section-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: normal;
}
.more-posts .section-head h2 .h2-dark { color: var(--black); }
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.post-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: var(--border);
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.4rem 1.5rem;
}
.post-date {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-dark-gray);
  margin-bottom: 0.5rem;
}
/* Card titles are h2 on the blog page and h3 under a post; they look the same. */
.post-card h2,
.post-card h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.3; margin-bottom: 0.6rem; }
.post-card h2 a,
.post-card h3 a { color: var(--navy); text-decoration: none; }
.post-card h2 a:hover,
.post-card h3 a:hover { color: var(--red); }
.post-card p:not(.post-date) { flex: 1; font-size: 1.05rem; margin-bottom: 1.1rem; }
.post-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  align-self: flex-start;
}
.post-link:hover { color: var(--navy); border-color: var(--navy); }

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  /* The "in this article" list moves above the text and stops following. */
  .post .container { grid-template-columns: minmax(0, 760px); gap: 2rem; }
  .post-body { grid-column: 1; }
  .post-toc { position: static; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .blog-intro { padding: 2.5rem 0; }
  .post-hero { padding: 2rem 0 2.25rem; }
  .post-share-btn[data-share="sms"] { display: inline-flex; }
  /* "Share this article" sits on its own line with the buttons centred under it. */
  .post-share { justify-content: center; }
  .post-share-label { flex-basis: 100%; margin: 0 0 0.4rem; text-align: center; }
  .post-cta { padding: 1.5rem; }

  /* The comparison table becomes one card per row, with each cell labelled. */
  .post-table,
  .post-table tbody,
  .post-table tr,
  .post-table th,
  .post-table td { display: block; }
  .post-table { border: 0; }
  .post-table thead { display: none; }
  .post-table tbody tr {
    margin-bottom: 1rem;
    border: var(--border);
    border-left: 6px solid var(--red);
    border-radius: 4px;
    background: var(--white);
  }
  .post-table tbody tr:nth-child(even) { background: var(--white); }
  .post-table th,
  .post-table td { border: 0; padding: 0.5rem 1rem; }
  .post-table tbody th { padding-top: 0.9rem; font-size: 1.15rem; }
  .post-table td:last-child { padding-bottom: 0.9rem; }
  .post-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
  }
}

@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════
   PHONES (≤ 768px): larger text for readability
══════════════════════ */
@media (max-width: 768px) {
  /* The main title line is allowed to break onto two lines on phones so it
     can be set much larger. The size is chosen so the longest single word in
     any page title ("Installation") still fits the width. */
  .blog-intro .hero-title-main {
    font-size: clamp(2.6rem, 16.5vw, 5.25rem);
    line-height: 0.95;
    white-space: normal;
    text-align: center;
  }
  .blog-intro .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  .blog-intro .hero-title-loc { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  /* Larger hero text on phones so it reads easily. */
  .blog-intro .eyebrow { font-size: 1.3rem; }
  .blog-intro .lead { font-size: 1.35rem; line-height: 1.6; }
  .post-crumbs { font-size: 0.9rem; }
  .post-meta { font-size: 1rem; }
  .post-toc ol { font-size: 1.05rem; }
  .post-date { font-size: 0.9rem; }
  .post-card h2,
  .post-card h3 { font-size: 1.25rem; }
  .post-link { font-size: 1rem; }
}