/* ============================================================================
   Reveal.js PPT 演示文稿样式文件
   ============================================================================
   作者: 演示文稿创建者
   版本: 1.0
   描述: 自定义样式文件，包含字体设置、布局、网格线等功能
   注意: 所有文本均使用衬线字体（宋体）以确保更好的可读性
   ============================================================================ */

/* ============================================================================
   1. Reveal.js 基础样式（替代默认主题）
   ============================================================================ */
/* 幻灯片背景 - 使用图片背景 */
.reveal {
    background: url('0.png') no-repeat center center fixed;
    background-size: cover; /* 确保图片覆盖整个区域 */
    color: #000; /* 黑色文字 */
}

.reveal .slides {
    text-align: left;
    font-family: inherit; /* 继承body的衬线字体设置 */
}

/* 幻灯片内容区域基本样式 */
.reveal .slides section {
    padding: 20px;
    margin: 20px auto; /* 居中显示 */
    max-width: 90%; /* 限制最大宽度 */
}

/* ============================================================================
   2. 浏览器兼容性设置
   ============================================================================ */
* {
    /* 盒模型设置，确保在所有浏览器中一致 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari, Chrome */
    -moz-box-sizing: border-box;     /* Firefox */
}

/* ============================================================================
   2. CSS变量定义
   ============================================================================ */
:root {
    /* 主要字体大小 - 适用于正文文本 */
    --r-main-font-size: 32px;
    
    /* 标题边距 - 控制标题与内容的间距 */
    --r-heading-margin: 0 0 20px 0;
}

/* ============================================================================
   3. 全局字体设置 - 全部使用衬线字体（宋体）
   ============================================================================ */
/* 
   衬线字体（宋体）在印刷和正式文档中具有更好的可读性
   字体回退机制确保在不同操作系统和浏览器中都能正常显示
   Windows: SimSun, 宋体
   macOS: STSong, 华文宋体
   通用回退: serif
*/
body {
    font-family: "SimSun", "宋体", "STSong", "华文宋体", serif;
    -webkit-font-smoothing: antialiased;  /* Chrome, Safari 字体平滑 */
    -moz-osx-font-smoothing: grayscale;   /* Firefox 字体平滑 */
}

/* ============================================================================
   4. Reveal.js 幻灯片核心样式
   ============================================================================ */
/* 标题样式 - 全部使用衬线字体 */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
    font-family: "SimSun", "宋体", "STSong", "华文宋体", serif;
    font-weight: bold; /* 加粗以提高可读性 */
}

/* h1居中显示 */
.reveal h1 {
    text-align: center;
    margin: 0 0 30px 0;
}

/* h2居中显示 */
.reveal h2 {
    text-align: center;
    margin: 0 0 25px 0;
}

/* h3左上角置顶 */
.reveal h3 {
    text-align: left;           /* 文本左对齐，实现左上角对齐效果 */
    margin: 5px 0px 15px 0;     /* 外边距：上5px，右0px，下15px，左0px 
                                    上边距5px让标题靠近顶部，下边距15px提供与内容的间距 */
    align-self: flex-start;     /* 在flex容器中，将元素对齐到交叉轴的起始位置
                                    确保h3在flex布局中从顶部开始对齐，实现"置顶"效果 */
}

/* h4左上角置顶 */
.reveal h4 {
    text-align: left;           /* 文本左对齐，实现左上角对齐效果 */
    margin: 5px 0 15px 0;       /* 外边距：上5px，右0，下15px，左0
                                    与h3保持一致的外边距设置，保持视觉一致性 */
    align-self: flex-start;     /* 在flex容器中，将元素对齐到交叉轴的起始位置
                                    确保h4在flex布局中从顶部开始对齐，实现"置顶"效果 */
}

/* 标题字体大小设置 - 确保在低版本浏览器中合适显示 */
.reveal h1 {
    font-size: 2.5em;  /* 一级标题 */
}

.reveal h2 {
    font-size: 2em;    /* 二级标题 */
}

.reveal h3 {
    font-size: 1.5em;  /* 三级标题 */
}

.reveal h4 {
    font-size: 1.2em;  /* 四级标题 */
}

/* 段落和文本样式 - 确保所有文本使用衬线字体，单倍行距 */
.reveal p, .reveal li, .reveal td, .reveal th {
    font-family: "SimSun", "宋体", "STSong", "华文宋体", serif;
    line-height: 1; /* 单倍行距 */
}

/* 段落样式 */
.reveal p {
    margin-bottom: 1em; /* 段落间距 */
    font-size: 1.1em;   /* 段落字体大小，默认为1.1em */
}

/* 列表样式 */
.reveal ul, .reveal ol {
    display: inline-block;
    text-align: left;
    margin: -10px 0;
}

.reveal li {
    margin-bottom: 10px;
    font-size: 1em;
    line-height: 1; /* 单倍行距 */
}

/* 幻灯片编号 */
.reveal .slide-number {
    font-size: 18px;
    font-family: "SimSun", "宋体", serif; /* 使用衬线字体 */
}

/* ============================================================================
   5. 页脚样式
   ============================================================================ */
.footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 18px;
    color: #aaa;
    z-index: 100;
    font-family: "SimSun", "宋体", serif; /* 使用衬线字体 */
}

/* ============================================================================
   6. 片段高亮颜色
   ============================================================================ */
.reveal .slides section .fragment.highlight-red {
    color: #ff2c2d; /* 红色高亮 */
}

.reveal .slides section .fragment.highlight-green {
    color: #17ff2e; /* 绿色高亮 */
}

.reveal .slides section .fragment.highlight-blue {
    color: #1b91ff; /* 蓝色高亮 */
}

/* ============================================================================
   7. 自定义卡片样式
   ============================================================================ */
.card {
    background: rgba(183, 238, 253, 0.1); /* 半透明白色背景 */
    border-radius: 10px;                  /* 圆角 */
    padding: 20px;                        /* 内边距 */
    margin: 20px 0;                       /* 外边距 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    font-family: inherit;                 /* 继承衬线字体 */
}

/* ============================================================================
   8. 两列布局 - 添加低版本浏览器兼容性
   ============================================================================ */
.columns {
    display: -webkit-box;      /* 老版本 Safari, iOS */
    display: -moz-box;         /* 老版本 Firefox */
    display: -ms-flexbox;      /* IE10 */
    display: -webkit-flex;     /* Chrome 21-28, Safari 6.1+ */
    display: flex;             /* 标准语法 */
    -webkit-flex-wrap: wrap;   /* Safari 6.1+ */
    -moz-flex-wrap: wrap;      /* Firefox */
    -ms-flex-wrap: wrap;       /* IE10 */
    flex-wrap: wrap;           /* 标准语法 */
    gap: 40px;                 /* 列间距 */
}

.column {
    -webkit-box-flex: 1;       /* 老版本 Safari, iOS */
    -moz-box-flex: 1;          /* 老版本 Firefox */
    -webkit-flex: 1;           /* Chrome */
    -ms-flex: 1;               /* IE10 */
    flex: 1;                   /* 标准语法 */
    min-width: 300px;          /* 低版本浏览器中的最小宽度 */
}

/* ============================================================================
   9. 网格线样式 - 用于对齐文本和图片
   ============================================================================ */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;      /* 允许点击穿透 */
    z-index: 9999;             /* 确保在最上层 */
    display: none;             /* 默认隐藏 */
    
    /* 网格线背景 - 添加浏览器前缀确保兼容性 */
    background-image: 
        -webkit-linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px),
        -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px);
    background-image: 
        -moz-linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px),
        -moz-linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px);
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px);
    
    /* 网格大小 - 50px间距 */
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
}

/* 网格线激活状态 */
.grid-overlay.active {
    display: block;
}

/* ============================================================================
   10. 网格线控制提示
   ============================================================================ */
.grid-hint {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 10000;                  /* 确保在最上层 */
    display: none;                   /* 默认隐藏 */
    font-family: "SimSun", "宋体", serif; /* 使用衬线字体 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 白色边框 */
}

.grid-hint.active {
    display: block;
}

/* ============================================================================
   11. 表格样式 - 确保在低版本浏览器中可读
   ============================================================================ */
.reveal table {
    border-collapse: collapse;  /* 合并边框 */
    border-spacing: 0;          /* 单元格间距 */
    width: 100%;                /* 全宽 */
    margin: 20px 0;             /* 上下边距 */
}

.reveal table th, .reveal table td {
    border: 1px solid #ddd;     /* 边框颜色 */
    padding: 8px;               /* 内边距 */
    text-align: left;           /* 左对齐 */
    font-family: inherit;       /* 继承衬线字体 */
}

.reveal table th {
    background-color: rgba(255, 255, 255, 0.1); /* 表头背景 */
    font-weight: bold;          /* 加粗 */
}

/* ============================================================================
   12. 代码块样式 - 使用等宽字体
   ============================================================================ */
.reveal pre, .reveal code {
    font-family: "Courier New", Courier, monospace; /* 等宽字体 */
    font-size: 0.9em;           /* 稍小字号 */
}

/* ============================================================================
   13. 链接样式
   ============================================================================ */
.reveal a {
    color: #1b91ff;             /* 链接颜色 */
    text-decoration: none;      /* 去除下划线 */
}

.reveal a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* ============================================================================
   14. 响应式设计 - 移动设备适配
   ============================================================================ */
@media screen and (max-width: 768px) {
    /* 在小屏幕上调整字体大小 */
    .reveal .slides {
        font-size: 0.9em;
    }
    
    /* 调整标题大小 */
    .reveal h1 {
        font-size: 2em;
    }
    
    .reveal h2 {
        font-size: 1.5em;
    }
    
    /* 单列布局 */
    .column {
        min-width: 100%; /* 在小屏幕上单列显示 */
    }
    
    /* 减少列间距 */
    .columns {
        gap: 20px;
    }
}

/* ============================================================================
   15. 打印样式 - 优化打印效果
   ============================================================================ */
@media print {
    /* 隐藏非必要元素 */
    .grid-overlay,
    .grid-hint,
    .footer {
        display: none !important;
    }
    
    /* 确保打印时黑白对比清晰 */
    .reveal .slides {
        color: #000 !important;      /* 黑色文字 */
        background: #fff !important; /* 白色背景 */
    }
}

/* ============================================================================
   16. 字体大小控制类 - 提供多种段落字体大小选项
   ============================================================================ */
/* 小号字体 */
.font-small {
    font-size: 0.8em;
}

/* 中号字体（默认） */
.font-medium {
    font-size: 1em;
}

/* 大号字体 */
.font-large {
    font-size: 1.2em;
}

/* 特大号字体 */
.font-xlarge {
    font-size: 1.5em;
}

/* ============================================================================
   17. 调整Reveal.js控制按钮位置
   ============================================================================ */
/* 控制按钮容器 - 往上移动20px */
.reveal .controls {
    bottom: 35px; /* 默认是15px，调整为20px使其更靠上 */
}

/* 控制按钮样式调整 */
.reveal .controls .navigate-left,
.reveal .controls .navigate-right,
.reveal .controls .navigate-up,
.reveal .controls .navigate-down {
    opacity: 0.8; /* 稍微降低透明度 */
    transition: opacity 0.3s ease; /* 添加过渡效果 */
}

.reveal .controls .navigate-left:hover,
.reveal .controls .navigate-right:hover,
.reveal .controls .navigate-up:hover,
.reveal .controls .navigate-down:hover {
    opacity: 1; /* 鼠标悬停时完全显示 */
}

/* ============================================================================
   18. 特殊文本类 - 保留原有.serif-text类（虽然现在全局都是衬线字体）
   ============================================================================ */
.serif-text {
    font-family: "SimSun", "宋体", "STSong", "华文宋体", serif;
    /* 此类现在与全局字体一致，保留以兼容现有HTML */
}