/* Global navbar dark theme and mobile collapse background */

/* Readable links on dark nav across all sizes */
.navbar-dark .navbar-nav .nav-link {
  color: #ffffff !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #cfe0ff !important;
}

/* Ensure dark background and readable links when collapsed on mobile */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #0b1020; /* deep navy to match brand */
    padding: 0.75rem 1rem;
  }
  .navbar-nav .nav-link {
    color: #ffffff !important;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: #cfe0ff !important;
  }
}

/* Smooth transition when sticky header toggles */
.navbar {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Optional: when scrolled, keep dark theme even if page sections are light */
.navbar.fixed-top.scrolled,
.navbar.bg-dark {
  background-color: #0b1020 !important;
}

/* Toggler icon visibility assurance for dark backgrounds */
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}
.navbar-dark .navbar-toggler-icon {
  filter: none; /* use Bootstrap’s light icon */
}

/* Improve dropdown behavior: use opacity+transform for smooth animation
   and ensure dropdowns appear above fixed header/background. Avoid
   relying on display:none so transitions are visible and avoid flashing. */
.dropdown {
  /* allow positioning context and visibility handling */
  position: relative;
}

/* Force dropdown menus to be visible to the layout but hidden via opacity
   so we can animate. Bootstrap toggles .show; we use that to animate state. */
.dropdown-menu {
  display: block !important; /* keep in layout so transitions run */
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s cubic-bezier(.2,.9,.3,1), transform .18s cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
  z-index: 2000; /* higher than fixed header */
}

/* When Bootstrap adds .show, animate into place and allow interaction */
.dropdown.show > .dropdown-menu,
.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Ensure fixed header doesn't clip dropdowns */
.navbar, .fixed-top {
  overflow: visible !important;
}

/* Make sure dropdowns on small screens stretch and remain visible */
@media (max-width: 576px) {
  .dropdown-menu { left: 8px !important; right: 8px !important; width: auto !important; border-radius: 10px; }
}