.navbar-custom {
  background-color: transparent !important;
  transition: padding 0.3s ease-in-out;
}

.navbar-custom.scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*
  The ::before pseudo-element is used to create the blurred background.
  This is a workaround to prevent the `backdrop-filter` on the parent `.navbar`
  from creating a new stacking context, which would "trap" the `position: fixed`
  offcanvas menu and prevent it from being full-height.
*/
.navbar-custom.scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: hsla(220, 20%, 12%, 0.9); /* Deep Navy Charcoal with transparency */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1; /* Place the pseudo-element behind the navbar's content */
}

/* Ensure navbar content (links, brand) appears above the pseudo-element */
.navbar-custom .container {
  position: relative;
  z-index: 1;
}

/* Hide the navbar logo by default and prepare for fade-in */
#navbarLogoBrand {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s; /* Added a slight delay */
}

/* When the navbar is scrolled, fade in the logo */
.navbar-custom.scrolled #navbarLogoBrand {
  opacity: 1;
  transform: translateY(0);
}

/*
  Active state for the "Join Us" button in the navbar.
  This makes the button appear "pressed" or active when the user is on the membership page.
*/
.navbar-custom .btn-brand.active {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(1px);
}