/* Navbar specific styles */
/* Make sure we force the navbar to be visible but respect the transform for hide/show */
nav[data-name="navbar"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Additional navbar styling */
.fixed.w-full.z-50 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
}

/* Mobile menu styling */
.mobile-nav-active .md\:hidden {
  display: block !important;
}

/* Ensure proper colors */
.bg-white\/90,
.backdrop-blur-md {
  --tw-bg-opacity: 0.9 !important;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}

/* White background for scrolled navbar */
.bg-white\/75 {
  background-color: rgba(255, 255, 255, 0.75) !important;
}

/* Transparent navbar styles */
.bg-transparent {
  background-color: transparent !important;
}

/* Add smooth transition for navbar transformation */
nav[data-name="navbar"] {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, padding 0.3s ease-in-out !important;
}

/* Donate button styling for better visibility on transparent backgrounds */
nav[data-name="navbar"] .btn-primary {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.5);
  font-weight: 600;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
}

/* When navbar is transparent, make the button more visible */
nav[data-name="navbar"] .btn-transparent {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Add logo filter for better visibility on transparent backgrounds */
nav[data-name="navbar"]:not(.bg-white\/75) img[alt="Sustainable Computing Network Logo"] {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Add a glow effect to the logo when navbar is transparent */
nav[data-name="navbar"]:not(.bg-white\/75) .flex-shrink-0 {
  position: relative;
}

nav[data-name="navbar"]:not(.bg-white\/75) .flex-shrink-0::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
}

/* Hover effect for donate button */
nav[data-name="navbar"] .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(16, 185, 129, 0.7);
}

/* Animation for mobile menu */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}