/* ============================================================
   GIZMOTT × ESSENTIALS — Theme-specific overrides
   
   IMPORTANT: All heavy overrides are SCOPED to body classes
   that only apply on our custom page templates:
     .gz-home-active, .gz-features-active, .gz-pricing-active,
     .gz-ai-hub-active, .gz-contact-active, .gz-book-demo-active,
     .gz-micro-drama-active
   
   This means existing WPBakery pages (like /pricing/, /features/
   etc.) are completely untouched by this stylesheet.
   ============================================================ */

/* ── Selector shorthand — all our custom templates ── */
.gz-home-active,
.gz-features-active,
.gz-pricing-active,
.gz-ai-hub-active,
.gz-contact-active,
.gz-book-demo-active,
.gz-micro-drama-active {

  /* Essentials CSS custom property overrides */
  --text-body-default:    #F5F5F8;
  --text-heading-default: #F5F5F8;
  --pix-body-font:        'Inter', -apple-system, sans-serif;
  --pix-heading-font:     'Inter', -apple-system, sans-serif;
  --text-dark-opacity-0:  rgba(245,245,248,0);
  --text-dark-opacity-5:  rgba(245,245,248,0.5);
  --text-dark-opacity-10: #F5F5F8;
  --text-black:           #F5F5F8;
}

/* ── Background: only on our pages ── */
body.gz-home-active,
body.gz-features-active,
body.gz-pricing-active,
body.gz-ai-hub-active,
body.gz-contact-active,
body.gz-book-demo-active,
body.gz-micro-drama-active {
  background: var(--black) !important;
  background-color: var(--black) !important;
  background-image: none !important;
  color: var(--white) !important;
  font-family: var(--ff-b) !important;
}

/* ── Wrapper backgrounds: only on our pages ── */
body.gz-home-active #page,
body.gz-features-active #page,
body.gz-pricing-active #page,
body.gz-ai-hub-active #page,
body.gz-contact-active #page,
body.gz-book-demo-active #page,
body.gz-micro-drama-active #page,
body.gz-home-active #main,
body.gz-features-active #main,
body.gz-pricing-active #main,
body.gz-ai-hub-active #main,
body.gz-contact-active #main,
body.gz-book-demo-active #main,
body.gz-micro-drama-active #main,
body.gz-home-active main,
body.gz-features-active main,
body.gz-pricing-active main,
body.gz-ai-hub-active main,
body.gz-contact-active main,
body.gz-book-demo-active main,
body.gz-micro-drama-active main,
body.gz-home-active .site,
body.gz-features-active .site,
body.gz-pricing-active .site,
body.gz-ai-hub-active .site,
body.gz-contact-active .site,
body.gz-book-demo-active .site,
body.gz-micro-drama-active .site {
  background-color: var(--black) !important;
  background-image: none !important;
  color: var(--white) !important;
}

/* ── Inline white backgrounds: only on our pages ── */
body.gz-home-active *[style*="background: #fff"],
body.gz-features-active *[style*="background: #fff"],
body.gz-pricing-active *[style*="background: #fff"],
body.gz-ai-hub-active *[style*="background: #fff"],
body.gz-contact-active *[style*="background: #fff"],
body.gz-book-demo-active *[style*="background: #fff"],
body.gz-micro-drama-active *[style*="background: #fff"],
body.gz-home-active *[style*="background-color: #fff"],
body.gz-features-active *[style*="background-color: #fff"],
body.gz-pricing-active *[style*="background-color: #fff"],
body.gz-ai-hub-active *[style*="background-color: #fff"],
body.gz-contact-active *[style*="background-color: #fff"],
body.gz-book-demo-active *[style*="background-color: #fff"],
body.gz-micro-drama-active *[style*="background-color: #fff"] {
  background-color: var(--black2) !important;
}

/* ── Forms on our pages ── */
body.gz-contact-active .wpcf7 input[type="text"],
body.gz-contact-active .wpcf7 input[type="email"],
body.gz-contact-active .wpcf7 input[type="tel"],
body.gz-contact-active .wpcf7 textarea,
body.gz-book-demo-active form input,
body.gz-book-demo-active form textarea {
  background-color: var(--black3) !important;
  border-color: var(--bl2) !important;
  color: var(--white) !important;
}

/* ============================================================
   MEGA MENU — applies to ALL pages (nav is on every page)
   These rules must remain global so the nav works everywhere.
   ============================================================ */

/* Our nav always on top of Essentials */
nav.nav {
  z-index: 99999 !important;
  overflow: visible !important;
  position: sticky !important;
}

nav.nav .mega {
  z-index: 999999 !important;
}

nav.nav .nav-links > li {
  position: relative !important;
  overflow: visible !important;
}

/* Essentials default header — sit below our nav */
#masthead,
.site-header,
.essentials-header,
header.site-header {
  position: relative !important;
  z-index: 1 !important;
}

/* Essentials sticky header variants — hidden, we use our own */
.essentials-sticky-header,
.sticky-header,
#sticky-header,
.header-sticky,
#masthead.sticky,
.site-header.sticky,
.essentials-header-sticky {
  display: none !important;
}

/* WPBakery rows must not clip our nav dropdown */
.vc_row,
.vc_section,
.wpb_row {
  overflow: visible !important;
}

/* Page wrappers must not clip nav mega menus */
#page,
#wrapper,
.site,
.site-inner,
main,
#main,
#content,
#primary {
  overflow: visible !important;
}


/* ============================================================
   PAGE-SPECIFIC EXCLUSIONS
   Pages where we preserve the original Pixfort design.
   Add more page IDs here as needed: body.page-id-XXXXX
   ============================================================ */

/* /pricing/ — ID 18236 — original Pixfort/Essentials design preserved */
body.page-id-18236 {
  background: initial !important;
  background-color: initial !important;
}
body.page-id-18236 #page,
body.page-id-18236 #main,
body.page-id-18236 .site,
body.page-id-18236 main,
body.page-id-18236 #content,
body.page-id-18236 #primary {
  background-color: initial !important;
  color: initial !important;
}
body.page-id-18236 .vc_row,
body.page-id-18236 .vc_section,
body.page-id-18236 .wpb_row,
body.page-id-18236 .wpb_column,
body.page-id-18236 .vc_column-inner,
body.page-id-18236 .wpb_wrapper,
body.page-id-18236 .wpb_text_column {
  background-color: initial !important;
  color: initial !important;
}
body.page-id-18236 h1,
body.page-id-18236 h2,
body.page-id-18236 h3,
body.page-id-18236 h4,
body.page-id-18236 h5,
body.page-id-18236 h6,
body.page-id-18236 p,
body.page-id-18236 li,
body.page-id-18236 span {
  color: initial !important;
}
body.page-id-18236 [class*="pix-"],
body.page-id-18236 [class*="pix_"] {
  background-color: initial !important;
  color: initial !important;
}
/* Restore any inline-styled backgrounds Pixfort sets */
body.page-id-18236 [style*="background-color"],
body.page-id-18236 [style*="background:"] {
  background-color: unset;
}

/* ============================================================
   FIX 1 — CTA BUTTON VISIBILITY
   Ensure Book a Demo / Contact Us CTAs stay visible even when
   Essentials' global anchor styles try to override.
   ============================================================ */

/* Hero primary CTA — Book a Demo */
html body a.btn-cy,
html body .hero-ctas a.btn-cy,
html body .hero a.btn-cy {
  background: var(--cyan) !important;
  color: var(--black) !important;
  border: none !important;
  font-family: var(--ff-b, 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 24px !important;
  border-radius: 3px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html body a.btn-cy:hover {
  background: var(--cyan) !important;
  color: var(--black) !important;
  opacity: 0.85 !important;
}

/* Ghost CTA — Contact Us */
html body a.btn-ghost-hero,
html body .hero-ctas a.btn-ghost-hero {
  color: rgba(245, 245, 248, 0.55) !important;
  background: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-family: var(--ff-b, 'Inter', sans-serif) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 11px 20px !important;
  border-radius: 3px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure hero CTA row is visible as flex container */
html body .hero-ctas {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}