/* navbar.css */
.header {
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensure high z-index */
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Optional: Add subtle effect on scroll */
/* body.scrolled .header {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(5px);
} */

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px; /* Set a fixed height */
}

.logo {
  display: flex; /* Use flex for vertical alignment if needed */
  align-items: center;
  text-decoration: none; /* Remove underline from logo link */
  flex-shrink: 0; /* Prevent logo from shrinking */
}

.logo-img {
  height: 40px; /* Maintain logo size */
  width: auto;
  max-width: 180px; /* Limit logo width */
  object-fit: contain; /* Ensure logo scales properly */
}

.nav {
  display: flex;
  align-items: center;
  margin-left: auto; /* Push nav to the right, leaving space for logo */
}

.nav-list {
  display: flex;
  gap: var(--spacing-lg); /* Consistent spacing */
  list-style: none;
  margin: 0; /* Reset margin */
  padding: 0; /* Reset padding */
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600; /* Slightly bolder links */
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
  padding: var(--spacing-xs) 0; /* Vertical padding for larger click area */
  position: relative; /* For active indicator */
  white-space: nowrap; /* Prevent wrapping */
}

.nav-link::after {
  /* Subtle indicator for hover/active */
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-color);
  text-decoration: none; /* Remove underline on hover/active */
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%; /* Expand indicator */
}

.header-actions {
  display: flex;
  align-items: center;
  margin-left: var(--spacing-lg); /* Space between nav and actions */
}

/* Burger Icon Styles */
.burger-icon {
  display: none; /* Hidden by default on larger screens */
  flex-direction: column;
  justify-content: space-around;
  width: 28px; /* Slightly larger */
  height: 24px; /* Slightly larger */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1010; /* Ensure burger is above nav list */
  margin-left: var(--spacing-md); /* Space burger from logo if actions hidden */
}

.burger-line {
  width: 100%;
  height: 3px; /* Thicker lines */
  background-color: var(--text-primary);
  border-radius: var(--border-radius-pill);
  transition: all 0.3s linear;
  position: relative;
  transform-origin: center; /* Animate from center */
}

/* Burger Animation */
.burger-icon.burger-active .burger-line:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg); /* Adjust translate Y */
}

.burger-icon.burger-active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-icon.burger-active .burger-line:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg); /* Adjust translate Y */
}

/* Media Query for Small Screens */
@media (max-width: 992px) {
  .nav-list {
    gap: var(--spacing-md); /* Reduce gap */
  }
  .header-actions .btn {
    padding: var(--spacing-xs) var(--spacing-md); /* Smaller button */
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 768px) {
  .header-container {
    position: relative; /* Needed for absolute positioning of nav-list */
  }

  .nav {
    order: 3; /* Move nav controls (burger) to the end */
    margin-left: 0; /* Remove margin */
  }

  .header-actions {
    display: none; /* Hide desktop "Get in Touch" button */
  }

  .nav-list {
    display: none; /* Hide list initially */
    position: absolute;
    top: calc(100% + 1px); /* Position below header + border */
    left: 0;
    width: 100%;
    background-color: var(--bg-primary);
    flex-direction: column; /* Stack links vertically */
    padding: var(--spacing-md) var(--container-padding); /* Use container padding */
    margin: 0;
    box-shadow: var(--shadow-md);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    z-index: 1005; /* Below burger icon */
    gap: 0; /* Remove flex gap for vertical list */
    max-height: calc(100vh - 60px); /* Limit height */
    overflow-y: auto; /* Allow scroll if needed */
  }

  .nav-list.nav-active {
    display: flex; /* Show nav list when active */
  }

  .nav-list li {
    width: 100%; /* Full width list items */
  }

  .nav-link {
    display: block; /* Make links block-level */
    padding: var(--spacing-sm) 0; /* Vertical padding for touch */
    text-align: left; /* Align text left */
    border-bottom: 1px solid var(--border-color);
    width: 100%;
  }
  .nav-link::after {
    display: none; /* Hide underline indicator on mobile */
  }

  .nav-list li:last-child .nav-link {
    border-bottom: none; /* Remove border from last item */
  }

  .burger-icon {
    display: flex; /* Show burger icon */
  }
}