/* ==========================================================================
   SceneBig — Elementor compatibility layer
   --------------------------------------------------------------------------
   This file is enqueued LAST (priority 999) so it always lands after
   Elementor's global kit CSS (`.elementor-kit-XX h1 {...}`), which otherwise
   repaints our headings with Elementor's default blue (#6EC1E4).

   Colours here use !important deliberately: Elementor regenerates its kit CSS
   whenever Site Settings change, so a plain specificity race is not reliable.
   Layout rules do NOT use !important, so you can still restyle freely.
   ========================================================================== */

/* ---------- Headings: never let the global kit colour them ---------- */
body.scenebig .sb-hero .sb-h1,
body.scenebig .sb-heading .sb-h2,
body.scenebig .sb-section h2.sb-h2,
body.scenebig .sb-service h4,
body.scenebig .sb-step h3,
body.scenebig .sb-benefit h3,
body.scenebig .sb-plan h3,
body.scenebig .sb-faq__q,
body.scenebig .sb-quote__name,
body.scenebig .sb-footer h4 {
  color: var(--sb-ink) !important;
}

/* Red highlight inside headings */
body.scenebig .sb-mark,
body.scenebig .sb-h1 .sb-mark,
body.scenebig .sb-h2 .sb-mark {
  color: var(--sb-brand) !important;
}

/* ---------- Dark sections keep white text ---------- */
body.scenebig .sb-btl h2,
body.scenebig .sb-btl h3,
body.scenebig .sb-btl__card h3,
body.scenebig .sb-services__aside h3,
body.scenebig .sb-contact__copy h2,
body.scenebig .sb-plan--featured h3,
body.scenebig .sb-contact__value {
  color: #fff !important;
}
body.scenebig .sb-contact__copy h2 span { color: var(--sb-brand-500) !important; }
body.scenebig .sb-btl__card:hover h3,
body.scenebig .sb-btl__card:hover p { color: var(--sb-ink) !important; }
body.scenebig .sb-form h3 { color: var(--sb-ink) !important; }

/* ---------- Body copy ---------- */
body.scenebig .sb-lead,
body.scenebig .sb-service p,
body.scenebig .sb-step p,
body.scenebig .sb-benefit p,
body.scenebig .sb-faq__a p,
body.scenebig .sb-quote blockquote { color: var(--sb-zinc-600) !important; }

body.scenebig .sb-btl__lead,
body.scenebig .sb-btl__card p { color: rgba(255,255,255,.78) !important; }
body.scenebig .sb-services__aside p { color: rgba(255,255,255,.72) !important; }
body.scenebig .sb-contact__copy > p { color: rgba(255,255,255,.7) !important; }

/* ---------- Links & buttons ---------- */
body.scenebig .sb-btn--primary { color: #fff !important; }
body.scenebig .sb-btn--ghost { color: var(--sb-ink) !important; }
body.scenebig .sb-btn--light { color: var(--sb-brand-700) !important; }
body.scenebig .sb-plan--featured .sb-btn--ghost,
body.scenebig .sb-wa-float,
body.scenebig .sb-tab.is-active { color: #fff !important; }
body.scenebig .sb-menu > li > a { color: var(--sb-zinc-600) !important; }
body.scenebig .sb-menu > li > a:hover { color: var(--sb-ink) !important; }
body.scenebig .sb-logo__name,
body.scenebig .sb-logo__sub,
body.scenebig .sb-nav__call { color: var(--sb-ink) !important; }

/* Elementor underlines every link in some kits */
body.scenebig .sb-menu a,
body.scenebig .sb-footer a,
body.scenebig .sb-btn,
body.scenebig .sb-logo { text-decoration: none !important; }

/* ---------- Typography sizes (kit sets h1/h2 sizes too) ---------- */
body.scenebig .sb-h1 { font-size: clamp(2.4rem, 6vw, 4.1rem) !important; line-height: 1.06 !important; }
body.scenebig .sb-h2 { font-size: clamp(1.9rem, 4.2vw, 2.6rem) !important; line-height: 1.15 !important; }
body.scenebig .sb-service h4 { font-size: .98rem !important; }
body.scenebig .sb-step h3 { font-size: 1.2rem !important; }

/* ==========================================================================
   Layout safety inside Elementor
   ========================================================================== */

/* Elementor wraps every widget; make sure nothing clips our full-bleed sections */
body.scenebig .elementor-widget-container { overflow: visible; }
body.scenebig .elementor-widget-scenebig-hero,
body.scenebig .elementor-widget-scenebig-btl,
body.scenebig .elementor-widget-scenebig-services,
body.scenebig .elementor-widget-scenebig-contact { width: 100%; }

/* Elementor sometimes forces text-align on the column */
body.scenebig .sb-hero__copy { text-align: center; }
@media (min-width: 1000px) {
  body.scenebig .sb-hero__grid { grid-template-columns: 1.1fr 1fr; }
  body.scenebig .sb-hero__copy { text-align: left; }
  body.scenebig .sb-hero__actions { justify-content: flex-start; }
  body.scenebig .sb-stats { text-align: left; }
}

/* The orbit must never collapse to zero height */
body.scenebig .sb-orbit { min-height: 280px; }

/* ==========================================================================
   Editor-only fixes
   The sticky header is position:fixed on the live site. Inside the Elementor
   canvas that makes it float over the hero, which looks broken while editing.
   ========================================================================== */
.elementor-editor-active .sb-header,
.elementor-editor-preview .sb-header {
  position: relative !important;
  padding-top: 8px;
}
.elementor-editor-active .sb-hero,
.elementor-editor-preview .sb-hero {
  padding-top: 40px !important;
}
.elementor-editor-active .sb-progress,
.elementor-editor-preview .sb-progress,
.elementor-editor-active .sb-wa-float,
.elementor-editor-preview .sb-wa-float { display: none !important; }

/* Never hide content behind a scroll-reveal while editing */
.elementor-editor-active .sb-reveal,
.elementor-editor-preview .sb-reveal,
.elementor-editor-active .sb-fade-up,
.elementor-editor-preview .sb-fade-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}