/* =====================================================
   FAQ Page Styles (page-faq.php)
   ===================================================== */

.l-faq {
  padding: 2rem 1rem;
}

.p-faq {
  max-width: 1000px;
  margin: 0 auto;
}

.p-faq__item {
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  margin-bottom: 14px;
  background: #ffffff;
  overflow: hidden;
}

.p-faq__question {
  position: relative;
  padding: 1.4rem 2.5rem 1.4rem 1.25rem;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  list-style: none;
}

/* Safari / Chrome remove default marker */
.p-faq__question::-webkit-details-marker {
  display: none;
}

.p-faq__question::before {
  content: "Q";
  color: #F18500;
  font-weight: 800;
  margin-right: 0.6rem;
}

.p-faq__question::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

details[open] > .p-faq__question::after {
  content: "-";
}

details[open] > .p-faq__question {
  background: #f9f9f9;
}

.p-faq__answer {
  padding: 1.2rem 1.25rem 0rem 1.25rem;
  line-height: 1.7;
  font-size: 1.2rem;
}

@media (max-width: 600px) {
  .p-faq__question {
    font-size: 1.2rem;
    padding-left: 1.2rem;
  }
  .p-faq__answer {
    font-size: 1.2rem;
  }
}