/* ========================================================
 * Theme Override — Professional Business
 * 覆盖层：仅调样式（字体/字号/颜色），不改任何文案与结构。
 * 风格：深蓝主色 + 中性灰文字，稳重专业。
 * 中文字体：优先系统字（PingFang SC / 微软雅黑），HarmonyOS 回退。
 * ======================================================== */

/* ---------- 1. 设计令牌 / CSS 变量 ---------- */
:root {
    --brand-primary:        #0c3b8c;  /* 深蓝主色（专业商务） */
    --brand-primary-hover:  #1553c4;
    --brand-primary-soft:   #eaf0fa;  /* 轻底色，卡片/徽章背景 */
    --brand-dark:           #0a2350;  /* 比主色再深，footer 背景 */
    --brand-accent:         #1677ff;  /* 高亮/强调 */

    --text-strong:          #121826;  /* 标题/一级正文 */
    --text-primary:         #1f2937;  /* 正文 */
    --text-secondary:       #4a5565;  /* 次要说明 */
    --text-muted:           #8a93a6;  /* 时间、备注 */
    --text-inverse:         #ffffff;

    --border-soft:          #e7eaf1;
    --bg-soft:              #f6f8fb;

    --font-sans-sc:         'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei',
                            'HarmonyOS Sans SC', 'HarmonyOS Sans SC-Regular',
                            'Helvetica Neue', Arial, 'Noto Sans CJK SC', sans-serif;
    --font-sans-latin:      'Inter', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
}

/* ---------- 2. 基础：字体栈 + 抗锯齿 ---------- */
html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html, body, input, textarea, select, button, .el-button, .el-input__inner {
    font-family: var(--font-sans-sc);
}
body {
    color: var(--text-primary);
    letter-spacing: .2px;
}

/* ---------- 3. 标题层级 ---------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    letter-spacing: .5px;
    font-weight: 700;
}
/* 各 box 区块的主标题（保持原字号，只增强可读性） */
.box1 .box-t, .box2 .box-t, .box3 .box-t,
.box4 .box-t, .box5 .box-t, .box6 .box-t, .box7 .box-t,
.historyBox .box-t, .cooperative-brand .box-t {
    color: var(--text-strong);
    letter-spacing: 1px;
    font-weight: 700;
}

/* ---------- 4. 段落正文 ---------- */
p {
    color: var(--text-secondary);
    line-height: 1.75;
}
/* 避免影响 footer（下面单独调） */
.footer p { line-height: inherit; color: inherit; }

/* 次要/弱化文字（时间、日期、说明） */
.time, .date, .muted, .desc-small, .news-list .date, .box6 .date {
    color: var(--text-muted);
}

/* ---------- 5. 链接 ---------- */
a {
    color: inherit;
    transition: color .2s ease;
}
a:hover {
    color: var(--brand-primary);
}

/* ---------- 6a. 顶部导航：首项与 LOGO 左对齐 ---------- */
/* 原：.nav li { flex:1; text-align:center } 会让 "首页" 居中在第 1 个 cell，
 * 视觉上远离 LOGO 左边沿。改为每项按内容宽度 + 左起，使 "首页" 贴左。 */
.header .header-b-c .nav {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    /* 整个 nav 向左挪 22px，这样首项 hover 背景往左延伸 22px，同时 "首页" 文字仍与 LOGO 对齐 */
    margin-left: -22px !important;
}
.header .header-b-c .nav li {
    flex: 0 0 auto !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* 间距放在 <a> 的 padding 上，li::before (宽度 100% of li) 就能把整个 cell 铺满，
 * hover 时背景色覆盖整格（与 mb13.icku.net 一致）。 */
.header .header-b-c .nav li > a {
    padding: 0 22px !important;
    display: block;
}
/* 首项 <a> 保留左 padding = 22px，和其它项对称；
 * 配合上面 .nav 的 margin-left:-22px，视觉效果是：文字与 LOGO 对齐，
 * hover 背景左右各延伸 22px。 */
.header .header-b-c .nav li:first-child > a {
    padding-left: 22px !important;
}
/* 可选：末项去右 padding，避免靠语言切换区不对称 */
.header .header-b-c .nav li:last-child > a {
    padding-right: 22px !important;
}

/* ---------- 6. 顶部导航 ---------- */
.header,
.header .header-b,
.header .header-b-c {
    color: var(--text-primary);
}
.header .header-b-c > a,
.header .nav > a,
.header .header-b-c .nav a {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: .3px;
}
.header .header-b-c > a:hover,
.header .nav > a:hover,
.header .header-b-c .nav a:hover,
.header .header-b-c > a.active,
.header .header-b-c .nav a.active {
    color: var(--brand-primary);
}

/* 顶部右侧联系方式 */
.header .header-c .r,
.header .header-c .r * {
    color: var(--text-secondary);
}

/* ---------- 7. 按钮 / 主色强化 ---------- */
.btn-primary,
.more-btn,
.submit-btn,
.search-btn,
.el-button--primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-inverse) !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-primary:hover,
.more-btn:hover,
.submit-btn:hover,
.search-btn:hover,
.el-button--primary:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    box-shadow: 0 4px 14px rgba(12, 59, 140, .18);
}

/* 原来用 #353c7c / #414b97 / #9b9fc5 的色块：替换为品牌深蓝体系 */
[style*="#353c7c"], [style*="#414b97"] { background-color: var(--brand-primary) !important; }

/* ---------- 8. 卡片/列表 hover 细节 ---------- */
.news-list .item:hover,
.box6 .item:hover,
.box7 li:hover {
    box-shadow: 0 6px 18px rgba(12, 38, 84, .08);
    transition: box-shadow .25s ease;
}

/* ---------- 9. Footer：深蓝 + 高对比 ---------- */
.footer {
    background-color: var(--brand-dark) !important;
    color: rgba(255, 255, 255, .82);
}
.footer .footer-t-l .nav a,
.footer .footer-t-l .nav .footer-maker,
.footer .tel-text,
.footer .tel-text a,
.footer .text {
    color: rgba(255, 255, 255, .82) !important;
}
.footer .footer-t-l .nav a:hover,
.footer .tel-text a:hover {
    color: #fff !important;
}
.footer .tel-number {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .6px;
    font-size: 22px;
}
.footer-b {
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .72);
}
.footer-b a {
    color: rgba(255, 255, 255, .72) !important;
}
.footer-b a:hover {
    color: #fff !important;
}

/* ---------- 10. 输入框一致性 ---------- */
input, textarea, select {
    color: var(--text-primary);
}
input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(12, 59, 140, .12);
}

/* ---------- 11. 数字/英文使用拉丁字体栈（更整齐） ---------- */
.footer .tel-number,
.box6 .date,
.news-list .date,
.historyBox .year,
.stat-num {
    font-family: var(--font-sans-latin);
}

/* ---------- 12. 数字滚动 / 计数器防抖动 ---------- */
/* 根治思路：
 *  1) 每项 li 固定最小宽度，动画过程相邻项不会被挤动。
 *  2) .number 改为 inline-grid 占据全宽，整块垂直居中 + text-align:center，
 *     数字位数变化只在内部居中伸缩，外部宽度不动。
 *  3) 启用 tabular-nums 等宽数字，进一步抑制位宽变化。
 *  4) 给 .number 换可靠的等宽数字字体栈（fallback 到系统字），
 *     HarmonyOS 黑体可能不含 tnum 特性，系统字体都支持。
 */
#index .box3 .list {
    justify-content: flex-start !important;
    padding-left: 0 !important;   /* 去掉 ul 默认的 40px 左内边距 */
    margin-left: 0 !important;
    list-style: none !important;
}
#index .box3 .list > li,
#index .box3 .list > div {
    flex: 0 0 auto;
    min-width: 220px;          /* 固定槽位，防止相邻项被挤 */
    text-align: center;
    contain: layout paint;     /* 隔离重排影响 */
}
#index .box3 .list .number {
    display: block;
    min-width: 180px;          /* 够放下 "100,000+" */
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-kerning: none;
    /* 保留原渐变文字效果的前提下，用系统字体栈确保 tnum 生效 */
    font-family: 'PingFang SC', 'Microsoft YaHei', 'HarmonyOS Sans SC-Black',
                 'HarmonyOS Sans SC', 'Helvetica Neue', Arial, sans-serif;
    font-variant-ligatures: none;
}
/* 通用计数器兜底 */
.counter, .count-up, .count-num, [data-countup], [data-counter] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-kerning: none;
    display: inline-block;
    text-align: center;
}

/* 响应式：小屏减小固定宽度 */
@media (max-width: 900px) {
    #index .box3 .list > li,
    #index .box3 .list > div { min-width: 150px; }
    #index .box3 .list .number { min-width: 130px; }
}
@media (max-width: 600px) {
    #index .box3 .list > li,
    #index .box3 .list > div { min-width: 0; flex: 1 1 40%; }
    #index .box3 .list .number { min-width: 0; }
}

/* ---------- 13. 滚动条（细节加分项，仅桌面） ---------- */
@media (min-width: 900px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb {
        background: #c9ced8;
        border-radius: 8px;
    }
    ::-webkit-scrollbar-thumb:hover { background: #a7aebd; }
    ::-webkit-scrollbar-track { background: transparent; }
}
