/* Navbar base styles */
.navbar {
  background-color: transparent;
  transition: background-color 0.3s ease;
  padding: 0.2rem 1rem; /* Slim vertical padding */
}

.navbar-scrolled {
  background-color: rgba(251, 252, 253, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Navbar brand */
.navbar-brand {
  color: #fff !important;
  font-weight: bold;
  font-size: 1rem; /* smaller brand text */
  margin: 0;
  padding: 0.2rem 0; /* thinner brand padding */
}

/* Navbar links */
.navbar .nav-link {
  color: #eee !important; /* default color */
  margin: 0 0.5rem; /* slight horizontal spacing */
  padding: 0.2rem 0; /* reduce vertical padding */
  font-size: 0.9rem; /* smaller font size for compactness */
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

/* Navbar link hover using theme green */
.navbar .nav-link:hover,
.navbar .dropdown-menu .dropdown-item:hover {
  color: #75D156 !important; /* theme green on hover */
}

/* When navbar is scrolled */
.navbar-scrolled .nav-link {
  color: #333 !important; /* dark text for white background */
}

/* Hover state for navbar-scrolled */
.navbar-scrolled .nav-link:hover {
  color: #75D156 !important; /* green hover on white navbar */
}

/* Remove dropdown toggle arrow */
.dropdown-toggle::after {
  display: none !important;
}

/* Icon styles in navbar links */
.navbar .nav-link i {
  font-size: 0.9rem;
  color: inherit; /* Inherit link color */
  transition: color 0.3s ease;
}

/* Dropdown menu items – use theme green on hover */
.dropdown-menu .dropdown-item {
  color: #333; /* base color: dark charcoal */
  transition: color 0.3s ease, background-color 0.3s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #75D156; /* theme green text on hover */
  background-color: rgba(117, 209, 86, 0.1); /* light green background on hover */
}