/* 顶部导航：替换 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: var(--ht-s-6); }
/* 782px 是 WordPress 管理条自身的折叠断点（admin bar 在 ≤782px 变 46px 高），
   不是设计断点，不可与设计断点合并。 */
@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part { top: var(--ht-s-7); }
}

.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);
  position: relative;
}
.ht-nav-inner {
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  height: 64px;
  display: flex; align-items: center; gap: var(--ht-s-5);
}

/* 品牌：龙字方标 + 中英文双行 */
.ht-brand { display: flex; align-items: center; gap: var(--ht-s-3); text-decoration: none; color: var(--ht-on-dark); flex: 0 0 auto; }
.ht-brand-mark {
  width: 32px; height: 32px; border-radius: var(--ht-r-md); flex: 0 0 auto;
  background: linear-gradient(140deg, var(--ht-brand-light), var(--ht-brand-dark));
  color: var(--ht-on-brand); font-size: var(--ht-fs-lg); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ht-sh-brand);
}
.ht-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ht-brand-cn { font-size: var(--ht-fs-base); font-weight: 700; letter-spacing: .01em; }
.ht-brand-en {
  font-size: var(--ht-fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ht-on-dark-dim); margin-top: 1px;
}

/* 菜单组：auto 外边距吃掉左侧空白 → 整组菜单「居右」，与右侧按钮连成一片 */
.ht-nav-links { margin-left: auto; display: flex; align-items: center; gap: var(--ht-s-6); }
/* 下拉父项：作为绝对定位子菜单的定位上下文 */
.ht-nav-item { position: relative; display: flex; align-items: center; }

/* 右侧一组：登录入口 + 行动按钮（紧跟菜单之后，贴右边缘） */
.ht-nav-actions { display: flex; align-items: center; gap: var(--ht-s-3); flex: 0 0 auto; }

/* 登录/注册入口：描边胶囊（次级按钮）。
   此前是裸灰字，紧邻橙色主 CTA 时存在感为零，肉眼基本看不见；
   改成有边框的实心描边按钮后层级是「次级」，但不与主 CTA 抢视觉。 */
.ht-nav-auth {
  display: inline-flex; align-items: center;
  font-size: var(--ht-fs-xs); font-weight: 700; color: var(--ht-on-dark);
  text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .34);
  padding: var(--ht-s-2) var(--ht-s-4); border-radius: var(--ht-r-btn);
  transition: background .18s, border-color .18s, transform .18s;
}
.ht-nav-auth:hover, .ht-nav-auth:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .65);
  transform: translateY(-1px);
}
.ht-nav-auth:focus-visible { outline: 2px solid var(--ht-on-dark); outline-offset: 2px; }
.ht-nav-link {
  font-family: inherit; font-size: var(--ht-fs-sm); font-weight: 500;
  color: var(--ht-on-dark-muted); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .18s;
}
.ht-nav-link:hover, .ht-nav-link:focus-visible { color: var(--ht-on-dark); }
.ht-nav-link:focus-visible { outline: 2px solid var(--ht-on-dark); outline-offset: 2px; }
.ht-caret { width: 14px; height: 14px; transition: transform .18s var(--ht-ease); }
.ht-nav-has-menu.is-open .ht-caret { transform: rotate(180deg); }

/* 拆分式下拉：Courses 文字本身是链接（进 /courses/ 归档页），箭头是独立的开合按钮。
   拆开才能做到「点名字进列表页」+「点箭头看分类」互不干扰，
   且各自语义明确（链接有 href、按钮带 aria-expanded/aria-label）。
   24×24 满足 WCAG 2.5.8 目标尺寸下限（AA）。 */
.ht-nav-caret-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; margin: 0 0 0 2px;
  color: var(--ht-on-dark-muted);
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  transition: color .18s, background .18s;
}
.ht-nav-caret-btn:hover { color: var(--ht-on-dark); background: rgba(255, 255, 255, .10); }
.ht-nav-caret-btn:focus-visible { outline: 2px solid var(--ht-on-dark); outline-offset: 2px; }

/* 桌面下拉：悬停 / 键盘 focus-within / 点击(.is-open) 三种方式均可展开 */
.ht-nav-submenu {
  position: absolute; top: 100%; right: 0; left: auto; margin-top: 10px;
  min-width: 224px; padding: var(--ht-s-2) 0;
  list-style: none;
  background: rgba(17, 23, 31, .98);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--ht-r-btn);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ht-ease), transform .18s var(--ht-ease), visibility .18s var(--ht-ease);
  z-index: 1000;
}
/* 透明桥接：补上按钮与菜单间的 10px 间隙，鼠标移下去时不会因离开 :hover 区域而关闭 */
.ht-nav-submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.ht-nav-has-menu:hover .ht-nav-submenu,
.ht-nav-has-menu:focus-within .ht-nav-submenu,
.ht-nav-has-menu.is-open .ht-nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.ht-nav-submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ht-s-3);
  padding: var(--ht-s-2) var(--ht-s-4);
  font-size: var(--ht-fs-sm); color: var(--ht-on-dark-muted); text-decoration: none; white-space: nowrap;
}
.ht-nav-submenu a:hover, .ht-nav-submenu a:focus-visible {
  background: rgba(255, 255, 255, .08); color: var(--ht-on-dark);
}
.ht-tag-free {
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ht-on-brand); background: var(--ht-brand);
  padding: 3px 7px; border-radius: var(--ht-r-pill);
}

/* 右侧行动按钮 */
.ht-nav-cta {
  flex: 0 0 auto;
  font-size: var(--ht-fs-xs); font-weight: var(--ht-fw-btn); color: var(--ht-on-brand); text-decoration: none;
  background: var(--ht-brand); padding: var(--ht-s-2) var(--ht-s-4); border-radius: var(--ht-r-btn); white-space: nowrap;
  box-shadow: var(--ht-sh-btn);
  transition: background .18s var(--ht-ease), transform .18s var(--ht-ease), box-shadow .18s var(--ht-ease);
}
.ht-nav-cta:hover { background: var(--ht-brand-dark); transform: translateY(-1px); box-shadow: var(--ht-sh-btn-hover); }
.ht-nav-cta:active { transform: translateY(0); box-shadow: var(--ht-sh-btn-active); }
.ht-nav-cta:focus-visible { outline: 2px solid var(--ht-on-dark); outline-offset: 2px; }

/* 汉堡按钮：桌面隐藏，≤768px 显示。内联 Lucide 线性图标，currentColor 跟随深底文字。 */
.ht-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: var(--ht-tap); height: var(--ht-tap); padding: 0; margin: 0;
  color: var(--ht-on-dark);
  background: transparent; border: 0; border-radius: var(--ht-r-btn);
  cursor: pointer;
  transition: background .18s var(--ht-ease);
}
.ht-nav-toggle:hover { background: rgba(255, 255, 255, .10); }
.ht-nav-toggle:focus-visible { outline: 2px solid var(--ht-on-dark); outline-offset: 2px; }
.ht-nav-toggle svg { width: 24px; height: 24px; display: block; }
.ht-nav-toggle .ht-icon-close { display: none; }
.ht-nav-toggle[aria-expanded="true"] .ht-icon-menu { display: none; }
.ht-nav-toggle[aria-expanded="true"] .ht-icon-close { display: block; }

/* 移动端下拉面板：默认隐藏，仅 ≤768px 显示；随吸顶导航固定，覆盖页面内容。 */
.ht-mobile-menu { display: none; }

/* 首页布局隐藏某区块后，同步移除对应锚点入口（含 Hero 的 #roadmap 按钮）。
   body class 由 functions.php 的 ht_home_layout_body_classes() 输出。 */
body.ht-no-roadmap a[href="/#roadmap"], body.ht-no-roadmap a[href="#roadmap"],
body.ht-no-how a[href="/#how"], body.ht-no-how a[href="#how"],
body.ht-no-pricing a[href="/#pricing"], body.ht-no-pricing a[href="#pricing"],
body.ht-no-faq a[href="/#faq"], body.ht-no-faq a[href="#faq"] { display: none !important; }

/* 锚点跳转时不要让吸顶导航盖住板块标题 */
#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: 768px) {
  /* 放不下全部链接时收掉桌面链接组，改由汉堡按钮唤起下拉面板。
     菜单隐藏后 .ht-nav-links 的 auto 外边距随之失效，
     故把 auto 转交给 .ht-nav-actions，保证按钮组（含汉堡）仍贴右边缘。 */
  .ht-nav-links { display: none; }
  .ht-nav-actions { margin-left: auto; }
  .ht-nav-toggle { display: inline-flex; }

  /* 下拉面板：贴在吸顶导航正下方，整宽覆盖；max-height 做展开收起动画。 */
  .ht-mobile-menu {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(17, 23, 31, .98);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    overflow: hidden;
    max-height: 0; opacity: 0; visibility: hidden;
    transition: max-height .28s var(--ht-ease), opacity .2s var(--ht-ease), visibility .28s var(--ht-ease);
    z-index: 998;
  }
  .ht-mobile-menu.is-open { max-height: 70vh; opacity: 1; visibility: visible; }
  .ht-mobile-links a {
    display: flex; align-items: center;
    font-size: var(--ht-fs-base); font-weight: 500;
    color: var(--ht-on-dark-muted); text-decoration: none;
    min-height: var(--ht-tap);
    padding: 0 var(--ht-s-5);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .ht-mobile-links a:first-child { border-top: 0; }
  .ht-mobile-links a:hover, .ht-mobile-links a:focus-visible {
    color: var(--ht-on-dark); background: rgba(255, 255, 255, .06);
  }
  /* 汉堡面板内的 Courses 分类组：标签（本身是进 /courses/ 的链接）+ 缩进子项 */
  .ht-mobile-group { border-top: 1px solid rgba(255, 255, 255, .08); }
  .ht-mobile-group .ht-mobile-group-label {
    display: flex; align-items: center;
    min-height: var(--ht-tap); padding: var(--ht-s-3) var(--ht-s-5) 4px;
    font-size: var(--ht-fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ht-on-dark-dim); text-decoration: none;
    border-top: 0;
  }
  .ht-mobile-group .ht-mobile-group-label:hover,
  .ht-mobile-group .ht-mobile-group-label:focus-visible { color: var(--ht-on-dark); }
  /* 子项缩进。用 :not() 把标签排除掉 —— 标签现在是 <a>，否则会被当成子项一起缩进并放大字号 */
  .ht-mobile-group a:not(.ht-mobile-group-label) { padding-left: calc(var(--ht-s-5) + 16px); font-size: var(--ht-fs-sm); }
  /* 紧随标签的第一个子项不要分隔线（标签变 <a> 后 :first-of-type 命中的是标签，故改用相邻兄弟） */
  .ht-mobile-group .ht-mobile-group-label + a { border-top: 0; }
  /* 登录入口：复用次级按钮语义，但在面板内改为整宽块级，便于单手点击。 */
  .ht-mobile-auth {
    display: flex; align-items: center; justify-content: center;
    margin: var(--ht-s-4) var(--ht-s-5) var(--ht-s-5);
    min-height: var(--ht-tap);
    font-size: var(--ht-fs-sm); font-weight: 700; color: var(--ht-on-dark);
    text-decoration: none;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: var(--ht-r-btn);
    transition: background .18s var(--ht-ease), border-color .18s var(--ht-ease);
  }
  .ht-mobile-auth:hover, .ht-mobile-auth:focus-visible {
    background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .65);
  }
  .ht-mobile-auth:focus-visible { outline: 2px solid var(--ht-on-dark); outline-offset: 2px; }
}
@media (max-width: 480px) {
  .ht-nav-inner { height: 56px; gap: var(--ht-s-4); }
  .ht-brand-mark { width: 28px; height: 28px; font-size: var(--ht-fs-base); }
  .ht-brand-cn { font-size: var(--ht-fs-base); }
  .ht-brand-en { display: none; }
  .ht-nav-actions { gap: var(--ht-s-3); }
  .ht-nav-auth { font-size: var(--ht-fs-xs); padding: var(--ht-s-2) var(--ht-s-4); }
  .ht-nav-cta { font-size: var(--ht-fs-xs); padding: var(--ht-s-2) var(--ht-s-4); }
}
/* 极窄屏（≤360px）：顶栏收纳不下登录按钮时，将其移入汉堡面板（.ht-mobile-auth 仍可见）。 */
@media (max-width: 360px) {
  .ht-nav-actions > .ht-nav-auth { display: none; }
}