/* ==========================================================================
   ONE LOOK FOR EVERY QUESTION LIST (.ccfaq28)

   The card of /price-app/, carried to every list that is built from an
   Elementor toggle or from a nested accordion. Read the head of
   inc/ccx-faq28.php for which pages that is and which two are deliberately
   left alone.

   Every value below was measured on the rendered reference page on
   1 September 2026 and is named again at its rule, so the next person can
   see at a glance whether the two have drifted apart:

     hover     frame rgba(120,160,235,.55)   fill rgba(216,226,255,.03)
     open      frame rgba(120,160,235,.42)   fill rgba(216,226,255,.04)
               rail  inset 2px 0 0 0 #ff8e2b
               lift  0 14px 30px -26px rgba(4,9,22,.95)
     sign      #ff8e2b while open, quarter turn on hover, half turn open

   NOTHING HERE TOUCHES A BOX. No padding, no margin, no width, no height,
   no border-width. The rail is an inset shadow and not a border for exactly
   that reason: a border would push the text of every open answer two pixels
   to the right the moment it appears. The closed card, the gaps between the
   cards and the type are the page's own settings and stay theirs.

   WEIGHT. Every state rule below is written to five class names, and the
   repeated class names are what pay for it. Two different opponents made
   that necessary, and both were measured rather than assumed:

     the page settings   Elementor writes the card of the blog post as
                         .elementor-7207 .elementor-element
                         .elementor-element-c4f4c6f .e-n-accordion-item,
                         four class names. A lighter chain here set the fill
                         and the rail of the open card and lost the frame,
                         which is a state that looks half finished.

     the page modules    assets/ccx-apps26.css, assets/ccx-napp.css and
                         assets/ccx-sapp.css write into the same cards from
                         files this one may not open. The heaviest of their
                         rules for the open card carries four names as well
                         (a :has() takes the weight of its heaviest
                         argument).

   Five beats both. Where a count is equal, this file standing later in the
   document decides, which is what the queue priority in the module is for.
   ========================================================================== */

.ccfaq28 {
  --ccfaq28-accent: #ff8e2b;
  --ccfaq28-rule-hover: rgba(120, 160, 235, 0.55);
  --ccfaq28-rule-open: rgba(120, 160, 235, 0.42);
  --ccfaq28-fill-hover: rgba(216, 226, 255, 0.03);
  --ccfaq28-fill-open: rgba(216, 226, 255, 0.04);
  --ccfaq28-rail: inset 2px 0 0 0 #ff8e2b;
  --ccfaq28-lift: 0 14px 30px -26px rgba(4, 9, 22, 0.95);
}

/* ==========================================================================
   1. THE CARD, NEWER WIDGET (nested accordion)

   A details element, so the open state is an attribute the browser sets and
   nothing has to watch it.
   ========================================================================== */

.ccfaq28 .e-n-accordion-item {
  transition:
    border-color 0.28s ease-out,
    background-color 0.28s ease-out,
    box-shadow 0.28s ease-out;
}

.ccfaq28.ccfaq28 .e-n-accordion-item.e-n-accordion-item:hover {
  border-color: var(--ccfaq28-rule-hover);
  background-color: var(--ccfaq28-fill-hover);
}

/* The open card. The orange rail on the left is the mark that was missing:
   it says which answer is showing, and drawn as an inset shadow it costs the
   card no width. Written twice rather than as a list so the open state also
   holds while the pointer is on the card. */
.ccfaq28.ccfaq28 .e-n-accordion-item.e-n-accordion-item[open] {
  border-color: var(--ccfaq28-rule-open);
  background-color: var(--ccfaq28-fill-open);
  box-shadow: var(--ccfaq28-rail), var(--ccfaq28-lift);
}
.ccfaq28.ccfaq28 .e-n-accordion-item.e-n-accordion-item[open]:hover {
  border-color: var(--ccfaq28-rule-open);
  background-color: var(--ccfaq28-fill-open);
  box-shadow: var(--ccfaq28-rail), var(--ccfaq28-lift);
}

/* ==========================================================================
   2. THE CARD, OLDER WIDGET (toggle)

   This widget marks the title row and the panel, never the card around
   them, so the card is reached in two ways that are written as separate
   rules on purpose: a selector list is dropped in full by an engine that
   does not understand one of its parts.

     .ccfaq28-open   mirrored onto the card by assets/ccx-faq28.js
     :has()          the same state without any script

   The mirrored rule carries the state class twice. That is not decoration:
   assets/ccx-napp.css sets the frame of the open card at four class names
   and this has to stand above it.
   ========================================================================== */

.ccfaq28 .elementor-toggle-item {
  transition:
    border-color 0.28s ease-out,
    background-color 0.28s ease-out,
    box-shadow 0.28s ease-out;
}

.ccfaq28.ccfaq28 .elementor-toggle-item.elementor-toggle-item:hover {
  border-color: var(--ccfaq28-rule-hover);
  background-color: var(--ccfaq28-fill-hover);
}

.ccfaq28.ccfaq28 .elementor-toggle-item.ccfaq28-open.ccfaq28-open {
  border-color: var(--ccfaq28-rule-open);
  background-color: var(--ccfaq28-fill-open);
  box-shadow: var(--ccfaq28-rail), var(--ccfaq28-lift);
}

.ccfaq28.ccfaq28 .elementor-toggle-item:has(> .elementor-tab-title.elementor-active) {
  border-color: var(--ccfaq28-rule-open);
  background-color: var(--ccfaq28-fill-open);
  box-shadow: var(--ccfaq28-rail), var(--ccfaq28-lift);
}

/* ==========================================================================
   3. THE TITLE ROW

   The whole row is the control on both widgets, so it says so under the
   pointer. cursor:pointer is written because the reference writes it; the
   site replaces the pointer with its own cursor, so it is a statement of
   intent rather than something a visitor sees.
   ========================================================================== */

.ccfaq28 .e-n-accordion-item-title,
.ccfaq28 .elementor-toggle-item .elementor-tab-title {
  cursor: pointer;
  transition: color 0.24s ease-out;
}

/* ==========================================================================
   4. THE SIGN

   Both widgets keep two glyphs in the markup and swap which one is shown, so
   both are addressed and the turn happens on whichever is on screen.

   Two properties, not one. Elementor renders the glyph as an svg and writes
   fill on it, and fill beats the inherited colour, so a rule that only sets
   colour reaches the span around the glyph and never the glyph itself. That
   is exactly what happens on the reference page, where the open sign asks
   for the accent and stays white. Four of the six lists on this site set the
   fill and do show an orange sign; this rule does the same.
   ========================================================================== */

.ccfaq28 .e-n-accordion-item-title-icon,
.ccfaq28 .elementor-toggle-icon,
.ccfaq28 .elementor-toggle-icon-closed,
.ccfaq28 .elementor-toggle-icon-opened {
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.24s ease-out,
    fill 0.24s ease-out;
}

/* The toggle keeps its two glyphs in inline spans; a span cannot be turned
   until it is told to take a box. */
.ccfaq28 .elementor-toggle-icon-closed,
.ccfaq28 .elementor-toggle-icon-opened {
  display: inline-block;
}

/* Under the pointer, on a closed card. */
.ccfaq28 .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title-icon,
.ccfaq28 .elementor-toggle-item:hover .elementor-toggle-icon-closed {
  transform: rotate(90deg);
  color: var(--ccfaq28-accent);
}
.ccfaq28 .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title-icon svg,
.ccfaq28 .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title-icon path,
.ccfaq28 .elementor-toggle-item:hover .elementor-toggle-icon-closed svg,
.ccfaq28 .elementor-toggle-item:hover .elementor-toggle-icon-closed path {
  fill: var(--ccfaq28-accent);
}

/* While open. */
.ccfaq28 .e-n-accordion-item[open] .e-n-accordion-item-title-icon,
.ccfaq28 .elementor-tab-title.elementor-active .elementor-toggle-icon-opened {
  transform: rotate(180deg);
  color: var(--ccfaq28-accent);
}
.ccfaq28 .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
.ccfaq28 .e-n-accordion-item[open] .e-n-accordion-item-title-icon path,
.ccfaq28 .elementor-tab-title.elementor-active .elementor-toggle-icon-opened svg,
.ccfaq28 .elementor-tab-title.elementor-active .elementor-toggle-icon-opened path {
  fill: var(--ccfaq28-accent);
}

/* ==========================================================================
   5. REDUCED MOTION

   Every mark this file adds is drawn rather than animated, so the list keeps
   the rail, the frame, the fill and the colour of the sign and only stops
   moving between the states.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ccfaq28 .e-n-accordion-item,
  .ccfaq28 .elementor-toggle-item,
  .ccfaq28 .e-n-accordion-item-title,
  .ccfaq28 .elementor-toggle-item .elementor-tab-title,
  .ccfaq28 .e-n-accordion-item-title-icon,
  .ccfaq28 .elementor-toggle-icon,
  .ccfaq28 .elementor-toggle-icon-closed,
  .ccfaq28 .elementor-toggle-icon-opened {
    transition: none;
  }
}