/* ═══════════════════════════════════════
   ROOF-REPLACEMENT.CSS - roof replacement page
   Sections: hero, warning signs with before/after photos, benefits,
   why choose us, FAQ, final CTA
═══════════════════════════════════════ */

/* ── HERO ── */
/* Same sizing and layout as the home page hero: large photo on the left,
   text on the right. */
.page-hero {
  background: var(--page-gray);
  padding: 2rem 0 4rem;
  border-bottom: var(--border);
}
.page-hero .container {
  max-width: 1640px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: start; /* photo and text share the same top edge */
}
/* The whole photo is always shown at its natural 4:3 shape, never cropped. */
.page-hero-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.page-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.page-hero-text .eyebrow { text-align: center; font-size: clamp(0.8rem, 1.2vw, 1rem); margin-bottom: 0.3rem; }
.page-hero-text .lead { font-size: clamp(1.1rem, 1.3vw, 1.3rem); margin-bottom: 1.25rem; }
.page-hero-text .btn-group { margin-top: 1.75rem; }
/* Heading styled after the logo, the same as the home page hero: big navy
   block capitals, with the second 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;
  /* Shrink the heading to the width of its main line and centre it, so the
     red rules sit centred under it. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.hero-title span { display: block; }
/* A thin white outline with a red drop shadow behind it, so the title stands
   off the light background, the same as the home page hero. */
.hero-title-main {
  color: var(--navy);
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--white),
    0 0 2px var(--white),
    0 0 2px var(--white),
    0 0 3px var(--white),
    2px 2px 0 var(--white),
    3px 3px 0 var(--white),
    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.5rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}

/* ── LISTS ── */
/* Red square bullets with bold navy text, used in the warning signs and
   why choose us sections. */
.check-list {
  list-style: none;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 1.75rem;
}
.check-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  break-inside: avoid;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--red);
}
.check-list-cols { columns: 2; column-gap: 2rem; }

/* ── WARNING SIGNS ── */
.signs { background: var(--white); }
.signs .container {
  max-width: 1410px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.signs h2 { margin-bottom: 1rem; }
.signs p { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* ── BENEFITS ── */
/* White boxes on navy, each a single bold benefit with a red check mark. */
.benefits {
  background: var(--navy);
  color: var(--white);
}
.benefits .container { max-width: 1410px; }
.benefits .section-head { max-width: none; }
.benefits h2 { color: var(--white); }
.benefits-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.benefits-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--white);
  border: 2px solid var(--white);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 1.1rem 1.1rem;
}
.benefits-list li::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
}
.benefits-list strong {
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}

/* ── WHY CHOOSE US ── */
.why-choose {
  background: var(--light-gray);
  border-bottom: var(--border);
}
.why-choose .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.why-choose-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.why-choose-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.why-choose h2 { margin-bottom: 1rem; }
.why-choose p { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* Short bold label above the bulleted list. */
.why-choose h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
}

/* ── FAQ ── */
.faq { background: var(--white); }
.faq .container { max-width: 900px; }
.faq .section-head { max-width: none; }
.faq-item {
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  margin-bottom: 0.85rem;
  background: var(--white);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.15rem; font-weight: 800; }
/* Plus sign that turns into a minus when the answer is open. */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  padding: 0 1.2rem 1.2rem;
  font-size: 1.1rem;
}

/* ── FINAL CTA ── */
.final-cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.final-cta .container { max-width: 820px; }
.final-cta .eyebrow { color: var(--white); }
.final-cta h2 { color: var(--white); }
.final-cta h2 em { font-style: normal; color: var(--red); }
.final-cta p { margin: 1rem auto 1.75rem; font-size: 1.2rem; }
.final-cta .btn-group { justify-content: center; }
/* Red buttons sit on navy here, so hover goes white instead of navy. */
.final-cta .btn:not(.btn-light):hover,
.final-cta .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  .page-hero .container { grid-template-columns: 1fr; gap: 2rem; max-width: 900px; }
  .benefits-list { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .page-hero { padding: 2.5rem 0; }
  .page-hero .container { gap: 1.75rem; }
  .signs .container,
  .why-choose .container { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Taller slider frame on phones, which zooms in on the roof. The edge to
     edge sizing for phones is shared by every slider and lives in main.css. */
  .signs .compare { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
  .benefits-list { grid-template-columns: 1fr; }
  .check-list-cols { columns: 1; }
}

/* ══════════════════════
   PHONES (≤ 768px): bigger hero title, matching the home page
══════════════════════ */
@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. */
  .hero-title-main {
    font-size: clamp(2.6rem, 16.5vw, 5.25rem);
    line-height: 0.95;
    white-space: normal;
    text-align: center;
  }
  .page-hero-text { min-width: 0; }
  .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  /* Larger hero text on phones so it reads easily, the same on every main page. */
  .page-hero-text .eyebrow { font-size: 1.3rem; }
  .page-hero-text .lead { font-size: 1.35rem; line-height: 1.6; }
}