/* Cinematic Analog Palette for Navigation */
:root {
  --deep-space: #0B1A2E;
  --analog-cream: #F5EDE0;
  --warm-signal: #D95D39;
  --patch-teal: #2A9D8F;
  --slider-grey: #4A4A4A;
}

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

/* Enhanced Navbar with Gradient Border */
.navbar {
  overflow: visible;
  background: linear-gradient(90deg, 
    var(--deep-space) 0%, 
    #0F2A3A 50%,
    var(--deep-space) 100%);
  border-bottom: 2px solid var(--patch-teal);
  position: relative;
  z-index: 1000;
  isolation: isolate; /* Creates a new stacking context */
}

.navbar a {
  float: left;
  font-size: 16px;
  color: var(--analog-cream);
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.dropdown {
  float: left;
  overflow: visible;
  position: relative;
  z-index: 1000;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: var(--analog-cream);
  padding: 14px 20px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--warm-signal);
  color: var(--analog-cream);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--analog-cream);
  min-width: 180px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  z-index: 9999; /* Very high to ensure above everything */
  border-radius: 8px;
  overflow: hidden;
}

/* Right-align the last dropdown if needed */
.dropdown:last-child .dropdown-content {
  left: auto;
  right: 0;
}

.dropdown-content a {
  float: none;
  color: var(--slider-grey);
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-weight: normal;
  transition: all 0.2s ease;
}

.dropdown-content a:hover {
  background-color: var(--patch-teal);
  color: var(--analog-cream);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Active state styling */
.navbar a.active {
  border-bottom: 2px solid var(--warm-signal);
  color: var(--warm-signal);
}

/* Navbar hover effect */
.navbar:hover {
  background: linear-gradient(90deg, 
    var(--deep-space) 0%, 
    #123A4A 50%,
    var(--deep-space) 100%);
  transition: background 0.5s ease;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
  .navbar a,
  .dropdown .dropbtn {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .dropdown-content {
    position: relative;
    width: 100%;
    left: 0 !important;
    right: auto !important;
  }
  
  .dropdown:hover .dropdown-content {
    display: none;
  }
  
  /* For mobile, show on click instead of hover */
  .dropdown.active .dropdown-content {
    display: block;
  }
}