/* Style for the [faq] shortcode (seo-content-helpers plugin).
   Markup it produces:
     <div class="sch-faq-section">
       <div class="sch-faq-item">
         <h3 class="sch-faq-question">…</h3>
         <div class="sch-faq-answer"><p>…</p></div>
       </div>…
     </div>
   We don't change the markup — just visually present each item as a Stitch-
   style expandable row with an arrow indicator. JS toggles aria-expanded /
   data-open on the item via the question heading click. */

.ccs-rev-editorial .sch-faq-section {
  background: var(--ccs-surface-container-low);
  border-radius: var(--ccs-radius-xl);
  margin: 32px 0;
  padding: 0 24px;
}

.ccs-rev-editorial .sch-faq-item {
  border-bottom: 1px solid var(--ccs-outline-variant);
}
.ccs-rev-editorial .sch-faq-item:last-child { border-bottom: none; }

.ccs-rev-editorial .sch-faq-question {
  font-family: var(--ccs-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ccs-primary);
  margin: 0;
  padding: 20px 32px 20px 0;
  position: relative;
  cursor: pointer;
  user-select: none;
}
/* Arrow indicator — pure CSS chevron, rotates on open. No colour change on
   hover, no background change on hover. The cursor is the only affordance. */
.ccs-rev-editorial .sch-faq-question::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ccs-primary);
  border-bottom: 2px solid var(--ccs-primary);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s ease;
}
.ccs-rev-editorial .sch-faq-item[data-open="true"] .sch-faq-question::after {
  transform: translateY(-25%) rotate(-135deg);
}

.ccs-rev-editorial .sch-faq-answer {
  display: none;
  padding: 0 0 20px 0;
  font-family: var(--ccs-font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ccs-on-surface-variant);
}
.ccs-rev-editorial .sch-faq-item[data-open="true"] .sch-faq-answer { display: block; }
.ccs-rev-editorial .sch-faq-answer p { margin: 0; }
.ccs-rev-editorial .sch-faq-answer p + p { margin-top: 12px; }