/* ====================================================================
 * QUESTIONS BLOCK OF THE IT SECURITY LANDING PAGE (.ccsecp-faq)
 *
 * The block used to be a wall of text: two columns, six questions, every
 * answer printed underneath its question, separated by hair lines. It is
 * a list of openers now. Each row shows its question, the answer folds
 * out underneath when the row is opened, and the first row stands open so
 * the block never starts as six closed doors.
 *
 * WHAT A ROW LOOKS LIKE, AND WHY IT CHANGED
 *
 * A row used to be two hair lines and the space between them. That is not
 * what a question looks like anywhere else on this site: the list at the
 * foot of /process-tools/ draws each question as a card, and next to it
 * this block read as an unfinished draft of the same thing.
 *
 * So a row is a card here as well, and it is the same card, measured off
 * the rendered page of /process-tools/ rather than guessed at:
 *
 *   fill      rgba(255,255,255,.02), rgba(255,255,255,.043) while open
 *   frame     1px solid rgb(44,51,76)
 *   radius    16px
 *   gap       12px between two cards
 *   question  19px/26px at 700, rgba(255,255,255,.87), white while open
 *   padding   20px above and below, 24px either side
 *   sign      the accent orange at the right edge, 24px in
 *   answer    24px either side, 22px underneath
 *
 * Each of those values is named again at its rule, with the reference
 * value beside it, so the next person to open either file can see at a
 * glance whether the two lists have drifted apart.
 *
 * Three things the other list does are drawn here too, because they are
 * what tells an open card from a closed one over there: an orange rail
 * down the left edge, a hair line between question and answer, and a
 * surface that lifts slightly with a shadow under it.
 *
 * THE HAIR LINE THAT USED TO BE THE ROW
 *
 * The top line of every row is drawn in the custom css of the page, on
 * .ccsecp-faqitem::before, and that stylesheet is not opened from here.
 * The line is not switched off either. The same pseudo element is given
 * the geometry of the rail instead, which settles on four class names
 * against the two of the page rule and leaves nothing behind that could
 * still draw a line across the top of a card.
 *
 * WHAT IS GATED BEHIND THE SCRIPT
 *
 * A reader without javascript has to be able to read all six answers, and
 * a crawler has to find them in the page. So the folding lives entirely
 * behind two classes that only assets/ccx-seclp-faq.js hands out:
 *
 *   .ccsecp-faqjs   on the section, once the rows are wired up
 *   .ccsecp-faqopen on a row that is open
 *
 * Without the script neither exists, no folding rule bites, and the block
 * renders as one readable column of six cards with every answer visible.
 * The cards themselves are deliberately outside that gate: a card is a
 * look, not an interaction, and a reader without a script should not be
 * handed the draft version of the page. Which is why the padding of a row
 * sits on the row by default and is moved onto the question only once the
 * script has turned the question into the control.
 *
 * WHY max-height AND NOT THE NICER TRICKS
 *
 * Rows are of different heights and none of them is known in advance.
 * grid-template-rows going from 0fr to 1fr is the prettier mechanism but
 * needs a fixed track to animate against and collapses on content that
 * sizes itself. So max-height it is, with the real height written onto
 * the element by the script for the length of the movement and taken off
 * again afterwards, so a resize or a late font can never leave an open
 * answer clipped.
 * ==================================================================== */


.ccsec.ccsecp-faq .ccsecp-faqgrid {
  /* 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. Same value as
     the other list. */
  --ccfaq-rail-inset: 18px;
  --ccfaq-rail-width: 2px;

  /* The frame of a card, and the frame it turns into under the pointer.
     rgb(44,51,76) is the measured frame of the other list; the second is
     one clear step up in the same blue, so a row answers the pointer
     without changing colour. */
  --ccfaq-frame: rgb(44, 51, 76);
  --ccfaq-frame-lit: rgb(66, 76, 110);
}


/* --------------------------------------------------------------------
 * The column
 *
 * One column, centred, capped at a width that keeps a line of answer
 * text readable instead of running the full 1416px of the section.
 *
 * Two class names on the section put this above the two column grid in
 * the page css, at every screen width, so the rule there can stay where
 * it is and keep doing nothing.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faq .ccsecp-faqgrid {
  display: block;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------
 * The card
 *
 * Fill, frame, radius and the gap underneath are the four values that
 * decide whether this reads as the same component as the list on
 * /process-tools/, and all four are that list, measured:
 *
 *   background-color  rgba(255,255,255,.02)
 *   border            1px solid rgb(44,51,76)
 *   border-radius     16px
 *   margin-bottom     12px
 *
 * The inset hair line at the top is the fifth. It is what keeps a flat
 * fill from looking like a hole: one row of pixels of white at four per
 * cent along the upper edge, under the frame, which reads as light
 * falling on the card from above.
 *
 * The padding sits on the card while there is no script, and moves onto
 * the question the moment there is one. In the folded version the whole
 * padded height of a closed row has to be part of the control rather
 * than dead space around it, which is also what carries the touch
 * target: 20px above and below a 26px line is a 66px row.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqitem {
  position: relative;
  padding: 20px 24px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ccfaq-frame);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqitem + .ccsecp-faqitem {
  margin-top: 12px;
}

/* With the script the padding belongs to the question, so that the padded
 * area is clickable rather than a margin around something clickable. */
.ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqitem {
  padding: 0;
}

/* The open card stands a little in front of the closed ones. Faint on
 * purpose: the frame, the rail and the hair line already say which one is
 * open, this only gives the answer a surface to sit on. Both values are
 * the ones the other list uses. */
.ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqopen {
  background-color: rgba(255, 255, 255, 0.043);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

/* Under the pointer the card brightens by one step and its frame comes
 * up, with a wide, very quiet bloom around it. Everything is drawn on the
 * card itself and nothing reaches past its edge, which is the whole point
 * of doing it this way: the wash this replaced hung 20px off either side
 * of the row and put a horizontal scrollbar on the page at 768px.
 *
 * :focus-within rather than a second :focus-visible chain, so a card
 * whose question has the keyboard focus lights up the same way. */
.ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqitem:hover,
.ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqitem:focus-within {
  background-color: rgba(255, 255, 255, 0.055);
  border-color: var(--ccfaq-frame-lit);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 22px rgba(150, 175, 255, 0.07);
}

.ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqopen:hover,
.ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqopen:focus-within {
  background-color: rgba(255, 255, 255, 0.065);
  border-color: var(--ccfaq-frame-lit);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(150, 175, 255, 0.07);
}


/* --------------------------------------------------------------------
 * The rail on the open card
 *
 * An orange line down the left edge, the same mark the other list draws
 * and the same mark the note boxes of this site use. It grows from the
 * top rather than fading in, so the eye follows it down into the answer.
 *
 * This is the pseudo element the page css uses for the top hair line of a
 * row. It is given the geometry of a rail here instead of being switched
 * off, so there is no state in which the old line can come back: the page
 * rule is body.elementor-page-21300 .ccsecp-faqitem::before, two class
 * names, and the chain below carries four.
 *
 * Every property the page rule sets is answered: top, right and height
 * are what turn a line across the top into a line down the side.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqitem::before {
  content: "";
  position: absolute;
  top: var(--ccfaq-rail-inset);
  bottom: var(--ccfaq-rail-inset);
  left: 0;
  right: auto;
  width: var(--ccfaq-rail-width);
  height: auto;
  border-radius: 0 var(--ccfaq-rail-width) var(--ccfaq-rail-width) 0;
  background: linear-gradient(180deg, #FFA24D 0%, #CE5904 100%);
  opacity: 0;
  transform: scaleY(.3);
  transform-origin: 50% 0;
  transition: opacity .3s ease, transform .42s cubic-bezier(.2, .85, .3, 1);
  pointer-events: none;
  z-index: 2;
}

.ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqopen::before {
  opacity: 1;
  transform: scaleY(1);
}


/* --------------------------------------------------------------------
 * The question, which is the control
 *
 * 19px/26px at 700 is the question of the other list, measured, and the
 * two colours are its two colours: rgba(255,255,255,.87) closed, white
 * while open or under the pointer. The size is set here rather than left
 * to the widget because the question stopped being a heading in a text
 * block and became the face of a control.
 *
 * Three of the four insets are the reference: 20px above, 20px below,
 * 24px on the left. The fourth is not, and cannot be. Over there the
 * question and the sign are two items of one flex row, so the sign takes
 * its own width out of the line and the text of a long question wraps
 * before it. Here the sign is placed over the question, so the room it
 * needs has to be reserved as padding: 24px of card edge, 15px of sign,
 * 15px of air. The reader sees the same thing either way, which is a
 * question that ends before the sign begins.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faqjs .ccsecp-faqq {
  position: relative;
  padding: 20px 54px 20px 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The widget brings 8px under the question. That gap belongs to the open
 * state now, where the padding of the question already provides it, and
 * would otherwise sit under a closed row and push its bottom out. */
.ccsec.ccsecp-faqjs .ccsecp-faqitem .ccsecp-faqq > .elementor-widget-container {
  margin: 0;
}

.ccsec.ccsecp-faqjs .ccsecp-faqitem .ccsecp-faqq .elementor-heading-title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  color: rgba(255, 255, 255, .87);
  transition: color .22s ease;
}

/* The open row is written against the grid and not against the item: the
 * open class sits on the item itself, so a chain that asks for it inside
 * an item asks for a row inside a row and never matches. It did not
 * match in the hair line version of this block either, which is why the
 * open question there kept the colour of the five closed ones. Both
 * chains carry five class names, and this one comes second. */
.ccsec.ccsecp-faqjs .ccsecp-faqitem .ccsecp-faqq:hover .elementor-heading-title,
.ccsec.ccsecp-faqjs .ccsecp-faqitem .ccsecp-faqq:focus-visible .elementor-heading-title,
.ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqopen .ccsecp-faqq .elementor-heading-title {
  color: #FFFFFF;
}

/* The hair line 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. Inset 24px either side, the same
 * inset the other list uses, so it starts and ends with the text. */
.ccsec.ccsecp-faqjs .ccsecp-faqq::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 .3s ease;
  pointer-events: none;
}

.ccsec.ccsecp-faqjs .ccsecp-faqopen .ccsecp-faqq::after {
  opacity: 1;
}

/* The keyboard has to see where it is. The ring traces the card rather
 * than the text inside it: the question fills the card, so an outline
 * pulled one pixel inwards sits on the frame, and the radius is the
 * radius of the card less that pixel. */
.ccsec.ccsecp-faqjs .ccsecp-faqq:focus-visible {
  outline: 2px solid rgba(255, 142, 43, .85);
  outline-offset: -1px;
  border-radius: 15px;
}


/* --------------------------------------------------------------------
 * The sign
 *
 * A plus in the accent orange at the right edge, which is the sign the
 * other list carries. There it is two icons that swap, a plus and a
 * minus; here it is one plus whose upright stroke turns a quarter and
 * lies down on the flat one, which reads as the same thing happening and
 * survives a paint of the row without a swap.
 *
 * Pinned to the first line of the question rather than to the middle of
 * the row, so a question that wraps does not leave it floating between
 * two lines. Full orange from the start: an accent that only appears on
 * hover leaves a closed list looking like plain text.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faqjs .ccsecp-faqmark {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 26px;
  color: #FF8E2B;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.2, .85, .3, 1);
}

/* 15px is the box the sign of the other list occupies, and 24px from the
 * inner edge of the card puts it exactly where that one sits. */
.ccsec.ccsecp-faqjs .ccsecp-faqmark svg {
  display: block;
  width: 15px;
  height: 15px;
  overflow: visible;
}

/* Named faqsign and not faqbar: the line above the list already holds
 * that name, and two things called bar in one block is how the wrong one
 * gets restyled a year from now. */
.ccsec.ccsecp-faqjs .ccsecp-faqsign {
  fill: none;
  stroke: currentColor;
  /* 2.8 units in a 16 unit box drawn at 15px is a 2.6px stroke, and the two
     paths plus their caps come out 13.1px across. The plus of the other
     list is a solid glyph 13.1px across with 2.8px bars. */
  stroke-width: 2.8;
  stroke-linecap: round;
}

/* The upright stroke is the only thing that moves. transform-box is
 * stated because Safari read transform-origin against the border box of
 * the element for years, which would swing the stroke out of the icon
 * instead of turning it on the spot. */
.ccsec.ccsecp-faqjs .ccsecp-faqsignup {
  transform-box: view-box;
  transform-origin: 8px 8px;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}

.ccsec.ccsecp-faqjs .ccsecp-faqopen .ccsecp-faqsignup {
  transform: rotate(90deg);
}

/* The plus grows a little while the pointer is on its question, the same
 * 1.14 the other list uses. An open row keeps its sign at rest: the minus
 * is a state, not an invitation. */
.ccsec.ccsecp-faqjs .ccsecp-faqq:hover .ccsecp-faqmark,
.ccsec.ccsecp-faqjs .ccsecp-faqq:focus-visible .ccsecp-faqmark {
  transform: scale(1.14);
}

.ccsec.ccsecp-faqjs .ccsecp-faqopen .ccsecp-faqq:hover .ccsecp-faqmark,
.ccsec.ccsecp-faqjs .ccsecp-faqopen .ccsecp-faqq:focus-visible .ccsecp-faqmark {
  transform: none;
}


/* --------------------------------------------------------------------
 * The answer
 *
 * Closed it is a box of no height with its overflow cut off, which keeps
 * the text in the page for anything that reads the page instead of
 * looking at it. Open it is given its measured height by the script for
 * the length of the movement.
 *
 * The gap between question and answer is the bottom padding of the
 * question, so nothing has to be animated at the top edge and the text
 * does not creep downwards while the row opens. 24px either side and
 * 22px underneath are the insets of the other list.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faqjs .ccsecp-faqa {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height .34s cubic-bezier(.22, .61, .36, 1),
    padding-bottom .34s cubic-bezier(.22, .61, .36, 1),
    opacity .26s ease;
}

.ccsec.ccsecp-faqjs .ccsecp-faqopen .ccsecp-faqa {
  padding-bottom: 22px;
  opacity: 1;
}

/* The type of the answer, which is the type of the other list: 16px on a
 * 25px line at rgba(255,255,255,.56). The answer is the payload of the
 * row and is read once it has been opened, not skimmed like the six
 * questions above it. */
.ccsec.ccsecp-faq .ccsecp-faqitem .ccsecp-faqa .elementor-heading-title {
  font-size: 16px;
  line-height: 25px;
  color: rgba(255, 255, 255, .56);
}

/* The widget carries a margin under the paragraph. Underneath it sits the
 * padding of the open row, and the two together would make the space
 * below the answer twice the space above it. */
.ccsec.ccsecp-faqjs .ccsecp-faqitem .ccsecp-faqa > .elementor-widget-container {
  margin: 0;
}


/* --------------------------------------------------------------------
 * Open all, close all
 *
 * Six rows do not need a search field, they need one line that lets
 * somebody who wants the whole page have it in one click, and lets
 * somebody who lost the overview fold it back up. It is a text link, in
 * the silver of the page, right above the list and flush with its right
 * edge, and it is drawn quietly enough that it never competes with the
 * first question underneath it.
 *
 * It is written into the page by the script, so it is not there for a
 * reader who has no script to run it with.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faq .ccsecp-faqbar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 10px;
  padding: 0 20px;
}

.ccsec.ccsecp-faq .ccsecp-faqall {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #D7DCE8;
  opacity: .62;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity .22s ease, color .22s ease;
}

.ccsec.ccsecp-faq .ccsecp-faqall:hover,
.ccsec.ccsecp-faq .ccsecp-faqall:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.ccsec.ccsecp-faq .ccsecp-faqall:focus-visible {
  outline: 2px solid rgba(255, 142, 43, .85);
  outline-offset: 3px;
  border-radius: 6px;
}


/* --------------------------------------------------------------------
 * The first frame
 *
 * The script sets the opening state of the rows the moment it runs, which
 * is after the page has already been painted once. Without this the fill
 * of the row that starts open, its rail, its hair line and its sign would
 * all animate on load, and the block would twitch at a reader who has not
 * touched it. The class is taken off again on the frame after, by which
 * point there is nothing left to animate.
 * -------------------------------------------------------------------- */
.ccsec.ccsecp-faqcalm .ccsecp-faqitem,
.ccsec.ccsecp-faqcalm .ccsecp-faqitem::before,
.ccsec.ccsecp-faqcalm .ccsecp-faqa,
.ccsec.ccsecp-faqcalm .ccsecp-faqmark,
.ccsec.ccsecp-faqcalm .ccsecp-faqsignup,
.ccsec.ccsecp-faqcalm .ccsecp-faqq::after,
.ccsec.ccsecp-faqcalm .ccsecp-faqq .elementor-heading-title {
  transition: none !important;
}


/* --------------------------------------------------------------------
 * Phone
 *
 * The card is shorter and its padding smaller, so the rail comes in with
 * it and the question loses a point of size: 19px at 700 across a 350px
 * card is a headline, not a question. 18 above and below a 25px line is a
 * 61px row, which stays clear of the 44px a finger needs.
 *
 * The bar loses its side padding because the grid does too, at the same
 * width, so both keep the same right edge.
 * -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ccsec.ccsecp-faq .ccsecp-faqgrid {
    --ccfaq-rail-inset: 13px;
  }

  .ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqitem {
    padding: 18px 20px;
    border-radius: 14px;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqgrid .ccsecp-faqitem {
    padding: 0;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqq {
    padding: 18px 48px 18px 20px;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqitem .ccsecp-faqq .elementor-heading-title {
    font-size: 18px;
    line-height: 25px;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqq::after {
    left: 20px;
    right: 20px;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqmark {
    top: 18px;
    right: 20px;
    height: 25px;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqa {
    padding: 0 20px;
  }

  .ccsec.ccsecp-faqjs .ccsecp-faqopen .ccsecp-faqa {
    padding-bottom: 20px;
  }

  .ccsec.ccsecp-faq .ccsecp-faqitem .ccsecp-faqa .elementor-heading-title {
    font-size: 15px;
    line-height: 24px;
  }

  .ccsec.ccsecp-faq .ccsecp-faqbar {
    padding: 0;
    margin-bottom: 8px;
  }
}


/* --------------------------------------------------------------------
 * Somebody who asked for less movement
 *
 * The rows still open and close, that is the point of the block. They
 * just do it at once instead of sliding, the rail is simply there instead
 * of growing, and the upright stroke of the sign lies down without the
 * turn. The script notices the same setting and stops measuring heights
 * it no longer needs.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqitem,
  .ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqitem::before,
  .ccsec.ccsecp-faqjs .ccsecp-faqa,
  .ccsec.ccsecp-faqjs .ccsecp-faqmark,
  .ccsec.ccsecp-faqjs .ccsecp-faqsignup,
  .ccsec.ccsecp-faqjs .ccsecp-faqq::after,
  .ccsec.ccsecp-faqjs .ccsecp-faqq .elementor-heading-title,
  .ccsec.ccsecp-faq .ccsecp-faqall {
    transition: none;
  }

  .ccsec.ccsecp-faq .ccsecp-faqgrid .ccsecp-faqopen::before {
    transform: none;
  }
}