/* Kingdom Advisors Elementor Widgets — Call to Action
   A coloured card that is entirely a link: headline + description at the top, the pack Button's
   text + icon-swap pinned to the bottom.

   The hover motion lives in assets/css/button.css and is triggered by `data-hover` on the card —
   there is deliberately no motion CSS here. Hover changes nothing but the icon.

   Sizes and gaps arrive as `--kaw-cta-*` variables the stylesheet reads, rather than as properties a
   control writes onto an element this file also styles (see the "Elementor specificity trap" note in
   the rundown). Padding, radius and background ARE written directly by both this file and their
   controls — that is safe here only because Elementor's `{{WRAPPER}} .kaw-cta` (three classes) always
   out-specifies the single class used below, and both sides use the same shorthand. */

.kaw-cta {
  --kaw-cta-h: 290px;          /* MINIMUM height — long copy grows the card instead of spilling */
  --kaw-cta-w: 100%;
  --kaw-cta-text-gap: 26px;    /* headline → description */
  --kaw-cta-btn-gap: 40px;     /* smallest gap the button will accept above itself */
  --kaw-cta-focus: #051C2C;

  /* space-between is what pins the button to the bottom however short the description is.
     v1.44.0: read through --kaw-cta-justify so Content Position can change it; unset, as on every card
     built before 1.44.0, it is space-between exactly as before. */
  display: flex;
  flex-direction: column;
  justify-content: var(--kaw-cta-justify, space-between);
  align-items: stretch;
  gap: var(--kaw-cta-btn-gap);

  box-sizing: border-box;
  width: 100%;
  max-width: var(--kaw-cta-w);
  min-height: var(--kaw-cta-h);
  padding: 30px 40px 36px;
  border-radius: 16px;
  background-color: #147BD1;
  position: relative;
  isolation: isolate;

  /* It is a link, so undo the link defaults rather than fight them. */
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.kaw-cta * { box-sizing: border-box; }

/* Card bevel — a pair of inset shadows on their own layer, so the Card Shadow control
   keeps the element's own box-shadow free for a normal drop shadow. Same approach as Folio's cards. */
.kaw-cta--bevel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 1px rgba(255, 255, 255, 0.25);
}

/* The card is the tab stop, so the ring belongs on the card — the button inside is a span and never
   receives focus. :focus-visible so a mouse click never draws it.
   Drawn INSIDE the card (negative offset) on purpose: outside, it lands on the page background, which
   this widget knows nothing about — and the default ring colour is Night, which is exactly the page
   background in the conference design, so an outside ring could be invisible. Inside, it sits on the
   card colour, which the editor picks and the control's description tells them to check. */
.kaw-cta:focus-visible {
  outline: 2px solid var(--kaw-cta-focus);
  outline-offset: -4px;
}

.kaw-cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--kaw-cta-text-gap);
  min-width: 0;
}

/* v1.44.0 Headline Maximum Width: `none` unless the control is set, i.e. exactly as before. */
.kaw-cta__headline {
  margin: 0;
  max-width: var(--kaw-cta-headline-max, none);
  font-size: 27.75px;
  line-height: 40px;
  font-weight: 750;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

.kaw-cta__desc {
  margin: 0;
  font-size: 16.65px;
  line-height: 20px;
  font-weight: 550;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

/* Hugs its content so the icon sits right after the label rather than being pushed to the far edge
   — .kaw-button__inner uses space-between, which only spreads when the button is stretched. */
.kaw-cta__button {
  display: block;
  /* Belt and braces with space-between when the body is the only sibling. v1.44.0: Content Position
     Top / Middle / Bottom set --kaw-cta-btn-push to 0 - an auto margin takes the free space before
     justify-content ever sees it, so it would otherwise hold the button at the bottom regardless. */
  margin-top: var(--kaw-cta-btn-push, auto);
}

.kaw-cta .kaw-button {
  --kaw-btn-color: #FFFFFF;
  --kaw-btn-bg: rgba(0, 0, 0, 0);
  --kaw-btn-icon-size: 24px;
  --kaw-btn-gap: 20px;
  --kaw-btn-pad-top: 0px;
  --kaw-btn-pad-right: 0px;
  --kaw-btn-pad-bottom: 0px;
  --kaw-btn-pad-left: 0px;
  --kaw-btn-radius: 0px;
  cursor: inherit;    /* the card owns the pointer; the span is not separately clickable */
}

/* The icon is a wide arrow (24×12 in the design) in a square box — let it keep its own ratio and
   sit centred rather than being letterboxed against the text baseline. */
.kaw-cta .kaw-button__icon svg {
  height: auto;
  max-height: 100%;
}