/* ============================================================
   山东崇真（德州）律师事务所官网 · 基础样式
   文件：css/base.css —— 配色变量 + reset + 通用布局工具类
   说明：深蓝 + 金色，经典商务律所风格；不使用任何外链资源
   ============================================================ */

:root {
  /* ===== 主色：深藏青蓝 ===== */
  --navy-900: #081f3d;   /* 最深：页脚 / 压暗背景 */
  --navy-800: #0b2a5b;   /* 主色：导航栏 / 页内 banner */
  --navy-700: #123a75;   /* 主色浅一档：卡片标题 / 链接 */
  --navy-600: #1b4a8f;   /* 点缀：次级链接 hover */
  --navy-100: #e8eef7;   /* 浅蓝灰：区块分隔背景 */

  /* ===== 金色（强调色，低饱和显稳重） ===== */
  --gold-600: #a8842a;   /* 深金：正文金色文字 / 标签 */
  --gold-500: #c9a227;   /* 标准金：按钮 / 图标 / 下划线 */
  --gold-400: #d9b64a;   /* 浅金：hover 提亮 */
  --gold-300: #e6cd7e;   /* 更浅金：深底上大标题用 */
  --gold-100: #f7efd9;   /* 浅金底：标签 / 引用背景 */

  /* ===== 中性色 ===== */
  --ink-900: #1f2937;    /* 主文字 */
  --ink-600: #5b6672;    /* 次级文字 */
  --ink-400: #9aa5b1;    /* 弱文字 / 时间戳 */
  --line:     #e4e8ee;   /* 分隔线 / 卡片描边 */
  --bg-page:  #f7f9fc;   /* 页面浅灰底 */
  --white:    #ffffff;

  /* ===== 渐变（Hero / 页脚 / CTA） ===== */
  --grad-main: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%);
  --grad-deep: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%);

  /* ===== 圆角 / 阴影 / 字体 ===== */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 6px 20px rgba(11, 42, 91, 0.10);
  --shadow-lg: 0 12px 32px rgba(11, 42, 91, 0.16);
  --font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, "Segoe UI", sans-serif;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  color: var(--ink-900);
  background: var(--bg-page);
  line-height: 1.7;
}

img, svg { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }

ul, ol { list-style: none; }

a { color: var(--navy-700); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; color: var(--navy-800); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

input, textarea, select { font-family: inherit; font-size: 1rem; }

/* ===== 通用布局工具类 ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section { padding: 64px 0; }

.section--gray { background: var(--white); }
.section--light { background: var(--bg-page); }
.section--blue { background: var(--grad-deep); color: #fff; }

/* 区块标题 */
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .subtitle {
  display: inline-block;
  font-size: .85rem;
  letter-spacing: 4px;
  color: var(--gold-600);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); position: relative; display: inline-block; }
.section-head h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--gold-500);
  margin: 14px auto 0;
  border-radius: 2px;
}
.section-head p { margin-top: 14px; color: var(--ink-600); max-width: 720px; margin-left: auto; margin-right: auto; }

/* 通用按钮 */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: all .25s ease;
}
.btn--gold { background: var(--gold-500); color: #fff; }
.btn--gold:hover { background: var(--gold-400); color: #fff; box-shadow: var(--shadow); }
.btn--outline { border: 1px solid rgba(255,255,255,.75); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }
.btn--sm { padding: 8px 18px; font-size: .9rem; }

/* 页内 banner（二级页面顶部） */
.page-banner {
  position: relative;
  background: var(--grad-main);
  padding: 72px 0;
  text-align: center;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(201,162,39,.07) 0 2px, transparent 2px 30px);
}
.page-banner::after {
  content: attr(data-mark);
  position: absolute; right: 4%; bottom: -34%;
  font-size: 340px; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.045); pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1, .page-banner .banner-h1 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.page-banner h1::after, .page-banner .banner-h1::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--gold-500);
  margin: 16px auto 0;
  border-radius: 2px;
}
.page-banner p { margin-top: 14px; color: rgba(255,255,255,.85); }

/* 面包屑 */
.breadcrumb { font-size: .88rem; color: var(--ink-600); padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 36px; background: #fff; }
.breadcrumb a { color: var(--navy-700); }
.breadcrumb a:hover { color: var(--gold-600); }
.breadcrumb .sep { margin: 0 8px; color: var(--ink-400); }
.breadcrumb .cur { color: var(--gold-600); }

/* 通用网格 */
.grid { display: grid; gap: 24px; }
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* 顶部信息条 */
.topbar { background: var(--navy-900); color: rgba(255,255,255,.85); font-size: .85rem; padding: 8px 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: var(--gold-400); }
.topbar .tb-item { display: inline-flex; align-items: center; gap: 6px; }
.topbar .tb-item + .tb-item { margin-left: 22px; }
.topbar svg { width: 14px; height: 14px; fill: var(--gold-500); }

/* ===== 响应式基础 ===== */
@media (max-width: 1024px) {
  .section { padding: 48px 0; }
  .page-banner { padding: 56px 0; }
}
@media (max-width: 768px) {
  .section { padding: 40px 0; }
  .page-banner { padding: 44px 0; }
  .topbar .tb-right { display: none; }
}