/* ===== STICKY HEADER ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

/* Body offset so content not hide */


/* TOP BAR */
.top-bar {
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 16px;
}

.logo {
  font-size:24px;
  font-weight:600;
  color:var(--secondary);
}
.logo span { color:var(--primary); }

.search-box {
  flex:1;
  display:flex;
  align-items:center;
  background:#f1f3f4;
  border-radius:24px;
  padding:8px 14px;
}

.search-box input {
  border:none;
  background:transparent;
  outline:none;
  width:100%;
}

/* NAV */
.nav-scroll {
  display:flex;
  gap:20px;
  padding:10px 16px;
  overflow-x:auto;
  white-space:nowrap;
}

.nav-link {
  position:relative;
  font-size:14px;
  color:#555;
  text-decoration:none;
  padding:6px 0;
}

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

/* underline animation */
.nav-link::after {
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--secondary);
  transition:width .25s ease;
}

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

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