/* Kingdom Advisors Elementor Widgets — shared mobile deck arrows
   Used by Folio (Speakers) and Split Cards Scroll. See includes/arrows.php for why these exist: a card
   deck's only affordance is a swipe, and a swipe has no keyboard or assistive-tech equivalent — these
   are real <button>s so the deck can be operated without a gesture.

   Styling is entirely control-driven (size, inset, radius, border, colours, and each arrow's own
   position). Each widget supplies ONE rule of its own, hiding `.kaw-arrows` when it is not showing its
   mobile deck; everything else is shared so both widgets stay identical. */

.kaw-arrows {
  position: absolute;
  inset: 0;
  /* Clear of every resting card in both decks (Folio tops out at 12, Split Cards at 3) rather than
     tying with one and relying on DOM order. A card lifts above this while it is being dragged, which
     is fine — you are not aiming at an arrow with a finger already down on a card. */
  z-index: 20;
  pointer-events: none; /* the nav is just a positioning frame — only the buttons are clickable */
}

.kaw-arrow {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: none;
  border-radius: 50%;
  color: #051C2C;
  background-color: #48D597;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  /* Orientation (the centring %) and the nudge (px) compose into one transform, so an arrow can be
     anchored to any edge and then offset from it — the same model as Elementor's own slider arrows. */
  transform: translate(
    calc(var(--kaw-arrow-cx, 0%) + var(--kaw-arrow-x, 0px)),
    calc(var(--kaw-arrow-cy, 0%) + var(--kaw-arrow-y, 0px))
  );
}

/* Fallback anchoring, so the two arrows never land on top of each other. The Position controls write
   these same properties at `{{WRAPPER}} .kaw-arrow--prev` (two classes on the wrapper, so higher
   specificity) and win whenever Elementor's generated CSS is present — this only covers the gap when
   it is not: a stale post CSS file awaiting "Regenerate CSS", or a static export. */
.kaw-arrow--prev { left: 0;  right: auto; top: 50%; bottom: auto; --kaw-arrow-x: 16px;  --kaw-arrow-cy: -50%; }
.kaw-arrow--next { right: 0; left: auto;  top: 50%; bottom: auto; --kaw-arrow-x: -16px; --kaw-arrow-cy: -50%; }

/* INLINE VARIANT — for a widget whose arrows live in their own column instead of being overlaid on a
   card (Testimonial Line Reveal). The nav becomes an ordinary flex row and the buttons sit in flow;
   they stay `position: relative` so the per-arrow offset controls still work as nudges. */
.kaw-arrows--inline {
  position: static;
  inset: auto;
  display: flex;
  gap: var(--kaw-arrows-gap, 12px);
  pointer-events: auto;
}
.kaw-arrows--inline .kaw-arrow { position: relative; }

.kaw-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}
.kaw-arrow i {
  font-size: inherit;
  line-height: 1;
}

/* The previous arrow is the same icon, flipped — so a custom SVG only has to be supplied once. */
.kaw-arrow--prev svg,
.kaw-arrow--prev i { transform: rotate(180deg); }

.kaw-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.kaw-arrow:active { transform: translate(
    calc(var(--kaw-arrow-cx, 0%) + var(--kaw-arrow-x, 0px)),
    calc(var(--kaw-arrow-cy, 0%) + var(--kaw-arrow-y, 0px))
  ) scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .kaw-arrow { transition: none !important; }
}