/* navbar */
#nav {
  padding: 1rem;
  background-color: var(--dark-blue);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  transition: transform 0.2s ease-out;

  will-change: transform;

  z-index: 100;
}

/* Only the homepage nav (with .nav--scroll) should hide and slide down */
#nav.nav--scroll {
  transform: translateY(-100%);
}

#nav.nav--scroll.is-scrolled {
  transform: translateY(0);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav .logo .logo-img {
  max-width: 8rem;
}

.nav-right-col {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
}

/* nav-text-links */
.nav-text-links {
  gap: 2rem;
}

.nav-text-link {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--quicksand);
  color: var(--white);

  transition: color 0.2s ease-out;
}

.nav-text-link:hover {
  color: var(--gold);
}

.hamburger-icon,
.close-icon {
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  width: auto;
}

.nav-bg-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;

  width: 0px;

  background-color: rgba(9, 29, 49, 0.9);
  backdrop-filter: blur(4px);
  opacity: 0;

  transition:
    opacity 0.4s ease-out,
    width 0.025s ease-out;
}

@media (max-width: 1024px) {
  #nav {
    padding: 0.5rem;
  }

  .nav-right-col {
    position: absolute;
    top: 0;
    right: -720px;
    width: 95%;
    height: 100vh;
    max-width: 640px;
    background-color: var(--blue);

    flex-direction: column;
    justify-content: center;

    transition: right 0.3s ease-out;
  }

  .nav-right-col.nav-opened {
    z-index: 2;
    right: 0;
  }

  .nav-bg-overlay.visible {
    opacity: 1;
    width: 100vw;

    z-index: 1;
  }

  .nav-links {
    flex-direction: column;
    text-align: center;
  }

  .nav-links.cta-container {
    gap: 1rem;
  }
/* CTA buttons row (Volunteer / Stay in Touch / Donate) */
.nav-links.cta-container {
  align-items: center;
  gap: 0.75rem;      /* spacing between buttons */
  flex-wrap: wrap;   /* lets them wrap cleanly if space gets tight */
}

  .hamburger-icon,
  .close-icon {
    max-width: 2rem;
    cursor: pointer;
  }

  .hamburger-icon {
    display: block;
  }

  .close-icon {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
}

.nav-text-link[aria-current='page'],
.nav-text-link.is-active {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
}