/* ============================================================
   Filterbuy Ventures — targeted fixes layered over the Elementor
   mirror. Loaded last; uses !important so it wins. The original
   scraped CSS is left untouched.
   ============================================================ */

/* --- Hero background video: show it without Elementor's JS ---
   Elementor's frontend JS normally fades the video container in.
   That JS doesn't run on a static mirror, so force it visible. */
.elementor-background-video-container { opacity: 1 !important; }
/* The <video> element needs explicit dimensions to cover the hero.
   Elementor's JS normally computes and sets these inline; without it the
   video has no size, so it plays but isn't visible. Force full-cover. */
.elementor-background-video-hosted {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}

/* --- Hero overlay: remove the mix-blend-mode multiply ---
   The original overlay multiplied a periwinkle->dark gradient over
   the video. When the video isn't composited (notably on mobile),
   the periwinkle dominated and showed as a light-blue band across
   the header. Replace it with a plain dark gradient that renders
   identically regardless of what's behind it. */
.elementor-element-a964011::before,
.elementor-element-a964011 > .elementor-background-video-container::before,
.elementor-element-a964011 > .e-con-inner > .elementor-background-video-container::before {
  mix-blend-mode: normal !important;
  background-image: linear-gradient(
    180deg,
    rgba(135, 161, 242, 0.30) 0%,
    rgba(2, 6, 18, 0.55) 45%,
    rgba(2, 6, 18, 0.96) 100%
  ) !important;
}

/* --- Carry the dark theme through the whole page ---
   The Newsletter + Social sections at the foot of every page had no
   background set, so they rendered white against the dark site.
   Give them the site's dark base so the theme is continuous. */
.elementor-element-b789b38,
.elementor-element-4b6290e {
  background-color: #020612 !important;
}

/* --- About page (.elementor-369): page-head was left washed-out ---
   About's page-head (a964011) has a near-WHITE bg image (fv-background-1)
   over a periwinkle bg-color. The original darkened it with a #020612
   multiply overlay — but that overlay is a ::before whose `content` is
   `none` on the scrape (the scrape lost the --background-overlay var), so
   it never renders. Fix the section directly: swap to a dark particle-wave
   image like the other pages, over a dark base — no ::before dependency. */
.elementor-369 .elementor-element-a964011 {
  background-color: #020612 !important;
  background-image: url("/wp-content/uploads/2025/02/particle-wave-dark-bg-1-scaled.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* a1bb676 is a raw periwinkle section that lost its dark overlay in the
   scrape. It has no background image, so just restore the dark color. */
.elementor-369 .elementor-element-a1bb676 {
  background-color: #020612 !important;
}

/* --- Mobile menu: fade-in-down entrance, matching the original Elementor
   popup (#283 was configured with entrance_animation: fadeInDown). The
   overlay fades in; the menu content drops in from slightly above. --- */
@keyframes fv-menu-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fv-menu-down {
  from { opacity: 0; transform: translateY(-44px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.fv-mm-open [data-elementor-id="283"] {
  animation: fv-menu-fade 0.2s ease both !important;
}
body.fv-mm-open [data-elementor-id="283"] > .elementor-element {
  animation: fv-menu-down 0.38s cubic-bezier(0.22, 0.68, 0.31, 1) both !important;
}

/* --- Header nav size unification (added 2026-05-15) ---
   Elementor's .elementor-item is 0.75rem. The Elementor-scrape pages
   (homepage / partner / contact) render with html font-size of 22px →
   nav items at 16.5px. The hand-built editorial pages override html
   to 16px → nav items at 12px. Pin nav font-size to absolute px so
   it's consistent across all pages regardless of rem base. */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu--main .elementor-item {
  font-size: 16.5px !important;
  letter-spacing: 1.32px !important;
}

/* --- Partner page hero: bring inside the editorial-page width system (added 2026-05-15) ---
   The Partner page is an Elementor scrape with a wide-by-default hero. Constrain the
   hero inner content to 880px to match the editorial pages (about, boring-money,
   newsletter). The hero container background (video / decorative curves) stays
   full-width; only the text content centers in a narrower column.
   The 6-card "Businesses We're Interested In" and the 4-column "Why Owners Partner
   With Us" sections are left untouched — they're designed to fill their containers. */
body.page-id-302 #hero {
  padding-top: 200px !important;
  padding-bottom: 100px !important;
}
body.page-id-302 #hero > .e-con-inner {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}