/* ==========================================================================
   The question list of /process-tools/ (.cclp-acc).

   Scope. Every rule in this file starts at .cclp-faq, the band the list sits
   in, and the stylesheet itself is only queued on a page whose data carries
   the list, so nothing here can reach another page.

   Weight. Three values of this component are already set in the page settings
   of the landing page, and that stylesheet is shared ground written by several
   hands, so it is not opened. Elementor renders its rules as
   .elementor-21301 .cclp-acc <target>, which is three class names plus the
   target. The chains below carry one more, which settles the tie without a
   single !important and without touching the page. The three are named at
   their rules: the tint of the open question, the clip on the item, and the
   colour of the closed one on hover.

   Palette: card blue #181f32, frame rgb(44,51,76), accent #FF8E2B, top of the
   orange #FFA24D, silver #d7dce8.
   ========================================================================== */

.cclp-faq .cclp-acc {
  /* Both insets of the rail. The radius of the card is 16px, so the rail
     starts below the curve and ends above it, which keeps it a straight line
     rather than something that has to follow a corner. */
  --ccfaq-rail-inset: 18px;
  --ccfaq-rail-width: 2px;
}

/* --------------------------------------------------------------------
   THE CARD

   Two things are handed back here. The clip, because the aura of the rim
   lies outside the box and the page stylesheet cuts it off at the frame
   (the same correction the idea cards needed, see assets/ccx-ideas.css);
   nothing inside a question reaches past its edge, so there is nothing
   left for the clip to do. And a position, because the rail below is
   placed against this box.

   The aura is deliberately tight. The rows stand 12px apart, and the
   default reach of 36px with an onset at 20 would light up the row above
   and the row below whatever the pointer is near. 14px of reach with the
   onset at 46 lights one row at a time.
   -------------------------------------------------------------------- */
.cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item {
  position: relative;
  overflow: visible;
  --gc-pad: 14px;
  --edge-sensitivity: 46;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background-color 0.32s ease, box-shadow 0.32s ease;
}

/* Below 1025px the aura box is pulled back onto the card, for the reason
   assets/ccfx-v3.css gives for the small rims: a box reaching past a block
   that is no longer clipped can widen the document. */
@media (max-width: 1024px) {
  .cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item {
    --gc-pad: 0px;
  }
}

/* The open card stands a little in front of the closed ones. Faint on
   purpose: the frame, the rail and the hairline already say which one is
   open, this only gives the answer a surface to sit on. */
.cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item.ccfaq-open {
  background-color: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.22);
}

/* --------------------------------------------------------------------
   THE RAIL ON THE OPEN CARD

   An orange line down the left edge, the same mark the note box of this
   page draws with border-left. It is a pseudo element and not a border,
   because a border would move the content by its width the moment a panel
   opens. It grows from the top rather than fading in, so the eye follows
   it down into the answer.

   The item is a plain div inside the widget, not an Elementor container,
   so its ::before carries no inherited box values; the warning in the
   skill file about ghost numerals applies to .e-con only.
   -------------------------------------------------------------------- */
.cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--ccfaq-rail-inset);
  bottom: var(--ccfaq-rail-inset);
  width: var(--ccfaq-rail-width);
  border-radius: 0 var(--ccfaq-rail-width) var(--ccfaq-rail-width) 0;
  background: linear-gradient(180deg, #ffa24d 0%, #ce5904 100%);
  opacity: 0;
  transform: scaleY(0.3);
  transform-origin: 50% 0;
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.2, 0.85, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item.ccfaq-open::before {
  opacity: 1;
  transform: scaleY(1);
}

/* --------------------------------------------------------------------
   THE QUESTION

   The colour of the open one is the value this file exists for. The page
   stylesheet turns it rgb(255,211,165), a pale peach that appears nowhere
   else on the site; open now means white, so opening a panel brightens
   its line and the orange sign beside it carries the state.

   The link inside the title is written out as well. It takes colour:inherit
   from the page stylesheet and would follow on its own, but it also sits
   under .elementor-kit-6 a{color:#FF8E2B}, and one rule of inheritance
   between the two is a thin thing to rely on.
   -------------------------------------------------------------------- */
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title {
  position: relative;
  transition: color 0.25s ease;
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title:hover {
  color: #ffffff;
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title.elementor-active,
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
  color: #ffffff;
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-title {
  transition: color 0.25s ease;
}

/* The hairline between question and answer. It is drawn on the question and
   not on the answer: the answer is what the height animation moves, and a
   border on it would stand at full weight over a box of no height for the
   whole of that animation. */
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title.elementor-active::after {
  opacity: 1;
}

/* --------------------------------------------------------------------
   THE SIGN

   Elementor swaps two elements, a plus and a minus. The minus swings in
   from upright, which reads as the standing stroke of the plus turning
   away, and the plus grows a little while the pointer is on its question.
   -------------------------------------------------------------------- */
.cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-icon svg {
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.3, 1);
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon-closed svg {
  transform: scale(1.14);
}
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened svg {
  animation: ccfaq-sign 0.34s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
@keyframes ccfaq-sign {
  from { transform: rotate(-90deg) scale(0.55); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------
   THE ANSWER

   The widget animates the height of the panel. The text inside it rises
   into that opening instead of standing there at full weight from the
   first frame, which is what made the list feel like a switch.
   -------------------------------------------------------------------- */
.cclp-faq .cclp-acc .elementor-accordion .elementor-tab-content.elementor-active > * {
  animation: ccfaq-answer 0.42s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
@keyframes ccfaq-answer {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* Phones: the card is shorter and its padding smaller, so the rail is
   pulled in with it. */
@media (max-width: 767px) {
  .cclp-faq .cclp-acc {
    --ccfaq-rail-inset: 13px;
  }
  .cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title::after {
    left: 18px;
    right: 18px;
  }
}

/* Nothing moves without motion. The rail, the hairline and the colours are
   drawn rather than animated, so the list keeps every mark it has. */
@media (prefers-reduced-motion: reduce) {
  .cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item,
  .cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item::before,
  .cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title,
  .cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title::after,
  .cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-title,
  .cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-icon svg {
    transition: none;
  }
  .cclp-faq .cclp-acc .elementor-accordion .elementor-accordion-item.ccfaq-open::before {
    transform: none;
  }
  .cclp-faq .cclp-acc .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened svg,
  .cclp-faq .cclp-acc .elementor-accordion .elementor-tab-content.elementor-active > * {
    animation: none;
  }
}