/* ════════════════════════════════════════════════════════════════════════════
   Sticky Image — agency-sticky-image
   A single image pinned to the page: sticky / fixed / absolute, anchored to a
   corner with X/Y offsets. Position is driven by CSS custom properties emitted
   by the widget's render() method; this file just consumes them.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Brand tokens ──────────────────────────────────────────────────────────────
   Scoped to .aew-stim so they don't leak. Source of truth is design-system.md.
   Update there first; copy here second. */
.aew-stim {
  --aew-cards:             var(--e-global-color-aew-cards, #FFFFFF);
  --aew-background:        var(--e-global-color-aew-background, #F4F4F4);
  --aew-lines:             var(--e-global-color-aew-lines, #DDDDDD);
  --aew-misc-accent:       var(--e-global-color-aew-misc-accent, #666666);
  --aew-secondary-cards:   var(--e-global-color-aew-secondary-cards, #EEEEEE);
  --aew-secondary-bg:      var(--e-global-color-aew-secondary-bg, #333333);
  --aew-secondary-accent:  var(--e-global-color-aew-secondary-accent, #555555);
  --aew-text:              var(--e-global-color-aew-text, #1A1A1A);
  --aew-cta:               var(--e-global-color-aew-cta, #2B2B2B);
  --aew-cta-hover:         var(--e-global-color-aew-cta-hover, #444444);
}

/* ── Strip Elementor's column padding so the widget can float freely ─────────── */
.elementor-column
  > .elementor-element-populated:has(.elementor-widget-agency-sticky-image),
.e-con:has(> .e-con-inner > .elementor-widget-agency-sticky-image),
.e-con:has(.elementor-widget-agency-sticky-image) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding: 0 !important;
}

/* The badge is pinned (position: fixed) and floats over the page, so when the
   sticky-image is the ONLY thing in its host section that section must take
   ZERO space in normal flow. Otherwise the empty host renders a ~1px strip
   that shows the page background as a thin seam (e.g. a white line between the
   header and the hero below it). Scoped to :only-child so a section that mixes
   the badge with real content is left alone. */
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-agency-sticky-image:only-child),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-agency-sticky-image:only-child) > .elementor-container,
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-agency-sticky-image:only-child) .elementor-column,
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-agency-sticky-image:only-child) .elementor-widget-wrap,
.e-con:has(> .e-con-inner > .elementor-widget-agency-sticky-image:only-child) {
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: visible !important; /* keep the fixed badge visible */
}

/* The Elementor widget chain (element → container) must not render a box of its
   own. For fixed/absolute modes the badge is taken out of flow, so the widget
   should occupy zero space; for sticky the badge lives inside the container but
   the container itself stays transparent and unpadded. */
.elementor-widget-agency-sticky-image,
.elementor-widget-agency-sticky-image > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  line-height: 0;
}

/* The badge positions itself (fixed); the Elementor widget element must not
   reserve any layout space or render a box. Collapse it to zero size and let
   the badge overflow. */
.elementor-widget-agency-sticky-image {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ── The badge ────────────────────────────────────────────────────────────────
   FIXED to the viewport: it stays pinned and does NOT scroll away. Pinned to
   the BOTTOM-LEFT on desktop. Offsets (--aew-stim-offx/offy) are written live
   by the controls so dragging a slider moves it in the editor in real time. */
.aew-stim {
  --aew-stim-offx: -160px;   /* left offset (desktop) — negative overhangs the hero edge */
  --aew-stim-offy: -60px;    /* bottom offset (desktop) — negative overhangs below the hero */
  --aew-stim-m-offx: 16px;   /* distance from the right edge (mobile)   */
  --aew-stim-m-offy: 16px;   /* distance from the bottom edge (mobile)  */

  position: fixed;
  display: inline-block;
  z-index: 100;
  pointer-events: none; /* clicks pass through the wrapper; the link/img re-enable */

  /* Desktop: bottom-left. */
  left:   var(--aew-stim-offx);
  bottom: var(--aew-stim-offy);
  right:  auto;
  top:    auto;

}

/* When the JS anchors the badge INSIDE the hero (the normal case), it becomes
   ABSOLUTE relative to the hero and is pinned to the hero's bottom-left. This
   makes it scroll away with the hero — it only shows over the hero and does not
   drift with the viewport. (Base `.aew-stim` stays `fixed` as the no-hero
   fallback.) */
.aew-stim.aew-stim--in-hero {
  position: absolute;
  left:   var(--aew-stim-offx);
  bottom: var(--aew-stim-offy);
  right:  auto;
  top:    auto;
}

.aew-stim__link,
.aew-stim__img {
  pointer-events: auto;
}

.aew-stim__img {
  display: block;
  /* Width is driven by the --aew-stim-w var (set on .aew-stim by the control's
     selector for live editor preview AND by render() inline style for the
     frontend — the badge is re-parented out of {{WRAPPER}} into the hero, so a
     `{{WRAPPER}} .aew-stim__img` width rule would NOT match it). */
  width: var(--aew-stim-w, 440px);
  height: auto;
  /* `.elementor img { max-width:100% }` (frontend.css) has higher specificity
     and would otherwise resolve 100% against the zero-width collapsed wrapper,
     hiding the badge. Force max-width off so the image keeps its set width. */
  max-width: none !important;
}

.aew-stim__link {
  display: inline-block;
  line-height: 0;
}

/* ── Tablet & mobile (≤1024px): pin to the BOTTOM-RIGHT ──────────────────────── */
@media (max-width: 1024px) {
  .aew-stim {
    right:  var(--aew-stim-m-offx);
    bottom: var(--aew-stim-m-offy);
    left:   auto;
    top:    auto;
  }

  /* Hide entirely if the user turned it off for tablet/mobile. */
  .aew-stim--m-hidden {
    display: none !important;
  }
}

/* ── Mobile (≤768px): shrink to the mobile width ─────────────────────────────── */
@media (max-width: 768px) {
  .aew-stim__img {
    width: var(--aew-stim-w-mobile, 260px) !important;
  }
}

/* ── Tablet & mobile (≤1024px): anchor INSIDE the hero, bottom-RIGHT ──────────
   Same model as desktop — absolute inside the hero so the badge scrolls away
   with the hero instead of following the viewport. Just flips the anchor to the
   bottom-right with the mobile offsets. (Matches `.aew-stim--in-hero` for
   specificity so it overrides the desktop bottom-left rule above.) */
@media (max-width: 1024px) {
  .aew-stim.aew-stim--in-hero {
    left:   auto;
    top:    auto;
    right:  var(--aew-stim-m-offx);
    bottom: var(--aew-stim-m-offy);
  }
}

/* ── Focus visibility (don't strip outlines globally) ────────────────────────── */
.aew-stim__link:focus-visible {
  outline: 2px solid var(--aew-cta);
  outline-offset: 3px;
}