/* ====================================================================
 * THE RULES BLOCK OF THE IT SECURITY LANDING PAGE (.ccxrules-grid)
 *
 * The block names the regulations that reach a supplier through the
 * companies it sells to. It used to be one note box with an orange bar
 * on its left edge and two paragraphs of running text inside it. It is
 * three cards now, one per regulation, each with a badge saying who the
 * rule arrives through, a short paragraph and the source it comes from.
 *
 * Almost everything the cards look like sits in the Elementor settings
 * of the elements themselves, where the rest of this page keeps its
 * look: fill, frame, radius, padding, type and colour. The type size of
 * the card titles is one of those and was raised in the page data, not
 * here. Five pieces cannot live in the panel and are the reason this
 * file exists.
 *
 *   The grid. An Elementor container is a flex column, and three cards
 *   of unequal text length in a flex row do not share the width evenly
 *   or end at the same height.
 *
 *   The badge. The setting panel has no pill, only a heading. The shape
 *   has to be drawn on the inner title element, because the widget box
 *   around it is as wide as the card and a pill that wide is a bar. The
 *   slow breath the three pills carry is an animation, and the panel
 *   has no keyframes either.
 *
 *   The source at the foot of a card, which is a pill rather than an
 *   underlined line of text. Its shape and its colour have to be
 *   written against the anchor, which the colour setting of a heading
 *   does not reach, and the line has to be pushed to the bottom of the
 *   card so the three pills stand on one baseline no matter how long
 *   the paragraphs above them run.
 *
 *   The surface of a card: a warm corner light and a dot raster, drawn
 *   underneath the text so the card reads as a lit object rather than
 *   as a flat rectangle. Neither is a background the panel can hold,
 *   because the panel already holds the fill colour on the same
 *   element.
 *
 *   The width of the rim aura, which the effect layer measures in a
 *   value the setting panel knows nothing about.
 *
 * Nothing here is bound to a page id. The class names say what the
 * element is, and the two rules that need weight against the container
 * defaults of the page builder carry the section class .ccsec as well,
 * the same lever the timeline in ccx-security.css uses.
 * ==================================================================== */


/* --------------------------------------------------------------------
 * Three cards side by side
 *
 * The gap is not set here. It comes from the flex gap of the container
 * in the page data, which the browser applies to a grid as readily as
 * to a flex row, so the editor keeps a handle on the spacing and this
 * file does not have to fight the value the panel writes.
 *
 * align-items: stretch is what makes the three cards end on the same
 * line. Without it every card is only as tall as its own text, and the
 * paragraphs differ by a line or two.
 * -------------------------------------------------------------------- */
.ccsec .ccxrules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  width: 100%;
}

/* The card fills the track it was given. The grid stretches the item,
 * this passes that height on to the card box itself, which is what the
 * foot line below hangs its position on. */
.ccsec .ccxrules-card {
  height: 100%;
}

/* The rim of the effect layer is hung on a box that reaches --gc-pad past
 * the card on every side, 36px by default. Here it sits exactly on the
 * card, and both reasons for that are worth writing down.
 *
 * The one that decides it: this section is boxed to 1416px and carries no
 * padding left or right, so the outer card ends where the page ends. Any
 * width above zero puts the rim box past the right edge of the document
 * and the browser answers with a horizontal scrollbar. Measured on the
 * staging copy at 1440px: with 20px the page scrolled 1448px wide, with
 * zero it stops at the viewport. A value that only works on some screen
 * widths is not a value.
 *
 * The one that makes it right anyway: these cards have a visible 1px
 * frame. At zero the rim traces that frame instead of drawing a second
 * outline beside it, which is the same reading the pillar cards of the
 * home page were given.
 *
 * The soft light around the card does not depend on this. It is painted
 * with box shadows, which reach as far as they like without ever adding
 * to the width of the document.
 *
 * Written for every width. Below 1024px ccfx-v3.css sets the same value
 * for every glow card on the site; this only says it earlier and says it
 * for the wide screens too. */
.ccxrules-card {
  --gc-pad: 0px;
}


/* --------------------------------------------------------------------
 * THE SURFACE OF A CARD
 *
 * A card of this size with a short badge, a title and four or five
 * lines of text leaves a wide quiet area at its foot, and a quiet area
 * on a dark background reads as empty rather than as calm. This is the
 * same problem the idea cards of the home page have, and it is answered
 * the same way: something faint is drawn into the surface and fades out
 * long before it reaches the words.
 *
 * Two layers, and they sit in two different places for a reason.
 *
 * THE CORNER LIGHT is the background image of the card itself. The
 * panel writes the fill of these cards as background-color, a separate
 * property, so a background-image written here lands next to it instead
 * of over it and the editor keeps its handle on the colour. Painted as
 * part of the background of the element, it lies under everything,
 * which is where a tint of the surface belongs: the hover spotlight of
 * the effect layer passes over it rather than under it.
 *
 * It comes from the top right because that is the corner the light of
 * this page comes from everywhere else, and it is orange at six and a
 * half percent, warm enough to be felt on the navy and too weak to be
 * named as a colour. It is gone by 62 percent of the way across, so it
 * never reaches the paragraph.
 *
 * THE DOT RASTER is an ::after. It cannot join the corner light in the
 * background of the card, because it needs a mask to fade out and a
 * mask applies to the whole box rather than to one background layer,
 * which would take the corner light with it.
 *
 * ::after and not ::before: Elementor keeps .e-con::before for the
 * background overlay of a container, and taking that over would break
 * the day somebody sets an overlay on one of these cards from the
 * panel. ::after is free on containers, the editor only uses it deep
 * inside its own overlay markup.
 *
 * z-index -1 puts the raster in the same band as the spotlight span the
 * effect layer hangs in the card: above the fill of the card, below
 * every word. The card carries isolation: isolate from the glow engine,
 * so it is a stacking context of its own and a negative index stays
 * inside it instead of falling through to the section behind.
 *
 * One pixel marks at nine percent white on a 16px pitch, the raster of
 * the home page at a slightly quieter setting: these cards are smaller
 * and carry a visible frame, so the drawing has less room to be a
 * texture and more chance to be read as dirt.
 *
 * The mask gathers the raster in the bottom right corner and lets it go
 * before the middle of the card. That corner is the one the text leaves
 * alone: the badge and the title sit top left, the source pill stands
 * at the foot on the left, and the last line of a paragraph almost
 * never runs the full width. Nothing is drawn where anything is read.
 *
 * pointer-events: none so the raster never takes a click meant for the
 * source pill underneath it, and border-radius: inherit so it is cut by
 * the same 16px corner as the card.
 * -------------------------------------------------------------------- */
.ccxrules-card {
  background-image: radial-gradient(115% 85% at 100% 0%,
                      rgba(255, 142, 43, 0.065) 0%,
                      rgba(255, 142, 43, 0) 62%);
}

.ccxrules-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px,
                                    transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(118% 92% at 100% 100%, #000 0%,
                        rgba(0, 0, 0, 0.55) 30%, transparent 66%);
  mask-image: radial-gradient(118% 92% at 100% 100%, #000 0%,
                rgba(0, 0, 0, 0.55) 30%, transparent 66%);
}


/* --------------------------------------------------------------------
 * The badge above the title
 *
 * Same geometry as the chips further down the page (.ccstep): 12px
 * type in a 999px pill, 4px over and under, 11px left and right. The
 * surface stays the faint white of those chips, the hair line and the
 * type turn orange, which is what marks these three as the regulation
 * cards rather than one more row of tags.
 *
 * inline-flex, not inline-block: it shrinks the pill to its text inside
 * a widget box that is as wide as the card, and it centres the line in
 * the pill without a line-height correction.
 * -------------------------------------------------------------------- */
.ccxrules-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 142, 43, 0.35);
  letter-spacing: 0.01em;
}


/* --------------------------------------------------------------------
 * The breath in the badge
 *
 * The same signal the status badge of the reference cards carries, in
 * the orange of this page instead of the green of an availability dot:
 * the rim warms up, a ring spreads out of the pill and fades as it
 * goes, and the fill takes a hint of the colour. The 2.4s rhythm is
 * taken from there unchanged, so a reader who has seen the other page
 * reads this as the same kind of marker rather than as a new one.
 *
 * The resting frame of the keyframe is written to the same two values
 * the rule above sets, a 35 percent orange hair line over a five
 * percent white fill. If they ever drift apart the pill jumps at the
 * start of every cycle, which is the one way this effect can look
 * broken.
 *
 * The ring peaks at 30 percent and the outer glow at 30 percent as
 * well. Both stay under the third that the reference badge uses,
 * because three of these pills stand next to each other here while the
 * reference page shows one at a time, and three synchronous flashes at
 * full strength read as an alarm rather than as a pulse.
 *
 * The spread values are what makes it a ring and not a blink: the
 * shadow starts at zero spread with colour in it and ends at 5px of
 * spread with none, so the edge travels outward while it disappears.
 *
 * Nothing here changes the size of anything. box-shadow and colour are
 * both outside the layout, so the three cards keep the heights the grid
 * gave them while the badges move.
 * -------------------------------------------------------------------- */
.ccxrules-eyebrow .elementor-heading-title {
  animation: ccxrules-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes ccxrules-badge-pulse {
  0%, 100% {
    border-color: rgba(255, 142, 43, 0.35);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 0 rgba(255, 142, 43, 0.30), 0 0 0 rgba(255, 142, 43, 0);
  }
  50% {
    border-color: rgba(255, 142, 43, 0.72);
    background-color: rgba(255, 142, 43, 0.08);
    box-shadow: 0 0 0 5px rgba(255, 142, 43, 0), 0 0 14px rgba(255, 142, 43, 0.30);
  }
}

/* The three pills are pulled out of step with each other, otherwise the
 * row blinks as one block and the eye reads a warning light.
 *
 * The step is a third of the cycle, 0.8s of 2.4s, which puts the three
 * badges at 0, 120 and 240 degrees and is the widest any three points
 * can sit apart on one circle. A smaller step, a sixth of the cycle
 * say, leaves the first and the last badge only a sixth apart and they
 * still read as moving together, which is the thing being avoided.
 *
 * The offsets are negative on purpose. A positive delay would hold the
 * second and third badge at their resting frame for the best part of a
 * second after the section scrolls into view, so the row would start
 * synchronous and only drift apart afterwards, which is the opposite of
 * what the stagger is for. A negative delay starts the animation
 * already part way through its cycle, so the three are out of phase
 * from the first painted frame.
 *
 * Counted on the position in the grid rather than on a widget id: the
 * cards are interchangeable and a fourth regulation added later should
 * fall into the rhythm without anyone editing this file. */
.ccxrules-grid > .ccxrules-card:nth-child(2) .ccxrules-eyebrow .elementor-heading-title {
  animation-delay: -0.8s;
}
.ccxrules-grid > .ccxrules-card:nth-child(3) .ccxrules-eyebrow .elementor-heading-title {
  animation-delay: -1.6s;
}

/* A reader who asked the system for less movement gets the pill at its
 * resting frame and nothing else. The rule above already paints that
 * state, so switching the animation off is the whole fix. */
@media (prefers-reduced-motion: reduce) {
  .ccxrules-eyebrow .elementor-heading-title { animation: none; }
}


/* --------------------------------------------------------------------
 * The source at the foot of a card
 *
 * margin-top: auto pushes the line to the bottom of the card. The card
 * is a flex column, so the free space left over by a short paragraph
 * collects above this line instead of below it, and the three sources
 * end up on one baseline. The widget carries no margin of its own in
 * the page data, otherwise the panel would write a fixed value over
 * this one. Both spellings are set because the page builder writes the
 * logical property and a browser that only knows the physical one has
 * to arrive at the same place.
 *
 * The padding, not a margin, is what holds the line away from the
 * paragraph: a margin would be eaten by the auto above it.
 *
 * The colour is written against the anchor, and the selector is longer
 * than it looks like it needs to be. Elementor keeps a rule of its own
 * for links inside a heading:
 *
 *   .elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] > a
 *     { color: inherit }
 *
 * Two classes, an attribute and an element, and it wins against any
 * shorter selector no matter which stylesheet is loaded later. The
 * anchor then inherits the colour of the heading, which here is the
 * faint grey the title of the widget is set to, and the link stops
 * looking like a link. Naming the title element as well puts one class
 * more on our side and settles it without an !important.
 *
 * Worth knowing beyond this file: the same rule quietly beats
 * "selector .ccsecp-src a" in the page css of this page, which is why
 * the source line under the old note box was never the brighter grey it
 * was written to be. Its hover was, because a hover pseudo class adds
 * the weight the resting state was missing.
 * -------------------------------------------------------------------- */
.ccxrules-card .ccxrules-src {
  margin-top: auto;
  margin-block-start: auto;
  padding-top: 10px;
}

/* The pill itself.
 *
 * inline-flex and not inline-block, for the same reason as the badge
 * above: it shrinks the shape to the words inside a widget box that is
 * as wide as the card, and it puts the text and the chevron on one
 * centre line without a line-height correction.
 *
 * The frame is the neutral hair line of the site rather than an orange
 * one. These three are the quietest thing in the card and stay that way
 * until the pointer arrives; an orange frame at rest would compete with
 * the badge at the top, which is the element that is supposed to carry
 * the colour.
 *
 * The underline goes. A pill and an underline together read as two
 * different ways of saying the same thing, and the shape already says
 * the words can be clicked. */
.ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.03);
  color: #FFFFFFB0;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease,
              background-color .2s ease, box-shadow .2s ease;
}

/* The chevron at the right hand end.
 *
 * Drawn rather than typed. A unicode arrow would come out of whatever
 * font happens to hold that glyph, sits on the text baseline instead of
 * on the optical centre of the pill, and cannot be moved on hover
 * without moving the words with it. Two borders on an empty square,
 * turned by 45 degrees, give a chevron that is made of the same colour
 * as the label through currentColor and follows it into orange on its
 * own.
 *
 * flex: 0 0 auto keeps the square out of the flex arithmetic, so a long
 * label wraps before the chevron is squashed. */
.ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a::after {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.75;
  transition: transform .2s ease, opacity .2s ease;
}

/* Under the pointer the pill takes the colour of the page and lifts off
 * the card on a soft orange shadow. The 1px spread underneath the wide
 * shadow is what keeps the frame readable while the glow is on: without
 * it the border and the halo blur into one another. */
.ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a:hover,
.ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a:focus-visible {
  color: #FFB765;
  border-color: rgba(255, 142, 43, 0.55);
  background-color: rgba(255, 142, 43, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 142, 43, 0.12),
              0 4px 16px rgba(255, 142, 43, 0.16);
}

/* The chevron steps to the right by one and a half pixels.
 *
 * The translate is written after the rotation, so it runs in the turned
 * coordinate system: a (1px, 1px) move in a frame rotated by minus 45
 * degrees comes out as roughly 1.4px straight to the right on screen,
 * which is the direction the chevron points. Writing the move in screen
 * pixels instead would need the rotation repeated around it. */
.ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a:hover::after,
.ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a:focus-visible::after {
  transform: rotate(-45deg) translate(1px, 1px);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a::after {
    transition: none;
  }
}


/* --------------------------------------------------------------------
 * Narrower screens
 *
 * At two columns the third card takes the full width of the row rather
 * than leaving a hole next to it. This is the same shape the step cards
 * and the deliverable cards on this page fall into, so the page keeps
 * one rhythm as it narrows.
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ccsec .ccxrules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccsec .ccxrules-grid > .ccxrules-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .ccsec .ccxrules-grid {
    grid-template-columns: 1fr;
  }
  .ccsec .ccxrules-grid > .ccxrules-card:last-child {
    grid-column: auto;
  }
}