/* ============================================================
   X3WEB Intro Overrides
   Overrides Hecate/template defaults to match X3WEB brand.
   Linked after all original intro CSS files.
   ============================================================ */

/* ============================================================
   No-flash fix — hide the entire main content block until JS
   has initialised the scroll hijack and positioned all sections.
   The .x3-ready class is added by JS after initHijacking() runs.
   Without it, all 9 sections are briefly visible stacked on top
   of each other before being repositioned.
   ============================================================ */
.cd-main-content {
  opacity: 0;
}
.cd-main-content.x3-ready {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Non-visible section content stays hidden until activated */
[data-hijacking="on"] .cd-section:not(.visible) .hero-top {
  opacity: 0;
  transition: opacity 0.5s ease;
}
[data-hijacking="on"] .cd-section.visible .hero-top {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ============================================================
   Font stack: Montserrat + Lato (matches main X3WEB site)
   ============================================================ */
body,
p,
span,
li,
label,
input,
textarea,
select,
small,
blockquote,
.cd-section p,
.cd-section a,
.cd-section .hero-top,
.cd-primary-nav,
.cd-scndr-nav a {
  font-family: "Lato", sans-serif !important;
  letter-spacing: 0 !important;
}

.cd-section h1,
.cd-section h2,
#owl-text-home,
#owl-text-home h2,
.cd-scndr-nav,
.cd-header {
  font-family: "Montserrat", sans-serif !important;
  letter-spacing: 0 !important;
}

.button,
.button--moema {
  font-family: "Montserrat", sans-serif !important;
  letter-spacing: 0 !important;
}

/* --- Remove Hecate uppercase/spaced heading style --- */
.cd-section h2,
#owl-text-home h2 {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif !important;
  text-shadow: none !important;
}

/* --- Supporting paragraph — remove black bar background, match main site style --- */
.cd-section .hero-top p,
.cd-section .hero-top p span {
  font-family: "Lato", sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: none !important;
  padding: 0 !important;
  text-shadow: none !important;
}

/* --- Navigation links --- */
.cd-scndr-nav a {
  font-family: "Lato", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* ============================================================
   Dark blue overlay on every cd-section — matches home.php hero
   gradient: rgba(4,29,54,0.55) → rgba(4,29,54,0.35) → rgba(4,29,54,0.55)
   ============================================================ */
.cd-section {
  position: relative;
}

/* CSS pseudo-element overlay for sections 2–9 */
.cd-section > div::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(4,29,54,0.55) 0%, rgba(4,29,54,0.35) 50%, rgba(4,29,54,0.55) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Section 1 first-of-type override — dark blue overlay over hero video */
.cd-section:first-of-type > div::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(4,29,54,0.55) 0%, rgba(4,29,54,0.35) 50%, rgba(4,29,54,0.55) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  display: block !important;
}

/* Ensure all text/content sits above the overlay */
.cd-section .container,
.cd-section .content,
.cd-section .home-text,
.cd-section .hero-top,
.cd-section h1,
.cd-section h2,
.cd-section p,
.cd-section a,
.cd-section .owl-carousel,
#owl-text-home {
  position: relative;
  z-index: 3;
}

/* ============================================================
   Centre all buttons and text content
   ============================================================ */
.cd-section .hero-top {
  text-align: center !important;
}

.cd-section .hero-top a {
  display: inline-block !important;
}

/* ============================================================
   X3WEB orange pill buttons — keep orange buttons on blue overlay
   ============================================================ */
.cd-section .button,
.cd-section .button--moema,
.cd-section a .button,
.cd-section a .button--moema {
  display: inline-block !important;
  background: #ff6b00 !important;
  color: #ffffff !important;
  border: 1px solid #ff6b00 !important;
  border-radius: 999px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  padding: 14px 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  overflow: visible !important;
}

.cd-section .button:hover,
.cd-section .button--moema:hover,
.cd-section a:hover .button,
.cd-section a:hover .button--moema {
  background: transparent !important;
  color: #ff6b00 !important;
  border-color: #ff6b00 !important;
}

/* Remove Hecate button pseudo-element animations */
.cd-section .button::before,
.cd-section .button::after,
.cd-section .button--moema::before,
.cd-section .button--moema::after {
  display: none !important;
}

/* ============================================================
   Background images — 9 sections (Insights removed)
   ============================================================ */
.cd-section:first-of-type > div {
  /* Hero video replaces static background image — see index.php */
  background-image: none !important;
  background-color: #000 !important;
}
/* Sections 2–9: background images replaced by video elements — see index.php */
.cd-section:nth-of-type(2) > div,
.cd-section:nth-of-type(3) > div,
.cd-section:nth-of-type(4) > div,
.cd-section:nth-of-type(5) > div,
.cd-section:nth-of-type(6) > div,
.cd-section:nth-of-type(7) > div,
.cd-section:nth-of-type(8) > div,
.cd-section:nth-of-type(9) > div {
  background-image: none !important;
  background-color: #000 !important;
}

/* ============================================================
   Blank-page safety — first section always visible
   ============================================================ */
.cd-section.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   Remove Inconsolata / Garnata font from headings
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif !important;
}

/* ============================================================
   Mobile video positioning — controls which part of the video
   is visible on small screens. Desktop always stays centered.
   object-position: X Y
     left   = 0% center  (show left side of video)
     right  = 100% center (show right side of video)
     center = 50% center  (default, show middle)
   ============================================================ */

/* Section 1 — Home Intro: 20% from left on mobile */
@media only screen and (max-width: 1049px) {
  #section-hero-video video {
    object-position: 20% center !important;
  }
}

/* Section 4 — Growth System: 20% from left on mobile */
@media only screen and (max-width: 1049px) {
  .cd-section:nth-of-type(4) video {
    object-position: 20% center !important;
  }
}

/* Section 5 — E-commerce: 80% from left (towards right) on mobile */
@media only screen and (max-width: 1049px) {
  .cd-section:nth-of-type(5) video {
    object-position: 80% center !important;
  }
}

/* Section 6 — Meta Ads: show RIGHT side on mobile */
@media only screen and (max-width: 1049px) {
  .cd-section:nth-of-type(6) video {
    object-position: 100% center !important;
  }
}

/* Section 7 — Google Ads: show RIGHT side on mobile */
@media only screen and (max-width: 1049px) {
  .cd-section:nth-of-type(7) video {
    object-position: 100% center !important;
  }
}

/* Section 8 — Hosting: 20% from right (towards left) on mobile */
@media only screen and (max-width: 1049px) {
  .cd-section:nth-of-type(8) video {
    object-position: 20% center !important;
  }
}

/* Section 9 — Contact Us: 10% from left on mobile */
@media only screen and (max-width: 1049px) {
  .cd-section:nth-of-type(9) video {
    object-position: 10% center !important;
  }
}