/* Keep hero content readable without darkening the decorative bottom triangle. */
:root {
  --zz-hero-overlay-top: rgba(7, 11, 15, 0.34);
  --zz-hero-overlay-middle: rgba(7, 11, 15, 0.52);
  --zz-hero-overlay-bottom: rgba(7, 11, 15, 0.64);
}

#header.template-hero {
  background-attachment: scroll, scroll, scroll;
  background-position: bottom center, center center, center center;
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-size: 3200px 460px, cover, cover;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8);
}

#header.template-hero h1 {
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.88);
}

#header.template-hero .logo.navbar-brand {
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.72));
}

#header.template-hero .logo.navbar-brand::after {
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.58);
}

#header.template-hero .directive-nav a {
  background: rgba(20, 26, 31, 0.64);
  border-color: rgba(255, 255, 255, 0.94);
  color: #ffffff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.34);
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#header.template-hero .directive-nav a:hover,
#header.template-hero .directive-nav a:focus-visible {
  background: rgba(78, 185, 128, 0.96);
  border-color: #ffffff;
  color: #ffffff;
  outline: none;
}

#header.template-hero input[type="submit"],
#header.template-hero input[type="reset"],
#header.template-hero input[type="button"],
#header.template-hero .button {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.36);
}

@media screen and (max-width: 736px) {
  #header.template-hero {
    background-size: 1280px 184px, cover, cover;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9);
  }

  #header.template-hero .directive-nav a {
    background: rgba(16, 22, 27, 0.74);
    border-color: #ffffff;
  }
}