/* Unified Navigation System */
/* Header Navigation Styles */
.header-navigation {
  position: relative;
}

.hamburger-button {
  color: #9ca3af; /* text-gray-400 */
  padding: 8px;
  transition: color 0.3s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}

.hamburger-button:hover {
  color: #d1d5db; /* text-gray-300 */
}

.hamburger-button svg {
  width: 40px;
  height: 40px;
}

/* Dropdown Menu */
.navigation-dropdown {
  position: absolute;
  top: 100%;
  right: 40px; /* Much larger margin from right edge */
  margin-top: 8px;
  background-color: rgba(31, 41, 55, 0.95); /* bg-gray-800 bg-opacity-95 */
  backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid #374151; /* border-gray-700 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 50;
  min-width: 180px;
  max-width: 280px; /* Fixed max width to prevent overflow */
  width: auto;
  overflow: hidden; /* Prevent any content overflow */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.navigation-dropdown.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  display: block !important;
}

/* Force override Tailwind's hidden class when showing menu */
.navigation-dropdown.show.hidden {
  display: block !important;
}

.navigation-dropdown .menu-content {
  padding: 8px;
  overflow: hidden; /* Prevent content overflow */
  box-sizing: border-box;
}

/* Menu Items - Unified Hover for All */
.menu-item {
  display: block;
  color: #9ca3af !important; /* text-gray-400 - force override */
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.025em;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
  background: transparent !important;
  -webkit-text-fill-color: #9ca3af !important;
}

/* Universal hover state for ALL menu items */
.menu-item:hover,
.menu-item.silver-metallic:hover,
.menu-item:focus,
.menu-item:active {
  color: #ffffff !important;
  background-color: #374151 !important;
  transform: translateX(2px);
  -webkit-text-fill-color: #ffffff !important;
  background: #374151 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.menu-item.active {
  color: #ffffff;
  background-color: #059669;
}

.menu-item.silver-metallic {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  background: transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Force override any conflicting styles from other stylesheets */
#mainMenuDropdown a,
#mainMenuDropdown .menu-item,
.navigation-dropdown a,
.navigation-dropdown .menu-item,
#footerMenuDropdown a,
#footerMenuDropdown .menu-item {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  background: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  font-size: 14px !important; /* Ensure consistent font size */
}

/* Hover states for all menu items */
#mainMenuDropdown a:hover,
#mainMenuDropdown .menu-item:hover,
.navigation-dropdown a:hover,
.navigation-dropdown .menu-item:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #374151 !important;
  transform: translateX(2px);
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/* Social Media Section */
.social-section {
  border-top: 1px solid #374151; /* border-gray-700 */
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 8px;
}

.social-icon-link {
  background-color: rgba(255, 255, 255, 0.1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon-link:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Individual social icon hover effects */
.social-icon-link[aria-label="YouTube"]:hover svg {
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
}

.social-icon-link[aria-label="Instagram"]:hover svg {
  filter: drop-shadow(0 0 5px rgba(225, 48, 108, 0.7));
}

.social-icon-link[aria-label="X (Twitter)"]:hover svg {
  fill: #1DA1F2;
  filter: drop-shadow(0 0 5px rgba(29, 161, 242, 0.7));
}

.social-icon-link[aria-label="TikTok"]:hover svg {
  fill: #25F4EE;
  filter: drop-shadow(0 0 5px rgba(37, 244, 238, 0.7));
}

/* Footer Navigation */
.footer-navigation {
  position: relative;
}

.footer-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background-color: rgba(31, 41, 55, 0.95);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid #374151;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 50;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.footer-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.footer-menu-item {
  display: block;
  color: #9ca3af;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px !important; /* Match header menu font size */
  font-weight: 500;
}

.footer-menu-item:hover {
  color: #ffffff;
  background-color: #374151;
  transform: translateX(2px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .navigation-dropdown {
    min-width: 160px;
    right: -10px;
  }
  
  .menu-item {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Hidden class utility - only for menu authentication items */
.menu-item.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Social Media Section */
.social-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #374151; /* border-gray-700 */
}

.social-icons {
  display: flex;
  gap: 20px;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
}

.social-icons a {
  color: #9ca3af !important; /* text-gray-400 */
  transition: color 0.2s ease;
  text-decoration: none;
}

.social-icons a:hover {
  color: #ffffff !important; /* text-white */
}

/* Footer Dropdown - should appear above the button */
#footerMenuDropdown {
  bottom: 100% !important;
  top: auto !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}