/* ==========================================================================
   快法务 · 全站统一头部样式（顶部信息条 + 主导航 + 汉堡菜单）
   --------------------------------------------------------------------------
   全站所有页面都只引用这一份，改这里 = 全站头部同时生效。
   引入顺序：assets/style.css 之后、页面自身 <style> 之前。
   作用域：所有规则限定在 .topbar / header.nav 之内，不影响正文与页脚。
   配色：海军蓝体系 —— 主色 #214078 / 强调 #1C88AF / 哑金 #C6AF7B / 冷中性 #DEE5EC
   2026-09-22：由红金改为海军蓝，并并入原先只在首页生效的头部覆盖，全站头部归一。
   ========================================================================== */

/* ---- 头部容器：统一 1200 栅格（正文区沿用 style.css 的 1040，互不影响） ---- */
.topbar > .wrap,
header.nav > .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 头部行高/字体显式锁定，避免继承各页 body 的不同行高（首页 1.65 / 子页 1.7）导致高度差 */
.topbar,
header.nav { font-family: "Microsoft YaHei", "PingFang SC", "宋体", SimSun, serif; line-height: 1.65; }

/* ============================ 顶部信息条 ============================ */
.topbar { background: #fff; border-bottom: 1px solid #DEE5EC; font-size: 13px; color: #5C6B7A; padding: 10px 0; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.topbar .right { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar .item { display: inline-flex; align-items: center; gap: 6px; }
/* emoji 图标自带橙红色，CSS 改不了色相，用灰度让它退出配色体系 */
.topbar .ico { color: #1C88AF; font-size: 14px; filter: grayscale(1); opacity: .75; }

/* ============================ 主导航 ============================ */
header.nav {
  background: #fff; border-bottom: 1px solid #DEE5EC;
  position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(18,35,61,.03);
}
/* 只控上下内边距：左右必须留给 .wrap 的 24px，否则会覆盖上面的 padding:0 24px，
   导致 logo 贴到容器边缘、和信息条文字错开 24px（手机端甚至贴到屏幕边） */
header.nav .nav-inner { display: flex; align-items: center; gap: 36px; padding-top: 18px; padding-bottom: 18px; }

header.nav .logo { display: flex; align-items: center; }
header.nav .logo img { height: 36px; width: auto; display: block; }

header.nav .menu { display: flex; gap: 6px; flex: 1; justify-content: center; }
header.nav .menu a {
  padding: 10px 22px; font-size: 16px; color: #12233D; font-weight: 500; line-height: 1.65;
  position: relative; border-radius: 4px; cursor: pointer; text-decoration: none;
}
header.nav .menu a:hover { color: #214078; text-decoration: none; }
header.nav .menu a.active { color: #214078; font-weight: 600; }
header.nav .menu a.active::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 0;
  height: 2px; background: #1C88AF;
}

/* 导航右侧 CTA 按钮（覆盖 style.css 的基础 .btn 定义） */
header.nav .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 26px; font-size: 15px; font-weight: 500; line-height: 1.5;
  border: none; border-radius: 4px; cursor: pointer; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
header.nav .btn:hover { opacity: 1; text-decoration: none; }
header.nav .btn-red { background: #214078; color: #fff; }
header.nav .btn-red:hover { background: #183158; }

/* ============================ 汉堡菜单 ============================ */
header.nav .nav-toggle { display: none; }
/* 三条线用 flex + gap 定距，不用 span 外边距：
   外边距折叠 + 标签内的空白文本节点会随页面不同产生不同行盒高度，
   曾导致手机端子页比首页高 5px。flex 容器忽略空白节点，高度稳定。 */
header.nav .nav-toggle-label {
  display: none; cursor: pointer; margin-left: auto; padding: 6px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
header.nav .nav-toggle-label span { display: block; width: 22px; height: 2px; background: #214078; margin: 0; transition: .2s; }

/* ============================ 响应式 ============================ */
@media (max-width: 1024px) {
  .topbar .right { display: none; }
  header.nav .nav-inner { flex-wrap: wrap; gap: 10px; }
  header.nav .menu { display: none; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid #DEE5EC; padding-top: 8px; }
  header.nav .menu a { padding: 12px 0; border-bottom: 1px solid #EDF2F7; }
  header.nav .nav-toggle-label { display: flex; }
  header.nav .nav-toggle:checked ~ .menu { display: flex; }
  header.nav .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.nav .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  header.nav .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 640px) {
  header.nav .logo img { height: 30px; }
  header.nav .nav-inner { gap: 8px; }
  header.nav .btn { padding: 9px 16px; font-size: 14px; }
}