/* ===========================
   CarreiraMais — Navbar
   =========================== */

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.25rem;
  color: var(--primary); text-decoration: none;
}
.nav-logo:hover { text-decoration: none; color: var(--primary-dark); }
.nav-logo i { font-size: 1.4rem; }

/* Links */
.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
}
.nav-links a {
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; color: var(--text-muted);
  transition: all var(--transition);
}
.nav-links a:hover      { background: var(--bg); color: var(--primary); text-decoration: none; }
.nav-links a.active     { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* Auth buttons */
.nav-auth { display: flex; align-items: center; gap: 8px; }
.nav-user {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; font-weight: 500; color: var(--text);
}
.nav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  cursor: pointer;
}

/* Dark mode toggle */
.dark-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 2px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.dark-toggle:hover { background: var(--border); color: var(--text); }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 36px; height: 36px; justify-content: center; align-items: center;
  background: transparent; border: 2px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
}
.hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all .3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md); padding: 16px 24px;
  flex-direction: column; gap: 4px; z-index: 999;
  animation: slideDown .25s ease;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 500; color: var(--text-muted);
  transition: all var(--transition);
}
.nav-mobile a:hover  { background: var(--bg); color: var(--primary); text-decoration: none; }
.nav-mobile a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-mobile .divider { margin: 8px 0; }
.nav-mobile-auth { display: flex; gap: 8px; padding-top: 8px; }
.nav-mobile-auth .btn { flex: 1; justify-content: center; }

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } }

/* Page offset for fixed navbar */
#page-container { padding-top: var(--nav-h); }

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links, .nav-auth { display: none; }
}