/*
 * Motion for the pages' own FAQ accordions (Elementor's nested accordion and the older accordion),
 * the same as in the Deskhero FAQ on /faq/ (deskhero-faq.js): an opened answer fades and unfolds
 * in, and on hover the "+" turns a quarter and the question takes the link colour.
 * Added to every page with an accordion by tools/mirror/faq.mjs, as faq-motion.css?v=<hash>.
 */
@keyframes tse-faq-unfold {
  from { opacity: 0; transform: translateY(-6px) scaleY(.96); }
}

.e-n-accordion .e-n-accordion-item[open] > [role="region"],
.elementor-accordion .elementor-tab-content,
.elementor-toggle .elementor-tab-content {
  transform-origin: top;
  animation: tse-faq-unfold .35s cubic-bezier(.2, .7, .3, 1) both;
}

.e-n-accordion .e-n-accordion-item-title-icon i,
.e-n-accordion .e-n-accordion-item-title-icon svg,
.elementor-accordion .elementor-accordion-icon i,
.elementor-accordion .elementor-accordion-icon svg,
.e-n-accordion .e-n-accordion-item-title-text,
.elementor-accordion .elementor-accordion-title {
  transition: transform .25s ease, color .25s ease, fill .25s ease;
}

.e-n-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover .e-closed i,
.e-n-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover .e-closed svg,
.elementor-accordion .elementor-accordion-item > .elementor-tab-title:hover .elementor-accordion-icon-closed i,
.elementor-accordion .elementor-accordion-item > .elementor-tab-title:hover .elementor-accordion-icon-closed svg {
  transform: rotate(90deg);
  color: #2650c3;
  fill: #2650c3;
}

/* Elementor colours the nested accordion's icon through this variable */
.e-n-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover {
  --n-accordion-icon-hover-color: #2650c3;
}

.e-n-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.elementor-accordion .elementor-accordion-item > .elementor-tab-title:hover .elementor-accordion-title {
  color: #2650c3;
}

@media (prefers-reduced-motion: reduce) {
  .e-n-accordion .e-n-accordion-item[open] > [role="region"],
  .elementor-accordion .elementor-tab-content,
  .elementor-toggle .elementor-tab-content { animation: none; }
  .e-n-accordion .e-n-accordion-item-title-icon i,
  .e-n-accordion .e-n-accordion-item-title-icon svg,
  .elementor-accordion .elementor-accordion-icon i,
  .elementor-accordion .elementor-accordion-icon svg { transition: none; }
}