/* Reusable FAQ accordion styling.
   Add `spark-faq-accordion` to Elementor accordion widgets. */
.spark-faq-accordion {
  --spark-faq-title-color: #ffffff;
  --spark-faq-title-hover-color: #ffffff;
  --spark-faq-title-active-color: #ffffff;
  --spark-faq-content-color: rgba(244, 241, 236, 0.72);
}

.spark-faq-accordion :where(
  .e-n-accordion-item-title,
  .e-n-accordion-item-title *,
  .e-n-accordion-item-title-text,
  summary.e-n-accordion-item-title,
  .pxl-accordion-title,
  .pxl-accordion-title *,
  .pxl-item--title,
  .pxl-item--title *,
  .item--title,
  .item--title *
) {
  color: var(--spark-faq-title-color);
}

.spark-faq-accordion :where(
  summary.e-n-accordion-item-title:hover,
  summary.e-n-accordion-item-title:focus,
  .pxl-accordion-title:hover,
  .pxl-item--title:hover,
  .item--title:hover
) {
  color: var(--spark-faq-title-hover-color);
}

.spark-faq-accordion :where(
  .e-n-accordion-item[open] .e-n-accordion-item-title,
  .e-n-accordion-item[open] .e-n-accordion-item-title *,
  .elementor-active,
  .elementor-active *,
  .active .pxl-accordion-title,
  .active .pxl-accordion-title *,
  .active .pxl-item--title,
  .active .pxl-item--title *,
  .active .item--title,
  .active .item--title *
) {
  color: var(--spark-faq-title-active-color);
}

.spark-faq-accordion :where(
  .e-n-accordion-item-content,
  .e-n-accordion-item-content *,
  .pxl-accordion-content,
  .pxl-accordion-content *,
  .pxl-item--content,
  .pxl-item--content *,
  .item--content,
  .item--content *
) {
  color: var(--spark-faq-content-color);
}