/* 顶部导航栏：左侧 logo、右侧五个选项（首页/关于/服务/项目/联系），整栏固定顶部。
   由 tools/header-nav.mjs 挂载；想调整样式直接改这里，重跑脚本不会覆盖已有文件。 */

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 1：高于页面内容，但低于加载层（2/3/4）与弹窗，开场与弹窗能正常盖住导航栏 */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  margin: 0;
  padding: 1.7vh 2% 2.2vh;
  font-family: Lato, "Noto Sans SC", sans-serif;
  /* header 里继承了 font-size:2.5vw，会把行盒撑到 40px 以上、把文字顶下去，这里显式压回 12px/1 */
  font-size: 12px;
  line-height: 1;
  /* 顶部轻微渐隐的底色：滚动内容从栏下穿过时不会视觉打架。不需要可以删掉这一行 */
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.92) 40%, rgba(18, 18, 18, 0));
  /* 整栏横跨整屏，但只有里面的 logo 与链接接收点击，空白处不挡住页面内容 */
  pointer-events: none;
}
.top-nav > * {
  pointer-events: auto;
}

/* 左侧 logo（点击回首页） */
.top-nav-logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}
.top-nav-logo img {
  display: block;
  height: clamp(22px, 2.2vw, 36px);
  width: auto;
}

/* 右侧五个选项 */
.top-nav-links {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1;
}
.top-nav-links li {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}
.top-nav-link {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: #fff;            /* 纯白色 */
  opacity: 0.5;           /* 未激活：50% 透明度 */
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.top-nav-link.is-active {
  opacity: 1;             /* 激活：100% 透明度 */
}
.top-nav-link:hover {
  opacity: 0.75;          /* 悬停反馈（需求未要求，不需要可以删掉这两行） */
}

/* 移动端：边距收紧一点，logo 也小一点 */
@media (max-width: 999px) {
  .top-nav {
    padding: 1.6vh 4% 2vh;
    gap: 3vw;
  }
  .top-nav-links {
    gap: 3vw;
  }
  .top-nav-logo img {
    height: 22px;
  }
}