/* All navigation bar CSS */

.topnav-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: var(--nav-bg);
  color: var(--nav-link);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  z-index: 10;
}

.topnav-flex .active-page {
  font-weight: bold;
  padding: 1em 0.5em;
  color: var(--nav-active-text, #000);
  background: var(--nav-active, #e7875b);
  border-radius: 4px;
  text-decoration: none;
}

.topnav-flex .menu-icon {
  font-size: 2em;
  cursor: pointer;
  margin-left: auto;
  padding: 1em;
  color: var(--nav-link, #f2f2f2);
  background: none;
  border: none;
}

.topnav-flex .nav-dropdown {
  display: flex;
  gap: 1.5em;
  flex-direction: row;
}

@media (max-width: 700px) {
  .desktop-nav {
    display: flex;
  }
  .mobile-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }
  .mobile-nav .active-page {
    font-size: 1.2em;
    padding: 1em 0.5em;
    margin-right: 0.5em;
    margin-top: 1em; /* Adjust value as needed */
    background: var(--nav-active, #e7875b);
    color: var(--nav-active-text, #000);
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
  }
  .mobile-nav .menu-icon {
    display: block;
    font-size: 2em;
    cursor: pointer;
    margin: 0 auto;
    padding: 1em;
    color: var(--nav-link, #f2f2f2);
    background: none;
    border: none;
    text-align: center;
  }
  .mobile-nav .nav-dropdown {
    display: none;
    flex-direction: column;
    background: var(--nav-bg);
    width: 100%;
    border-radius: 0 0 8px 8px;
    position: static;
    max-height: 220px; /* or 300px, adjust as needed */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-active, #e7875b) var(--nav-bg, #3b3b3b);
  }
  .mobile-nav.active .nav-dropdown {
    display: flex;
  }
  .mobile-nav .nav-dropdown::-webkit-scrollbar {
    width: 6px;
    background: var(--nav-bg, #3b3b3b);
  }
  .mobile-nav .nav-dropdown::-webkit-scrollbar-thumb {
    background: var(--nav-active, #e7875b);
    border-radius: 3px;
  }
  .mobile-nav .nav-dropdown::-webkit-scrollbar-track {
    background: var(--nav-bg, #3b3b3b);
  }
  .mobile-nav .nav-dropdown a {
    padding: 1em;
    font-size: 1.1em;
    text-align: left;
    color: var(--nav-link, #f2f2f2);
    background: none;
    border: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
  }
  .mobile-nav .nav-dropdown a:hover {
    background: var(--nav-hover, #e7875b);
    color: var(--nav-active-text, #000);
  }
}

/* --- Desktop Navigation --- */
.topnav-flex.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: var(--nav-bg);
  color: var(--nav-link);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  z-index: 10;
}
.desktop-nav .nav-links {
  display: flex;
  gap: 1.5em;
}
.desktop-nav .nav-links.left { flex: 1 1 0; justify-content: flex-start; }
.desktop-nav .nav-links.center { flex: 0 1 auto; justify-content: center; }
.desktop-nav .nav-links.right { flex: 1 1 0; justify-content: flex-end; }
.desktop-nav a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  padding: 1em 0.5em;
  transition: background 0.2s;
}
.desktop-nav a:hover {
  background: var(--nav-hover, #3b3b3b);
  border-radius: 4px;
}
.desktop-nav .active {
  background: var(--nav-active, #e7875b);
  color: var(--nav-active-text, #000);
  border-radius: 4px;
}

/* --- Mobile Navigation --- */
.topnav-flex.mobile-nav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  background: var(--nav-bg);
  color: var(--nav-link);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  z-index: 10;
}
.mobile-nav .active-page {
  margin-top: 1em; /* Adjust value as needed */
  font-size: 1.2em;
  padding: 1em 0.5em;
  margin-right: 0.5em;
  background: var(--nav-active, #e7875b);
  color: var(--nav-active-text, #000);
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  display: block;
}
.mobile-nav .menu-icon {
  display: block;
  font-size: 2em;
  cursor: pointer;
  margin: 0 auto;
  padding: 1em;
  color: var(--nav-link, #f2f2f2);
  background: none;
  border: none;
  text-align: center;
}
.mobile-nav .nav-dropdown {
  display: none;
  flex-direction: column;
  background: var(--nav-bg);
  width: 100%;
  border-radius: 0 0 8px 8px;
  position: static;
  max-height: 220px; /* or 300px, adjust as needed */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-active, #e7875b) var(--nav-bg, #3b3b3b);
}
.mobile-nav.active .nav-dropdown {
  display: flex;
}
.mobile-nav .nav-dropdown::-webkit-scrollbar {
  width: 6px;
  background: var(--nav-bg, #3b3b3b);
}
.mobile-nav .nav-dropdown::-webkit-scrollbar-thumb {
  background: var(--nav-active, #e7875b);
  border-radius: 3px;
}
.mobile-nav .nav-dropdown::-webkit-scrollbar-track {
  background: var(--nav-bg, #3b3b3b);
}

/* --- Responsive Switching --- */
@media (max-width: 700px) {
  .desktop-nav { display: none !important; }
  .mobile-nav { display: flex !important; }
  .mobile-nav .nav-dropdown { display: none; }
  .mobile-nav.active .nav-dropdown { display: flex; }
}