/* =====================================================
   PORTFOLIO — Ahmed Shawki
   navbar.css  |  Navigation Styles
   ===================================================== */

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.2rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: transform 0.4s var(--tr), background 0.4s var(--tr);
}
#navbar.scrolled {
  background: rgba(5, 8, 16, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
#navbar.hidden { transform: translateY(-100%); }

.nav-logo {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  cursor: pointer; font-family: var(--font-display);
}
.nav-links { display: flex; gap: 1.6rem; list-style: none; }
.nav-links a {
  color: var(--text-muted); text-decoration: none;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  position: relative; transition: color 0.3s; font-family: var(--font-body);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.3s var(--tr); border-radius: 1px;
}
.nav-links a:hover          { color: var(--text); }
.nav-links a:hover::after   { width: 100%; }

.nav-cta {
  padding: 0.5rem 1.2rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600;
  transition: opacity 0.3s, transform 0.3s; font-family: var(--font-body);
}
.nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed; top: 70px; left: 0; right: 0; z-index: 999;
  background: rgba(5, 8, 16, 0.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 1.5rem 2rem; flex-direction: column; gap: 1rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--text-muted); text-decoration: none; font-size: 1rem;
  font-weight: 500; padding: 0.6rem 0; border-bottom: 1px solid var(--glass-border);
  transition: color 0.3s;
}
.mobile-menu a:last-child { border-bottom: none; color: var(--accent); font-weight: 700; }
.mobile-menu a:hover { color: var(--text); }