/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.site-header {
  position:fixed; top:0; left:0; width:100%; height:68px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 5%; z-index:1000;
}
.header-logo { font-family:var(--font-d); font-size:20px; font-weight:800; letter-spacing:-.3px; color:var(--ink); }
.header-logo span { color:var(--orange); }
.header-menu { display:flex; list-style:none; gap:30px; align-items:center; }
.header-menu a { font-size:14px; color:var(--ink-soft); font-weight:600; transition:color .2s; }
.header-menu a:hover { color:var(--ink); }
.header-menu a.active { color:var(--orange-deep); }
.nav-item { position:relative; }
.nav-dropdown { position:absolute; top:100%; left:50%; transform:translate(-50%,6px); background:#fff; border:1px solid var(--line); border-radius:var(--rs); box-shadow:0 12px 24px rgba(0,0,0,.1); padding:8px; min-width:220px; opacity:0; visibility:hidden; transition:all .18s; z-index:50; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-dropdown a { display:block; padding:8px 10px; border-radius:6px; font-size:13.5px; white-space:nowrap; }
.nav-dropdown a:hover { background:var(--mist); }
.btn-header { background:var(--orange); color:#FFF!important; padding:9px 22px; font-weight:700; font-size:13px; border-radius:var(--rs); transition:background .2s; }
.btn-header:hover { background:var(--orange-deep); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; }
.hamburger span { width:24px; height:2px; background:var(--ink); border-radius:2px; }

/* 手机菜单里的"Get Free Sample"按钮：桌面端不需要（header-right那个已经常驻显示），
   默认隐藏，只在下面 max-width:768px 断点里显示出来 */
.mobile-menu-cta { display:none; }

/* 移动端：header-menu 本身变成下拉展开面板（.open类控制），不是独立元素 */
@media(max-width:768px){
  /* 关闭状态：用 visibility+opacity，不用百分比 translateY——
     百分比是按菜单自身高度算的，菜单内容一多（比如加了按钮、加了下拉项）算出来的偏移量就不够，
     会导致菜单"关闭"时底边还压在汉堡按钮上，按钮点不到/看起来被挡住。
     现在无论菜单多高，关闭时都是彻底 visibility:hidden，不占用可交互层，稳定不会再出现这个问题 */
  .header-menu { position:fixed; top:68px; left:0; right:0; background:#fff; flex-direction:column; padding:20px; border-bottom:1px solid var(--line); gap:16px; align-items:flex-start; max-height:calc(100vh - 68px); overflow-y:auto; visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .2s, transform .2s, visibility .2s; }
  .header-menu.open { visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
  .hamburger { display:flex; }
  .header-right .btn-header { display:none; }
  .mobile-menu-cta { display:block; width:100%; text-align:center; margin-top:6px; padding:14px 22px; font-size:14px; }
  .nav-dropdown { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding:4px 0 0 14px; display:none; min-width:0; }
  .nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown { display:block; }
}

/* side-toc 真实样式在 hero.css 里定义（首页专属组件，只在首页加载） */

/* header-right：把语言切换器和"Get Free Sample"按钮包成一组，
   这样.site-header的三等分布局（logo/导航/右侧组）不受影响，导航保持居中 */
.site-header .header-right { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:14px !important; }

/* GTranslate 语言切换器——紧贴"Get Free Sample"按钮左边
   注意：GTranslate"小工具外观"必须设成"下拉框(Dropdown)"类型，
   "浮动(Float)"类型内部用JS强制定位在屏幕固定坐标，普通CSS压不住，
   不兼容嵌入导航栏这种用法。*/
.qihao-gtranslate-slot { display:inline-flex !important; align-items:center; max-width:110px; }
.qihao-gtranslate-slot,
.qihao-gtranslate-slot * {
  position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important; float:none !important;
}
.qihao-gtranslate-slot select,
.qihao-gtranslate-slot .gt-current-lang,
.qihao-gtranslate-slot .gt_selector {
  font-size:12px !important; line-height:1.3 !important; padding:4px 8px !important;
  border:1px solid var(--line) !important; border-radius:var(--rs) !important;
  background:#fff !important; height:auto !important; width:auto !important; max-width:110px !important;
  font-family:var(--font-b) !important; color:var(--ink) !important;
}
.qihao-gtranslate-slot img { width:14px !important; height:10px !important; margin:0 4px !important; vertical-align:middle !important; }
.qihao-gtranslate-slot a, .qihao-gtranslate-slot div, .qihao-gtranslate-slot span {
  font-size:12px !important; line-height:1.4 !important; padding:2px 4px !important;
}
.qihao-gtranslate-slot ul, .qihao-gtranslate-slot .gt-options-wrapper {
  min-width:130px !important; max-width:160px !important; font-size:12px !important;
  box-shadow:0 4px 16px rgba(0,0,0,.12) !important; z-index:9999 !important;
}
@media(max-width:860px){ .qihao-gtranslate-slot { display:none !important; } }