/*
  Home page section: FAQ.
  Styled Bootstrap accordion with custom plus/minus indicator.
*/

.home-faq {
  background: #ffffff;
  padding: clamp(52px, 7.2vw, 92px) 0 clamp(72px, 9vw, 118px);
}

.home-faq-shell {
  max-width: 1060px;
}

.home-faq-title {
  margin: 0 0 1rem;
  color: #111111;
  font-family: "kallisto", "Bai Jamjuree", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(50px, 4vw, 66px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.home-faq-accordion {
  max-width: 900px;
  margin: 0 auto;
}

.home-faq-item {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-faq-item + .home-faq-item {
  margin-top: 2px;
}

.home-faq-button {
  min-height: 70px;
  padding: 0.75rem 1.05rem 0.75rem 1.15rem;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #dddddd;
  color: #2f2f2f;
  font-family: "Bai Jamjuree", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.15vw, 19px);
  overflow-wrap: anywhere;
}

.home-faq-button::after {
  content: "+";
  width: auto;
  height: auto;
  margin-left: 0.8rem;
  background-image: none !important;
  transform: none !important;
  color: #1c1c1c;
  font-size: clamp(30px, 2.2vw, 36px);
  font-weight: 500;
  line-height: 1;
}

.home-faq-button:not(.collapsed)::after {
  content: "\2212";
}

.home-faq-button:not(.collapsed) {
  background: #d3d3d3;
  color: #202020;
}

.home-faq-body {
  padding: 0.9rem 1.15rem 1rem;
  background: #e7e7e7;
  color: #3a3a3a;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .home-faq {
    padding-top: 46px;
    padding-bottom: 64px;
  }

  .home-faq-title {
    margin-bottom: 0.85rem;
    font-size: clamp(42px, 10vw, 54px);
  }

  .home-faq-button {
    min-height: 62px;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }
}

@media (max-width: 420px) {
  .home-faq-title {
    font-size: clamp(34px, 10.5vw, 42px);
  }

  .home-faq-button {
    min-height: 56px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    font-size: clamp(14px, 4.3vw, 16px);
  }

  .home-faq-body {
    font-size: clamp(13px, 4vw, 15px);
  }
}