/* FAQ uses the approved page hierarchy and existing theme components. */
.faq-page .page-title-section h1 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.faq-page h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.faq-page h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.faq-page .lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

.faq-page [id] {
  scroll-margin-top: 110px;
}

.faq-page .faq-topics {
  margin-bottom: 40px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e6e6e6;
}

.faq-page .faq-topics ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

.faq-page .faq-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #232323;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-page .faq-topics a:hover {
  text-decoration-thickness: 2px;
}

.faq-page .butn {
  max-width: 100%;
  white-space: normal;
}

.faq-page .butn.theme.white-hover:hover span {
  color: #232323;
}

.faq-page a:focus-visible {
  outline: 3px solid #232323;
  outline-offset: 4px;
}

.faq-page h2:focus-visible {
  /* Override the theme's reset for programmatically focusable headings. */
  outline: 3px solid #232323 !important;
  outline-offset: 4px;
}

.faq-page .page-title-section a:focus-visible {
  outline-color: #fff;
}

.faq-page #faq-review-cta {
  padding-top: 40px;
  padding-bottom: 40px;
  color: #232323;
}

@media screen and (min-width: 992px) {
  .faq-page .faq-question h3 {
    min-height: 2.8em;
  }

  @supports (grid-template-rows: subgrid) {
    .faq-page .faq-category > .row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-page .faq-question {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      max-width: none;
    }

    .faq-page .faq-question h3 {
      min-height: 0;
    }
  }
}

@media screen and (max-width: 1199px) {
  .faq-page h2 {
    font-size: 32px;
  }
}

@media screen and (max-width: 991px) {
  .faq-page .page-title-section h1 {
    font-size: 30px;
  }

  .faq-page h2 {
    font-size: 28px;
  }

  .faq-page h3 {
    font-size: 18px;
  }

  .faq-page #faq-review-cta {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

@media screen and (max-width: 767px) {
  .faq-page .lead {
    font-size: 17px;
  }
}

@media screen and (max-width: 575px) {
  .faq-page h2 {
    font-size: 24px;
  }
}
