/* === HEADER & NAVIGATION STYLES === */

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(10,10,15,0.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,255,255,0.2);
  z-index:1000;
  box-shadow:0 4px 30px rgba(0,0,0,0.5);
  transition:background 0.3s ease;
}

.header-content {
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 2rem;
}

.logo-container {
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}

.logo-image {
  width:42px;
  height:42px;
  display:block;
  object-fit:contain;
}

/* Method 1: CSS filter color shift - keeps original depth */
.logo-image.filter-shift {
  filter:
    hue-rotate(180deg)
    saturate(3)
    brightness(1.5)
    contrast(1.2)
    drop-shadow(0 0 10px rgba(0,255,255,0.6));
  animation:logoPulse 3s ease-in-out infinite;
}

/* Method 2: Gradient overlay using mix-blend-mode */
.logo-image.gradient-blend {
  position:relative;
}

.logo-image.gradient-blend::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 100%);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% {
    opacity:0.8;
  }
  50% {
    opacity:1;
  }
}

.logo {
  font-family:'JetBrains Mono', monospace;
  font-size:1.5rem;
  font-weight:700;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.5px;
  position:relative;
}

.logo::before {
  content:'▸';
  position:absolute;
  left:-20px;
  color:var(--cyan);
  animation:blink 1.5s infinite;
}

@keyframes blink {
  0%, 49% { opacity:1; }
  50%, 100% { opacity:0; }
}

nav ul {
  list-style:none;
  display:flex;
  gap:2rem;
  align-items:center;
}

nav a {
  text-decoration:none;
  color:#bbb;
  font-weight:500;
  font-size:0.95rem;
  transition:all 0.3s ease;
  position:relative;
  padding:0.5rem 0;
}

nav a::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  transition:width 0.3s ease;
}

nav a:hover {
  color:#fff;
}

nav a:hover::after {
  width:100%;
}

/* === DROPDOWN MENU === */
.dropdown {
  position:relative;
}

.dropdown-toggle {
  cursor:pointer;
  color:#bbb;
  font-weight:500;
  font-size:0.95rem;
  transition:all 0.3s ease;
  padding:0.5rem 0;
  position:relative;
}

.dropdown-toggle::before {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  transition:width 0.3s ease;
}

/* Underline on hover for all screens */
.dropdown:hover .dropdown-toggle {
  color:#fff;
}

.dropdown:hover .dropdown-toggle::before {
  width:100%;
}

.dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  background:rgba(10,10,15,0.98);
  backdrop-filter:blur(20px);
  border:1px solid rgba(0,255,255,0.2);
  border-radius:8px;
  padding:0.5rem 0;
  min-width:200px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all 0.3s ease;
  z-index:1000;
  margin-top:0.5rem;
}

/* Prevent dropdown from falling off right edge */
.dropdown:last-child .dropdown-menu,
.dropdown.align-right .dropdown-menu {
  left:auto;
  right:0;
}

/* Desktop: show dropdown on hover */
@media(min-width:769px) {
  .dropdown:hover .dropdown-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

.dropdown-menu a {
  display:block;
  padding:0.75rem 1.5rem;
  color:#bbb;
  transition:all 0.3s ease;
  border-left:3px solid transparent;
}

.dropdown-menu a::after {
  display:none;
}

.dropdown-menu a:hover {
  background:rgba(0,255,255,0.1);
  border-left-color:var(--cyan);
  color:#fff;
  padding-left:1.75rem;
}

.menu-toggle {
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
  padding:0.5rem;
}

.menu-toggle span {
  width:28px;
  height:3px;
  background:var(--cyan);
  border-radius:2px;
  transition:all 0.3s ease;
}

/* === MOBILE RESPONSIVE === */
@media(max-width:768px) {
  .header-content {
    padding:1rem;
  }

  .logo-image {
    width:32px;
    height:32px;
  }

  .logo {
    font-size:1.1rem;
  }

  nav {
    position:absolute;
    top:100%;
    right:0;
    background:rgba(10,10,15,0.98);
    backdrop-filter:blur(20px);
    border:1px solid rgba(0,255,255,0.2);
    border-top:none;
    width:250px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }

  nav.show {
    max-height:500px;
    padding:1.5rem;
  }

  nav ul {
    flex-direction:column;
    gap:1.5rem;
    align-items:flex-start;
  }

  /* Mobile dropdown */
  .dropdown-menu {
    position:static;
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden;
    transform:translateY(0);
    margin-top:0;
    margin-left:1rem;
    background:rgba(0,255,255,0.05);
    border:1px solid rgba(0,255,255,0.15);
    transition:all 0.3s ease;
  }

  .dropdown.active .dropdown-menu {
    opacity:1;
    visibility:visible;
    max-height:300px;
    margin-top:0.5rem;
  }

  .dropdown.active .dropdown-toggle::before {
    width:100%;
  }

  .menu-toggle {
    display:flex;
  }
}