/* ============================================================
 * nav-footer.css —— 页头 + 页脚样式（6 个报价单页面使用）
 *
 * 自动生成：node server/tools/sync-nav-footer.js
 * 来源：_shared.css 里过滤出页头/页脚/容器相关规则 + 组件所需的 :root 令牌
 *
 * ⚠️ 不要手工编辑。改主站样式 → 跑 sync-shared.js → 再跑本工具。
 * ============================================================ */

/* ── 组件依赖的设计令牌 ────────────────────────────────────────
   报价页用 wenda.css 的暖色主题，没有 --accent / --radius / --body /
   --muted / --surface / --surface-2 / --accent-ink，缺了页头页脚就渲染不出来。 */
:root {
  --body:#4a5c75; --muted:#8b9ab0; --surface:#ffffff; --surface-2:#f7faff;
  --accent:#1c47b8; --accent-ink:#12327f; --radius:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --d-xfast:.14s; --d-fast:.2s; --d-mid:.38s; --d-slow:.62s;
  --sh-1:0 8px 22px rgba(14,28,51,.10); --sh-2:0 16px 40px rgba(14,28,51,.20);
}

/* ── 基础规则（顶级）──────────────────────────────────────────── */
.wrap { max-width:1200px;margin:0 auto;padding:0 28px }
.nav { height:72px;border-bottom:1px solid var(--line);background:#fff;position:relative }
.nav .wrap { display:flex;align-items:center;height:72px }
.brand { display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:.3px }
.brand .mark { width:32px;height:32px;border-radius:var(--radius);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700 }
.nav ul { display:flex;gap:32px;margin-left:48px;list-style:none }
.nav ul a { font-size:15px;color:var(--body) }
.nav ul a.on { color:var(--accent);font-weight:700 }
.nav-cta { margin-left:auto;display:flex;align-items:center;gap:22px }
.nav-cta .tel { display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700;color:var(--accent-ink) }
.nav-cta .tel i { font-size:19px }
.stats .wrap { display:grid;grid-template-columns:repeat(4,1fr) }
.nav-toggle { display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);font-size:21px;cursor:pointer;padding:0 }
.band .wrap { text-align:center }
.foot { padding:34px 0 40px;text-align:center;font-size:13px;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line) }
.crumb { font-size:13px;color:rgba(255,255,255,.58);margin-bottom:15px }
.crumb a:hover { color:#fff }
.phero > .wrap > p, .phero-in p { color:rgba(255,255,255,.78);font-size:16.5px;margin-top:13px;max-width:640px }
.foot .wrap { max-width:1200px }
.foot-links, .foot-sys { display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-bottom:14px }
.foot-links a { font-size:14.5px;color:var(--body) }
.foot-sys a { font-size:13px;color:var(--muted) }
.foot-links a:hover, .foot-sys a:hover { color:var(--accent) }
.foot-info { text-align:center;font-size:12.5px;color:var(--muted);padding-top:14px;border-top:1px solid var(--line);line-height:1.9 }
.foot-info a, .foot-info a:visited { color:var(--muted);text-decoration:none }
.foot-info a:hover { color:var(--ink);text-decoration:underline }
#navmenu > li > a { position:relative }
#navmenu > li > a::after { content:'';position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--d-mid) var(--ease) }
#navmenu > li > a:hover::after { transform:scaleX(1) }
#navmenu > li > a:hover { color:var(--accent) }
.brand-logo { width:32px;height:32px;display:block;flex:none }
.foot-brand { display:flex;align-items:center;justify-content:center;gap:9px;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:16px }
.foot-brand img { width:28px;height:28px;display:block }

/* ── 窄屏适配（放最后，顺序不能反）───────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle { display:flex }
  .nav ul { display:none;position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0;padding:6px 18px 10px;gap:0;flex-direction:column;box-shadow:0 12px 28px rgba(10,30,80,.13) }
  body.menu-open .nav ul { display:flex }
  .nav ul li { width:100% }
  .nav ul a { display:block;padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line) }
  .nav ul li:last-child a { border-bottom:0 }
  .wrap { padding:0 18px }
  .nav { height:auto;padding:12px 0 }
  .nav .wrap { height:auto;flex-wrap:wrap;gap:10px }
  .nav-cta { margin-left:auto;gap:0 }
  .nav-cta .tel { font-size:17px;display:none }
  .stats .wrap { grid-template-columns:1fr 1fr }
  .brand { font-size:18px }
  #navmenu .mtel { display:flex;align-items:center;gap:9px;padding:16px 2px 6px;border-top:1px solid var(--line);margin-top:6px;font-size:19px;font-weight:800;color:var(--accent) }
  #navmenu .mtel i { font-size:20px }
  #navmenu .maddr { display:block;padding:2px;font-size:13px;color:var(--muted) }
}
@media (max-width:768px) {
  .brand-logo { width:28px;height:28px }
  .foot-brand { font-size:16px }
}
@media (min-width: 769px) {
  #navmenu .mtel, #navmenu .maddr { display:none }
}