/* ====================================================================
 * IT SECURITY SECTION (home page, .ccsec)
 *
 * Round 8 lifted the section out of the banner block it was built in and
 * put it in front of the trust slider. Two pieces of look had to travel
 * with it, because both used to be written against the block it left:
 *
 *   the eyebrow pill
 *   the three steps
 *
 * The steps used to be three framed cards, each with a huge faint numeral
 * behind its text. They are a timeline now: three numbered nodes on one
 * line, title and sentence underneath. The numeral is not painted twice,
 * the node carries it. That is a deliberate trade: an open block has no
 * corner left where a 160px numeral could sit without landing behind the
 * type, and a second copy of the same digit next to the node would say
 * the same thing twice.
 *
 * The frame and the fill of the old cards were removed from the section
 * settings in the same step, so nothing here has to fight them.
 *
 * Everything about the timeline hangs on one marker class, ccsec-tl, that
 * the row carries in the page data. The German copy of the home page is
 * pulled across a little later and still holds the three cards, the note
 * box and the reference cards. Without the marker these rules would reach
 * into that copy and mix a timeline into a card layout. With it the German
 * page keeps the look it has until it is pulled, and gets the timeline the
 * moment it is.
 * ==================================================================== */


/* --------------------------------------------------------------------
 * The eyebrow pill
 *
 * Shape and hair line came from the custom css of the old host block.
 * Same values, now tied to the section instead of to its former parent.
 * -------------------------------------------------------------------- */
.ccsec .ccx-pill {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(93deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.01) 100%);
}


/* --------------------------------------------------------------------
 * The jump mark
 *
 * #security is the first child of the section now, which would put it
 * inside the top padding and let a jump from the menu park the headline
 * under the sticky header. Pinned to the outer edge of the block it
 * lands exactly where it landed while it was a sibling: the top of the
 * block at the top of the window, the padding above the headline intact.
 * Out of flow, so it adds no height.
 * -------------------------------------------------------------------- */
.ccsec {
  position: relative;
}
.ccsec .elementor-widget-menu-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* --------------------------------------------------------------------
 * THE TIMELINE, WIDE LAYOUT
 *
 * Three equal columns. Every node sits at the left edge of its column,
 * so the eye reads Audit, Hardening, Verification from left to right and
 * the line under them is a real distance travelled, not a decoration
 * around centred type. The step strip of the Why CartCraft section is
 * centred, which keeps the two apart at a glance.
 *
 * The marker class ccsec-tl on the row is what switches all of this on.
 *
 * Geometry of the line, so it can be checked: the row carries 20px of
 * side padding, the node is 56px wide, so the centre of the first node
 * sits at 20 + 28 px. Three columns of width C with two gaps G give the
 * centre of the third node at 2 * (C + G) + 28, and C = (100% - 2G - 40)
 * / 3, which leaves a run of (100% - 40px) * 2 / 3 + 16px between the
 * first and the last node. That is the width below, and it is why the
 * line ends exactly in the middle of the third node.
 * -------------------------------------------------------------------- */
.ccsec .ccsec-tl {
  --ccsec-node: 56px;
  --ccsec-gap: 24px;
  --ccsec-pad: 20px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--ccsec-gap);
  width: 100%;
  overflow: visible;
}

/* the resting line and, on top of it, the light that draws it */
.ccsec .ccsec-tl::before,
.ccsec .ccsec-tl::after {
  content: "";
  position: absolute;
  left: calc(var(--ccsec-pad) + var(--ccsec-node) / 2);
  top: calc(var(--ccsec-node) / 2 - 1px);
  width: calc((100% - 2 * var(--ccsec-pad)) * 2 / 3 + 2 * var(--ccsec-gap) / 3);
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.ccsec .ccsec-tl::before {
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(215, 220, 232, 0.05) 0%,
    rgba(215, 220, 232, 0.20) 34%,
    rgba(255, 142, 43, 0.22) 100%);
}
.ccsec .ccsec-tl::after {
  z-index: 1;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s linear;
  background: linear-gradient(90deg,
    rgba(255, 142, 43, 0.20) 0%,
    rgba(255, 142, 43, 0.72) 76%,
    #ffd7ab 100%);
  box-shadow: 0 0 14px rgba(255, 142, 43, 0.40);
}
.ccsec .ccsec-tl.ccsec-lit::after {
  transform: scaleX(1);
}

/* the block under a node: room for the node, then title and sentence */
.ccsec-tl .ccsec-step {
  position: relative;
  overflow: visible;
  padding: calc(var(--ccsec-node) + 22px) 8px 0 0;
}

/* the node itself. It starts as a hollow ring with a silver figure and
 * fills with the orange gradient of the page once the light reaches it,
 * which is what the three delays below are for. */
.ccsec-tl .ccsec-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: var(--ccsec-node);
  height: var(--ccsec-node);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
  /* The fill is a colour that travels and a sheen that stays. A browser
   * hands a background image straight over at the start of a transition
   * instead of blending it, which would have made all three nodes light
   * up at once and left the three delays below with nothing to hold
   * back. So the light to dark modelling of the orange circles on this
   * page sits in a fixed overlay, and only the colour underneath moves.
   * Measured against the Why CartCraft circles the two are within a few
   * per cent of each other at this size. */
  background-color: rgba(255, 255, 255, 0.045);
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.13) 0%, rgba(0, 0, 0, 0.13) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 0 rgba(206, 89, 4, 0);
  transition: color 0.45s ease, background-color 0.5s ease,
              border-color 0.5s ease, box-shadow 0.5s ease;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ccsec-tl .ccsec-s1::before { content: "01"; transition-delay: 0.05s; }
.ccsec-tl .ccsec-s2::before { content: "02"; transition-delay: 0.72s; }
.ccsec-tl .ccsec-s3::before { content: "03"; transition-delay: 1.38s; }

.ccsec-tl.ccsec-lit .ccsec-step::before {
  color: #12182b;
  background-color: #EE7D1A;
  border-color: rgba(255, 162, 77, 0.85);
  box-shadow: 0 6px 18px rgba(206, 89, 4, 0.35);
}

/* title and sentence stay above the line and the node */
.ccsec-tl .ccsec-step > .elementor-element {
  position: relative;
  z-index: 3;
}


/* The rim glow of the effect layer is handed out by class name, and the
 * three steps gave that class back when they stopped being cards: a ring
 * around an open block would redraw the frame the timeline replaces. The
 * two overlay layers are switched off here as well, because the aura of
 * the third step reaches 36px past its column and, measured at 1440px,
 * pushed the page four pixels wider than the window. Section level, so
 * the block stays clean whatever the shared class list does later.  */
.ccsec-tl .ccsec-step > .mmrb-glowcard__edge,
.ccsec-tl .ccsec-step > .mmrb-glowcard__fill {
  display: none;
}


/* --------------------------------------------------------------------
 * THE TIMELINE, UPRIGHT
 *
 * Below 900px three columns would leave about 280px per step, which is
 * two words per line. The timeline turns upright there: nodes in a
 * column on the left, the connector between two nodes drawn by the upper
 * one, title and sentence to the right of it. The connector belongs to
 * the step and not to the row, because a stack of blocks of different
 * height has no single distance a shared line could span.
 * -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ccsec .ccsec-tl {
    --ccsec-node: 44px;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ccsec .ccsec-tl::before,
  .ccsec .ccsec-tl::after {
    content: none;
  }
  .ccsec-tl .ccsec-step {
    padding: 0 0 28px calc(var(--ccsec-node) + 18px);
    min-height: var(--ccsec-node);
  }
  .ccsec-tl .ccsec-step::before {
    font-size: 15px;
  }
  .ccsec-tl .ccsec-s1::before { transition-delay: 0.05s; }
  .ccsec-tl .ccsec-s2::before { transition-delay: 0.62s; }
  .ccsec-tl .ccsec-s3::before { transition-delay: 1.19s; }

  .ccsec-tl .ccsec-step::after {
    content: "";
    position: absolute;
    left: calc(var(--ccsec-node) / 2 - 1px);
    top: var(--ccsec-node);
    bottom: 0;
    z-index: 1;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
      rgba(255, 142, 43, 0.55) 0%,
      rgba(215, 220, 232, 0.16) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.52s linear;
    pointer-events: none;
  }
  .ccsec-tl .ccsec-s1::after { transition-delay: 0.10s; }
  .ccsec-tl .ccsec-s2::after { transition-delay: 0.67s; }
  .ccsec-tl .ccsec-s3::after { content: none; }
  .ccsec-tl.ccsec-lit .ccsec-step::after {
    transform: scaleY(1);
  }
  .ccsec-tl .ccsec-step:last-child {
    padding-bottom: 0;
  }
}

/* On a tablet the upright layout leaves a wide empty margin to the right
 * of every sentence, because the paragraphs carry a fixed measure of
 * 380px from the wide layout, where the column really was that narrow.
 * Between the phone and the row the column is two to three times as
 * wide, so the measure is allowed to grow with it. The phone keeps its
 * own value, which the page sets below 768px anyway.
 *
 * Written into the variable the page builder uses for a widget of its
 * own width, not into width and max-width: those two are set from
 * several places at once and the last word is not always the one with
 * the most class names. The variable has exactly one writer. */
@media (min-width: 768px) and (max-width: 900px) {
  .ccsec-tl .ccsec-step > .elementor-element {
    --container-widget-width: 560px;
  }
}


/* --------------------------------------------------------------------
 * The pill under the timeline. Its look comes from the element settings,
 * the same ones the References pill on this page carries. Only the
 * distance to the last line of the timeline is set here, because on the
 * upright layout the last step ends flush and needs a little more air.
 * -------------------------------------------------------------------- */
.ccsec .ccsec-cta .elementor-button {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .ccsec .ccsec-cta .elementor-button {
    white-space: normal;
  }
}


/* --------------------------------------------------------------------
 * Without scripting the line never gets its cue, so it is drawn in full
 * and every node is lit from the start. Same for a visitor who asked the
 * system for less movement: end state, no travel.
 * -------------------------------------------------------------------- */
@media (scripting: none) {
  .ccsec .ccsec-tl::after { transform: scaleX(1); }
  .ccsec-tl .ccsec-step::after { transform: scaleY(1); }
  .ccsec-tl .ccsec-step::before {
    color: #12182b;
    background-color: #EE7D1A;
    border-color: rgba(255, 162, 77, 0.85);
    box-shadow: 0 6px 18px rgba(206, 89, 4, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccsec .ccsec-tl::after,
  .ccsec-tl .ccsec-step::after,
  .ccsec-tl .ccsec-step::before {
    transition: none;
    transition-delay: 0s;
  }
}