/*
 * Elementor Compatibility Layer — Empelio Premium
 *
 * Elementor's container CSS overrides theme padding/display. These !important
 * rules restore the theme layout inside Elementor containers.
 * .elementor-page context means rules ONLY apply in Elementor, not on the
 * live front-page.php template.
 */

/* ── REVEAL ANIMATIONS — make all hidden elements visible in Elementor ────── */
/* The live site uses JS to add .revealed — Elementor editor never runs that JS */
.elementor-page .reveal,
.elementor-page .reveal-left,
.elementor-page .reveal-right,
.elementor-page .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.elementor-page .emp-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  min-height: 41px !important;
}

.elementor-page .emp-topbar__inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-direction: row !important;
}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
/* Do NOT override top — let body:has(.emp-topbar) rule from main.css control it */
.elementor-page .emp-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  padding: 0 24px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.elementor-page .emp-nav__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

/* Nav image widget (logo) */
.elementor-page .emp-nav__logo img,
.elementor-page .emp-nav__logo .elementor-widget-image img {
  height: 32px !important;
  width: auto !important;
  display: block !important;
}

/* Nav links — styled list inside text-editor widget */
.elementor-page .emp-nav__links,
.elementor-page .elementor-widget-text-editor .emp-nav__links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-page .emp-nav__links li,
.elementor-page .elementor-widget-text-editor .emp-nav__links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-page .emp-nav__links a,
.elementor-page .elementor-widget-text-editor .emp-nav__links a {
  display: block !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Mobile-only CTA inside nav — hide on desktop */
.elementor-page .emp-nav__mobile-cta {
  display: none !important;
}

/* Nav CTA buttons */
.elementor-page .emp-nav__cta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.elementor-page .emp-hero {
  padding: 120px 24px 128px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.elementor-page .emp-hero__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.elementor-page .emp-hero__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.elementor-page .emp-hero__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.elementor-page .emp-hero__trust {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.elementor-page .emp-hero__visual {
  position: relative !important;
}

/* ── LOGOS ───────────────────────────────────────────────────────────────── */
.elementor-page .emp-logos {
  padding: 48px 0 !important;
  overflow: hidden !important;
}

.elementor-page .emp-logos__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ── STATS ───────────────────────────────────────────────────────────────── */
/* Note: main.css has two .emp-stats blocks; the later one (TRUST STATS) wins:
   padding: 96px 24px; max-width: 1100px for __inner */
.elementor-page .emp-stats {
  padding: 96px 24px !important;
}

.elementor-page .emp-stats__inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* emp-stats__grid is the actual 4-col grid (emp-stats__inner only wraps it) */
.elementor-page .emp-stats__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
}

/* emp-stats__item: Elementor container — Elementor resets padding via CSS variables, so enforce it.
   Do NOT add gap/flex here: number-wrap HTML widget's internal margin-bottom:8px already provides
   the 8px gap to the label widget, and adding gap:8px would double it to 16px. */
.elementor-page .emp-stats__item {
  padding: 24px 16px !important;
}

/* ── SHARED: Section header centering ────────────────────────────────────── */
.elementor-page .section-header {
  text-align: center !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* emp-how__header: block on live site — children use own margin-bottom; no gap needed */
.elementor-page .emp-how__header {
  text-align: center !important;
  margin-bottom: 64px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Override Elementor's own heading alignment inside centered section headers */
.elementor-page .section-header .elementor-heading-title,
.elementor-page .emp-how__header .elementor-heading-title {
  text-align: center !important;
}

/* section-eyebrow — now always an HTML widget so theme CSS (display:inline-flex, ::before/::after)
   applies naturally. Block-level fallback ensures decorative lines stay horizontal in any context. */
.elementor-page .section-eyebrow {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}
/* In emp-security__left the eyebrow is left-aligned */
.elementor-page .emp-security__left .section-eyebrow {
  justify-content: flex-start !important;
}

/* ── HOW IT WORKS ────────────────────────────────────────────────────────── */
.elementor-page .emp-how {
  padding: 80px 0 !important;
  position: relative !important;
}

.elementor-page .emp-how__inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3 steps in equal-width columns (connectors are skipped → exactly 3 children) */
.elementor-page .emp-how__steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.elementor-page .emp-how__cta {
  display: flex !important;
  justify-content: center !important;
  margin-top: 48px !important;
}

/* ── BRANCHEN ────────────────────────────────────────────────────────────── */
.elementor-page .emp-branchen {
  padding: 64px 24px !important;
  position: relative !important;
}

.elementor-page .emp-branchen__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* margin-top removed: emp-branchen__label already has margin-bottom:32px from theme CSS */
.elementor-page .emp-branchen__grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
}

/* branchen-card: icon stacked above name */
.elementor-page .branchen-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 16px !important;
}

/* ── FEATURES ────────────────────────────────────────────────────────────── */
.elementor-page .emp-features {
  padding: 160px 24px !important;
  position: relative !important;
}

.elementor-page .emp-features__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* feature-card: flex column */
.elementor-page .feature-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 32px !important;
}

/* ── TOUR ────────────────────────────────────────────────────────────────── */
.elementor-page .emp-tour {
  padding: 80px 0 !important;
}

.elementor-page .emp-tour__inner {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* emp-tour__header: block container on live site */
.elementor-page .emp-tour__header {
  text-align: center !important;
  margin-bottom: 48px !important;
}
.elementor-page .emp-tour__header .elementor-heading-title {
  text-align: center !important;
}

/* ── SHOWCASE ────────────────────────────────────────────────────────────── */
.elementor-page .emp-showcase {
  padding: 160px 24px !important;
}

.elementor-page .emp-showcase__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 128px !important;
}

/* Each showcase item: content (left) + visual (right) side by side */
.elementor-page .showcase-item {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

/* Reversed items: swap column order via direction trick */
.elementor-page .showcase-item.showcase-item--reverse {
  direction: rtl !important;
}
.elementor-page .showcase-item.showcase-item--reverse > * {
  direction: ltr !important;
}

.elementor-page .showcase-item__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.elementor-page .showcase-item__features {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-page .showcase-item__feature {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ── PROCESS ─────────────────────────────────────────────────────────────── */
.elementor-page .emp-process {
  padding: 160px 24px !important;
  position: relative !important;
}

.elementor-page .emp-process__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* margin-top: 0 — in Elementor flex context, margins don't collapse.
   section-header already provides 80px margin-bottom; theme's 64px margin-top
   would stack on top of that (144px total). Zero it out here. */
.elementor-page .emp-process__steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-top: 0 !important;
}

/* ── TESTIMONIALS ────────────────────────────────────────────────────────── */
.elementor-page .emp-testimonials {
  padding: 160px 24px !important;
}

.elementor-page .emp-testimonials__grid {
  max-width: 1280px !important;
  margin: 64px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* ── TESTIMONIALS ────────────────────────────────────────────────────────── */
/* Rating summary: score (4,9) on left + right panel side by side */
.elementor-page .emp-testimonials__rating {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.elementor-page .emp-testimonials__rating-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Rating source badges in a row */
.elementor-page .emp-testimonials__rating-sources {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ── SECURITY ────────────────────────────────────────────────────────────── */
.elementor-page .emp-security {
  padding: 96px 24px !important;
  position: relative !important;
}

.elementor-page .emp-security__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.elementor-page .emp-security__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Security left: inline style="text-align:left;max-width:none;" is dropped by converter */
.elementor-page .emp-security__left .elementor-heading-title {
  text-align: left !important;
  max-width: none !important;
}
.elementor-page .emp-security__left .elementor-widget-text-editor p {
  text-align: left !important;
  max-width: none !important;
}

/* Security badges: 3 badges stacked vertically (icon + text per row) */
.elementor-page .emp-security__badges {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

/* 2×2 security cards grid */
.elementor-page .emp-security__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── PRICING ─────────────────────────────────────────────────────────────── */
.elementor-page .emp-pricing {
  padding: 96px 24px !important;
  position: relative !important;
}

/* Base 3-column pricing grid */
.elementor-page .emp-pricing__grid {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Modules variant: auto-fill with min 280px */
.elementor-page .emp-pricing__grid.emp-pricing__grid--modules {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  max-width: 1400px !important;
}

/* emp-pricing__reco: zero margin-bottom so footnote's internal margin-top:48px
   provides the correct 48px gap (avoids double-spacing in flex context) */
.elementor-page .emp-pricing__reco {
  max-width: 1100px !important;
  margin-top: 48px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

/* Pricing recommendation grid */
.elementor-page .emp-pricing__reco-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.elementor-page .emp-faq {
  padding: 96px 24px !important;
}

.elementor-page .emp-faq__inner {
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* FAQ grid: margin-top:48px would stack with section-header's margin-bottom:80px in flex context
   (128px total vs 80px on live site). Zero it — section-header margin-bottom alone provides the gap. */
.elementor-page .emp-faq__grid {
  margin-top: 0 !important;
}

/* ── COMPARISON ──────────────────────────────────────────────────────────── */
.elementor-page .emp-comparison {
  padding: 96px 24px !important;
}

.elementor-page .emp-comparison__inner {
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Comparison table: margin-top:48px would stack with section-header's margin-bottom:80px
   in flex context (128px vs 80px on live site). Zero it out. */
.elementor-page .emp-comparison__table {
  margin-top: 0 !important;
}

/* ── ROI ─────────────────────────────────────────────────────────────────── */
.elementor-page .emp-roi {
  padding: 80px 0 !important;
  position: relative !important;
}

.elementor-page .emp-roi__inner {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ── RESOURCES ───────────────────────────────────────────────────────────── */
.elementor-page .emp-resources {
  padding: 80px 0 !important;
  position: relative !important;
}

.elementor-page .emp-resources__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* emp-resources__header: block container on live site */
.elementor-page .emp-resources__header {
  text-align: center !important;
  margin-bottom: 48px !important;
}
.elementor-page .emp-resources__header .elementor-heading-title {
  text-align: center !important;
}

/* Resources 3-column grid: margin-top removed — emp-resources__header margin-bottom:48px handles gap */
.elementor-page .emp-resources__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* ── CASE STUDY ──────────────────────────────────────────────────────────── */
.elementor-page .emp-case {
  padding: 160px 24px !important;
}

.elementor-page .emp-case__inner {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* emp-case__header: block container on live site */
.elementor-page .emp-case__header {
  text-align: center !important;
  margin-bottom: 40px !important;
}
.elementor-page .emp-case__header .elementor-heading-title {
  text-align: center !important;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.elementor-page .emp-cta {
  padding: 160px 24px !important;
  position: relative !important;
}

/* CTA card kept as HTML widget; no emp-cta__inner in DOM — no structural overrides needed */

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.elementor-page .emp-footer {
  padding: 80px 24px 40px !important;
}

.elementor-page .emp-footer__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.elementor-page .emp-footer__col-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-page .emp-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.elementor-page .emp-footer__bottom {
  max-width: 1280px !important;
  margin: 32px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.elementor-page .emp-footer__legal {
  display: flex !important;
  gap: 24px !important;
}

/* ── Elementor widget-container: kill default margins ────────────────────── */
.elementor-page .elementor-widget-text-editor .elementor-widget-container {
  max-width: 100% !important;
}