/* 顶部导航：替换 Twenty Twenty-Four 默认的「站点名 + 页面列表」。
   深色墨底与 Hero 同色系，吸顶 + 毛玻璃；链接全部指向首页板块锚点，与页面内容一一对应。
   由 functions.php 全站加载（不只在首页），课程页/课时页也保持一致。 */

/* sticky 必须挂在外层 <header class="wp-block-template-part"> 上：
   内层 .ht-nav 的直接父元素只有导航条本身那么高，sticky 没有可移动空间，会失效。 */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 999;
  margin: 0; padding: 0;
}
/* 登录状态下让开 WordPress 管理条 */
body.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part { top: 46px; }
}

.ht-nav {
  background: rgba(17, 23, 31, .92);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ht-nav-inner {
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  height: 64px;
  display: flex; align-items: center; gap: 24px;
}

/* 品牌：龙字方标 + 中英文双行 */
.ht-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: 0 0 auto; }
.ht-brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(140deg, #c4523c, #a3391f);
  color: #fff; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(180, 68, 46, .35);
}
.ht-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ht-brand-cn { font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.ht-brand-en {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #8d97a5; margin-top: 1px;
}

/* 导航链接：默认灰，悬停转白；不设下划线以免显旧 */
.ht-nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.ht-nav-links a {
  font-size: 13.5px; font-weight: 500; color: #c2c9d3;
  text-decoration: none; white-space: nowrap;
  transition: color .18s;
}
.ht-nav-links a:hover, .ht-nav-links a:focus-visible { color: #fff; }

/* 右侧行动按钮 */
.ht-nav-cta {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
  background: #b8442e; padding: 9px 17px; border-radius: 999px; white-space: nowrap;
  transition: background .18s, transform .18s;
}
.ht-nav-cta:hover { background: #a03a26; transform: translateY(-1px); }
.ht-nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 锚点跳转时不要让吸顶导航盖住板块标题 */
#roadmap, #cards, #how, #teacher, #pricing, #reviews, #faq { scroll-margin-top: 76px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 760px) {
  /* 放不下全部链接时收掉链接，保留品牌与行动按钮（此处余量约 96px，够抗字体差异） */
  .ht-nav-links { display: none; }
  .ht-nav-cta { margin-left: auto; }
}
@media (max-width: 620px) {
  .ht-nav-inner { height: 56px; gap: 14px; }
  .ht-brand-mark { width: 28px; height: 28px; font-size: 16px; }
  .ht-brand-cn { font-size: 15px; }
  .ht-brand-en { display: none; }
  .ht-nav-cta { font-size: 12.5px; padding: 8px 14px; }
}