/* ============================================================
   顶部条 + 页眉导航（7 个前台页面共用，以 index.html 为准）
   · 只放顶部条（.topbar）和页眉（.navbar）的样式，页面其他部分仍写在各页 <style> 里
   · 颜色/字体等变量（--blue-dark、--border、--font 等）由各页 :root 定义
   · 改页眉只改这一个文件，不要再往各页 <style> 里加 .topbar/.navbar/.nav-* 规则
   ============================================================ */
.topbar{background:var(--blue-dark);color:rgba(255,255,255,.85);font-size:.78rem}
/* gap 取自 recruit.html：窄屏时左右两段文字不会贴在一起 */
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:2.2rem;gap:1rem}
.topbar span i{font-style:normal;color:#fff}
/* 英文模式下 "Hotline: 400-8057-798 (Mon-Fri ...)" 号码两侧留空（中文排版不需要） */
html[lang="en"] .topbar span i{margin:0 .3em}
.lang-switch{font-family:var(--font);letter-spacing:.05em}
.lang-switch a{opacity:.7;transition:opacity .2s}
.lang-switch a:hover{opacity:1}

.navbar{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
.navbar.scrolled{box-shadow:0 4px 24px rgba(43,63,148,.10)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:5.6rem}

.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:2.9rem;width:auto;display:block;image-rendering:auto}

.nav-menu{display:flex;align-items:center;gap:.4rem}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:.3rem;
  padding:.6rem 1.05rem;font-size:.95rem;letter-spacing:.05em;color:var(--ink);
  transition:color .2s;
}
.nav-item:hover>.nav-link{color:var(--blue)}
.nav-link .caret{width:8px;height:8px;flex:none;transition:transform .25s}
.nav-item:hover .caret{transform:rotate(180deg)}
.nav-item::after{
  content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:0;
  height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-item:hover::after{transform:scaleX(1)}
/* 当前页导航项高亮：蓝色加粗 + 常显下划线 */
.nav-item.current .nav-link{color:var(--blue);font-weight:700}
.nav-item.current::after{transform:scaleX(1)}
.dropdown{
  position:absolute;top:100%;left:0;min-width:10.5rem;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .28s var(--ease);
}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:.55rem 1.4rem;font-size:.88rem;color:var(--ink);
  transition:all .2s;
}
.dropdown a:hover{background:var(--blue-light);color:var(--blue);padding-left:1.6rem}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.nav-toggle svg{display:block}

/* ---------- 手机/平板：汉堡菜单（JS 给 <body> 切换 .nav-open） ---------- */
@media (max-width:860px){
  .nav-menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);padding:.6rem 4%;
  }
  .nav-open .nav-menu{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .nav-item::after{display:none}
  .nav-link{padding:.8rem 0;border-bottom:1px solid var(--border);justify-content:space-between}
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:0 0 .5rem 1.2rem;
    display:none;
  }
  .nav-item.open .dropdown{display:block}
  .nav-toggle{display:block}
}
@media (max-width:560px){
  .brand img{height:2.4rem}
  .topbar .topbar-right{display:none}
}