/* site/assets/css/nav.css
 * 顶部导航条样式,独立文件供 main.css @import 和不引用 main.css 的页面(如 admin / api-docs / mcp-playground / proposal)直接 <link>。
 */

/* === 桌面端 === */
.nav-right { display: flex; align-items: center; gap: 2.2rem; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { display: flex; align-items: center; }
.nav-link {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-sub);
  position: relative;
  transition: color .3s;
  line-height: 1;
  padding: 4px 0;
}
.nav-link:hover { color: var(--text); }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--text);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--text); font-weight: 600; }
.nav-link.active::after { width: 100%; }

/* === NAV DROPDOWN — 开发者入口(hover/focus 展开) === */
.nav-item.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 100;
}
/* 透明桥梁:hover 时从 nav-link 平滑过渡到下拉(避免鼠标移到下拉时菜单消失) */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* hover 时父链接也变深色 */
.nav-item.has-dropdown:hover > .nav-link,
.nav-item.has-dropdown:focus-within > .nav-link {
  color: var(--text);
}
.nav-item.has-dropdown:hover > .nav-link::after,
.nav-item.has-dropdown:focus-within > .nav-link::after {
  width: 100%;
}
.nav-dropdown li { display: block; }
.nav-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: .78rem;
  color: var(--text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
  line-height: 1.4;
}
.nav-dropdown a:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}
/* 在父链接右侧显示 V 字形下拉箭头(chevron-down) */
.nav-item.has-dropdown > .nav-link {
  display: inline-flex;
  flex-direction: row-reverse;     /* 把 ::before 放到文字右侧 */
  align-items: center;
  gap: 6px;
}
.nav-item.has-dropdown > .nav-link::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  /* mask-image 方案:SVG 当 mask 用,颜色由 background-color 控制
   * background-image 里的 SVG 无法继承父级 currentColor,必须用 mask + bg-color */
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,4 5,7 8,4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,4 5,7 8,4'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: transform .2s ease;
}
.nav-item.has-dropdown:hover > .nav-link::before,
.nav-item.has-dropdown:focus-within > .nav-link::before {
  transform: rotate(180deg);
}

/* === 移动端汉堡菜单 === */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text);
}
.nav-burger:hover { background: rgba(0,0,0,.04); }
.nav-burger-icon,
.nav-burger-icon::before,
.nav-burger-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.nav-burger-icon { position: relative; }
.nav-burger-icon::before,
.nav-burger-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-burger-icon::before { top: -7px; }
.nav-burger-icon::after { top: 7px; }
.nav-burger[aria-expanded="true"] .nav-burger-icon { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger-icon::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-icon::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 768px) {
  .nav-burger { display: inline-flex; }
  /* 移动版: nav-list 变成下拉菜单, 默认隐藏 */
  .nav-right { position: static; }
  .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
  }
  .topbar.topbar-admin .nav-list,
  .topbar.topbar-api .nav-list,
  .topbar.topbar-mcp .nav-list,
  .topbar.topbar-agent .nav-list {
    background: #151515;
    border-bottom-color: rgba(255,255,255,.08);
  }
  .topbar.topbar-admin .nav-link,
  .topbar.topbar-api .nav-link,
  .topbar.topbar-mcp .nav-link,
  .topbar.topbar-agent .nav-link,
  .topbar.topbar-admin .nav-dropdown a,
  .topbar.topbar-api .nav-dropdown a,
  .topbar.topbar-mcp .nav-dropdown a,
  .topbar.topbar-agent .nav-dropdown a {
    color: rgba(255,255,255,.72);
  }
  .topbar.topbar-admin .nav-link.active,
  .topbar.topbar-api .nav-link.active,
  .topbar.topbar-mcp .nav-link.active,
  .topbar.topbar-agent .nav-link.active,
  .topbar.topbar-admin .nav-dropdown a.active,
  .topbar.topbar-api .nav-dropdown a.active,
  .topbar.topbar-mcp .nav-dropdown a.active,
  .topbar.topbar-agent .nav-dropdown a.active {
    color: #fff;
  }
  .topbar.nav-open .nav-list {
    max-height: 360px;
    padding: .8rem 1.5rem 1.2rem;
  }
  .nav-list li { display: block; }
  .nav-link {
    display: inline-block;
    width: auto;
    padding: .7rem 0;
    font-size: .82rem;
    border-left: 2px solid transparent;
    padding-left: 12px;
    margin-left: -12px;
  }
  .nav-link::after { display: none; }
  .nav-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .nav-link.active {
    border-left-color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }
  /* 移动版: dropdown 改为内嵌显示(不是悬浮),跟随 li 块级 */
  .nav-item.has-dropdown { position: static; }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 .4rem 1.2rem;
    min-width: 0;
    display: block;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a {
    padding: .45rem 0;
    font-size: .78rem;
  }
  .nav-item.has-dropdown > .nav-link {
    /* 移动端保持 row-reverse:V 形仍在文字右侧 */
    gap: 4px;
  }
  .nav-item.has-dropdown > .nav-link::before {
    width: 8px;
    height: 8px;
    margin-left: 0;
  }
  .nav-item.has-dropdown > .nav-link::after { display: none; }
  .nav-item.has-dropdown:hover > .nav-link::before,
  .nav-item.has-dropdown:focus-within > .nav-link::before {
    transform: none;
  }
}
@media (max-width: 480px) {
  .topbar { padding: 0 1.2rem; height: 3.8rem; }
}