/* ============================================
   msmjt.cn 公共样式表 - 设计规范统一
   版本: 1.0
   说明: 统一颜色、字号、行高、间距、响应式
   ============================================ */

/* === 1. CSS变量 - 设计令牌 === */
:root {
    /* 品牌色 */
    --color-primary: #0f3472;        /* 主色-深蓝 */
    --color-primary-light: #1c4896;  /* 主色-浅蓝 */
    --color-primary-dark: #0a2855;   /* 主色-深蓝暗 */
    --color-accent: #d4af37;         /* 强调色-金色 */
    --color-accent-light: #ffd100;   /* 强调色-亮金 */
    --color-accent-dark: #b8941f;    /* 强调色-暗金 */

    /* 中性色 */
    --color-white: #ffffff;
    --color-gray-50: #f8f9fc;
    --color-gray-100: #f0f2f5;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #999999;
    --color-gray-500: #666666;
    --color-gray-600: #555555;
    --color-gray-700: #333333;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* 功能色 */
    --color-success: #07c160;
    --color-warning: #ffb700;
    --color-danger: #ff6b35;
    --color-info: #1a5490;

    /* 字号层级 */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fs-5xl: 42px;

    /* 行高 */
    --lh-tight: 1.2;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;
    --lh-loose: 1.8;

    /* 间距 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 12px 40px rgba(0,0,0,0.15);

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 最大宽度 */
    --max-width: 1200px;
}

/* === 2. 全局重置与基础 === */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--color-gray-700);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === 3. 排版规范 === */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-4);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-gray-900);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p {
    margin: 0 0 var(--sp-4);
    line-height: var(--lh-loose);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === 4. 统一颜色覆盖 - 品牌色规范化 === */
/* 将常见的近似蓝色统一为主色 */
[style*="color:#0f3472"],
[style*="color: #0f3472"],
[style*="color:#0d3b66"],
[style*="color: #0d3b66"],
[style*="color:#1a365d"],
[style*="color: #1a365d"],
[style*="color:#1a3a5c"],
[style*="color: #1a3a5c"],
[style*="color:#1a4a8a"],
[style*="color: #1a4a8a"],
[style*="color:#1a5276"],
[style*="color: #1a5276"],
[style*="color:#1a5490"],
[style*="color: #1a5490"],
[style*="color:#1c4896"],
[style*="color: #1c4896"],
[style*="color:#1e3a75"],
[style*="color: #1e3a75"] {
    color: var(--color-primary) !important;
}

/* 背景色统一 */
[style*="background-color:#0f3472"],
[style*="background-color: #0f3472"],
[style*="background:#0f3472"],
[style*="background: #0f3472"],
[style*="background-color:#0d3b66"],
[style*="background-color: #0d3b66"],
[style*="background-color:#1a365d"],
[style*="background-color: #1a365d"],
[style*="background-color:#1c4896"],
[style*="background-color: #1c4896"] {
    background-color: var(--color-primary) !important;
}

/* 金色统一 */
[style*="color:#d4af37"],
[style*="color: #d4af37"],
[style*="color:#ffd100"],
[style*="color: #ffd100"],
[style*="color:#ffd700"],
[style*="color: #ffd700"],
[style*="color:#ffb700"],
[style*="color: #ffb700"] {
    color: var(--color-accent) !important;
}

/* === 5. 列表样式 === */
ul, ol {
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-6);
}

li {
    margin-bottom: var(--sp-2);
    line-height: var(--lh-relaxed);
}

/* === 6. 表格样式 === */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sp-6);
}

th, td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

th {
    background-color: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-gray-800);
}

tr:hover {
    background-color: var(--color-gray-50);
}

/* === 7. 表单样式 === */
input, textarea, select, button {
    font-family: inherit;
    font-size: var(--fs-base);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 52, 114, 0.1);
}

button, .btn {
    display: inline-block;
    padding: var(--sp-3) var(--sp-6);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-gray-900);
}

.btn-accent:hover {
    background-color: var(--color-accent-light);
}

/* === 8. 响应式优化 === */
/* 平板 */
@media (max-width: 1024px) {
    :root {
        --fs-5xl: 36px;
        --fs-4xl: 28px;
        --fs-3xl: 24px;
        --fs-2xl: 22px;
    }
}

/* 手机横屏/小平板 */
@media (max-width: 768px) {
    :root {
        --fs-5xl: 32px;
        --fs-4xl: 26px;
        --fs-3xl: 22px;
        --fs-2xl: 20px;
        --fs-xl: 18px;
    }

    body {
        font-size: var(--fs-sm);
    }

    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-2xl); }
    h3 { font-size: var(--fs-xl); }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    button, .btn {
        min-height: 44px;
        min-width: 44px;
    }

    input, textarea, select {
        font-size: 16px; /* 防止iOS缩放 */
    }
}

/* 手机竖屏 */
@media (max-width: 480px) {
    :root {
        --fs-5xl: 28px;
        --fs-4xl: 24px;
        --fs-3xl: 20px;
        --fs-2xl: 18px;
    }

    p {
        line-height: var(--lh-loose);
    }
}

/* === 9. 可访问性优化 === */
/* 键盘焦点可见 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 跳过导航链接 */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--sp-2) var(--sp-4);
    z-index: 10000;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 10. 打印样式 === */
@media print {
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .no-print,
    nav,
    .float-contact-wrapper,
    #social-proof {
        display: none !important;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* === 11. 工具类 === */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-gray { color: var(--color-gray-500); }
.text-white { color: var(--color-white); }

.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-white { background-color: var(--color-white); }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.py-12 { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }

.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }

.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* === 12. SEO优化 - 结构化内容 === */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display: block;
}

/* === 13. 导航栏修复 - 确保LOGO和电话在一排两边 === */
header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 20px !important;
    min-height: 60px !important;
    gap: 20px !important;
}

.nav-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

.nav-left img {
    height: 40px !important;
    width: auto !important;
}

.group-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
}

.nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.nav-menu a {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding: 8px 4px !important;
    transition: color 0.2s ease !important;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-accent) !important;
}

.nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: right !important;
}
/* 对于非按钮类型的.nav-right（电话文字），使用金色 */
.nav-right:not(a) {
    color: var(--color-accent) !important;
}
/* 对于按钮类型的.nav-right（如投递简历），保留内联样式颜色 */
a.nav-right {
    text-decoration: none !important;
}

/* 平板端适配 - 隐藏部分菜单，保持一排 */
@media (max-width: 1200px) {
    .nav-menu {
        gap: 16px !important;
    }
    .nav-menu a {
        font-size: 14px !important;
    }
    .group-name {
        font-size: 16px !important;
    }
    .nav-right {
        font-size: 13px !important;
    }
}

/* 移动端 - 汉堡菜单模式 */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap !important;
        padding: 10px 15px !important;
        gap: 10px !important;
    }
    .nav-left {
        order: 1 !important;
    }
    .nav-right {
        order: 2 !important;
        font-size: 12px !important;
    }
    .nav-menu {
        order: 3 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
        display: none !important;
    }
    .nav-menu.mobile-open {
        display: flex !important;
    }
}

/* === 14. 第二种导航栏结构修复 (.top-nav 结构，覆盖228个页面) === */
.top-nav {
    background: #0f3472 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

.top-nav .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 20px !important;
    min-height: 60px !important;
    gap: 20px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.top-nav .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

.top-nav .logo img {
    height: 40px !important;
    width: auto !important;
}

.top-nav .logo-text,
.top-nav .logo span {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
}

.top-nav .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.top-nav .nav-links a {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding: 8px 4px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.top-nav .nav-links a:hover,
.top-nav .nav-links a.active {
    color: var(--color-accent) !important;
}

.top-nav .nav-phone {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    color: var(--color-accent) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: right !important;
}

/* 第二种导航栏 - 平板端适配 */
@media (max-width: 1200px) {
    .top-nav .nav-links {
        gap: 16px !important;
    }
    .top-nav .nav-links a {
        font-size: 14px !important;
    }
    .top-nav .logo-text,
    .top-nav .logo span {
        font-size: 16px !important;
    }
    .top-nav .nav-phone {
        font-size: 13px !important;
    }
}

/* 第二种导航栏 - 移动端适配 */
@media (max-width: 768px) {
    .top-nav .nav-inner {
        flex-wrap: wrap !important;
        padding: 10px 15px !important;
        gap: 10px !important;
    }
    .top-nav .logo {
        order: 1 !important;
    }
    .top-nav .nav-phone {
        order: 2 !important;
        font-size: 12px !important;
    }
    .top-nav .nav-links {
        order: 3 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }
}

/* === end common.css === */