/* ============================================================================
 * 诚立集团 · 品牌模块 —— 样式（两个工具页共用，精简版）
 * ----------------------------------------------------------------------------
 * 只保留两块，且都不是广告位：
 *   ① 顶部导航栏 + 集团品牌标识（全站唯一的集团官网入口）
 *   ② 底部极简页脚（版权 + ICP 备案号，合规展示用）
 *
 * 设计原则：
 *  1) 深蓝主色 #1a365d，与集团官网品牌一致；标识英文用金色 #8a6d12；
 *  2) 顶部导航栏为“白底细线”轻量风格，与工具页整体协调，不抢工具区视觉；
 *  3) 全程使用 .cl- 前缀类名，避免与 Tailwind / 工具区样式冲突；
 *  4) 顶部用 position:sticky（仍占据文档流空间）→ 不会遮挡工具核心功能；
 *  5) 页脚刻意做得极轻（一行小字 + 一条发丝线），不允许抢工具区注意力。
 * ========================================================================== */

:root {
  /* 集团品牌色板（取自集团官网） */
  --cl-navy-950: #0a1a2f;
  --cl-navy-900: #122844;
  --cl-navy-800: #1a365d;
  --cl-navy-700: #2a4770;
  --cl-navy-100: #e7eef7;
  --cl-navy-50: #f4f7fb;
  --cl-gold-700: #8a6d12;

  --cl-ink: #101f33;
  --cl-body: #46586f;
  --cl-muted: #64758c;
  --cl-line: #e3e9f2;

  --cl-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  /* 官网 LOGO 文字（“诚立集团”）用的是衬线体，此处保持一致 */
  --cl-font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", SimSun,
    "STSong", serif;
  --cl-header-h: 68px;
}

/* ---------------------------------------------------------------------------
 * 顶部导航栏 —— 白底、细线、轻量
 * ------------------------------------------------------------------------- */
.cl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cl-line);
  font-family: var(--cl-font);
}

.cl-header__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: var(--cl-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 集团 LOGO —— 与官网 www.chengli.net.cn 的 .logo-mark 完全一致：
   底色由容器承担（深蓝渐变 + 25% 圆角 + 阴影），内部 SVG 只画字形，占容器 70.8%。 */
.cl-logo {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 25%;
  background: linear-gradient(135deg, var(--cl-navy-700), var(--cl-navy-950));
  box-shadow: 0 8px 18px rgba(26, 58, 107, 0.22);
}

.cl-logo img {
  display: block;
  width: 70.8%;
  height: 70.8%;
}

.cl-logo--nav {
  width: 40px;
  height: 40px;
}

/* 品牌标识（Logo + 文字）—— 全站唯一的集团官网入口 */
.cl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cl-ink);
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 10px;
  transition: background-color 0.18s ease;
}

.cl-brand:hover {
  background: var(--cl-navy-50);
}

.cl-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

/* LOGO 文字锁版：衬线体中文 + 金色字距拉开的英文，与官网 .logo-text 一致
   （官网 --logo-size:48px → 中文 22px / 英文 11.5px；此处按 40px 图标等比缩放） */
.cl-brand__name {
  font-family: var(--cl-font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cl-navy-900);
}

.cl-brand__en {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--cl-gold-700);
  margin-top: 2px;
}

/* 工具站内切换 */
.cl-header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.cl-navlink {
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--cl-body);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}

.cl-navlink:hover {
  color: var(--cl-navy-800);
  background: var(--cl-navy-50);
}

.cl-navlink.is-active {
  color: var(--cl-navy-800);
  background: var(--cl-navy-100);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 底部页脚 —— 合规用，极简一行（版权 + ICP 备案号）
 * 刻意做轻：一行小字 + 一条发丝线，白底近乎透明，不与工具区争视觉；
 * 深蓝色只用在链接 hover 上，不做整块深蓝底（那是广告区的观感）。
 * ------------------------------------------------------------------------- */
.cl-footer {
  border-top: 1px solid var(--cl-line);
  background: rgba(255, 255, 255, 0.66);
  font-family: var(--cl-font);
  margin-top: 0;
}

.cl-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cl-muted);
}

.cl-footer__copy {
  white-space: nowrap;
}

/* 版权与备案号之间的分隔符（也是可复制的真实字符） */
.cl-footer__sep {
  color: #bcc8d8;
}

.cl-footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
}

.cl-footer__link {
  color: var(--cl-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.cl-footer__link:hover {
  color: var(--cl-navy-800);
  border-bottom-color: currentColor;
}

/* 页脚存在时收窄工具区底部留白（.tool-main 默认 64px），
   避免工具区与页脚之间空出一大段，看起来像"断层"。 */
.cl-has-footer .tool-main {
  padding-bottom: 40px;
}

/* ---------------------------------------------------------------------------
 * 响应式：移动端
 * ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --cl-header-h: 60px;
  }

  .cl-header__inner {
    padding: 0 14px;
    gap: 8px;
  }

  /* 移动端隐藏英文副标，保住「诚立集团」名称与工具切换入口 */
  .cl-brand__en {
    display: none;
  }

  .cl-logo--nav {
    width: 34px;
    height: 34px;
  }

  .cl-brand {
    gap: 8px;
    padding: 6px;
    margin-left: -6px;
  }

  .cl-brand__name {
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  .cl-navlink {
    padding: 7px 9px;
    font-size: 13px;
  }

  /* 移动端页脚：允许自然换行居中，字号略收 */
  .cl-footer__inner {
    padding: 16px 14px;
    gap: 4px 12px;
    font-size: 12px;
  }
}

/* 打印场景：导航栏不吸顶 */
@media print {
  .cl-header {
    position: static;
  }
}