/* header-tools.css —— 全站统一头部导航（自包含，不依赖 styles.min.css 变量，不加载 main.min.js）
 * 与 footer-tools.css 同思路：单一事实源，CSS 悬停下拉，站级 EN/繁體 语言切换。
 * Tools 采用「通栏三栏」面板（与首页 .tools-mega 一致），不再做成窄浮层。
 * 配色 1:1 复刻站点规范头部的米黄态（.header.scrolled：rgba(245,240,230,.95) + 模糊 + 投影，
 * 导航字 --text-primary #2C2416，logo 字 --text-secondary #5A5040，悬停金 --accent-color #D4AF37）。
 * 配色集中在本文件顶部的自定义属性上，便于整体调整。
 */

/* 统一头部注入时一并对页面 body 做外边距归零：部分老页面（order-confirm、video-courses 等）
   未重置 UA 默认 8px margin，导致 sticky 头部与内容整体右移并撑出横向溢出。
   本文件在 </head> 前最后注入，故此处 margin:0 稳定覆盖页面自身样式。 */
body { margin: 0; }

.g-header {
  /* 配色（米黄，= 站点规范头部滚动后状态） */
  --g-bg: rgba(245, 240, 230, 0.95);
  --g-text: #2C2416;            /* 导航文字 = --text-primary */
  --g-text-logo: #5A5040;       /* logo 文字 = --text-secondary */
  --g-gold: #D4AF37;            /* 强调金 = --accent-color */
  --g-gold-deep: #b8902a;       /* 金色文字（米黄底上更深的金，保证可读） */
  --g-border: rgba(212, 175, 55, 0.35);
  --g-shadow: 0 4px 12px rgba(26, 22, 18, 0.12);
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: 82px;
  background: var(--g-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* ---------- 暗色页变体：data-header-theme="dark" ----------
   仅用于「顶部是深底」的页面（如问事灵签）。顶部透明 + 浅字（深底可读）；
   滚动后切深色毛玻璃 rgba(7,10,16,.86)，保证滚过浅色模块时浅字仍清晰。
   浅页（body 无此属性）不受影响，继续米黄实底。 */
body[data-header-theme="dark"] .g-header {
  --g-bg: transparent;
  --g-text: #E9E2D2;
  --g-text-logo: #c9b489;
  --g-border: transparent;
  --g-shadow: none;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  /* 顶部真正透明：关掉基类 blur(10px)，否则透明态仍会磨砂下方内容形成“模糊块”。
     模糊只在滚动后（.is-scrolled 的 blur(12px)）才出现。 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .25s ease, box-shadow .25s ease, border-bottom-color .25s ease, backdrop-filter .25s ease;
}
body[data-header-theme="dark"] .g-header.is-scrolled {
  background: rgba(7,10,16,.66);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* 用户要求彻底去掉分隔线：滚动态底部边框设透明，靠毛玻璃+阴影与内容区分，
     不再有任何白线/金线。 */
  border-bottom-color: transparent;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

.g-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.g-nav { display: flex; justify-content: space-between; align-items: center; height: 82px; }
.g-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.g-logo-icon {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid var(--g-gold); color: var(--g-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, 'SimSun', serif; font-size: 1.5rem; font-weight: 600;
}
.g-logo-text {
  color: var(--g-text-logo); font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 600;
}
.g-nav-menu { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.g-nav-link, .g-nav-dropdown-trigger {
  color: var(--g-text); text-decoration: none; font-size: 1rem; font-weight: 500;
  display: flex; align-items: center; gap: 4px; position: relative; padding: 6px 0; cursor: pointer;
}
.g-nav-link::after, .g-nav-dropdown-trigger::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--g-gold); transition: width .2s;
}
.g-nav-link:hover, .g-nav-dropdown-trigger:hover,
.g-nav-link:hover::after, .g-nav-dropdown-trigger:hover::after { color: var(--g-gold); width: 100%; }
.g-nav-dropdown { position: relative; }
.g-nav-arrow {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform .2s;
}
.g-nav-dropdown:hover > .g-nav-dropdown-trigger .g-nav-arrow,
.g-nav-dropdown:focus-within > .g-nav-dropdown-trigger .g-nav-arrow { transform: rotate(180deg); }

/* ---- 下拉防误关（缺陷：指针从触发词下移去点选项时，穿过触发词与菜单之间的空隙，
        hover 断开 → 菜单在还没点到之前就收起）----
   两手一起上：
     1) 桥接带：在触发链接下沿铺一条不可见的 ::before，把 hover 区一路延伸到菜单上沿，
        指针跨缝时 hover 始终不断（::before 属于触发元素，hover 它会带动 li:hover 成立）。
     2) 关闭宽限期：收起时给 120ms 延迟，指针闪电离开也来得及回到菜单里。 */
.g-nav-dropdown-trigger::before {
  content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 18px;
}
.g-nav-dropdown.g-tools > .g-nav-dropdown-trigger::before { height: 48px; }

/* ---- 普通小下拉（Blog / 语言）---- */
.g-nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #f5f0e6; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 10px;
  padding: 10px; min-width: 180px; opacity: 0; visibility: hidden;
  display: none;
  transition: opacity .2s ease .12s, visibility .2s .12s, display .2s allow-discrete;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); z-index: 10001;
}
.g-nav-dropdown:hover > .g-nav-dropdown-menu,
.g-nav-dropdown:focus-within > .g-nav-dropdown-menu {
  opacity: 1; visibility: visible; display: block;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.g-nav-dropdown-menu a {
  display: block; padding: 8px 14px; color: #2a241c; text-decoration: none;
  font-size: 0.9rem; border-radius: 6px; white-space: nowrap;
}
.g-nav-dropdown-menu a:hover { color: var(--g-gold-deep); background: rgba(212, 175, 55, 0.12); }
/* 当前语言高亮：由 i18n-switcher 运行时给对应项打 .is-active（不依赖旧站点切换器） */
.g-lang-menu a.is-active { color: var(--g-gold-deep); background: rgba(212, 175, 55, 0.12); font-weight: 600; }

/* ---- Tools 通栏三栏面板（与首页 .tools-mega 一致：整幅宽、三栏、超高可滚）----
   注意：li.g-tools 需 position:static，面板才能以 .g-header 为定位父级铺满整幅宽。 */
.g-nav-dropdown.g-tools { position: static; }
.g-tools-mega {
  position: absolute; top: 100%; left: 0; right: 0;
  width: 100%;
  max-height: calc(100vh - 82px);
  overflow-y: auto;
  background: #f5f0e6;
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 18px 44px rgba(26, 22, 18, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease .12s, transform .22s ease .12s, visibility .22s .12s;
  z-index: 10001;
}
.g-nav-dropdown:hover > .g-tools-mega,
.g-nav-dropdown:focus-within > .g-tools-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.g-mega-inner { max-width: 1180px; margin: 0 auto; padding: 30px 24px 34px; }
.g-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.g-mega-col-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem; letter-spacing: 0.04em; color: #2C2416;
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}
.g-mega-list { list-style: none; margin: 0; padding: 0; }
.g-mega-list li { margin: 0; }
.g-mega-list a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px;
  color: #5A5040; text-decoration: none; font-size: 0.92rem; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.g-mega-list a::after {
  content: '→'; margin-left: auto; color: var(--g-gold); opacity: 0.55; font-weight: 600;
  transition: transform .18s ease, opacity .18s ease;
}
.g-mega-list a:hover { background: rgba(212, 175, 55, 0.12); color: var(--g-gold-deep); }
.g-mega-list a:hover::after { transform: translateX(3px); opacity: 1; }
/* 即将上线（不可点） */
.g-tool-soon {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px;
  color: #8B8070; font-size: 0.92rem; white-space: nowrap; cursor: default;
}
.g-coming-badge {
  font-style: normal; font-size: 0.6rem; letter-spacing: 0.06em; padding: 2px 7px;
  border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1); color: var(--g-gold-deep); white-space: nowrap; margin-left: auto;
}
.g-lang-trigger { gap: 6px; }
.g-lang-label { font-size: 0.85rem; letter-spacing: 0.05em; }

/* ---- 中屏（861–1100px）：导航偏挤，缩小间距与字号，避免换行/溢出 ---- */
@media (max-width: 1100px) {
  .g-nav-menu { gap: 24px; }
  .g-nav-link, .g-nav-dropdown-trigger { font-size: 0.92rem; }
  .g-logo-text { font-size: 0.7rem; }
}

/* ---- 移动端：汉堡菜单（纯 CSS，checkbox + label，不引 JS）---- */
.g-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.g-nav-burger { display: none; }

@media (max-width: 860px) {
  .g-container { padding: 0 12px; }
  .g-nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--g-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--g-border); box-shadow: var(--g-shadow);
    padding: 8px 16px 16px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  /* 暗色頁移動端展開菜單：深色實底毛玻璃，避免透明穿底（讓暗色頭部約定在手機也成立） */
  body[data-header-theme="dark"] .g-nav-menu {
    background: rgba(7,10,16,.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom-color: rgba(233,226,210,.14);
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
  }
  .g-nav-toggle:checked ~ .g-nav-menu { display: flex; }
  .g-nav-menu > li { width: 100%; }
  .g-nav-link, .g-nav-dropdown-trigger { padding: 12px 4px; font-size: 0.95rem; min-height: 44px; }
  .g-lang-trigger { min-height: 44px; }
  .g-nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; cursor: pointer; flex-shrink: 0;
  }
  .g-nav-burger span { display: block; height: 2px; width: 22px; background: var(--g-text); border-radius: 2px; transition: all .2s; }
  .g-nav-toggle:checked ~ .g-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .g-nav-toggle:checked ~ .g-nav-burger span:nth-child(2) { opacity: 0; }
  .g-nav-toggle:checked ~ .g-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .g-logo-text { font-size: 0.8rem; }
  /* 小下拉贴左，避免溢出屏幕 */
  .g-nav-dropdown-menu { left: 0; transform: translateX(0) translateY(8px); }
  .g-nav-dropdown:hover > .g-nav-dropdown-menu,
  .g-nav-dropdown:focus-within > .g-nav-dropdown-menu { transform: translateX(0) translateY(0); }
  /* Tools 面板改为静态铺开（首页同思路：移动端不浮层） */
  .g-tools-mega {
    position: static; display: none; max-height: none; overflow: visible;
    box-shadow: none; border: 0; background: transparent;
    opacity: 1; visibility: visible; transform: none;
  }
  .g-nav-dropdown:hover > .g-tools-mega,
  .g-nav-dropdown:focus-within > .g-tools-mega { display: block; }
  .g-mega-inner { padding: 8px 0 12px; }
  .g-mega-cols { grid-template-columns: 1fr; gap: 16px; }
  .g-mega-list a { white-space: normal; }
  /* 移动端汉堡：登录/订阅两胶囊占满一行，避免挤压 */
  .g-nav-item.g-auth { width: 100%; flex-wrap: wrap; gap: 8px; }
  .g-sub-pill, .g-signin-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 登录/注册 + 订阅 入口（Clerk 加载后由 js/auth.js 接管为头像胶囊；此处为初始态兜底样式） ── */
.g-nav-item.g-auth { display: flex; align-items: center; gap: 10px; }
/* 订阅入口（主 CTA：深蓝实底暖白字，米黄头部上强对比跳出；暗色页自动转金实底） */
/* 订阅 / 登录注册 / 登录后头像胶囊 三者统一高度（含 box-sizing，避免 1px 边框造成亚像素错位） */
.g-sub-pill {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 38px;
  padding: 8px 16px;
  background: #0B1030;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #F5F0E6;
  font-family: inherit; cursor: pointer; text-decoration: none;
  transition: all 0.2s; white-space: nowrap;
}
.g-sub-pill:hover { background: #1a2247; }
/* 登录/注册入口（次 CTA：深金描边 ghost，米黄头上对比清晰、不抢主按钮） */
.g-signin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 38px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #B8902A;
  border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #7A5A1E;
  font-family: inherit; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.g-signin-btn:hover { background: rgba(184,144,42,0.14); }

/* 暗色头部（透明 + 深底）下深蓝实底不可见：主 CTA 转金实底、次 CTA 转浅金 ghost */
body[data-header-theme="dark"] .g-sub-pill { background: linear-gradient(120deg,#e6c98f,#c9962e); color:#2a1f08; }
body[data-header-theme="dark"] .g-sub-pill:hover { background: linear-gradient(120deg,#f0d49b,#d6a54c); }
body[data-header-theme="dark"] .g-signin-btn { color:#E9E2D2; border-color: rgba(233,226,210,0.5); }
body[data-header-theme="dark"] .g-signin-btn:hover { background: rgba(233,226,210,0.1); }

/* Clerk 登录弹窗层级修复：clerk-js 默认 .cl-modalBackdrop z-index=10000，
   会被订阅页 .sub-overlay(99999)、首页种子弹窗(10000) 等自建浮层盖住 → 点击登录"看似无反应"。
   强制顶到最上层（接近 int32 上限，确保压过站内一切浮层）。 */
.cl-modalBackdrop { z-index: 2147483000 !important; }