.schema-faq-section {
  padding-bottom: 10px;
}

body.single-post .post-content p.schema-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin: 0px 0px 10px 0;
}

.schema-faq-question {
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none; /* optional: prevents text selection on click */
  font-size: 24px;
  line-height: 130%;
  letter-spacing: 0;
  display: block;
  position: relative;
  padding-right: 32px;
  font-weight: 600;
}

/* Blue circle background */
.schema-faq-question::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: transparent; /* default closed state */
  border-radius: 50%;
  transition: background-color 0.25s ease;
}

/* White arrow */
.schema-faq-question::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);

  /* arrow mask */
  -webkit-mask-image: url("/resource/wp-content/uploads/2025/12/up-caret.svg");
  mask-image: url("/resource/wp-content/uploads/2025/12/up-caret.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 60%;
  mask-size: 60%;
  -webkit-mask-position: center;
  mask-position: center;

  background-color: #000; /* default arrow color */
  transition: transform 0.25s ease, background-color 0.25s ease;
}

/* Hover state */
.schema-faq-question:hover::before {
  background-color: #0179CC;
}

.schema-faq-question:hover::after {
  transform: translateY(-50%) rotate(180deg);
  background-color: #fff;
}

/* When FAQ is expanded */
.schema-faq-question.faq-open::before {
  background-color: #0179CC; /* blue circle returns! */
}

.schema-faq-question.faq-open::after {
  transform: translateY(-50%) rotate(180deg);
  background-color: #fff; /* arrow turns white */
}