/* Kingdom Advisors Elementor Widgets — Card Marquee
   An endlessly scrolling row of text cards. The motion is a GSAP tween on the track (see the JS);
   this file owns layout, the card, the pause button and the three states below.

   Structure:

     .kaw-cmq                        root: flex column, NO gap (see "one root model")
       <noscript><style>             no-JS static rules, scoped by id (widgets/card-marquee.php)
       .kaw-cmq__pause               <button>, FIRST in the DOM, `hidden` until the loop runs
       .kaw-cmq__frame               the clip; with a bleed it widens to the screen edge
         .kaw-cmq__track             created by the JS: the real list + its copies, tweened on x
           .kaw-cmq__list            <ul role="list"> — one copy of the cards
             .kaw-cmq__item          <li>
               .kaw-cmq__card        <div>, or <a> when the card has a link
                 .kaw-cmq__label     <p>
                 .kaw-cmq__body
                   .kaw-cmq__title   h2-h6 / div / p on the real list; ALWAYS a <div> in the copies
                   .kaw-cmq__desc    <p>

   THREE STATES, AND NO LAYOUT SHIFT BETWEEN THE FIRST TWO:
     1. Before JS (motion allowed): one non-wrapping row inside the widget's own box, clipped — the
        first frame minus the bleed — plus, for a pause button BELOW the strip, its space reserved (see
        the pause button), so the height is identical and nothing jumps when the loop starts.
     2. .is-ready.is-running: the bleed margins and the moving track (JS).
     3. Static: .is-static (JS, reduced motion or no GSAP), reduced motion before the JS arrives, or
        the <noscript> rules (no JS at all). Every card stands still and is reachable: wrapping rows
        or one scrollable row (data-static), empty decorative cards hidden, no bleed, no fade, no
        pause button, and no card wider than the widget's box.

   RIGHT TO LEFT: the still layouts and the pre-JS row are ordinary flex rows, so they already run from
   the right; the JS mirrors the loop to match (its note 3). The bleed margins stay physical.

   ONE ROOT MODEL for every state: a flex column with no `gap`. All spacing between the root's
   children is margin on the child, so the zero-size <noscript> item (scripting off) adds nothing, and
   the `hidden` pause button takes no space either. The frame is stretched to the root's width, and
   its negative inline margins widen it: a stretched item's size is the container's inner size minus
   its margins, and subtracting a negative margin adds to it.

   Controlled values arrive as --kaw-cmq-* variables on the root, never as properties a control writes
   onto an element this file also styles. The defaults below are the Kingdom Advisors Figma tokens and
   match the widget's registered defaults (the "stored but empty" safety net: CLAUDE.md, state 2) —
   change one, change the other.

   Minifier hygiene (WP Rocket minifies pack CSS on the Conference site; v1.41.1): every declaration
   with a comma inside var(), calc(), min(), max() or translate() stays on ONE line. */

.kaw-cmq,
.kaw-cmq *,
.kaw-cmq *::before,
.kaw-cmq *::after {
  box-sizing: border-box;
}

.kaw-cmq {
  --kaw-cmq-gap: 40px;
  --kaw-cmq-card-w: 290px;
  --kaw-cmq-card-h: 400px;
  --kaw-cmq-pad-t: 26px;
  --kaw-cmq-pad-r: 40px;
  --kaw-cmq-pad-b: 36px;
  --kaw-cmq-pad-l: 40px;
  --kaw-cmq-radius: 20px;
  --kaw-cmq-bg: #051C2C;
  --kaw-cmq-justify: space-between;
  --kaw-cmq-body-gap: 23px;
  --kaw-cmq-focus: #ECF0F1;
  --kaw-cmq-label: #8BD3E6;
  --kaw-cmq-title: #ECF0F1;
  --kaw-cmq-desc: #8BD3E6;
  --kaw-cmq-fade: 0px;
  --kaw-cmq-start: 0px;
  --kaw-cmq-pause-inset: 20px;
  --kaw-cmq-pause-size: 40px;
  --kaw-cmq-pause-glyph: 12px;
  --kaw-cmq-pause-radius: 50%;
  --kaw-cmq-pause-bg: #051C2C80;
  --kaw-cmq-pause-color: #ECF0F1;
  /* Deliberately NOT declared here, each read with a fallback or only under its gate:
     --kaw-cmq-bleed-l / -r   written by the JS (the measured distance to the screen edge)
     --kaw-cmq-align          Card Heights (empty = stretch)
     --kaw-cmq-bg-hover       Card → Hover (empty = no change)
     --kaw-cmq-pause-bg-hover Pause Button → Hover (empty = no change)
     --kaw-cmq-pause-blur     only read under [data-pause-blur="on"], with no fallback (see there) */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ------------------------------------------------------------------------------------ the frame
   The clip. It has NO background: whatever is behind the strip (a glow, a gradient) must show
   through the gaps between the cards.

   overflow-x: clip, not hidden, where the browser has it. `hidden` makes the frame a scroll
   container, and a browser scrolls a scroll container to reveal a focused link inside it — which
   would shift every card by the scroll offset on top of the tween. `clip` is not a scroll container,
   so that cannot happen, and it leaves the vertical axis visible so a card's Box Shadow is not cut off
   at the top and bottom. (The JS also resets scrollLeft for browsers that only have `hidden`.) */
.kaw-cmq__frame {
  position: relative;
  order: 0;
  min-width: 0;
  overflow: hidden;
}
@supports (overflow-x: clip) {
  .kaw-cmq__frame {
    overflow: visible;
    overflow-x: clip;
  }
}

/* The bleed only exists once the loop runs (the JS writes the distances). Physical left/right, not
   inline start/end: the JS measures physical distances to the screen edges. */
.kaw-cmq.is-ready .kaw-cmq__frame {
  margin-left: calc(-1 * var(--kaw-cmq-bleed-l, 0px));
  margin-right: calc(-1 * var(--kaw-cmq-bleed-r, 0px));
}

/* The fade is a mask on the FRAME, so with a bleed it fades at the screen edge. A mask fades the strip
   itself to transparent, so whatever is behind shows through and nothing is covered. */
.kaw-cmq[data-fade] .kaw-cmq__frame {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--kaw-cmq-fade), #000 calc(100% - var(--kaw-cmq-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--kaw-cmq-fade), #000 calc(100% - var(--kaw-cmq-fade)), transparent 100%);
}

/* The track. The JS wraps the real list in it, appends the copies and tweens it. */
.kaw-cmq__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--kaw-cmq-gap);
  align-items: stretch;
  width: max-content;
}
.kaw-cmq.is-running .kaw-cmq__track {
  will-change: transform;
}

/* Hardened against theme list styles (margins, padding, bullets on ul/li). */
.kaw-cmq .kaw-cmq__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--kaw-cmq-gap);
  align-items: var(--kaw-cmq-align, stretch);
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaw-cmq .kaw-cmq__item {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kaw-cmq .kaw-cmq__item::before,
.kaw-cmq .kaw-cmq__item::marker {
  content: none;
}

/* ------------------------------------------------------------------------------------- the card
   A FIXED width, so one copy of the list is always n × (width + gap) wide and the loop distance never
   depends on fonts. Card border and box shadow come from the Border / Box Shadow groups at (0,4,0). */
.kaw-cmq .kaw-cmq__card {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: var(--kaw-cmq-justify, space-between);
  width: var(--kaw-cmq-card-w);
  min-height: var(--kaw-cmq-card-h);
  margin: 0;
  padding: var(--kaw-cmq-pad-t) var(--kaw-cmq-pad-r) var(--kaw-cmq-pad-b) var(--kaw-cmq-pad-l);
  border-radius: var(--kaw-cmq-radius);
  background-color: var(--kaw-cmq-bg);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.25s ease;
}

/* Hover applies to LINKED cards only: a card that is not a link must not look clickable. */
.kaw-cmq a.kaw-cmq__card:hover {
  background-color: var(--kaw-cmq-bg-hover, var(--kaw-cmq-bg));
  text-decoration: none;
}

/* Drawn INSIDE the card: the frame clips horizontally, so an outside ring would be cut in half at the
   ends of the strip. */
.kaw-cmq a.kaw-cmq__card:focus-visible {
  outline: 2px solid var(--kaw-cmq-focus);
  outline-offset: -4px;
}

.kaw-cmq .kaw-cmq__body {
  display: flex;
  flex-direction: column;
  gap: var(--kaw-cmq-body-gap);
}

/* -------------------------------------------------------------------------------------- the text
   HARDENED, SO A REAL <h3> AND ITS <div> COPY CAN NEVER DIFFER. The loop's copies rewrite every title
   to a <div> (one set of headings in the page outline), and a theme styles bare h1-h6 — Hello's reset
   sets margin, size, weight 500 and line-height 1.2 on them. Any property left to the cascade would
   reach the real heading but not its copies, and the strip would visibly change type as the copies
   scroll past. So this baseline sets EVERY typographic property explicitly, at (0,2,0): that beats a
   theme's `h3` (0,0,1) and a kit's `.elementor-kit-N h3` (0,1,1), and Elementor typography at (0,4,0)
   still wins (the Typography groups ship empty, so this applies until a global or a value is set).
   Margin is !important because no control writes it: the .kaw-pills__head pattern. */
.kaw-cmq .kaw-cmq__label,
.kaw-cmq .kaw-cmq__title,
.kaw-cmq .kaw-cmq__desc {
  display: block;
  margin: 0 !important;
  padding: 0;
  font-family: inherit;
  font-style: normal;
  word-spacing: normal;
  text-decoration: none;
  text-align: inherit;
  overflow-wrap: break-word;
}

.kaw-cmq .kaw-cmq__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 2.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kaw-cmq-label);
}

.kaw-cmq .kaw-cmq__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kaw-cmq-title);
}

.kaw-cmq .kaw-cmq__desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kaw-cmq-desc);
}

/* ------------------------------------------------------------------------------ the pause button
   Hardened against theme button styles (Hello: a pink border, padding, and a pink background on
   :hover and :focus at up to (0,2,0)): the base and :focus are (0,3,0), :hover follows them. The
   Border group writes at (0,4,0) and wins over `border: 0`. */
.kaw-cmq .kaw-cmq__pause {
  position: relative;
  z-index: 2;
  order: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: var(--kaw-cmq-pause-size);
  height: var(--kaw-cmq-pause-size);
  min-width: 0;
  min-height: 0;
  margin: var(--kaw-cmq-pause-inset) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--kaw-cmq-pause-radius);
  box-shadow: none;
  text-shadow: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease;
}
.kaw-cmq .kaw-cmq__pause,
.kaw-cmq .kaw-cmq__pause:focus {
  background-color: var(--kaw-cmq-pause-bg);
  color: var(--kaw-cmq-pause-color);
}
.kaw-cmq .kaw-cmq__pause:hover {
  background-color: var(--kaw-cmq-pause-bg-hover, var(--kaw-cmq-pause-bg));
  color: var(--kaw-cmq-pause-color);
}
.kaw-cmq .kaw-cmq__pause:focus-visible {
  outline: 2px solid var(--kaw-cmq-focus);
  outline-offset: -4px;
}
/* `display: inline-flex` above would otherwise beat the user-agent [hidden] rule. */
.kaw-cmq .kaw-cmq__pause[hidden] {
  display: none;
}

/* Below the strip: in flow AFTER the frame (the button is first in the DOM for the keyboard; order
   puts it second on screen). Its margin-top is the inset. */
.kaw-cmq[data-pause-pos="below-end"] .kaw-cmq__pause {
  align-self: flex-end;
}
.kaw-cmq[data-pause-pos="below-start"] .kaw-cmq__pause {
  align-self: flex-start;
}

/* ...and its space is RESERVED before the loop starts. Until then the button is `hidden` and takes no
   space, and the script may wait up to 3 s for web fonts: without this, everything under the widget
   would jump down by inset + size when the loop starts. Only where the loop can start, so the still
   layouts never carry an empty band: scripting on (no JS = the still rows, never a button), motion
   allowed (reduced motion = the still layout), and not .is-static (no GSAP). An engine without the
   `scripting` media feature (Safari < 17, Chrome < 120, Firefox < 113) drops the whole query and keeps a
   one-off shift. Overlay positions need nothing: they never take space. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .kaw-cmq[data-pause-pos^="below-"]:not(.is-ready):not(.is-static) {
    padding-bottom: calc(var(--kaw-cmq-pause-inset) + var(--kaw-cmq-pause-size));
  }
}

/* Over the strip: absolute inside the root, which is the widget's own, UN-bled box — so the button
   never lands out in the bleed. Not a flex item, so it does not affect the column. */
.kaw-cmq[data-pause-pos^="overlay-"] .kaw-cmq__pause {
  position: absolute;
  margin: 0;
}
.kaw-cmq[data-pause-pos="overlay-top-end"] .kaw-cmq__pause {
  top: var(--kaw-cmq-pause-inset);
  inset-inline-end: var(--kaw-cmq-pause-inset);
}
.kaw-cmq[data-pause-pos="overlay-top-start"] .kaw-cmq__pause {
  top: var(--kaw-cmq-pause-inset);
  inset-inline-start: var(--kaw-cmq-pause-inset);
}
.kaw-cmq[data-pause-pos="overlay-bottom-end"] .kaw-cmq__pause {
  bottom: var(--kaw-cmq-pause-inset);
  inset-inline-end: var(--kaw-cmq-pause-inset);
}
.kaw-cmq[data-pause-pos="overlay-bottom-start"] .kaw-cmq__pause {
  bottom: var(--kaw-cmq-pause-inset);
  inset-inline-start: var(--kaw-cmq-pause-inset);
}

/* The button blurs itself: nothing inside it paints outside its box. NO 0px FALLBACK on purpose: when
   the blur is set on (say) Mobile only, the variable is undefined at desktop, the declaration is
   invalid at computed-value time and backdrop-filter falls back to `none` — no compositing layer
   where no blur was asked for. */
.kaw-cmq[data-pause-blur="on"] .kaw-cmq__pause {
  -webkit-backdrop-filter: blur(var(--kaw-cmq-pause-blur));
  backdrop-filter: blur(var(--kaw-cmq-pause-blur));
}

.kaw-cmq .kaw-cmq__glyph {
  display: block;
  flex: none;
  width: var(--kaw-cmq-pause-glyph);
  height: var(--kaw-cmq-pause-glyph);
  fill: currentColor;
  pointer-events: none;
}
/* The glyph shows what the button WILL do: two bars while the strip runs, a triangle while it is
   held (the JS toggles .is-paused together with the button's name). */
.kaw-cmq .kaw-cmq__glyph.is--play,
.kaw-cmq.is-paused .kaw-cmq__glyph.is--pause {
  display: none;
}
.kaw-cmq.is-paused .kaw-cmq__glyph.is--play {
  display: block;
}

/* ------------------------------------------------------------------------------------ static state
   Reduced motion (the JS adds .is-static, and switches live) or no GSAP. Every card stands still and
   is reachable; the empty decorative cards are left out, the bleed and fade are removed. */
.kaw-cmq.is-static .kaw-cmq__frame {
  margin-left: 0;
  margin-right: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.kaw-cmq.is-static .kaw-cmq__item.is-empty {
  display: none;
}
/* A still card never overflows the widget's box: in a box narrower than one card (a phone inside a padded
   container, or a wide Card Width) it narrows to the box instead of pushing the page sideways. On the <li>
   too, because the card's percentage resolves against its <li>, which is otherwise exactly as wide as the
   card. STILL STATES ONLY (here, reduced motion before the JS, and the <noscript> rules): the running loop
   and the pre-JS row keep the fixed width, because one copy's width is the loop distance. */
.kaw-cmq.is-static .kaw-cmq__item,
.kaw-cmq.is-static .kaw-cmq__card {
  max-width: 100%;
}
.kaw-cmq.is-static[data-static="wrap"] .kaw-cmq__list {
  flex-wrap: wrap;
}
.kaw-cmq.is-static[data-static="wrap"] .kaw-cmq__frame {
  overflow: visible;
}

/* One scrollable row. The JS makes the frame focusable (tabindex 0, role region, named), so a keyboard
   user can scroll it; the ring is outside because nothing clips the frame from the outside here. */
.kaw-cmq.is-static[data-static="scroll"] .kaw-cmq__frame {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.kaw-cmq.is-static[data-static="scroll"] .kaw-cmq__item {
  scroll-snap-align: start;
}
.kaw-cmq.is-static[data-static="scroll"] .kaw-cmq__frame:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Reduced motion BEFORE the script arrives (or if it never runs but <noscript> does not apply, e.g. a
   blocked file): the same still layout in pure CSS. `.is-ready` is only ever added by the JS. */
@media (prefers-reduced-motion: reduce) {
  .kaw-cmq:not(.is-ready) .kaw-cmq__item.is-empty {
    display: none;
  }
  .kaw-cmq:not(.is-ready) .kaw-cmq__item,
  .kaw-cmq:not(.is-ready) .kaw-cmq__card {
    max-width: 100%;
  }
  .kaw-cmq:not(.is-ready)[data-static="wrap"] .kaw-cmq__list {
    flex-wrap: wrap;
  }
  .kaw-cmq:not(.is-ready)[data-static="wrap"] .kaw-cmq__frame {
    overflow: visible;
  }
  .kaw-cmq:not(.is-ready)[data-static="scroll"] .kaw-cmq__frame {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .kaw-cmq:not(.is-ready)[data-static="scroll"] .kaw-cmq__item {
    scroll-snap-align: start;
  }
  .kaw-cmq:not(.is-ready) .kaw-cmq__frame {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .kaw-cmq .kaw-cmq__card,
  .kaw-cmq .kaw-cmq__pause {
    transition: none;
  }
}