/* ============================================================
   ELEMENTOR BRIDGE  —  SEO Sadhu home page
   Loaded after style.css. Makes Elementor's wrapper markup
   layout-transparent so the original stylesheet lays the page
   out exactly as it does in the static build.

   IMPORTANT: neutralise Elementor only through ITS OWN custom
   properties. Never set padding / margin / max-width / width
   directly on .e-con — that outranks the original classes
   (.section, .container) and collapses the whole page.
   ============================================================ */

/* 1. Wrapper divs vanish from layout. Selectors still match them,
      so they remain usable as styling hooks. */
.ss-page .e-con-inner,
.ss-page .elementor-widget-wrap,
.ss-page .elementor-widget,
.ss-page .elementor-widget-container { display: contents !important; }

/* 2. Zero out Elementor's layout defaults via its variables only.
      Containers that carry an original class then style themselves
      from style.css exactly as the static build does. */
.ss-page .e-con {
  --display: block !important;
  --width: auto !important;
  --content-width: none !important;
  --min-height: 0px !important;
  --padding-top: 0px !important; --padding-right: 0px !important;
  --padding-bottom: 0px !important; --padding-left: 0px !important;
  --padding-block-start: 0px !important; --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important; --padding-inline-end: 0px !important;
  --margin-top: 0px !important; --margin-right: 0px !important;
  --margin-bottom: 0px !important; --margin-left: 0px !important;
  --margin-block-start: 0px !important; --margin-block-end: 0px !important;
  --margin-inline-start: 0px !important; --margin-inline-end: 0px !important;
  --gap: 0px !important;
  --row-gap: 0px !important; --column-gap: 0px !important;
  --flex-direction: initial !important;
  --flex-wrap: initial !important;
  --justify-content: initial !important;
  --align-items: initial !important;
  --align-self: initial !important;
  --order: initial !important;
  --position: static !important;
}
.ss-page .elementor, .ss-page .elementor-section-wrap { overflow: visible; }

/* 3. Re-assert the original sheet's spacing at a specificity that
      beats Elementor's .e-con variable padding. */
.ss-page .section { padding: var(--section-pad) 0 !important; }
.ss-page .container { max-width: var(--max) !important; margin: 0 auto !important; padding: 0 28px !important; }
.ss-page .header-inner { max-width: var(--max) !important; margin: 0 auto !important; padding: 14px 28px !important; }
.ss-page .hero { padding: 44px 0 var(--section-pad) !important; }
.ss-page .hero-grid { max-width: var(--max) !important; margin: 0 auto !important; padding: 0 28px !important; }
.ss-page .final-cta { padding: 74px 0 !important; }
.ss-page .site-footer { padding: 62px 0 26px !important; }

/* 4. Elementor's global image reset outranks the original sheet's
      sizing rules, so re-assert those too. */
.ss-page .logo-img { height: 50px !important; width: auto !important; }
.ss-page .chip img, .ss-page .chip svg { width: 20px !important; height: 20px !important; }
.ss-page .orbit-center img { width: 104px !important; height: auto !important; }
.ss-page .orbit-node img, .ss-page .orbit-node svg { width: 19px !important; height: 19px !important; }
.ss-page .test-person img { width: 42px !important; height: 42px !important; }
.ss-page .socials img { width: 17px !important; height: 17px !important; }

/* 5. Map Elementor Button widgets onto the original .btn styles.
      The variant class sits on the widget wrapper. */
.ss-page .elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 27px; border-radius: 32px;
  font-weight: 600; font-size: 14px; line-height: 1.4;
  border: 2px solid transparent; white-space: nowrap; cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  background: none; text-decoration: none;
}
.ss-page .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); }
.ss-page .ss-btn-orange .elementor-button { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(249,115,22,.28); }
.ss-page .ss-btn-orange .elementor-button:hover { background: var(--orange-dark); }
.ss-page .ss-btn-outline .elementor-button { border-color: var(--line); color: var(--navy); background: rgba(255,255,255,.6); }
.ss-page .ss-btn-outline .elementor-button:hover { border-color: var(--navy); }
.ss-page .ss-btn-outline-light .elementor-button { border-color: rgba(255,255,255,.45); color: #fff; }
.ss-page .ss-btn-outline-light .elementor-button:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.ss-page .elementor-button .elementor-button-content-wrapper { gap: 9px; align-items: center; }
.ss-page .elementor-button .elementor-button-icon { font-size: 13px; }

/* 6. The direct-child selectors the wrappers would break. */
.ss-page .dark-stats div { min-width: 0; }
@media (max-width: 1000px) {
  .ss-page .header-inner .ss-btn { display: none !important; }
}

/* 7. Local background image, re-pointed at the uploads folder.
      (A relative url() inside style.css resolves from the document,
      not the stylesheet.) */
.ss-page .band-dark .bg { background-image: url('/wp-content/uploads/seosadhu/mountain-bg.jpg'); }

/* 8. Canvas page ground.

   overflow-x MUST be `clip`, not `hidden`. `overflow-x: hidden` with a
   visible overflow-y computes to `hidden auto`, which makes <body> its
   own scroll container. The body is ~10,000px tall here, so that nests
   two scrollers: window.scrollY moves but elements never enter the
   viewport as IntersectionObserver measures it, and every .reveal
   section stays at opacity 0 forever. `clip` clips without creating a
   scroll container. */
.ss-page {
  background: var(--cream);
  overflow-x: clip;
  overflow-y: visible;
}

/* ============================================================
   9. Elementor kit defaults.
   The site kit styles EVERY Heading and Text Editor widget with:
     color: var(--e-global-color-primary)          -> #6EC1E4 (blue)
     font-family: var(--e-global-typography-*-font-family) -> Roboto
     font-weight: var(--e-global-typography-*-font-weight) -> 600
   at a specificity the design sheet cannot beat. It sets no
   font-size, so only these three need handling.

   Typography is fixed by pointing the kit's own variables at the
   design's values. Colour is set to inherit instead, because the
   design tints dark sections on the SECTION (.band-dark, .results,
   .final-cta all set color:#fff) and lets headings inherit it.
   ============================================================ */
.ss-page {
  --e-global-typography-primary-font-family: "Poppins";
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: "Poppins";
  --e-global-typography-secondary-font-weight: 700;
  --e-global-typography-text-font-family: "Poppins";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "Poppins";
  --e-global-typography-accent-font-weight: 600;
}

.ss-page .elementor-widget-heading .elementor-heading-title,
.ss-page .elementor-widget-text-editor { color: inherit; }

/* The only heading the design colours explicitly, so re-assert it
   after the inherit rule above. */
.ss-page .site-footer .elementor-heading-title { color: #fff; }

/* ============================================================
   10. Requested design changes.
   These deliberately differ from the original stylesheet.
   Everything above this line only makes Elementor behave.
   ============================================================ */

/* About section: larger stat numbers (design shipped 24px). The
   stacked top-to-bottom arrangement is the original design and is
   restored by the specificity boost, not changed here. */
.ss-page .about-stats b { font-size: 34px; line-height: 1.15; }