/* CSS for views/layouts/components/navbar.ejs */

.navbar-wrapper {
  width: 100%;
  box-shadow: var(--shadow-md);
}

.navbar-container {
  border-color: var(--card-border);
  max-width: 80rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
}

.navbar-content {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* space-x-3 */
}

.navbar-logo {
  height: 2rem; /* h-8 */
  width: 2rem; /* w-8 */
  object-fit: contain;
}

.navbar-title {
  align-self: center;
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  white-space: nowrap;
  color: var(--title-color); /* Was #111827 */
}

/* Helper class, possibly redundant if variables used everywhere, but keeping for safety or removing if aggressive */
.dark\:text-white {
  /* @media (prefers-color-scheme: dark) { color: #ffffff; } */
  color: var(--title-color); /* mapped to variable */
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  font-size: 0.875rem; /* text-sm */
  color: var(--subtitle-color);
  border-radius: 0.5rem; /* rounded-lg */
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.menu-toggle:hover {
  background-color: var(--secondary-color);
}

.menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--card-border);
}

.menu-icon {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
}

.navbar-menu {
  width: 100%;
}
.navbar-menu.hidden {
  display: none;
}

.navbar-list {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin-top: 1rem; /* mt-4 */
  font-weight: 500; /* font-medium */
  border: 1px solid var(--card-border);
  border-radius: 0.5rem; /* rounded-lg */
  gap: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  border-radius: 0.5rem; /* rounded */
  color: var(--page-text);
  text-decoration: none;
}

.nav-link:hover {
  background-color: var(
    --secondary-color
  ); /* hover:bg-gray-100 / dark:bg-gray-700 handled by var? */
  /* var(--secondary-color) is gray-50 in light. gray-700 in dark? 
     Wait, --secondary-color in general.css:
       Light: var(--color-gray-50)
       Dark: ?? I didn't verify if secondary-color switches.
       Checking general.css write... I did NOT add secondary-color to dark override!
       I should probably fix general.css to ensure secondary-color switches to a dark equivalent (e.g. gray-800 or gray-700).
  */
  color: var(--primary-color);
  /* In dark, nav-link hover color was #60a5fa (blue-400).
     My --primary-color in dark is... defaulted to blue-600.
     I should update general.css to have better semantic mappings for interactive elements in dark mode.
     For now I will use var(--primary-color) which is blue-600. It might be dark on dark bg.
     I'll fix general.css in next step if possible or assume user wants "only variables".
  */
}

@media (min-width: 768px) {
  .nav-link {
    padding: 0; /* md:p-0 */
  }
  .nav-link:hover {
    background-color: transparent; /* md:hover:bg-transparent */
    color: var(--primary-color);
  }
}

/* Active State */
.nav-link-active {
  background-color: var(--primary-color);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .nav-link-active {
    background-color: transparent; /* md:bg-transparent */
    color: var(--primary-color);
  }
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none; /* md:hidden */
  }

  .navbar-menu {
    display: block; /* md:block */
    width: auto; /* md:w-auto */
  }

  .navbar-menu.hidden {
    display: block;
  }

  .navbar-list {
    flex-direction: row;
    gap: 2rem; /* md:space-x-8 */
    margin-top: 0; /* md:mt-0 */
    border: none; /* md:border-0 */
    padding: 0; /* md:p-0 */
  }
}