/* ADI /leak-detection-faqs/ page styles
   Added 2026-09-06 when the questions became headings wrapping buttons.

   The .faq-item / .faq-question / .faq-answer rules live in pages.css and are shared
   with several other pages, so nothing here changes them. These rules only stop the
   new <h3> and <button> wrappers from adding boxes or user-agent styling of their own,
   so the accordion renders exactly as it did when the question was a <span> in a <div>. */

/* the heading wraps the control, per the WAI-ARIA accordion pattern; it must add nothing */
.faq-q {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  /* anchors land below the sticky header rather than under it */
  scroll-margin-top: 90px;
}

/* a real button, so it is focusable and Enter/Space work without any extra script */
button.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: start;
  -webkit-appearance: none;
  appearance: none;
}
button.faq-question:focus-visible {
  outline: 3px solid #2d99ca;
  outline-offset: -3px;
  border-radius: 12px;
}

/* the four category headings above the accordion groups */
/* .faq-accordion has a #1e3a8a panel background from pages.css, so these headings
   sit on dark blue and have to be light, not the navy used elsewhere on the page. */
h2.faq-cluster {
  margin: 34px 0 14px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  scroll-margin-top: 90px;
}
/* Each cluster and its questions now sit in their own <section>, so a bare
   :first-of-type would match the heading in every section and flatten the spacing
   between clusters. Only the first section's heading loses its top margin. */
.faq-cluster-section:first-of-type h2.faq-cluster {
  margin-top: 0;
}
/* The sections are real flex items in the accordion's column, not display:contents.
   display:contents would have preserved the old box tree exactly, but it can drop
   the element from the accessibility tree, which would waste the aria-labelledby
   these sections exist to carry. The layout is verified instead. */
.faq-cluster-section {
  display: block;
}

/* the No Find No Fee terms, stated instead of "restrictions do apply" */
.faq-terms {
  margin: 0 0 16px;
  padding: 0 0 0 20px;
  color: #222222;
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.95;
}
.faq-terms li {
  margin: 0 0 6px;
}

@media (max-width: 768px) {
  h2.faq-cluster {
    font-size: 18px;
    margin: 28px 0 12px;
  }
  .faq-terms {
    font-size: 15px;
    line-height: 1.7;
  }
}
@media (max-width: 480px) {
  h2.faq-cluster {
    font-size: 16px;
  }
  .faq-terms {
    font-size: 14px;
  }
}

/* quick jump chips above the accordion, added 2026-09-06.
   They sit on the page's white background, not on the accordion's dark panel. */
.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 22px;
}
.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid #dbe2ea;
  border-radius: 999px;
  color: #161e6f;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.faq-chip:hover,
.faq-chip:focus {
  border-color: #2d99ca;
  background: #f2fcff;
  color: #161e6f;
}
.faq-chip:focus-visible {
  outline: 3px solid #2d99ca;
  outline-offset: 2px;
}
.faq-chip-n {
  color: #5b6b7f;
  font-weight: 600;
  font-size: 12px;
  background: #eef3f8;
  border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 480px) {
  .faq-chips {
    gap: 7px;
    margin-bottom: 18px;
  }
  .faq-chip {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Hero call-now button, 2026-09-06.
   Peter moved the Contact Us button out of the block above the chips and into
   the hero, as the orange call button /meet-our-engineers/ uses. That button is
   .cs-hero-cta a.primary in mc-pages.css, which this page does not load, so the
   declarations are repeated here rather than shared.
   .hero-content is text-align:center and color:white, so the block inherits both. */
.faq-hero-cta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.faq-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #ff5b03;
  border-radius: 8px;
  color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  /* the hero puts a text-shadow on its headings; the button must not pick one up */
  text-shadow: none;
}
.faq-hero-phone:hover,
.faq-hero-phone:focus {
  background: #e04e00;
  color: #ffffff;
}
.faq-hero-phone:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}
.faq-hero-hours {
  margin: 0;
  max-width: 32em;
  color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .faq-hero-cta {
    margin-top: 20px;
    gap: 10px;
  }
  .faq-hero-phone {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 16px;
  }
  .faq-hero-hours {
    font-size: 14px;
  }
}

/* Chips moved into the hero 2026-09-07 so the sections can be reached without
   scrolling first. The hero is centred and dark, so they centre and keep their
   white pill treatment; .hero-content puts a text-shadow on its headings, which
   must not reach the chip labels. */
.hero-content .faq-chips {
  justify-content: center;
  margin: 22px 0 0;
}
.hero-content .faq-chip {
  text-shadow: none;
}

/* pages.css pins .faq-main-left to a fixed height of 256px and makes it
   position:sticky with top:100px, both written for the old two-column layout with
   a Contact Us button. The button now lives in the hero, so the fixed height left
   about 170px of dead space, and the sticky offset pushed the block 100px down
   into the accordion, whose dark panel painted over the paragraph. This page runs
   the container as a single column, where sticky buys nothing. */
.faq-main-left {
  position: static;
  height: auto;
}