/* Header nav style: transparent / blur (header_nav_style) */

body.header-nav-style-transparent .header:not(.show-slide) .navbar-top,
body.header-nav-style-transparent .header.nav-style-transparent .navbar-top {
  background: transparent !important;
  box-shadow: none !important;
}

body.header-nav-style-blur .header:not(.show-slide) .navbar-top,
body.header-nav-style-blur .header.nav-style-blur .navbar-top,
.header.nav-style-blur .navbar-top {
  background: var(--blur-bg, rgba(255, 255, 255, 0.72)) !important;
  -webkit-backdrop-filter: saturate(5) blur(16px);
  backdrop-filter: saturate(5) blur(16px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

body.theme-dark.header-nav-style-blur .header:not(.show-slide) .navbar-top,
html.dark body.header-nav-style-blur .header:not(.show-slide) .navbar-top,
body.dark-theme.header-nav-style-blur .header:not(.show-slide) .navbar-top {
  background: var(--blur-bg, rgba(20, 22, 28, 0.72)) !important;
}

/* When show-slide + fixed, keep zibll transparent gradient (already in core).
   Transparent style reinforces that paint while resting at top of hero. */
body.nav-fixed.header-nav-style-transparent:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide,
body.nav-fixed.header-nav-style-blur:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide {
  --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.12) 80%);
  --header-color: #fff;
}

body.header-nav-style-transparent .header.show-slide .navbar-top,
body.header-nav-style-blur .header.show-slide .navbar-top {
  background: transparent !important;
  -webkit-backdrop-filter: unset;
  backdrop-filter: unset;
  box-shadow: none !important;
  color: var(--header-color, inherit);
}