/* ==========================================================================
   CC Nutrition App - /nutrition-app/ (post 2777).

   Module inc/ccx-napp.php hands out the effect classes; this file holds the
   shapes those classes need and the few things that are pure appearance.
   Every rule is scoped by the body class .ccna-napp, which the module sets on
   that page alone.

   Specificity. The page stylesheet Elementor writes names three classes
   (.elementor-2777 .elementor-element.elementor-element-xxxxxxx), so a rule
   that has to reach past one of its declarations names the body element as
   well and lands one step above it. Rules that only add something new stay at
   two names.

   Load order. Module stylesheets all hang behind ccfx-v3.css and are queued in
   the alphabetical order of their module file, so this one settles ties
   against every module whose name sorts before it and loses to those after
   it. Nothing here relies on that: no selector of this file is written by
   another module, and the two price app modules that also load on this page
   only ever address the shared resource block .elementor-2932, which this file
   never names.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. The badge above the opening line, wide screens

   The bar draws its shape as a background picture with transparent corners,
   and the box around it has square corners, so the rim of the glow would have
   traced a rectangle around a rounded bar. The radius costs nothing visually,
   the box has no background and no frame of its own, and it gives the ring the
   shape it should follow. 12px is the radius of the picture: the file is
   588 by 64 and is shown at exactly that size, and its corner arc reaches the
   edge on the twelfth row.

   The bar for phones needs nothing: it carries a real frame and a 12px radius
   in the page data, and the ring inherits both.
   -------------------------------------------------------------------------- */
.ccna-napp [data-id="c0c096e"] { border-radius: 12px; }


/* --------------------------------------------------------------------------
   2. Section eyebrows

   The pill of the problem block takes the rim through the module and needs no
   shape of its own: it carries a real frame and a 55px radius in the page
   data. What is added here is a slow breath of that frame, the reading the
   badge pills of the reference blocks have, in the warm accent of this page
   rather than the green those use, because green is the status colour of the
   site and this is a section label.

   The animation names the box itself rather than a wrapper: the frame belongs
   to the container. A CSS animation outranks a normal declaration, so the
   frame colour the page data sets is picked up as the resting value of the
   keyframes and written back at both ends.
   -------------------------------------------------------------------------- */
.ccna-napp [data-id="3b2f526"] {
  animation: ccna-pill-breath 3.6s ease-in-out infinite;
}

@keyframes ccna-pill-breath {
  0%, 100% {
    border-color: rgb(51, 51, 51);
    box-shadow: 0 0 0 0 rgba(255, 142, 43, 0);
  }
  50% {
    border-color: rgba(255, 142, 43, 0.42);
    box-shadow: 0 0 14px 0 rgba(255, 142, 43, 0.16);
  }
}

/* The other eyebrow is a plain orange line with no pill around it, so it gets
   the mark the site puts in front of a badge label instead: a small dot that
   breathes. Drawn on the line itself, so the page data stays as it is; the
   line is centred, and the dot moves with it. */
.ccna-napp [data-id="a46b707"] .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8e2b;
  box-shadow: 0 0 8px rgba(255, 142, 43, 0.75);
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 8px;
  animation: ccna-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes ccna-dot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}


/* --------------------------------------------------------------------------
   3. Accent words

   Three of the large headlines hold one colour in the page data, so the word
   that is to run orange gets a span in the browser (assets/ccx-napp.js). The
   setup headline already has a colour rule for a span in its page stylesheet
   and arrives orange on its own; the other two are named here.

   The colour is also what a reader sees when the effect layer never runs: the
   shine paints from a variable of its own, and under reduced motion it hands
   the letters back to the colour underneath.
   -------------------------------------------------------------------------- */
.ccna-napp [data-id="7c21ece"] .elementor-heading-title span.ccna-accent,
.ccna-napp [data-id="84a4b06"] .elementor-heading-title span.ccna-accent { color: #ff8e2b; }


/* --------------------------------------------------------------------------
   4. The line between the setup steps

   The drawing is one absolutely positioned overlay across the block. It is
   the first child, which puts it behind the steps: the overlay and the step
   blocks are all positioned, so document order decides who paints on top, and
   the line has to run under the circles rather than across them. It takes no
   part in the flex layout of the block and adds no height.

   Where the line goes is measured, not written down: four circles in a row on
   a wide screen, two and two between 768 and 1024, four under each other on a
   phone. assets/ccx-napp.js carries the reasoning.
   -------------------------------------------------------------------------- */
.ccna-stage {
  position: relative;
  --ccna-cycle: 4.5s;
}

.ccna-stage > .ccna-rail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.ccna-stage > .ccna-rail-svg--off { display: none; }

/* The resting line. Faint enough that it reads as a distance rather than as a
   rule across the block. */
.ccna-rail-svg__base {
  stroke: rgba(215, 220, 232, 0.17);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The spark. One dash on an otherwise empty pattern: its gap holds the whole
   line plus the dark stretch between two passes, so one turn of the pattern is
   one turn of the animation and the loop closes without a jump. Both numbers
   come from the script, which knows how long the line turned out to be.

   The halo is the same dash drawn wider and weaker underneath. A blur filter
   would have done the same thing and would have had to be recomputed on every
   frame of the pass; a second stroke costs nothing. */
.ccna-rail-svg__halo,
.ccna-rail-svg__beam {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ccna-dash, 0) var(--ccna-gap, 99999);
  stroke-dashoffset: var(--ccna-from, 0);
  animation: ccna-run var(--ccna-cycle) linear infinite;
  animation-play-state: paused;
}
.ccna-rail-svg__halo {
  stroke: rgba(255, 142, 43, 0.20);
  stroke-width: 9;
}
.ccna-rail-svg__beam {
  stroke: #ffcf9e;
  stroke-width: 2.4;
}

@keyframes ccna-run {
  from { stroke-dashoffset: var(--ccna-from, 0); }
  to   { stroke-dashoffset: var(--ccna-to, 0); }
}

/* The pass runs while the block is on screen and holds its place when it is
   not, so scrolling back does not drop the viewer into the middle of a half
   finished sweep. */
.ccna-stage.ccna-live .ccna-rail-svg__halo,
.ccna-stage.ccna-live .ccna-rail-svg__beam,
.ccna-stage.ccna-live .ccna-num .elementor-icon::before,
.ccna-stage.ccna-live .ccna-num .elementor-icon::after {
  animation-play-state: running;
}


/* --------------------------------------------------------------------------
   5. The numbered circles

   The circle is drawn by the page as one picture inside an 80 by 80 box. Both
   layers below sit exactly on that box, which puts the light on the outer edge
   of the drawing and leaves the drawing itself untouched.

   The box shadows never move, only opacity and scale do, so the two layers
   stay on the compositor and the pass costs a repaint of the line and nothing
   else.
   -------------------------------------------------------------------------- */
.ccna-num .elementor-icon {
  position: relative;
  isolation: isolate;
}

/* the ring, and its slow breath */
.ccna-num .elementor-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 142, 43, 0.30),
    0 0 16px 1px rgba(255, 142, 43, 0.26),
    0 0 36px 5px rgba(255, 142, 43, 0.12);
  opacity: 0.62;
  animation: ccna-breathe 3.8s ease-in-out infinite;
  animation-play-state: paused;
}
@keyframes ccna-breathe {
  0%, 100% { opacity: 0.58; }
  50%      { opacity: 1; }
}

/* The flare. It opens once per pass, at the moment the spark reaches this
   circle: the script writes that moment into --ccna-t as a delay, and the turn
   is as long as the pass, so the two never drift apart.

   The delay is the arrival, not a breath before it, and the script keeps the
   four arrivals apart even where the drawing had to leave a gap: step one
   lights, then the light runs to step two, and so on. */
.ccna-num .elementor-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 2px rgba(255, 178, 110, 0.55),
    0 0 24px 5px rgba(255, 142, 43, 0.38);
  animation: ccna-flare var(--ccna-cycle) linear infinite;
  animation-delay: var(--ccna-t, 0s);
  animation-play-state: paused;
}
@keyframes ccna-flare {
  0%   { opacity: 0;    transform: scale(1); }
  3%   { opacity: 0.95; transform: scale(1); }
  18%  { opacity: 0;    transform: scale(1.4); }
  100% { opacity: 0;    transform: scale(1.4); }
}


/* --------------------------------------------------------------------------
   6. The cards

   Rim glow, soft interior spot and a ring on the round icon, all handed out by
   class name in inc/ccx-napp.php. Only the reach of the aura and the small
   answer to the pointer are set here.

   The default reach of 36px would put the aura of the outer cards past the
   edge of the window on a phone, where the card sits 16px from it, and a
   hidden layer out there still makes the page scrollable sideways. 20px clears
   the widest row on a desktop, where the cards stand 24px apart, and 14px
   clears the phone.
   -------------------------------------------------------------------------- */
.ccna-card.mmrb-glowcard { --gc-pad: 20px; }

/* Round icon on a card: the picture is a circle of 64px and the box that holds
   it is exactly that size, measured on the rendered page, so the ring needs no
   correction of its own. The radius is named all the same, because a later
   change to the icon size has to stay a circle. */
.ccna-cardicon.mmrb-glowcard {
  --gc-pad: 9px;
  border-radius: 50%;
}

/* The quiet answer. Twelve cards is a lot of surface, and the rim is already
   the movement in this part of the page, so nothing here moves: the frame
   brightens and the fill lifts by a hair. That is also what keeps the rim
   arithmetic simple, since the engine measures the box on every pointer move.

   The class is repeated to clear the two declarations the page builder writes
   for each card by id. The frame rule carries three class names, the fill rule
   four (it hangs off a :not() on a class), so five settle both without an
   !important, which would also take the colours away from anyone editing a
   card later.

   A finger has no hover. On a touch screen the lit state would stick to the
   last card tapped, so the whole group is left to pointers that can leave
   again. */
.ccna-card {
  transition:
    border-color 0.38s ease,
    background-color 0.38s ease;
}
@media (hover: hover) {
  .ccna-card.ccna-card.ccna-card.ccna-card.ccna-card:hover,
  .ccna-card.ccna-card.ccna-card.ccna-card.ccna-card:focus-within {
    border-color: rgba(133, 168, 226, 0.42);
    background-color: rgba(216, 226, 255, 0.065);
  }
}


/* --------------------------------------------------------------------------
   7. Feature roadmap

   The timeline draws its line as a plain one colour border: on wide screens as
   the right edge of the left half, on narrow screens as the left edge of the
   station column. Both are replaced by a gradient that fades in at the top and
   out at the bottom, so the line reads as a run and not as a box edge.

   Explicit geometry on every side: an Elementor container brings its own
   pseudo element rules along, and a half declared box would inherit their
   left, width, height and border.

   Addressed by element id rather than by a marker class, and on purpose: the
   old flat line has to be switched off in the same breath as the new one is
   drawn, and a class that only arrives once the effect layer has run would
   leave one frame with both. The page writes its border colour with three
   class names, so the rule that clears it names the body element as well and
   lands one step above.
   -------------------------------------------------------------------------- */
body.ccna-napp .elementor-element[data-id="1f8be2b"],
body.ccna-napp .elementor-element[data-id="e331b99"] { position: relative; }
body.ccna-napp .elementor-element[data-id="1f8be2b"] { border-right-color: transparent; }
body.ccna-napp .elementor-element[data-id="e331b99"] { border-left-color: transparent; }

.ccna-napp [data-id="1f8be2b"]::after,
.ccna-napp [data-id="e331b99"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  border: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 44, 69, 0) 0%,
    rgba(36, 44, 69, 1) 7%,
    rgba(86, 116, 176, 0.85) 38%,
    rgba(255, 142, 43, 0.55) 74%,
    rgba(36, 44, 69, 0) 100%
  );
}
.ccna-napp [data-id="1f8be2b"]::after { left: auto; right: -2px; }
.ccna-napp [data-id="e331b99"]::after { right: auto; left: -2px; }

/* The stations. Each is a small round drawing sitting on the line, and it
   already carries the page navy behind it, which is what makes it look like a
   bead on a string. It gets a ring that breathes, and the ring is a shadow, so
   the bead keeps its size and the line underneath stays put.

   The radius is what the ring follows. On the four small beads of the wide
   layout the page already sets one through an id selector (#custom-timeline),
   which no rule of this file can outrank without an !important - and it does
   not have to: a 12px radius on a 12px box is scaled down to half the side by
   the browser, which is the circle this asks for. Where the page says nothing,
   as on the large bead at the head, the 50 per cent below is what applies. */
.ccna-node {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  animation: ccna-node 4.6s ease-in-out infinite;
}
@keyframes ccna-node {
  0%, 100% {
    box-shadow:
      0 0 0 0 hsl(212 92% 64% / 0%),
      0 0 8px 0 hsl(212 92% 64% / 16%);
  }
  50% {
    box-shadow:
      0 0 0 3px hsl(212 92% 64% / 9%),
      0 0 16px 2px hsl(212 92% 64% / 34%);
  }
}

/* The bead at the head of the rail is the one the section opens with, so it
   carries the warm accent instead of the cool one and keeps its own beat. */
.ccna-node-lead {
  animation-name: ccna-node-lead;
  animation-duration: 4.2s;
}
@keyframes ccna-node-lead {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255, 142, 43, 0),
      0 0 10px 0 rgba(255, 142, 43, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 142, 43, 0.10),
      0 0 22px 3px rgba(255, 142, 43, 0.38);
  }
}

/* The beads breathe out of step, otherwise the column pulses as one block. The
   offsets are deliberately not multiples of each other. Both layouts are
   listed, only one of them is ever on screen. */
.ccna-napp [data-id="b8847c2"] .ccna-node,
.ccna-napp [data-id="02af81a"] .ccna-node { animation-delay: -0.4s; }
.ccna-napp [data-id="6bc244c"] .ccna-node,
.ccna-napp [data-id="aa705a1"] .ccna-node { animation-delay: -1.7s; }
.ccna-napp [data-id="97076f0"] .ccna-node,
.ccna-napp [data-id="8fcdff8"] .ccna-node { animation-delay: -3.1s; }
.ccna-napp [data-id="06f735b"] .ccna-node,
.ccna-napp [data-id="e65342d"] .ccna-node { animation-delay: -2.3s; }

/* The station texts carry a fixed width from the page settings, 290px for the
   narrow layout and 240px for the wide one. At 375px the column has 284px, so
   those six pixels were what made the whole page scrollable sideways - the
   only sideways overhang the page had, measured by switching each section off
   in turn.

   A maximum does not have to outrank the id selector that sets the width: a
   maximum is applied to the used width afterwards and simply clamps it. So no
   !important, and the fixed width keeps working wherever it fits. Scoped to
   this section, because the page writes the second half of that rule without
   any scope at all and it therefore reaches icon boxes elsewhere. */
.ccna-napp [data-id="6b48f54"] .elementor-icon-box-description,
.ccna-napp [data-id="6b48f54"] .elementor-icon-box-title { max-width: 100%; }

/* The heading of a station lightens when the pointer is on its box, so the
   column answers without any of it moving. */
.ccna-napp [data-id="6b48f54"] .elementor-icon-box-title { transition: color 0.3s ease-out; }
@media (hover: hover) {
  .ccna-napp [data-id="6b48f54"] .elementor-widget-icon-box:hover .elementor-icon-box-title,
  .ccna-napp [data-id="6b48f54"] .elementor-widget-icon-box:hover .elementor-icon-box-title span { color: #fff; }
}


/* --------------------------------------------------------------------------
   8. Questions

   The two lists already look like cards: a faint white gradient, a 1.2px frame
   in #292F42 and a 16px radius, all of it from the page settings, written as
   .custom-FAQ .elementor-toggle-item. What was missing is any sign that they
   can be operated and which one is open.

   The tint is a brighter version of that gradient rather than a background
   colour: a colour would sit underneath the gradient and never show.

   Spacing is deliberately not touched. The widget already keeps 16px between
   the items and 20px inside each title row, which measures and reads
   correctly.
   -------------------------------------------------------------------------- */
.ccna-faq .elementor-toggle-item {
  transition:
    border-color 0.28s ease-out,
    background-image 0.28s ease-out,
    box-shadow 0.28s ease-out;
}

.ccna-faq .elementor-toggle-item:hover {
  border-color: rgba(120, 160, 235, 0.42);
  background-image: linear-gradient(91deg, rgba(255, 255, 255, 0.085) 11.04%, rgba(255, 255, 255, 0.05) 99.94%);
}

/* The open state. The orange hair line on the left says which answer is
   showing, and it is drawn as an inset shadow so no box changes size.

   The item is reached through the state of its title, which is where Elementor
   sets the class. Where a browser cannot ask that question the same marks go
   on the title itself, which is the part a reader is looking at anyway. */
.ccna-faq .elementor-toggle-item:has(> .elementor-tab-title.elementor-active) {
  border-color: rgba(120, 160, 235, 0.42);
  /* Round 28: this gradient sat about 4% of white above the reference fill
     and hid the flat colour the sitewide standard (ccx-faq28.css) lays
     underneath, because an image always paints over a background colour.
     It now carries the exact /price-app/ open fill so the open card reads
     the same on every page. */
  background-image: linear-gradient(91deg, rgba(216, 226, 255, 0.04) 11.04%, rgba(216, 226, 255, 0.04) 99.94%);
  box-shadow:
    inset 2px 0 0 0 #ff8e2b,
    0 14px 30px -26px rgba(4, 9, 22, 0.95);
}
@supports not selector(:has(*)) {
  .ccna-faq .elementor-tab-title.elementor-active {
    box-shadow: inset 2px 0 0 0 #ff8e2b;
  }
}

/* The widget swaps a plus for a minus rather than turning one glyph, so the
   open sign is only given the accent colour. */
.ccna-faq .elementor-tab-title.elementor-active .elementor-toggle-icon-opened svg { fill: #ff8e2b; }

/* The row is the control, so it says so under the pointer. */
.ccna-faq .elementor-toggle-title { transition: color 0.22s ease-out; }
@media (hover: hover) {
  .ccna-faq .elementor-tab-title:hover .elementor-toggle-title { color: #fff; }
}


/* --------------------------------------------------------------------------
   9. Pricing plans

   The section clips its content, which is what keeps the row from pushing the
   page sideways, so it has to stay. The rim glow of a card reaches beyond the
   card and would be cut off exactly at that frame, so the clipping is switched
   from hidden to clip with a margin: the containment stays, the light gets
   out, and where a browser does not know the margin it falls back to plain
   clipping, which is the state of today.

   Elementor drives the property through a variable of its own, so the variable
   is what is set here, and the page sets that variable with three class names,
   so the rule names the body element as well and lands one step above it.
   -------------------------------------------------------------------------- */
body.ccna-napp .elementor-element[data-id="28b6689"] {
  --overflow: clip;
  overflow-clip-margin: 26px;
}

/* Aura held to 20px: the cards stand about 23px apart, and the factory 36px
   would light up two neighbours at once. */
.ccna-plan.mmrb-glowcard {
  --gc-pad: 20px;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.32s ease-out,
    box-shadow 0.32s ease-out;
}
@media (hover: hover) {
  .ccna-plan.mmrb-glowcard:hover,
  .ccna-plan.mmrb-glowcard:focus-within {
    transform: translateY(-3px);
    border-color: rgba(120, 160, 235, 0.42);
    box-shadow: 0 18px 34px -22px rgba(4, 9, 22, 0.9);
  }
}

/* The recommended plan. Advanced is the tier the page steers towards, and a
   pricing table says so with its frame rather than with a word: there is no
   place for a badge in this markup and none is invented here. The card keeps a
   faint lit rim at rest; under the pointer it joins the others.
   To move the recommendation, change the one id below. To drop it, delete this
   block. */
.ccna-napp [data-id="8958233"] {
  border-color: rgba(120, 160, 235, 0.38);
  box-shadow:
    0 0 0 1px rgba(120, 160, 235, 0.10),
    0 12px 40px -30px hsl(212 92% 64% / 55%);
}

/* Pills: the shape is already right, a real 100px radius with a fill and a
   frame, which is what the travelling light needs. Only its pace is set. */
.ccna-pill {
  --ccx-star-speed: 6s;
  --ccx-star-opacity: 0.9;
}


/* --------------------------------------------------------------------------
   10. Narrow screens

   The circles stand under each other below 768px and the line between them
   shrinks to the clear gap over each circle, which the script measures. The
   ring loses a little of its reach so it does not run into the paragraph
   above, and the aura of the cards is pulled in so the page cannot be dragged
   sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ccna-card.mmrb-glowcard,
  .ccna-plan.mmrb-glowcard { --gc-pad: 14px; }

  .ccna-num .elementor-icon::after {
    box-shadow:
      0 0 0 1px rgba(255, 142, 43, 0.30),
      0 0 12px 1px rgba(255, 142, 43, 0.24),
      0 0 26px 3px rgba(255, 142, 43, 0.10);
  }
  .ccna-rail-svg__halo { stroke-width: 7; }
}


/* --------------------------------------------------------------------------
   11. Reduced motion

   Without scripting there is no line and no ring at all: both arrive as marker
   classes from the effect layer, so the page falls back to exactly what it
   looked like before this round.

   For a visitor who asked the system for less movement the line is drawn in
   full and the circles keep their ring, standing still. The spark is weakened
   where it stands, because a pass that cannot travel would otherwise leave a
   solid orange rule across the block.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccna-rail-svg__halo,
  .ccna-rail-svg__beam {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .ccna-rail-svg__halo { opacity: 0.5; }
  .ccna-rail-svg__beam { opacity: 0.55; }
  .ccna-stage.ccna-live .ccna-rail-svg__halo,
  .ccna-stage.ccna-live .ccna-rail-svg__beam,
  .ccna-stage.ccna-live .ccna-num .elementor-icon::before,
  .ccna-stage.ccna-live .ccna-num .elementor-icon::after,
  .ccna-num .elementor-icon::before,
  .ccna-num .elementor-icon::after { animation: none; }
  .ccna-num .elementor-icon::after { opacity: 0.8; }
  .ccna-num .elementor-icon::before { opacity: 0; }

  .ccna-napp [data-id="3b2f526"],
  .ccna-napp [data-id="a46b707"] .elementor-heading-title::before,
  .ccna-node { animation: none; }

  .ccna-card,
  .ccna-plan.mmrb-glowcard,
  .ccna-faq .elementor-toggle-item,
  .ccna-faq .elementor-toggle-title,
  .ccna-napp [data-id="6b48f54"] .elementor-icon-box-title { transition: none; }
}