/* ==========================================================================
   Our Story — Elementor widget additions
   our-story.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it.
   ========================================================================== */

/* On wide, tall screens the section pins while the story plays. The pin
   starts below the sticky header (76px once condensed; theme.css sets the
   same for any .smile-story). Logged-in users also have the 32px admin bar
   above the header — pinning only happens from 992px up, where it is 32px. */
.smile-story[data-ss-widget] {
  --ss-pin-offset: 76px;
}

.admin-bar .smile-story[data-ss-widget] {
  --ss-pin-offset: 108px;
}

/* ---- Elementor's global resets ---------------------------------------------
   Elementor's frontend.css has `.elementor img { height: auto; max-width: 100% }`
   and `.elementor a { box-shadow: none }` (specificity 0,1,1), which beat the
   original single-class rules. Restore the original values. */
.smile-story .story-scene__image {
  height: 112%;
}

.smile-story .smile-story__cta {
  box-shadow: 0 14px 28px -12px rgba(243, 106, 33, 0.65);
}

.smile-story .smile-story__cta:hover {
  box-shadow: 0 18px 34px -12px rgba(243, 106, 33, 0.7);
}

/* ---- Library icons ---------------------------------------------------------
   The original icons are stroked line art; Font Awesome / uploaded icons are
   filled, so they are drawn with the fill instead (white, like the strokes). */
.smile-story .story-scene__icon--custom .story-scene__icon-disc {
  color: var(--ss-white);
}

.smile-story .story-scene__icon--custom svg {
  fill: currentColor;
  stroke: none;
}

.smile-story .story-scene__icon--custom i {
  font-size: calc(var(--ss-icon) * 0.4);
  line-height: 1;
}

.smile-story .smile-story__cta-arrow--custom {
  font-size: 18px;
  fill: currentColor;
  stroke: none;
}

.smile-story i.smile-story__cta-arrow--custom {
  width: auto;
  height: auto;
}

/* Editor-only empty state */
.smile-story-empty {
  padding: 48px 24px;
  border: 2px dashed rgba(11, 52, 120, 0.2);
  font: 500 15px/1.5 "DM Sans", system-ui, sans-serif;
  color: #52698F;
  text-align: center;
}