/**
 * FineFineWeb Elementor Fading Accordion
 *
 * Classes are applied by hand in Elementor's "CSS Classes" field:
 *   .ffw-accordion          wraps every item; only one item stays open per group
 *   .ffw-accordion-item     one title + body pair
 *   .ffw-accordion-content  container holding the body copy that gets clipped
 *   .ffw-accordion-toggle   the control that reveals the copy
 */

/* Registered so the fade can be interpolated rather than snapping off. */
@property --ffw-accordion-fade-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.ffw-accordion-item {
  --ffw-accordion-lines: 5;
  --ffw-accordion-line-height: 1.6em;
  --ffw-accordion-duration: 450ms;
  /* Tune the fade through this rather than --ffw-accordion-fade-start, which
     is uninheritable and gets reassigned by the state rules below. */
  --ffw-accordion-fade: 55%;
}

.ffw-accordion-item .ffw-accordion-content {
  --ffw-accordion-fade-start: var(--ffw-accordion-fade, 55%);
  /* Elementor containers read their overflow from this custom property. */
  --overflow: hidden;
  overflow: hidden;
  /* V4 flexbox elements default to row with 10px padding. The clip is a
     max-height on a border box, so padding here would quietly eat into the
     line count; put padding on the item instead. */
  flex-direction: column;
  padding: 0;
  max-height: calc(var(--ffw-accordion-lines) * var(--ffw-accordion-line-height));
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--ffw-accordion-fade-start), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--ffw-accordion-fade-start), transparent 100%);
  transition: max-height var(--ffw-accordion-duration) ease,
              --ffw-accordion-fade-start var(--ffw-accordion-duration) ease;
}

.ffw-accordion-item.is-expanded .ffw-accordion-content {
  --ffw-accordion-fade-start: 100%;
  max-height: var(--ffw-accordion-height, none);
}

/* Set by the script when the copy is short enough to need no reveal. */
.ffw-accordion-item.is-static .ffw-accordion-content {
  --ffw-accordion-fade-start: 100%;
  max-height: none;
}

.ffw-accordion-item.is-static .ffw-accordion-toggle {
  display: none;
}

.ffw-accordion-toggle {
  cursor: pointer;
}

.ffw-accordion-label::after {
  content: "+";
  margin-left: 0.75em;
  font-style: normal;
}

.ffw-accordion-item.is-expanded .ffw-accordion-label::after {
  content: "\2212";
}

@media (max-width: 1024px) {
  .ffw-accordion-item {
    --ffw-accordion-lines: 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffw-accordion-item .ffw-accordion-content {
    transition: none;
  }
}