/* Navbar fixed to top with height 70px */
.nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height) !important;
  z-index: 9000;
  background-color: var(--navbar-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Keep container class styling but allow removal */
#navbar {
  margin: 0 auto;
  padding: 0 0px;
  background-color: var(--navbar-bg);
}

/* Brand logo alignment */
.brand-logo {
  height: 100%;
  display: flex;
  align-items: center;
}

.brand-logo img {
  height: 100%;
  width: auto;
  padding-left: 15px;
}

.nav-wrapper .nav-link {
  color: var(--navbar-text-color); /* Navbar link color */
  margin: 0 5px; /* Adds spacing between links */
  text-transform: uppercase; /* Makes link text uppercase */
  font-size: 14px; /* Sets the font size */
  font-weight: bold;
  transition: color 0.3s; /* Smooth color change on hover */
}

.nav-wrapper .nav-link:hover {
  color: var(--navbar-hover-color);
}

#menu-donation > a:hover {
  color: var(--navbar-hover-color);
}

/* Dropdown Menu Styles */
.nav-wrapper .dropdown-content {
  display: none; /* Hide by default */
  position: absolute; /* Keep it absolute */
  top: var(--nav-height) !important; /* Push it below the navbar */
  left: 0; /* Align to the left */
  background-color: var(--submenu-bg); /* Submenu background */
  min-width: 200px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 9000;
  border-radius: 5px;
  margin-top: 0px; /* Add some margin from the navbar */
}

.nav-wrapper .dropdown-content li {
  list-style: none;
}


.nav-wrapper .dropdown-content a {
  color: var(--navbar-text-color); /* Submenu link text color */
  /* padding: 10px 15px; */
  text-decoration: none;
  display: block;
  transition: background-color 0.3s;
}

.dropdown-content a:hover {
  /* background-color: var(--submenu-hover-bg); */
  background-color: var(--navbar-bg);
  color: var(--submenu-hover-text);
}

/* Ensure the parent `li` of the dropdown has correct positioning */
.nav-wrapper li {
  position: relative; /* Ensure the dropdown is positioned relative to this */
}

/* Show Dropdown on Hover (for Desktop) */
.nav-wrapper li:hover > .dropdown-content {
  display: block;
}

.nav-wrapper ul.dropdown-content,
.nav-wrapper ul.sidenav {
  background-color: var(--submenu-bg) !important;
  /* width: calc(max-content + 20px);  */
  /* Automatically resize width to content */
  width: max-content !important;
  white-space: nowrap; /* Prevent items from bending to two lines */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

.nav-wrapper ul.top-menu {
  /* Push the menu below the navbar */
  background-color: var(--submenu-bg) !important;
}

/* Mobile-Specific Styles */
.nav-wrapper .sidenav {
  background-color: var(--navbar-bg);
  top: var(--nav-height) !important; /* Start below the navbar */
  z-index: 9000; /* Ensure it’s above other content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow*/

  max-height: 100vh;
  overflow-y: auto;
}

.nav-wrapper .sidenav .nav-link {
  color: var(--navbar-text-color);
  font-size: 12px;
}

.nav-wrapper .sidenav .nav-link:hover {
  background-color: var(--navbar-hover-bg);
}

#navbar {
  margin-left: auto;
  justify-content: flex-end;
}

/* Submenu Header for Mobile */
.nav-wrapper .subheader {
  font-size: 12px;
  font-weight: bold;
  color: #ccc;
  padding: 10px 15px;
}

/* Divider for Submenu */
.nav-wrapper .divider {
  height: 1px;
  background-color: #555;
  margin: 5px 0;
}

.nav-wrapper .dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between text and dropdown icon */
}
.nav-wrapper .material-icons {
  vertical-align: middle;
}

/* Menu items alignment */
.use-full-width {
  padding: 0 20px 0 20px;

}

#menu-donate > a {
  color: yellow;
}