/* Navigation styles */
@layer components {
  /* Fixed header - Light mode: white, Dark mode: black */
  .header-fixed {
    @apply fixed top-0 left-0 right-0 z-50;
    @apply bg-white shadow-sm;
  }

  .dark .header-fixed {
    @apply bg-black shadow-none;
  }

  /* Nav link default state - Light mode: dark text, Dark mode: white text */
  .nav-link {
    @apply inline-flex items-center;
    @apply text-gray-700 bg-transparent;
    @apply transition-all duration-150 ease-in-out;
    @apply px-3 py-2;
    @apply cursor-pointer font-light text-sm;
  }

  .dark .nav-link {
    @apply text-white;
  }

  .nav-link:hover {
    @apply bg-black text-white;
  }

  .dark .nav-link:hover {
    @apply bg-white text-black;
  }

  /* Active state */
  .nav-link.active {
    @apply bg-black text-white;
  }

  .dark .nav-link.active {
    @apply bg-white text-black;
  }

  .nav-link.active:hover {
    @apply bg-black text-white;
  }

  .dark .nav-link.active:hover {
    @apply bg-white text-black;
  }

  /* Dropdown menu */
  .dropdown-menu {
    @apply absolute top-full left-0 w-48;
    @apply bg-white shadow-lg py-2;
    @apply opacity-0 invisible;
    @apply transition-all duration-200 z-50;
  }

  .dark .dropdown-menu {
    @apply bg-black;
  }

  .group:hover .dropdown-menu {
    @apply opacity-100 visible;
  }

  /* Dropdown item */
  .dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700;
    @apply hover:bg-black hover:text-white;
  }

  .dark .dropdown-item {
    @apply text-gray-300;
    @apply hover:bg-white hover:text-black;
  }
}