/* This CSS file is for the navigation bar at the top of the page */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background: #333;
  backdrop-filter: blur(10px);
  padding: 0 2rem;
  color: #fff;
  z-index: 1000;
}

/* Gradient line at the bottom of the top nav */
.header-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, #feae00, #fe4f92);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.5));
}

/* Logo text visible by default */
.header-logo h1 {
  font-size: 1.5rem !important;
  margin: 0;
  color: #f57c00; /* Apply the desired color */
  /* Remove gradient styles that conflict */
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  display: block;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: auto;
  justify-content: flex-end;
}

.nav-item {
  color: #f8fafc;
  font-weight: 500; /* Explicitly set font weight */
  font-size: 1rem; /* Explicitly set font size */
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.3s ease; /* Only transition background */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none; /* Explicitly no underline */
}

.nav-item:hover {
  background: rgba(0, 242, 254, 0.1); /* Background hover effect */
}

/* Hover effect only for text */
.nav-item:hover .nav-text {
  color: #00f2fe;
}

/* Ensure icon stays static */
.nav-icon {
  font-size: 1.5rem;
  color: #f8fafc;
  transition: none; /* No changes on hover */
}

/* Prevent any hover changes to icon */
.nav-item:hover .nav-icon {
  color: #f8fafc; /* Keep original color */
}

/* Active state */
.nav-item.active {
  color: #00f2fe;
  background: rgba(0, 242, 254, 0.15);
  font-weight: 500; /* Ensure consistent font weight in active state */
  font-size: 1rem; /* Ensure consistent font size in active state */
}

.nav-item.active .nav-icon {
  color: #f8fafc; /* Icon stays unchanged */
}

.nav-text {
  display: inline;
}

/* Default behavior for larger screens (header at the top) */
@media (min-width: 769px) {
  .header-container {
      position: relative;
  }

  body {
      
      padding-bottom: 0;
      margin: 0;
  }
}

/* Mobile devices (header at the bottom) */
@media (max-width: 768px) {
  .header-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      border-bottom: none;
      border-top: 10px solid #1d1d1d;
      background: #333;
      
  }

  /* Move gradient line to the top of the bottom nav */
  .header-container::before {
      top: 0;
      bottom: auto;
  }

  /* Hide logo text on mobile */
  .header-logo h1 {
      display: none;
  }

  /* Center logo image if text is hidden */
  .header-logo {
      justify-content: center;
  }

  .header-nav {
      width: 100%;
      justify-content: space-around;
      gap: 0.5rem;
  }

  /* Hide nav text on mobile */
  .nav-text {
      display: none;
  }

  /* Adjust nav items for icon-only display */
  .nav-item {
      padding: 0.5rem;
      gap: 0;
      justify-content: center;
      text-decoration: none;
  }

  .nav-icon {
      font-size: 1.8rem;
      color: #f8fafc;
      transition: none;
  }

  .nav-item:hover .nav-icon {
      color: #f8fafc;
  }

  body {
      padding-top: 0;
      padding-bottom: 70px; /* Height (60px) + border (10px) */
      margin: 0;
  }
  
}


/* Default: Hide mobile header logo */
.mobile-header-logo {
  display: none;
}

/* Show mobile header logo only on mobile (max-width: 768px) */
@media (max-width: 768px) {
  .mobile-header-logo {
    display: flex;
    align-items: center;    
    background: #333;
    font-size: small;
  }

  .mobile-header-logo img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.5));
  }

  /* Optionally hide desktop logo on mobile */
  .header-logo {
    display: none;
  }
  .mobile-header-logo h1 {
    font-size: 1.5rem; /* Adjust this value as needed (e.g., 1.2rem, 1rem) */
    padding-top: 10px;
    color: #f57c00; /* Apply the desired color for mobile */
  }
  
}


.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.nav-item {
  pointer-events: auto;
}

.nav-text {
  display: inline; /* Desktop */
  pointer-events: auto;
  user-select: auto;
}

@media (max-width: 768px) {
  .nav-text {
      display: none; /* Mobile */
  }
}

/* Light theme styles for navigation bar */
.light-theme .header-container {
  background: #f8fafc; /* Light background color */
  color: #333; /* Dark font color */
}

.light-theme .header-container::before {
  background: linear-gradient(to right, #007bff, #6c757d); /* Adjust gradient for light theme */
}

.light-theme .nav-item {
  color: #333; /* Dark font color for nav items */
}

.light-theme .nav-item:hover {
  background: rgba(0, 123, 255, 0.1); /* Light theme hover background */
}

.light-theme .nav-item:hover .nav-text {
  color: #007bff; /* Light theme hover text color */
}

.light-theme .nav-icon {
  color: #333; /* Dark icon color */
}

.light-theme .nav-item.active {
  color: #007bff; /* Light theme active text color */
  background: rgba(0, 123, 255, 0.15); /* Light theme active background */
}

.light-theme .nav-item.active .nav-icon {
  color: #333; /* Light theme active icon color */
}

.light-theme .nav-item:hover .nav-icon {
  color: #333; /* Keep dark icon color on hover in light theme */
}

.light-theme .mobile-header-logo {
  background: #f8fafc; /* Light background for mobile logo */
}

.light-theme .mobile-header-logo h1 {
  color: #333; /* Dark font color for mobile logo text */
}