/* navbar.css - extracted from HTML.html */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap");

/* Vision-like responsive navbar */
.nav-vision {
  position: sticky;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  background: #5a5858;
  /* reduced right padding to minimize empty space behind the search */
  padding: 0 12x;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: 2000;
  font-family: Raleway, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  overflow: visible; /* ensure underlines and moved items are not clipped */
  scrollbar-gutter: stable; /* reserve space for the scrollbar in Chromium-based browsers */
}

/* brand area: logo + single-line title */
.nav-vision .nav-left { display:flex; align-items:center; gap:6px; 
cursor: pointer;}
.nav-vision .nav-left .logo {
  width: 38px; height: 38px; border-radius: 6px;
  background: linear-gradient(135deg,#ffb400,#ffffff);
  display: inline-block; flex: 0 0 auto;
}
.nav-vision .nav-left .title { font-weight:700; color:#fff; font-size:1.02rem; letter-spacing:0.4px; white-space:nowrap; margin-left:2px; margin-right:7rem; } 

.nav-vision .links { display:flex; gap:8px; align-items:center; white-space: nowrap; overflow: visible; }
.nav-vision { display:flex; align-items:center; }
.nav-vision .nav-left { display:flex; align-items:center; gap:6px; }
.nav-vision .nav-center { flex:0 auto 1; display:flex; justify-content:center; }
.nav-vision .nav-right { display:flex; align-items:center; gap: 6px;; padding-right:8px; flex:0 0 auto; }
.nav-vision .title { font-weight:700; color:#fff; letter-spacing:1px; }

.nav-vision a { color: rgba(255,255,255,0.98); text-decoration:none; padding:4px 6px; border-radius:6px; font-weight:700; font-size:0.92rem; text-transform:uppercase; letter-spacing:0.6px; white-space:nowrap; }
.nav-vision a:hover { background: rgba(255,255,255,0.03); }
.nav-vision .actions { display:flex; align-items:center; gap:12px; }
.nav-vision .search { display:flex; align-items:center; gap:8px; background:#f5f6f8; padding:6px 8px; border-radius:8px; }
.nav-vision .search input { border:none; outline:none; background:transparent; width:120px; font-size:0.95rem; }

/* Search suggestions dropdown */
.nav-vision .search { position: relative; }
.nav-vision .search-suggestions {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  background: #fff; color: #333;
  min-width: 220px; max-width: 420px;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 2400; overflow: auto; max-height: 260px; padding: 6px 0;
}
.nav-vision .search-suggestions .s-item { padding: 8px 12px; cursor: pointer; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-vision .search-suggestions .s-item:hover,
.nav-vision .search-suggestions .s-item.active { background:#f3f4f6; }
.nav-vision .search-suggestions .s-sub { display:none; font-weight:500; font-size:0.85rem; color:#666; margin-top:4px; }
.nav-vision .hamburger { display:none; background:none; border:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:8px; }
.nav-vision .hamburger svg { width:22px; height:22px; }
.nav-vision .hamburger { display:none; padding:6px; }
.nav-vision .hamburger .bar { display:block; width:20px; height:2px; background:#fff; margin:3px 0; transition: transform 300ms ease, opacity 300ms ease; }
.nav-vision .hamburger.open .bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-vision .hamburger.open .bar:nth-child(2) { opacity: 0; }
.nav-vision .hamburger.open .bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-vision .nav-right .links { display: none; }
  .nav-vision .search input { width: 90px; }
  .nav-vision .hamburger { display: block; }
  .nav-vision .nav-left .title {margin-right: 7rem;}
}

@media (max-width: 600px) {
  .nav-vision { padding: 8px 12px; height:56px; }
  .nav-vision .nav-left { order: 1; }
  .nav-vision .nav-center { order: 2; justify-content: center; }
  .nav-vision .nav-right { order: 3; }
  .nav-vision .title { font-size: 1rem;margin-right: auto;}
  .nav-vision .logo { width:30px; height:30px; }
  .nav-vision .nav-left .title {margin-right: 2rem;}
}

@media (max-width: 400) {
  .nav-vision .nav-right .links { display: none; }
  .nav-vision .search input { width: 90px; }
  .nav-vision .hamburger { display: flex; }
  .nav-vision .nav-left .title { margin-right: 1rem; }
}
.nav-vision .nav-left { flex: 0 0 auto; margin-right: 6px; }
.nav-vision .nav-right { flex:1 1 0 ; min-width: 0; padding-right: 2rem;}

.nav-vision { transition: background 280ms ease, height 280ms ease, box-shadow 280ms ease; }
.nav-vision.scrolled { background: #555; height: 56px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); }

.nav-vision .links a { position: relative; color: #fff; }
.nav-vision .links a::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%) scaleX(0); bottom: -8px; width: 34px; height: 3px; background: #fff; border-radius: 2px; transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 200ms; opacity:0; }
.nav-vision .links a.active::after, .nav-vision .links a:hover::after { transform: translateX(-50%) scaleX(1); opacity:1; }
.nav-vision .links a { color: rgba(255,255,255,0.95); }
.nav-item.dropdown { position: relative; }
.nav-item .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; color: #333; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 8px 0; transform-origin: top center; transform: translateY(6px) scale(.98); opacity: 0; pointer-events: none; transition: transform 200ms cubic-bezier(.2,.9,.3,1), opacity 170ms ease; z-index: 2100; }
.nav-item .dropdown-menu a { display: block; padding: 10px 16px; color: #333; text-decoration: none; font-weight: 600; }
.nav-item .dropdown-menu a:hover { background: #f6f6f6; }
.nav-item.dropdown.open .dropdown-menu { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* Animations for moving nav items into/from More */
.more-list { display: flex; flex-direction: column; gap: 6px; }
.links a.moved { color: #333; font-weight: 700; padding: 8px 10px; border-radius: 6px; background: transparent; }
.links a.moving-out { transition: transform 260ms ease, opacity 200ms ease; transform: translateY(-6px); opacity: 0.05; }
.more-list a { transform: translateX(6px); opacity: 0; transition: transform 360ms cubic-bezier(.16,.84,.24,1), opacity 260ms ease; }
.more-list a.moved { transform: translateX(0); opacity: 1; }
.more-list a.moving-in { transform: translateX(0); opacity: 1; }
.links a.moving-back { transform: translateY(-6px); opacity: 0; transition: transform 220ms ease, opacity 200ms ease; }

/* Mobile menu overlay and left panel (kept in CSS so pages that include navbar.css hide mobile menu by default) */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  display: none;
  z-index: 1999;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background 300ms ease;
}
.mobile-menu.open { display: block; background: rgba(0,0,0,0.46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mobile-menu .mobile-panel {
  width: 320px; max-width: 86%; height: 100%;
  background: #4a4a4a; color: #fff; box-shadow: 6px 0 36px rgba(0,0,0,0.48);
  padding: 70px 22px; overflow-y: auto; position: relative;
  transform: translateX(-40px) translateZ(0); opacity: 0;
  transition: transform 420ms cubic-bezier(.16,.84,.24,1), opacity 320ms ease;
}
.mobile-menu .close-btn {
  position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.08); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu .mobile-panel a { display: block; color: #fff; text-decoration: none; padding: 10px 0; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mobile-menu .mobile-panel a:first-child { font-weight: 900; }
.mobile-menu.open .mobile-panel { transform: translateX(0); opacity: 1; }
.lock-scroll { overflow: hidden; }