/* ==========================================
   Kopf Gym (kopfgym.com) - 公共基础样式表 (common.css)
   美式传统报刊期刊风格 (American Editorial & Senior Heritage)
   专为美国 55+ 银发长者打造的无障碍、高对比度、防眩光纸张排版
   ========================================== */

/* ==========================================================================
   本地字体优先加载策略 (Local-First Font Loading Strategy)
   优先利用用户设备本地操作系统已安装的高清字体，完全避免外部网络字体请求及下载延迟，
   杜绝 FOIT (文字闪烁空白) 与布局偏移 (CLS)，为银发长者提供极速首屏呈现与极佳阅读体验
   ========================================================================== */

/* 1. 经典报刊衬线字体：优先匹配本地已安装的传统名家衬线体 (常规体) */
@font-face {
    font-family: 'DMQ-Local-Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Georgia'),
         local('Palatino Linotype'),
         local('Book Antiqua'),
         local('Palatino'),
         local('Times New Roman'),
         local('Times'),
         local('Baskerville'),
         local('Garamond'),
         local('Cambria');
}

/* 2. 经典报刊衬线字体：优先匹配本地粗体 (粗体) */
@font-face {
    font-family: 'DMQ-Local-Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Georgia Bold'),
         local('Georgia-Bold'),
         local('Palatino Linotype Bold'),
         local('Palatino Bold'),
         local('Times New Roman Bold'),
         local('Times-Bold'),
         local('Baskerville Bold');
}

/* 3. 极速无衬线正文字体：优先检索本地操作系统的现代系统字体 (常规体) */
@font-face {
    font-family: 'DMQ-Local-Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('-apple-system'),
         local('BlinkMacSystemFont'),
         local('Segoe UI'),
         local('Roboto'),
         local('Helvetica Neue'),
         local('Arial'),
         local('Noto Sans'),
         local('Ubuntu');
}

/* 4. 极速无衬线正文字体：优先检索本地操作系统的粗体 (粗体) */
@font-face {
    font-family: 'DMQ-Local-Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Segoe UI Bold'),
         local('Roboto Bold'),
         local('Helvetica Neue Bold'),
         local('Arial Bold'),
         local('Noto Sans Bold');
}

:root {
    /* 核心色彩系统：60% 经典暖纸底色 + 30% 结构白纸与石板灰 + 10% 经典美式深海军蓝与暖琥珀 */
    --bg-primary: #faf9f5;          /* 温润象牙白，贴合视觉稿的德式期刊纸张质感 */
    --bg-secondary: #ffffff;        /* 纯净白纸卡片底色 */
    --bg-subtle: #f2efe9;           /* 柔和书卷底色 */
    --text-main: #14202e;           /* 高对比度普鲁士蓝黑 */
    --text-muted: #3b4b5e;          /* 稳重石墨蓝灰 */
    --color-primary: #153b64;       /* 皇家普鲁士蓝 */
    --color-primary-hover: #0e2947; /* 深普鲁士蓝 */
    --color-sky: #0284c7;           /* 阿尔卑斯蓝 */
    --color-forest: #166534;        /* 常青松绿 */
    --color-forest-hover: #0f4925;
    --color-accent: #d97706;        /* 向日葵暖金 */
    --color-accent-light: #fef3c7;   /* 淡雅暖杏米色底色 */
    --color-warning: #9e1c1c;
    --color-border: #ded9cf;
    --color-border-subtle: #ede9e0;
    
    /* 阴影系统：细腻平滑，拒绝浮夸塑料投影 */
    --shadow-sm: 0 2px 8px rgba(21, 59, 100, 0.05);
    --shadow-md: 0 6px 20px rgba(21, 59, 100, 0.08);
    --shadow-lg: 0 14px 34px rgba(21, 59, 100, 0.12);

    /* 字体系统：严格遵循本地字体优先栈 (Local-First System Font Stacks)
       1. 优先调用通过 @font-face local() 检索的本地字体 DMQ-Local-Serif 与 DMQ-Local-Sans
       2. 后备序列无缝对接各操作系统本地预装字体库 (macOS / iOS / Windows / Android / Linux)
       3. 零远程外部网络字体请求 */
    --font-serif: 'DMQ-Local-Serif', Charter, Merriweather, -apple-system-ui-serif, Georgia, 'Times New Roman', Times, 'Palatino Linotype', 'Book Antiqua', Palatino, Cambria, 'Iowan Old Style', Baskerville, Garamond, serif;
    --font-sans: 'DMQ-Local-Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-family: var(--font-sans);
}

/* 黑暗模式变量 (为夜间弱光阅读优化的高对比度柔和方案) */
body.dark-theme {
    --bg-primary: #0a111a;
    --bg-secondary: #121d2b;
    --bg-subtle: #192738;
    --text-main: #f6f8fb;
    --text-muted: #cad5e2;
    --color-primary: #4088db;
    --color-primary-hover: #63a2ec;
    --color-sky: #38bdf8;
    --color-forest: #2eb896;
    --color-forest-hover: #4ad4b2;
    --color-accent: #f59e0b;
    --color-accent-light: #2c1a0e;
    --color-border: #22344a;
    --color-border-subtle: #192738;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.6);
}

/* 基础重置与长者友好大字号排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-size: 19px;
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* 网页全局主容器 (统一留白，防止挤压) */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}

/* 页头 Header (经典美式报章 Masthead 风格) */
header {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 94px;
    position: relative;
}

/* 品牌 Logo 区域 (保证单行不换行、高对比度与典雅气质) */
.logo-area {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-icon {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1c4b7a 60%, var(--color-forest) 100%);
    color: #ffffff;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(18, 56, 95, 0.24);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    flex-shrink: 0;
}

.logo-area:hover .logo-icon {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 6px 20px rgba(18, 56, 95, 0.32);
}

.logo-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.8vw, 27px);
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: 0.8px;
    line-height: 1.0;
    white-space: nowrap; /* 强制大标题单行不换行 */
}

/* 右侧控制按钮组 */
.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.control-icon-btn {
    background-color: var(--bg-subtle);
    border: 1px solid var(--color-border);
    color: var(--text-main);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body.dark-theme .control-icon-btn {
    background-color: #1e293b;
    border-color: #334155;
}

.control-icon-btn:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 右侧分类菜单浮层 (点击分类菜单图标展开) */
.menu-selector {
    position: relative;
}

.header-menu-dropdown {
    display: none;
    position: absolute;
    top: 56px;
    right: 0;
    width: 250px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 10px 8px;
    z-index: 120;
    animation: fadeInMenu 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-dropdown-header {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: 6px 12px 10px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 6px;
}

.menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-dropdown-item:hover {
    background-color: var(--bg-subtle);
    color: var(--color-primary);
}

.menu-dropdown-item.active {
    background-color: var(--bg-subtle);
    color: var(--color-primary);
    font-weight: 800;
}

body.dark-theme .header-menu-dropdown {
    background-color: var(--bg-secondary);
    border-color: var(--color-border);
}

/* 移动端与小屏 Header 适配 (icon和网站标题往左，右侧两个图标更小，留白更紧凑) */
@media (max-width: 640px) {
    header .container,
    .nav-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nav-wrapper {
        height: 64px;
        gap: 8px;
    }

    .logo-area {
        gap: 8px;
        margin-left: 0;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .logo-icon svg {
        width: 20px;
        height: 20px;
    }

    .logo-title {
        font-size: 18px;
        letter-spacing: -0.3px;
    }

    .header-controls {
        gap: 6px;
    }

    .control-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .control-icon-btn svg,
    .control-icon-btn i {
        width: 18px !important;
        height: 18px !important;
    }

    .header-menu-dropdown {
        top: 48px;
        right: 0;
        width: 230px;
    }
}

.menu-nav-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    position: relative;
    transition: all 0.2s ease;
}

.menu-nav-link:hover {
    color: var(--color-primary);
    background-color: var(--bg-subtle);
}

.menu-nav-link.active {
    color: var(--color-primary);
    font-weight: 900;
}

.menu-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 14px;
    right: 14px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
}

/* 通用大号按钮 (美式沉稳品质感，杜绝轻浮渐变) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: 20px;
    padding: 16px 36px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(18, 51, 89, 0.22);
    transition: all 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 51, 89, 0.32);
}

.btn:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: #ffffff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.btn-secondary:hover {
    background-color: var(--bg-subtle);
}

/* 经典页脚 (庄重大气的美式深色风格) */
footer {
    background-color: #0d1b2a;
    color: #cbd5e1;
    padding: 68px 0 36px 0;
    border-top: 5px solid var(--color-accent);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 48px;
    margin-bottom: 40px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 40px;
}

.footer-brand {
    max-width: 440px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 900;
    text-decoration: none;
    margin-bottom: 14px;
}

.footer-logo-icon {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 8px;
    border-radius: 10px;
    display: flex;
}

.footer-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #94a3b8;
}

.footer-links {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-legal-bar {
    text-align: center;
    padding: 16px 0;
    margin-bottom: 12px;
}

.footer-legal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.footer-legal-links a:hover {
    color: #ffffff;
}

.footer-dot {
    color: #475569;
}

.footer-copyright {
    text-align: center;
    font-size: 15px;
    color: #64748b;
}

/* 响应式样式适配 */
@media (max-width: 900px) {
    .menu-dropdown-grid {
        gap: 16px;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 16px;
    }
}

/* ==========================================================================
   法律条款与信息页面专属排版样式 (Legal & Contact Information Pages)
   涵盖 Contact Us (联系我们)、Terms of Use (用户协议) 与 Privacy Policy (隐私政策)
   美式传统报刊纸质排版风格，大字号、高对比度、无障碍长者易读
   ========================================================================== */

/* 面包屑导航栏 */
.breadcrumb-nav {
    padding-top: 24px;
    padding-bottom: 8px;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
}

.breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: var(--color-border);
    font-weight: 400;
}

.breadcrumb-item.active {
    color: var(--text-muted);
    font-weight: 600;
}

/* 法律/信息页面容器 */
.legal-page-container {
    max-width: 860px;
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 72px;
}

/* 核心文章白纸卡片 (美式期刊风格，温润柔和边框与阴影) */
.legal-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 44px 48px;
    box-shadow: var(--shadow-sm);
    margin-top: 12px;
}

/* 页面主标题 (经典报刊衬线字体，威严庄重) */
.legal-title {
    font-family: var(--font-serif);
    font-size: 38px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.25;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

/* 元信息条 (生效日期、平台归属) */
.legal-meta {
    font-size: 16px;
    color: var(--text-muted);
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-weight: 600;
}

/* 正文区域排版规范 */
.legal-content {
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-main);
}

.legal-content p {
    margin-top: 0;
    margin-bottom: 22px;
}

.legal-content h2 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 900;
    color: var(--text-main);
    margin-top: 36px;
    margin-bottom: 14px;
    padding-left: 14px;
    border-left: 4px solid var(--color-primary);
    line-height: 1.35;
}

.legal-content h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    margin-top: 28px;
    margin-bottom: 12px;
}

.legal-content ul,
.legal-content ol {
    margin-top: 0;
    margin-bottom: 24px;
    padding-left: 28px;
}

.legal-content li {
    margin-bottom: 12px;
    line-height: 1.8;
}

.legal-content li:last-child {
    margin-bottom: 0;
}

.legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.legal-content a:hover {
    color: var(--color-primary-hover);
}

.legal-content strong {
    color: var(--text-main);
    font-weight: 800;
}

/* 暗黑模式下法律条款与信息页面适配 */
body.dark-theme .legal-card {
    background-color: var(--bg-secondary);
    border-color: var(--color-border);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

body.dark-theme .legal-meta {
    border-bottom-color: var(--color-border);
}

body.dark-theme .legal-content h2 {
    border-left-color: var(--color-accent);
}

body.dark-theme .legal-content a {
    color: #93c5fd;
}

/* 移动端无障碍适度自适应 */
@media (max-width: 640px) {
    .legal-card {
        padding: 28px 20px;
        border-radius: 12px;
    }
    .legal-title {
        font-size: 30px;
    }
    .legal-content {
        font-size: 17px;
        line-height: 1.75;
    }
    .legal-content h2 {
        font-size: 21px;
        margin-top: 28px;
    }
}

/* Dynamic application compatibility: language switcher. */
.lang-selector {
    position: relative;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 56px;
    right: 0;
    width: 160px;
    padding: 8px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 125;
}

.lang-item {
    display: block;
    padding: 10px 12px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
}

.lang-item:hover,
.lang-item.active {
    color: var(--color-primary);
    background-color: var(--bg-subtle);
}

@media (max-width: 640px) {
    .logo-title {
        font-size: 15px;
    }

    .logo-icon,
    .control-icon-btn {
        width: 32px;
        height: 32px;
    }

    .header-controls {
        gap: 4px;
    }

    .lang-dropdown {
        top: 44px;
    }

    .hide-on-pc {
        display: block;
    }

    .hide-on-mob {
        display: none;
    }
}