/* Fix for permanently displayed menu in the bottom pill header */
.nav-links .dropdown .dropdown-content,
.nav-links .dropdown .mega-dropdown {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.nav-links .dropdown:hover .dropdown-content,
.nav-links .dropdown:hover .mega-dropdown,
.nav-links .dropdown:focus-within .dropdown-content,
.nav-links .dropdown:focus-within .mega-dropdown {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure nav links are centered properly */
.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  width: 100%;
}

.nav-links {
  justify-self: center;
  display: flex;
  width: max-content;
}

.nav-links ul {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* Parallax wave background for index.html footer (mirrors cloud-dashboard.css) */
.footer {
  position: relative;
  overflow: hidden; /* contain decorative wave */
}
.footer-parallax-bg {
  position: absolute;
  inset: 0 0 auto 0; /* top aligned */
  height: 320px; /* taller for smoother fade */
  background: url('../parallax-bg-wave.png') center top / cover no-repeat;
  filter: saturate(1.02) contrast(1.02);
  opacity: 0.75; /* lighter so it blends under text */
  pointer-events: none;
  z-index: 0;
}
/* Soft white wash at the very top so the wave blends into the newsletter heading area */
.footer-parallax-bg::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.9) 35%, rgba(255,255,255,0) 100%);
}
/* Stronger bottom fade into pure white before footer body starts */
.footer-parallax-bg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 180px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 85%);
}
.footer .footer-parallax-bg + .container { padding-top: 48px; }
.footer > .container { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .footer-parallax-bg { height: 220px; background-position: center top; opacity: 0.8; }
  .footer .footer-parallax-bg + .container { padding-top: 36px; }
}