/* NAVBAR */

.navbar {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  padding: 24px 0;

  transition: var(--transition);

  background: var(--bg);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* NAVBAR CONTAINER */

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* NAVBAR SCROLL STATE */

.navbar.scrolled {
  background: var(--glass-white-soft);

  backdrop-filter: blur(var(--blur-glass));

  -webkit-backdrop-filter: blur(var(--blur-glass));

  border-bottom: 1px solid var(--border);

  padding: 18px 0;
}

[data-theme="dark"] .navbar.scrolled {
  background: rgba(72, 99, 56, 0.12);

  border-bottom: 1px solid rgba(141, 178, 118, 0.12);
}

/* LOGO IMAGE */

.logo img {
  width: clamp(72px, 8vw, 200px);

  height: auto;

  transition: var(--transition);
}

/* NAV MENU */

.nav-menu {
  display: flex;
  align-items: center;

  gap: 42px;
}

/* NAV LINKS */

.nav-link {
  position: relative;

  font-size: 1rem;
  font-weight: 500;

  color: var(--text);

  transition: var(--transition);
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0%;
  height: 2px;

  background: var(--primary);

  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover::after {
  width: 100%;
}

/* ACTIVE LINK */

.nav-link.active {
  color: var(--text);

  opacity: 1;

  transform: scale(1.02);
}

.nav-link.active::after {
  width: 100%;
}

/* NAVBAR ACTIONS */

.navbar-actions {
  display: flex;
  align-items: center;

  gap: 20px;
}

.theme-toggle {
  width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: var(--white);
  color: var(--primary);

  cursor: pointer;

  transition: var(--transition);
}

.theme-toggle:hover {
  transform: translateY(-2px);

  background: var(--bg-hover);
}

.theme-icon {
  width: 18px;
  height: 18px;
  display: block;
}
/* MOBILE MENU BUTTON */

.mobile-menu-btn {
  display: none;

  flex-direction: column;

  gap: 6px;

  background: transparent;

  border: none;

  cursor: pointer;
}

.mobile-menu-btn span {
  width: 28px;
  height: 2px;

  background: var(--text);

  border-radius: 999px;

  transition: var(--transition);
}