/* Gradient header - consistent on all pages */
.div.theme-header-zpdark-header-portion,
.data-headercontainer {
  background: linear-gradient(to right, #7E1CCE, #2d84b4) !important;
}

/* Nav text - white by default 
.theme-menu-name {
  color: #ffffff !important;
  font-weight: 400;
}*/

/* Nav hover - bright white + bold 
li:hover .theme-menu-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}*/

/* Active page - same as hover 
li.theme-menu-selected .theme-menu-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}*/
/* Hero slider height */
.zphero.zpapply-height,
.zphero {
  height: 800px !important;
  min-height: 500px !important;
  max-height: 800px !important;
}
/* Sticky header gradient - all states */
.zpheader-style-01,
.zpheader-style-01.theme-header-fixed,
.zpheader-style-01.theme-header-animate,
[data-headercontainer="zptheme-data-headercontainer"],
.theme-header-zpdark-header-portion {
  background: linear-gradient(to right, #7E1CCE, #2d84b4) !important;
  background-color: transparent !important;
  transition: none !important;
  animation: none !important;
}

<script>
document.addEventListener("DOMContentLoaded", function() {
  var header = document.querySelector('[data-headercontainer="zptheme-data-headercontainer"]');
  if (!header) return;

  var gradient = 'linear-gradient(to right, #7E1CCE, #2d84b4)';

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'class') {
        header.style.setProperty('background', gradient, 'important');
        header.style.setProperty('background-image', gradient, 'important');
      }
    });
  });

  observer.observe(header, { attributes: true });

  // Also set it immediately on load
  header.style.setProperty('background', gradient, 'important');
});
</script>
<!-- ============================================================
  TBG home page hero: fixes the white gap on tablet and phone.
  Paste into the same site-wide footer code as the popup snippet.
  Only affects screens narrower than 1024px, and only the home
  page (the page that has the #empower section). Desktop and the
  inner pages are not touched.
============================================================ -->
<style>
/* Tablet and phone: taller purple hero, smaller illustration */
@media (max-width: 1023px) {
  body:has(#empower) .zphero,
  body:has(#empower) .zphero-slides,
  body:has(#empower) .zphero-slider-container,
  body:has(#empower) .zphero-slide {
    height: 900px !important;
    min-height: 900px !important;
  }
  body:has(#empower) .theme-banner .zpcontent-container {
    min-height: 0 !important;
    height: auto !important;
  }
  body:has(#empower) .zphero-slide img {
    max-width: 280px !important;
    max-height: 280px !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* Larger phones: heading wraps to more lines, so the hero is taller */
@media (max-width: 500px) {
  body:has(#empower) .zphero,
  body:has(#empower) .zphero-slides,
  body:has(#empower) .zphero-slider-container,
  body:has(#empower) .zphero-slide {
    height: 1040px !important;
    min-height: 1040px !important;
  }
}

/* Standard phones */
@media (max-width: 420px) {
  body:has(#empower) .zphero,
  body:has(#empower) .zphero-slides,
  body:has(#empower) .zphero-slider-container,
  body:has(#empower) .zphero-slide {
    height: 1190px !important;
    min-height: 1190px !important;
  }
}

/* Small phones */
@media (max-width: 360px) {
  body:has(#empower) .zphero,
  body:has(#empower) .zphero-slides,
  body:has(#empower) .zphero-slider-container,
  body:has(#empower) .zphero-slide {
    height: 1330px !important;
    min-height: 1330px !important;
  }
}
</style>