/* Navbar Component Styles - Advanced Shadow & Color Layering */

/* Color Layering Variables for Navbar */
:root {
  /* Base navbar color: #F6F7FC (246, 247, 252) */
  --navbar-layer-1: hsl(228, 33%, 98%);    /* Lightest - base background */
  --navbar-layer-2: hsl(228, 33%, 93%);    /* -5% lightness - subtle depth */
  --navbar-layer-3: hsl(228, 33%, 88%);    /* -5% lightness - elevated hover */
  --navbar-layer-4: hsl(228, 33%, 83%);    /* -5% lightness - active state */
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-24);
  
  /* Layer 1: Base background with subtle gradient for depth */
  background: linear-gradient(180deg, 
    var(--navbar-layer-1) 0%, 
    hsl(228, 33%, 96%) 100%
  );
  
  /* No border - using shadow layering instead */
  height: 5rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  
  /* Two-layer shadow: Light on top + dark below for realism */
  box-shadow: 
    0 1px 0 0 rgba(255, 255, 255, 0.8) inset,  /* Light inner shadow on top */
    0 2px 8px rgba(0, 0, 0, 0.04),              /* Small shadow: subtle depth */
    0 1px 2px rgba(0, 0, 0, 0.02);              /* Ambient shadow */
  
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Navbar state when scrolling down (hidden) */
.navbar.nav-hidden {
  transform: translateY(-100%);
}

/* Windows 11 inspired glassmorphism effect when scrolled */
.navbar.scrolled {
  /* Layer 2: More elevated when scrolled with glassmorphism */
  background: linear-gradient(180deg, 
    rgba(246, 247, 252, 0.85) 0%, 
    rgba(246, 247, 252, 0.75) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* No border - enhanced shadow layering for scrolled state */
  /* Medium shadow: Standard elevation when scrolled */
  box-shadow: 
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,  /* Light on top */
    0 4px 16px rgba(7, 17, 41, 0.08),           /* Medium depth shadow */
    0 2px 4px rgba(7, 17, 41, 0.04),            /* Ambient shadow */
    0 1px 2px rgba(7, 17, 41, 0.02);            /* Subtle detail */
}

/* No extra padding on body */
body {
  padding-top: 0;
}

.navbar-logo {
  display: flex;
  align-items: center;
}

.navbar-logo img {
  width: 10rem;
  height: auto;
  margin-right: var(--space-4);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.navbar-links a {
  color: var(--color-fg-base);
  text-decoration: none;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-1);
  
  /* Subtle background for better interaction feedback */
  background: transparent;
}

.navbar-links a:hover {
  color: var(--color-accent-dark);
  
  /* Layer 2: Elevated on hover with gradient */
  background: linear-gradient(135deg, 
    var(--navbar-layer-2) 0%, 
    var(--navbar-layer-1) 100%
  );
  
  /* Small shadow: Subtle elevation */
  box-shadow: 
    0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
    0 2px 4px rgba(7, 17, 41, 0.06),
    0 1px 2px rgba(7, 17, 41, 0.03);
  
  transform: translateY(-1px);
}

/* Active link indicator */
.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent-dark);
  transition: width 0.3s ease;
  opacity: 0;
}

.navbar-links a:hover::after {
  width: 100%;
  opacity: 0.7;
}

.navbar-links a.active {
  color: var(--color-accent-dark);
  font-weight: var(--font-weight-semibold);
  
  /* Layer 3: Most elevated for active state */
  background: linear-gradient(135deg, 
    var(--navbar-layer-3) 0%, 
    var(--navbar-layer-2) 100%
  );
  
  /* Medium shadow: Standard elevation for active */
  box-shadow: 
    0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 3px 6px rgba(7, 17, 41, 0.08),
    0 1px 3px rgba(7, 17, 41, 0.04);
}

.navbar-links a.active::after {
  width: 100%;
  opacity: 1;
  background-color: var(--color-accent-dark);
  height: 3px;
}

.navbar-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  position: relative;
  border-radius: var(--radius-1);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.navbar-toggle:hover {
  /* Layer 2: Elevated on hover */
  background: linear-gradient(135deg, 
    var(--navbar-layer-2) 0%, 
    var(--navbar-layer-1) 100%
  );
  
  /* Small shadow */
  box-shadow: 
    0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
    0 2px 4px rgba(7, 17, 41, 0.06);
}

.toggle-icon {
  position: relative;
  width: 22px;
  height: 16px;
}

.toggle-line {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-accent-dark);
  border-radius: 4px;
  left: 0;
  transition: all 0.3s ease;
}

.toggle-icon .line-top {
  top: 0;
}

.toggle-icon .line-middle {
  top: 50%;
  transform: translateY(-50%);
}

.toggle-icon .line-bottom {
  bottom: 0;
}

/* X animation when menu is active */
.navbar-toggle[aria-expanded="true"] .line-top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.navbar-toggle[aria-expanded="true"] .line-middle {
  opacity: 0;
}

.navbar-toggle[aria-expanded="true"] .line-bottom {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Page overlay for mobile dropdown */
.navbar-overlay {
  position: fixed;
  top: 0; /* Cover the entire viewport */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(7, 17, 41, 0.75); /* Dark blue from your palette with opacity */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 95; /* Below navbar but above everything else */
}

.navbar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .navbar-toggle {
    display: block;
    position: relative;
    z-index: 1001; /* Above overlay */
  }
  
  .navbar-links {
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    flex-direction: column;
    
    /* Layer 1: Mobile menu background with gradient */
    background: linear-gradient(180deg, 
      var(--navbar-layer-1) 0%, 
      hsl(228, 33%, 96%) 100%
    );
    
    padding: var(--space-4);
    gap: var(--space-4);
    
    /* Medium shadow: Standard elevation for mobile menu */
    box-shadow: 
      0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
      0 4px 12px rgba(7, 17, 41, 0.1),
      0 2px 4px rgba(7, 17, 41, 0.05);
    
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 96; /* Above overlay but below navbar */
  }
  
  .navbar-links.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  
  .navbar-links a {
    width: 100%;
    padding: var(--space-2) 0;
    text-align: center;
  }
}