/* Main navbar container - uses flexbox to align items horizontally */
.navbar {
  display: flex;
  justify-content: space-between; /* Spreads items (logo, nav, buttons) evenly */
  align-items: center; /* Vertically centers all navbar items */
  padding: 20px 20px; /* Adds spacing around the navbar */
  position: relative;
  z-index: 1000; /* Ensures navbar stays above all other content */
}

/* Logo styling - makes the logo image 50px tall */
.logo img {
  height: 50px;
}

/* Navigation links - both desktop and mobile versions */
/* Uses flexbox to arrange items horizontally with spacing */
.nav-links,
.nav-links-m {
  display: flex;
  list-style: none; /* Removes bullet points from list */
  font-weight: bold;
  gap: 1.5rem; /* Spacing between navigation items */
}

/* Styling for navigation links (both desktop and mobile) */
.nav-links a,
.nav-links-m a {
  font-weight: 100; /* Light font weight for links */
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.05em; /* Slight spacing between letters */
  color: #fff; /* White text color */
  opacity: 0.7; /* Slightly transparent */
  transition: all 0.6s; /* Smooth animation on hover/active states */
}

/* Mobile menu dropdown - positioned at top right of screen */
.nav-menu {
  position: absolute;
  top: 5rem; /* Position below the navbar */
  right: 2rem; /* Align to right side */
  display: flex; /* keep in flow so transitions can run */
  flex-direction: column; /* Stack items vertically */
  align-items: end; /* Align items to the right */
  overflow-x: hidden; /* Hide horizontal overflow */
  gap: 1rem; /* Spacing between menu items */
  padding: 1rem;
  padding-bottom: 1.5rem;
  width: 300px;
  border-radius: 1rem; /* Rounded corners */
  background-color: #1a1a1a1c; /* Semi-transparent dark background */
  border: 2px solid rgba(255, 255, 255, 0.226); /* Light border */
  backdrop-filter: blur(70px); /* Blur effect behind menu */
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Menu not clickable when hidden */
  transform: translateY(-6px) scale(0.99); /* Slightly scaled and moved up */
  z-index: 999; /* Appears above most content */
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); /* Smooth animations */
}

/* Class added when menu is open - makes menu visible and interactive */
.nm-open {
  opacity: 1; /* Make visible */
  pointer-events: auto; /* Allow clicking on menu */
  transform: translateY(0) scale(1); /* Return to normal size and position */
}

/* Mobile navigation links - displayed as vertical list in dropdown menu */
.nav-links-m {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 1rem; /* Spacing between items */
  padding: 0;
  margin: 0;
}

/* Individual mobile menu items styling */
.nav-links-m li {
  background-color: rgba(0, 255, 255, 0.007); /* Very subtle cyan background */
  padding: 7px 14px; /* Padding inside each item */
  width: calc(100% - 24px); /* Full width minus padding */
  text-align: right; /* Right-align text */
  border-radius: 0.5rem; /* Rounded corners */
}

/* Hover and active states for navigation links */
.nav-links a:hover,
.nav-links a.active {
  color: #5ab3e9; /* Change to blue/cyan color */
  font-weight: 700; /* Bold the text */
  opacity: 1; /* Make fully visible */
}

/* Right side of navbar - contains buttons and menu toggle */
.nav-right {
  display: flex;
  gap: 20px; /* Spacing between items */
  align-items: center; /* Vertically center items */
}

/* Hamburger menu button - only visible on mobile */
.burger {
  width: 28px;
  height: 28px;
  flex-direction: column;
  justify-content: center; /* Center items vertically */
  align-items: center;
  gap: 5px; /* Spacing between burger lines */
  padding: 10px;
  border-radius: 50%; /* Circular button */
  transition: background-color 0.3s ease-in-out; /* Smooth background color change */
  background-color: #5ab2e917; /* Subtle cyan background */
  display: none; /* Hidden by default (shown on mobile) */
  z-index: 998; /* Above menu content */
}

/* Hamburger button hover state */
.burger:hover {
  background-color: #ffffff70; /* Lighter background on hover */
}

/* Individual lines/bars of the hamburger menu */
.burger-line {
  background-color: #ffffffd7; /* Light white lines */
  width: 80%; /* 80% of burger width */
  height: 3px;
  border-radius: 6px; /* Rounded ends */
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.2s linear; /* Smooth animation for rotating and fading */
}

.get-in-touch,
.get-in-touch-m{
  padding: 1rem 1.3rem;
  align-items: center;
  justify-content: center;
}

/* Mobile "Get In Touch" button - hidden on desktop, shown on mobile */
.get-in-touch-m {
  display: none;
}

/* Horizontal divider in mobile menu - hidden by default */
.nav-menu hr {
  display: none;
}

/* ============================================
   Responsive Design - Media Queries
   ============================================ */

/* Tablets and smaller desktops (1024px and below) */
@media only screen and (max-width: 1024px) {
  .nav-links li {
    display: none; /* Hide desktop navigation links */
  }

  .burger {
    display: flex; /* Show hamburger menu button */
  }
}

/* Mobile phones (600px and below) */
@media only screen and (max-width: 600px) {
  .get-in-touch {
    display: none; /* Hide desktop "Get In Touch" button */
  }

  .get-in-touch-m,
  .nav-menu hr {
    display: flex; /* Show mobile "Get In Touch" button and divider */
  }
}

/* ============================================
   Hamburger Menu Animation - Burger to X
   ============================================ */

/* Top line: rotates and moves down to form the top "/" of the X */
.burger.open .burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

/* Middle line: fades out */
.burger.open .burger-line:nth-child(2) {
  opacity: 0;
}

/* Bottom line: rotates and moves up to form the bottom "\" of the X */
.burger.open .burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* When menu is open, prevent scrolling of the background page */
body.menu-open {
  overflow: hidden; /* Disable scrolling */
}

/* ============================================
   Backdrop Overlay - darkens background when menu is open
   ============================================ */

.nav-backdrop {
  position: fixed;
  inset: 0; /* Covers entire screen */
  background: rgba(0, 0, 0, 0.25); /* Semi-transparent dark overlay */
  backdrop-filter: blur(1px); /* Slight blur effect on background */
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Not clickable when hidden */
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); /* Smooth fade in/out */
}

/* When menu is open, show and enable the backdrop */
body.menu-open .nav-backdrop {
  opacity: 1; /* Make visible */
  pointer-events: auto; /* Allow clicking to close menu */
}