/* Kingdom Advisors Elementor Widgets — Callout Box
   A small box with a pulsing square, a headline beside it and an optional description underneath.

   NO JAVASCRIPT. The pulse is a CSS animation; there is nothing for a script to do, so the widget
   registers none.

   Controlled values arrive as `--kaw-cb-*` variables this stylesheet reads, never as properties a
   control writes onto an element this file also styles — see the "Elementor specificity trap" note
   in the rundown for why that distinction has bitten this plugin repeatedly. */

.kaw-callout-wrap {
  display: flex;                       /* the alignment control writes justify-content here */
}

.kaw-callout {
  --kaw-cb-dot: 10px;
  --kaw-cb-dot-radius: 0px;
  --kaw-cb-dot-color: #48D597;
  --kaw-cb-pulse-scale: 2.4;
  --kaw-cb-pulse-dur: 2s;
  --kaw-cb-pulse-opacity: 0.45;
  --kaw-cb-gap-dot: 12px;
  --kaw-cb-gap-text: 10px;
  --kaw-cb-blur: 0px;
  --kaw-cb-focus: currentColor;

  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: var(--kaw-cb-gap-text);         /* headline → description; collapses when there is no description */
  /* 0 by default, so the box shrinks to its content — which is what makes a one-word callout sit
     tight around the word. The alignment control flips this to 1 for Stretch. */
  flex-grow: var(--kaw-cb-grow, 0);
  max-width: 100%;
  /* Reset, so centring the BOX with the alignment control does not also centre the text inside it. */
  text-align: start;
  text-decoration: none;
  color: inherit;
}

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

/* Only emitted when the blur control is above 0 — see the note on the control. An element with a
   backdrop-filter clips its descendants to its border box in WebKit, rounded corners included, even
   with no `overflow: hidden`. That is what cut the pulse off in Safari in the hand-built version of
   this. Leaving the property off entirely when it is not wanted removes the clipping AND the
   compositing layer that comes with it. */
.kaw-callout[data-blur="on"] {
  -webkit-backdrop-filter: blur(var(--kaw-cb-blur));
          backdrop-filter: blur(var(--kaw-cb-blur));
}

.kaw-callout:focus-visible {
  outline: 2px solid var(--kaw-cb-focus);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------------------- the dot row */
.kaw-callout__head {
  display: flex;
  align-items: center;
  gap: var(--kaw-cb-gap-dot);
  /* Deliberately NOT `overflow: hidden` and never will be — the pulse paints outside this row and
     any clipping here is what makes it disappear at the edges. */
}

.kaw-callout__dot {
  position: relative;
  flex: none;
  width: var(--kaw-cb-dot);
  height: var(--kaw-cb-dot);
  border-radius: var(--kaw-cb-dot-radius);
  background-color: var(--kaw-cb-dot-color);
}

/* The expanding ring.
   It sits ON TOP of the square rather than behind it, which is fine precisely because it is the
   SAME colour: at scale 1 the ring covers the square exactly, and a colour composited over itself
   at any opacity is that colour, so there is no flash. That is why one colour control drives both,
   and why this needs neither an inner element nor a negative z-index. */
.kaw-callout__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--kaw-cb-dot-color);
  opacity: var(--kaw-cb-pulse-opacity);
  animation: kaw-cb-pulse var(--kaw-cb-pulse-dur) ease-out infinite;
  pointer-events: none;
}

/* Switched off: no ring at all rather than a ring parked at rest opacity, which would read as a
   permanent halo. */
.kaw-callout[data-pulse="off"] .kaw-callout__dot::after {
  content: none;
}

@keyframes kaw-cb-pulse {
  0% {
    transform: scale(1);
    opacity: var(--kaw-cb-pulse-opacity);
  }
  /* Holds at fully faded from 70% to 100% — the gap between pulses, which is what stops it reading
     as a continuous throb. */
  70%, 100% {
    transform: scale(var(--kaw-cb-pulse-scale));
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------------------- text
   Hardened because a bare <h3>/<p> is one of the most contested targets on a WordPress site: near
   enough every theme sets margins on them, and a single-class selector loses. Safe to use
   `!important` here because NO control writes margin — the spacing is the flex gap above, so the
   controls still own every number that matters. */
.kaw-callout .kaw-callout__title,
.kaw-callout .kaw-callout__desc {
  margin: 0 !important;
}

/* ------------------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kaw-callout__dot::after {
    animation: none;
    opacity: 0;
  }
}