/* ===================================
   TOP MENU - Estilos do Menu Superior
   =================================== */

/* Menu Container */
nav.sticky {
  display: block;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 4px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* Dark mode */
nav.dark,
nav.dark.sticky {
  background-color: #1f2937;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Container interno do menu */
nav .container {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  height: 68px;
}

/* Responsivo - Container no mobile */
@media (max-width: 768px) {
  nav .container {
    height: auto;
    min-height: 60px;
  }
}

/* Segunda linha: Links de navegação */
nav .flex.mx-auto {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Links de navegação */
nav a.border-b-4 {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 0.5rem 1rem;
  text-align: center;
  width: 100%;
  font-weight: 500;
}

nav a.border-b-4:hover {
  font-weight: 700;
  padding-bottom: 0;
}

/* Estados ativo do router */
nav a.router-link-exact-active {
  font-weight: 700;
}

/* Cores das bordas - Light Mode */
nav a.border-orange-300 { border-bottom-color: #fca5a5; }
nav a.border-pink-300 { border-bottom-color: #fbcfe8; }
nav a.border-blue-300 { border-bottom-color: #93c5fd; }
nav a.border-emerald-300 { border-bottom-color: #6ee7b7; }
nav a.border-purple-300 { border-bottom-color: #d8b4fe; }
nav a.border-red-300 { border-bottom-color: #fca5a5; }
nav a.border-amber-300 { border-bottom-color: #fde68a; }

/* Hover - Aumenta a borda */
nav a.border-b-4:hover {
  border-bottom-width: 8px;
}

/* Cores dos textos - Light Mode */
nav a.text-orange-500 { color: #f97316; }
nav a.text-pink-500 { color: #ec4899; }
nav a.text-blue-500 { color: #3b82f6; }
nav a.text-emerald-600 { color: #059669; }
nav a.text-purple-500 { color: #a855f7; }
nav a.text-red-500 { color: #ef4444; }
nav a.text-amber-600 { color: #d97706; }

/* Cores dos textos - Dark Mode */
nav.dark a.text-orange-200 { color: #fed7aa; }
nav.dark a.text-pink-200 { color: #fce7f3; }
nav.dark a.text-blue-200 { color: #bfdbfe; }
nav.dark a.text-emerald-300 { color: #6ee7b7; }
nav.dark a.text-purple-200 { color: #ddd6fe; }
nav.dark a.text-red-200 { color: #fecaca; }
nav.dark a.text-amber-300 { color: #fde047; }

/* Ícones - Cores */
nav .text-gray-500 { color: #6b7280; }
nav .dark .text-gray-300 { color: #d1d5db; }

/* Hover nos ícones */
nav a.text-gray-500:hover,
nav a.text-gray-300:hover {
  color: #f97316;
}

/* Responsivo - esconde elementos em mobile */
@media (max-width: 768px) {
  nav .hidden.md\:block,
  nav .hidden.md\:flex {
    display: none !important;
  }
}

/* Botão de menu mobile */
#menu-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

#menu-button:hover {
  background-color: #f3f4f6;
}

.dark #menu-button:hover {
  background-color: #374151;
}

#menu-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #9ca3af;
}

/* Logo */
nav img.h-\[40px\] {
  height: 40px;
}

/* Gap entre ícones */
.gap-x-3 {
  gap: 0.75rem;
}

/* Botão de idioma */
.rounded-full {
  border-radius: 9999px;
}

.bg-gray-200 {
  background-color: #e5e7eb;
}

.dark .bg-gray-600 {
  background-color: #4b5563;
}

.rounded-full img {
  border-radius: 9999px;
}