/* =====================================================================
   北京鸿盟律师事务所官网 — 公共样式基础层
   Hongmeng Law Firm — Common CSS Base

   创建：2026-10-14
   用途：统一设计令牌（Design Tokens）与公共组件。
        后续改版只需改本文件，不必逐页修改。
   加载：<link rel="stylesheet" href="/assets/css/common.css">
   ===================================================================== */

/* ---------------------------------------------------------------
   1. 设计令牌（Design Tokens）
   改版时优先调整这里，全站同步生效
   --------------------------------------------------------------- */
:root {
  /* —— 品牌色 —— */
  --hm-navy:          #1a365d;   /* 主色：深蓝（权威、稳重） */
  --hm-navy-light:    #2d5a8a;   /* 主色浅调（渐变用） */
  --hm-navy-dark:     #12253f;   /* 主色深调（hover / header） */
  --hm-gold:          #d4af37;   /* 强调色：暗金（CTA、重点） */
  --hm-gold-hover:    #c79f2c;   /* 强调色 hover */

  /* —— 中性色 —— */
  --hm-text:          #333333;   /* 正文主色 */
  --hm-text-muted:    #555555;   /* 正文次色 */
  --hm-text-light:    #cbd5e0;   /* 深色底上的文字 */
  --hm-border:        #eeeeee;   /* 分隔线 */
  --hm-bg:            #ffffff;   /* 页面底色 */
  --hm-bg-soft:       #f8f9fa;   /* 浅灰底 */
  --hm-bg-softer:     #f0f4f8;   /* 更浅灰底 */
  --hm-danger:        #c53030;   /* 警示 */

  /* —— 字体 —— */
  --hm-font: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  /* —— 字号阶梯 —— */
  --hm-fs-xs:   12px;
  --hm-fs-sm:   13px;
  --hm-fs-base: 14px;
  --hm-fs-md:   15px;
  --hm-fs-lg:   16px;
  --hm-fs-xl:   18px;
  --hm-fs-2xl:  20px;
  --hm-fs-3xl:  24px;
  --hm-fs-4xl:  36px;
  --hm-fs-5xl:  42px;

  /* —— 间距 —— */
  --hm-sp-xs:  6px;
  --hm-sp-sm:  10px;
  --hm-sp-md:  16px;
  --hm-sp-lg:  24px;
  --hm-sp-xl:  36px;
  --hm-sp-2xl: 40px;

  /* —— 圆角 / 阴影 —— */
  --hm-radius:    6px;
  --hm-radius-sm: 4px;
  --hm-radius-pill: 50px;
  --hm-shadow:    0 2px 10px rgba(0,0,0,0.05);
  --hm-shadow-md: 0 4px 14px rgba(0,0,0,0.12);
  --hm-shadow-lg: 0 4px 14px rgba(0,0,0,0.25);

  /* —— 布局 —— */
  --hm-container: 1100px;
  --hm-z-nav:     1000;
  --hm-z-dropdown:1001;
  --hm-z-mobile:  2000;

  /* —— 动效 —— */
  --hm-transition: all 0.4s ease;
}

/* ---------------------------------------------------------------
   2. 基础重置（仅对 hm- 作用域与安全全局）
   注意：此处刻意不重置 h1~h6 的 font-size，避免破坏各页已有版式
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   2. 基础重置
   ---------------------------------------------------------------
   ⚠️ 重要：刻意不设 body / a 的全局规则。

   原因：本站各页面（尤其 /knowledge/*.html 详情页）都有自己的
   行内 <style> 块定义 body{font-family:...} 与链接样式，且这些
   页面的 .container 用了 grid 精确布局（grid-template-columns:
   2fr 1fr 1fr 1fr）。若公共 CSS 在此覆盖 font-family，会因
   字体度量（font metrics）差异导致字宽/行高变化，进而让 grid
   栅格、居中标题等依赖精确排版的区块错位 —— 表现为"排版乱套"。

   因此：字体与链接样式交由各页面原有样式决定，本文件只提供
   变量（--hm-font）与带 .hm- 前缀的组件类，绝不污染全局元素。
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   3. 公共组件
   --------------------------------------------------------------- */

/* 容器 */
.hm-container {
  max-width: var(--hm-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* 区块标题 */
.hm-section-title {
  font-size: var(--hm-fs-2xl);
  color: var(--hm-navy);
  margin: 0 0 var(--hm-sp-sm);
  font-weight: bold;
}

/* 金色主按钮（CTA） */
.hm-btn-gold {
  display: inline-block;
  background: var(--hm-gold);
  color: var(--hm-navy);
  padding: 13px 30px;
  border-radius: var(--hm-radius);
  font-weight: bold;
  font-size: var(--hm-fs-lg);
  transition: var(--hm-transition);
  border: none;
  cursor: pointer;
}
.hm-btn-gold:hover {
  background: var(--hm-gold-hover);
}

/* 深蓝按钮（次级） */
.hm-btn-navy {
  display: inline-block;
  background: var(--hm-navy);
  color: #fff;
  padding: 12px 26px;
  border-radius: var(--hm-radius);
  font-weight: bold;
  transition: var(--hm-transition);
}
.hm-btn-navy:hover { background: var(--hm-navy-light); }

/* 卡片 */
.hm-card {
  background: var(--hm-bg);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow);
  padding: var(--hm-sp-lg);
}

/* 页脚（全站统一） */
.hm-footer {
  background: var(--hm-navy);
  color: var(--hm-text-light);
  margin-top: var(--hm-sp-xl);
  padding: var(--hm-sp-lg) 20px;
  font-size: var(--hm-fs-base);
  line-height: 1.9;
}
.hm-footer a { color: var(--hm-text-light); margin-right: var(--hm-sp-md); }
.hm-footer a:hover { color: var(--hm-gold); }

/* 面包屑 */
.hm-breadcrumb {
  font-size: var(--hm-fs-sm);
  color: var(--hm-text-muted);
  margin-bottom: var(--hm-sp-md);
}
.hm-breadcrumb a { color: var(--hm-navy); }
.hm-breadcrumb a:hover { color: var(--hm-gold); }

/* 响应式工具类：仅手机可见 / 仅桌面可见 */
.hm-mobile-only { display: none; }
@media (max-width: 820px) {
  .hm-mobile-only { display: block; }
  .hm-desktop-only { display: none; }
}

/* ---------------------------------------------------------------
   4. 移动端菜单行为（统一版本）
   说明：原先 .mobile-menu / .mnav-panel 的隐藏规则写散在各页内联样式里，
        桌面端因缺少兜底 display:none 导致菜单意外可见。此处统一修正。
   --------------------------------------------------------------- */
.mobile-menu,
.mnav-panel {
  display: none !important;
}

/* 汉堡按钮：桌面不显示，手机显示 */
.menu-toggle,
.mnav-toggle {
  display: none !important;
}
@media (max-width: 992px) {
  .menu-toggle { display: block !important; }
}
@media (max-width: 820px) {
  .mnav-toggle { display: block !important; }
}

/* 移动菜单激活时的展现 */
@media (max-width: 992px) {
  .mobile-menu { display: none !important; }
  .mobile-menu.active { display: block !important; }
}

/* ---------------------------------------------------------------
   5. 打印友好（可选）
   --------------------------------------------------------------- */
@media print {
  .hm-footer, .mobile-menu, .mnav-panel, .menu-toggle, .mnav-toggle { display: none !important; }
}