/* 颜色定义 - 使用您指定的浅蓝色系 */
:root {
    --color-primary: #CCEEEE; /* 主色块背景，最深 */
    --color-secondary: #DDFFFF; /* 次要色块背景 */
    --color-tertiary: #EEFFFF; /* 分隔/强调背景 */
    --color-light: #F5FFFF; /* 主内容区背景 */
    --color-white: #FFFFFF; /* 纯白背景/文字 */
    
    /* ***** 颜色更新 ***** */
    --color-heading: #336699; /* 深蓝色用于标题 */
    --color-text-body: #5C5C5C; /* 灰色用于正文 */
}

/* 基础重置与字体 */
body {
    /* ***** 字体更新 ***** */
    font-family: 'Times New Roman', Times, serif; 
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--color-light);
    /* ***** 正文颜色更新 ***** */
    color: var(--color-text-body); 
}

/* 布局容器 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
    background-color: var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* 标题部分 */
header {
    background-color: var(--color-primary);
    padding: 30px 40px;
    text-align: center;
    border-radius: 6px 6px 0 0;
    margin: -20px -20px 20px -20px; 
}

/* ***** 标题颜色更新 ***** */
header h1, h3, h4 {
    color: var(--color-heading);
    font-weight: bold;
}

header h1 {
    margin: 0 0 5px 0;
    font-size: 2.2em;
}

header p {
    margin: 0;
    font-size: 1.1em;
    color: var(--color-text-body);
}

/* 内容网格 - 实现紧凑两栏布局 */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 3fr; 
    gap: 20px;
}

/* 左侧栏：抽象概念与逻辑 */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 内容区块通用样式 */
.section-box {
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    height: 100%; 
}

.section-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--color-tertiary);
    padding-bottom: 5px;
    font-size: 1.3em;
}

/* 针对左侧栏不同区块设置不同的浅色背景和强调线 */
#value-section {
    background-color: var(--color-secondary);
}

#logic-section {
    background-color: var(--color-tertiary);
    border-left: 5px solid var(--color-heading); /* 使用深蓝强调 */
}

#career-section {
    background-color: var(--color-light);
    border-left: 5px solid var(--color-primary);
}

/* 右侧主内容区：应用与核心概念 */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-content .section-box {
    background-color: var(--color-light);
    border-left: 5px solid var(--color-heading); /* 使用深蓝强调 */
}


/* 列表样式 */
ul {
    list-style: none;
    padding-left: 0;
}

ul li {
    margin-bottom: 8px; 
    padding-left: 20px;
    position: relative;
    font-size: 0.95em;
}

ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
}

/* 特殊分隔线 */
.separator {
    text-align: center;
    margin: 15px 0;
    color: var(--color-text-body);
    font-style: italic;
    font-size: 0.8em;
}

/* 强调文字 */
.highlight {
    font-weight: bold;
    color: var(--color-heading); /* 使用深蓝突出强调 */
}

/* 底部/总结部分 */
footer {
    margin-top: 30px;
    padding: 20px;
    background-color: var(--color-tertiary);
    border-radius: 0 0 6px 6px;
    text-align: center;
    font-size: 1.0em;
    line-height: 1.5;
}

/* 响应式调整 */
@media (max-width: 800px) {
    .content-grid {
        grid-template-columns: 1fr; 
    }
    header {
        padding: 20px;
    }
    .sidebar {
        order: 2; 
    }
    .main-content {
        order: 1; 
    }
}
/* ---------------------------------- */
/* 按钮样式：Return to HomePage Button */
/* ---------------------------------- */

.home-button {
    /* 链接基础样式 */
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 15px; /* 与下方文字拉开距离 */
    border-radius: 5px;
    
    /* 颜色和边框 */
    background-color: var(--color-secondary); /* #DDFFFF */
    color: var(--color-heading); /* 按钮文字使用深蓝色 #336699 */
    border: 1px solid var(--color-primary); /* #CCEEEE 边框 */
    transition: background-color 0.3s, transform 0.1s; /* 添加过渡效果 */
}

/* 鼠标悬停效果 */
.home-button:hover {
    background-color: var(--color-primary); /* 悬停时颜色加深 */
    transform: translateY(-1px); /* 轻微上移，增加动感 */
}

/* 鼠标点击效果 */
.home-button:active {
    background-color: var(--color-heading); /* 点击时颜色变为深蓝 */
    color: var(--color-white); /* 文字变白 */
    border-color: var(--color-heading);
    transform: translateY(0);
}
h1 {
    /* 1. 字体：使用优雅的 Didone 衬线字体栈 */
    font-family: "Bodoni", "Didot", "Times New Roman", Times, serif;
    
    /* 2. 字距：增加字母间距（可根据需要调整 0.2em 的值） */
    letter-spacing: 0.12em; 
    
    /* 3. 字重：确保标题醒目 */
    font-weight: 800; 
    font-size: 2.5em;
}