/* v1.3 — exact integration with the site's exported Bricks header.
   The active header uses .landing-nav-header and .navbar-logo.
   On Impact Alliance / Resource Hub pages we place that header over the hero,
   keep it fully transparent at the top, then return to the site's glass header
   treatment once the visitor scrolls away from the hero top. */

body.mspo-impact-page #brx-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
}

body.mspo-impact-page .landing-nav-header.hasscrolleffect {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* True transparent state over the hero. */
body.mspo-impact-page.mspo-impact-hero-top #brx-header,
body.mspo-impact-page.mspo-impact-hero-top .landing-nav-header.hasscrolleffect,
body.mspo-impact-page.mspo-impact-hero-top .landing-nav-header.hasscrolleffect .nav-header--inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mspo-impact-page.mspo-impact-hero-top .landing-nav-header.hasscrolleffect {
  color: #ffffff !important;
}

body.mspo-impact-page.mspo-impact-hero-top .landing-nav-header.hasscrolleffect .navbar-logo {
  filter: brightness(0) invert(1) saturate(0) contrast(100) !important;
}

/* Return to the existing glass-nav visual language after leaving the top of the hero. */
body.mspo-impact-page:not(.mspo-impact-hero-top) #brx-header {
  position: fixed !important;
}

body.mspo-impact-page:not(.mspo-impact-hero-top) .landing-nav-header.hasscrolleffect {
  position: fixed !important;
  background-color: var(--glass-nav-bg-color) !important;
  backdrop-filter: blur(var(--glass-nav-bg-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-nav-bg-blur)) !important;
  border: 1px solid var(--glass-nav-border-color) !important;
  color: var(--color-black) !important;
}

body.mspo-impact-page:not(.mspo-impact-hero-top) .landing-nav-header.hasscrolleffect .navbar-logo {
  filter: none !important;
}

/* Keep mobile navigation behaviour owned by the site's existing header styles. */
body.mspo-impact-page .landing-nav-header:has(.navbar-mobile-wrapper.brx-open),
body.mspo-impact-page .landing-nav-header:has(.navbar-mobile-wrapper.brx-open) .nav-header--inner {
  background-color: #ffffff !important;
  color: var(--color-black) !important;
}

/* WG cards link to their Resource & Knowledge Hub anchor. */
.wg-card:focus-visible { outline: 2px solid #26a9e0; outline-offset: 3px; }

/* Launch showcase tab content. */
.tab-content { display: none !important; opacity: 0; transition: opacity .32s ease; }
.tab-content.showing { display: flex !important; }
.tab-content.fade-in { opacity: 1; }

/* Insights quote slider. */
.slider { position: relative; overflow: hidden; }
.slider .slide {
  position: absolute;
  inset: 0;
  transform: translateX(100%) scale(.97);
  opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .42s ease;
}
.slider .slide.active { transform: translateX(0) scale(1); opacity: 1; z-index: 2; }
.slider .slide.to-left { transform: translateX(-100%) scale(.97); opacity: 0; }
.slider .slide.to-right { transform: translateX(100%) scale(.97); opacity: 0; }
#prevBtn.disabled, #nextBtn.disabled { opacity: .35; pointer-events: none; }

/* v1.5 — subtle WG icon hover motion requested for the Impact Alliance cards.
   Kept deliberately restrained: a small lift + scale, not a bouncy animation. */
.wg-card > .brxe-icon {
  transition:
    transform .32s cubic-bezier(.16,1,.3,1),
    opacity .32s ease;
  transform-origin: center center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .wg-card:hover > .brxe-icon {
    transform: translateY(-4px) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wg-card > .brxe-icon {
    transition: none;
  }

  .wg-card:hover > .brxe-icon {
    transform: none;
  }
}