@charset "UTF-8";
/* CSS Document */
body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    background:#f8f8f8;
    color:#333;
    line-height:1.8;
    padding: 0;
}

/* 通用section样式重置 */
section{
    padding: 0;
    margin: 40px 12%; /* 用margin替代padding，避免盒子内边距混乱 */
}

/* 所有专题盒子的通用样式 - 统一米白色 */
.section-box {
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 保留指定的阴影效果 */
    background: #faf6ed; /* 统一的米白色背景，柔和不刺眼 */
    border: 1px solid #f0ebe0; /* 浅米色边框，增强轮廓感 */
}

/* 全局统一的h2标题样式 */
.title-box {
    width:82%;
    height:auto;
    display: flex; 
    align-items: center; 
    margin: 30px auto 30px; 
    padding-bottom:10px;
    border-bottom:2px solid #e8d0d0; /* 红色系边框，呼应主题 */
    justify-content: center;
}

.about-text-wrap {
    display: flex; 
    align-items: baseline; 
    gap: 8px; 
}

.timeline_h2 {
    font-size: 30px;
    color: #8B0000; /* 红安主题红 */
    margin: 0;
    padding: 0;
    line-height: 1;
}

.timeline_span {
    font-size: 20px;
    color: #7D7D7D;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 全局统一的h3样式（与地理与历史盒子的h3保持一致） */
h3 {
    color: #8B0000;
    text-align: left; /* 左对齐，更符合阅读习惯 */
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top:0;
}

/* 红安介绍 - 地理与历史盒子 */
.hongan-history {
    width: 100%;
    margin: 0 auto 30px auto; /* 底部留间距，与下一个盒子分隔 */
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #f0ebe0; /* 底部边框分隔 */
}

.hongan-history .text {
    width: 82%;
    margin: auto;
    line-height: 1.75;
}

/* 红安介绍 - 红色文化资源盒子 */
.hongan-resources {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

/* 红色文化资源列表样式 */
.resources-container {
    width: 82%;
    margin: 20px auto;
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0ebe0; /* 米色边框，统一风格 */
    padding: 20px 0;
}

/* 最后一个条目取消下边框 */
.resource-item:last-child {
    border-bottom: none;
}

.resource-content {
    flex: 1;
    margin-right: 20px;
}

/* 适配长标题，防止文字溢出 */
.resource-content h3 {
    font-size: 17px; /* 微调字号适配长标题 */
    margin-bottom: 10px;
    line-height: 1.4; /* 增加行高，提升长标题可读性 */
}

.resource-content p {
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.resource-image {
    width: 240px;
    height: 160px;
    overflow: hidden;
    border-radius: 8px; /* 圆角，统一风格 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 轻微阴影，增强立体感 */
}

.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
    transition: transform 0.3s ease; /* 鼠标悬浮缩放效果 */
}

/* 图片悬浮放大效果 */
.resource-image:hover img {
    transform: scale(1.05);
}

/* Hero区域样式 */
.hero{
    background:linear-gradient(rgba(139,0,0,0.8),rgba(139,0,0,0.8)),
               url('hero.jpg');
    background-size:cover;
    background-position:center;
    color:white;
    text-align:center;
    min-height: 100vh; 
    display: flex;     
    flex-direction: column; 
    justify-content: center; 
    align-items: center;     
    padding: 0 10%;    
    margin: 0;         
}

.hero h1 {
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.hero p {
    margin: 10px 0;
    font-size: 1.1rem;
}

.btn{
    display:inline-block;
    margin-top:30px; 
    padding:12px 30px; 
    background:white;
    color:#8B0000;
    text-decoration:none;
    border-radius:5px;
    font-weight: bold; 
    transition: background 0.3s ease; 
}

.btn:hover {
    background: #f0f0f0;
    color: #700000;
}

.gray{
    color:gray;
}

.map-img{
    border-radius: 5px; /* 图片加圆角，适配盒子风格 */
    border: 1px solid #e8e0d0; /* 图片加浅边框，融入米白色调 */
}

.step{
    background:#8B0000;
    color:white;
    padding:10px;
    margin:10px 0;
    border-radius:5px;
    cursor:pointer;
    transition: background 0.2s ease; /* 增加hover效果 */
}

.step:hover {
    background: #700000; /* 鼠标悬浮加深颜色 */
}

.content{
    display:none;
    background:white;
    padding:15px;
    border-left:4px solid #8B0000;
    margin-bottom:10px;
    border-radius: 0 5px 5px 0; /* 优化边角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* 轻微阴影，增强层次 */
}

.values{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.card{
    background:white; /* 卡片用纯白色，与米白盒子形成对比 */
    padding:20px;
    border-radius:10px;
    flex:1;
    min-width:200px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    text-align:center;
    border: 1px solid #f0ebe0; /* 卡片边框与盒子边框统一 */
}

/* 卡片内h3样式微调（居中显示） */
.card h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

footer{
    background:#222;
    color:white;
    text-align:center;
    padding:40px;
    margin: 40px 0 0 0; /* 与最后一个盒子拉开间距 */
    border-radius: 0 0 10px 10px; /* 底部圆角 */
}

/* 响应式适配 */
@media (max-width: 768px) {
    section {
        margin: 20px 5%; /* 小屏幕缩小外边距 */
    }
    .section-box {
        padding: 20px; /* 小屏幕缩小内边距 */
    }
    .hongan-history .text {
        width: 95%; /* 小屏幕扩大文本宽度 */
    }
    
    /* 全局h2标题响应式 */
    .title-box {
        width: 95%;
    }
    .timeline_h2 {
        font-size: 24px;
    }
    .timeline_span {
        font-size: 16px;
    }
    
    /* 红色文化资源响应式适配 */
    .hongan-resources-title {
        width: 95% !important;
    }
    .resources-container {
        width: 95%;
    }
    .resource-item {
        flex-direction: column; /* 小屏幕改为上下布局 */
        align-items: flex-start;
        gap: 15px;
    }
    .resource-content {
        margin-right: 0;
    }
    .resource-image {
        width: 100%; /* 图片占满宽度 */
        height: 200px;
    }
    /* 小屏幕下调小资源标题字号 */
    .resource-content h3 {
        font-size: 16px;
    }
    
    /* 其他板块内容响应式 */
    .hero h1 {
        font-size: 2rem;
    }
}
/* 语境板块超链接样式 */
.context-box a {
    color: #8B0000 !important; /* 红安主题红 */
    transition: all 0.2s ease;
}
.context-box a:hover {
    color: #700000 !important; /* 悬浮加深 */
    border-bottom:1px solid #700000 !important; /* 悬浮变实线 */
}
/* 语境板块左右两栏 */
.context-links{
    display:flex;
    justify-content:space-between;
    gap:40px;
    margin-top:20px;
}

.context-column{
    width:48%;
}

.context-column h3{
    color:#8B0000;
    font-size:18px;
    margin-bottom:10px;
}

.context-column ul{
    list-style:none;
    padding-left:0;
}

.context-column li{
    margin-bottom:8px;
}
/* 论坛讨论区通用样式 */
.forum-box {
    margin: 40px 12%;
    padding: 40px;
}

/* 问题标题（可点击展开） */
.forum-question {
    background: #8B0000;
    color: white;
    padding: 15px 20px;
    margin: 15px 0 0 0;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.forum-question:hover {
    background: #700000;
}

/* 问题编号图标 */
.question-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: white;
    color: #8B0000;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
}

/* 问题内容区域（默认隐藏） */
.forum-content {
    display: none;
    background: #fff;
    padding: 30px;
    border-radius: 0 0 8px 8px;
    border: 1px solid #f0ebe0;
    border-top: none;
    margin-bottom: 10px;
}

/* 左右分栏布局 */
.forum-message {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

.forum-message.left {
    margin-right: 3%;
}

/* 发言者头部（国旗+姓名） */
.message-header {
    margin-bottom: 10px;
}

/* 国旗图标样式 */
.flag-icon {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #eee;
}

.speaker {
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

/* 气泡样式 - 统一红白系，不花哨 */
.message-bubble {
    padding: 15px 20px;
    border-radius: 8px;
    line-height: 1.8;
    font-size: 15px;
}

/* 左侧气泡（中国视角）- 浅红底+深红文字 */
.forum-message.left .message-bubble {
    background: #f8e8e8;
    color: #8B0000;
    border: 1px solid #f0d0d0;
}

/* 右侧气泡（越南/老挝视角）- 白底+深红边框 */
.forum-message.right .message-bubble {
    background: #fff;
    color: #333;
    border: 1px solid #8B0000;
}

/* 响应式适配 - 小屏幕改为上下布局 */
@media (max-width: 768px) {
    .forum-box {
        margin: 20px 5%;
        padding: 20px;
    }
    
    .forum-question {
        font-size: 16px;
        padding: 12px 15px;
    }
    
    .forum-content {
        padding: 20px;
    }
    
    .forum-message {
        width: 100%;
        display: block;
    }
    
    .forum-message.left {
        margin-right: 0;
        margin-bottom: 20px;
    }
}