/*
 * =====================================================================
 * Footer Fix CSS - 网站底部粘性布局与移动端优化样式表
 * =====================================================================
 * 
 * 【主要功能概览】
 * ├── 1. 粘性Footer布局系统 - 解决网站底部白色空间问题
 * ├── 2. 移动端Footer版权信息优化 - 四行显示布局与样式调整
 * ├── 3. 桌面端Footer版权信息排版 - 一行显示，三个部分间距控制
 * ├── 4. 移动端导航菜单修复 - 防止下拉箭头换行问题
 * └── 5. 移动端技术展示部分增强 - index_technology视觉效果优化
 * 
 * 【解决的具体问题】
 * • 原问题：网站footer下方出现多余白色空间
 * • 解决方案：使用flexbox实现sticky footer布局
 * • 原问题：移动端版权信息显示混乱，行距过大
 * • 解决方案：重新设计四行垂直布局，压缩行距和字号
 * • 原问题：移动端菜单下拉箭头换行到下方
 * • 解决方案：修复导航列表的flex布局
 * • 原问题：移动端技术展示部分视觉效果不佳
 * • 解决方案：放大标题区域，调整字号为中间值，增加下移距离
 * 
 * 【技术实现要点】
 * • 使用flexbox布局系统实现自适应高度
 * • 采用!important标记确保样式优先级
 * • 通过媒体查询(@media)区分桌面端和移动端样式
 * • 精确控制移动端文本对齐和间距
 * • 使用transform scale进行视觉元素缩放
 * 
 * 作者：施清诚
 * 创建时间：2025年
 * 最后修改：2025年5月29日
 * 文件用途：仅适用于index.php和index.bis.php页面
 * =====================================================================
 */

/* ======================================================================
 * 第一部分：核心布局系统 - 粘性Footer实现
 * ======================================================================
 * 这一部分解决网站最核心的问题：footer下方的多余白色空间
 * 通过将页面结构改为flexbox布局，确保footer始终粘在页面底部
 */

/* ===== 全局高度重置 ===== */
/* 
 * 目的：确保html和body占满整个浏览器窗口
 * 原理：覆盖原有的min-height设置，使用标准的height: 100%
 */
html, body {
    height: 100%;
}

/* ===== 页面主容器Flex布局 ===== */
/* 
 * 目的：将body设置为flex容器，建立垂直布局结构
 * 原理：flex-direction: column 让内容垂直排列
 *      min-height: 100vh 确保至少占满视口高度
 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== 首页专用容器布局 ===== */
/* 
 * 目的：为index.php页面的.index_wrap容器设置相同的flex布局
 * 原因：首页可能有特殊的容器结构，需要单独设置
 */
.index_wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== 主内容区域自动拉伸 ===== */
/* 
 * 目的：让主内容区域(main)自动填充可用空间
 * 原理：flex: 1 0 auto 表示可以拉伸、不能压缩、内容大小为基础
 * 效果：main会自动占据除header和footer之外的所有空间
 */
main {
    flex: 1 0 auto;
}

.index_wrap main {
    flex: 1 0 auto;
}

/* ===== Footer固定在底部 ===== */
/* 
 * 目的：确保footer始终粘在页面底部
 * 原理：flex-shrink: 0 防止footer被压缩
 *      margin-top: auto 将footer推到底部
 */
footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* ===== 清除旧样式冲突 ===== */
/* 
 * 目的：覆盖可能存在的min-height设置，防止布局冲突
 * 使用!important确保优先级最高
 */
main {
    min-height: 0 !important;
}

/* ======================================================================
 * 第二部分：桌面端Footer版权信息布局
 * ======================================================================
 * 桌面端要求：版权信息一行显示，三个部分用三个空格（16px）分隔
 * 布局结构：[版权文字] [16px间距] [ICP备案] [16px间距] [公网安全备案]
 */

/* ===== Footer版权信息主容器 ===== */
/* 
 * 布局方式：水平flex布局，允许换行
 * 对齐方式：居中对齐
 * 字体设置：14px字号，1.5倍行距
 */
.footer-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== 版权文字部分 ===== */
/* 
 * 位置：第一部分
 * 间距：右侧16px外边距（相当于3个空格的视觉效果）
 */
.footer-copyright .copyright-text {
    margin-right: 16px;
}

/* ===== ICP备案信息部分 ===== */
/* 
 * 位置：第二部分（中间）
 * 间距：右侧16px外边距，与公网安全备案保持距离
 */
.footer-copyright .copyright-icp {
    margin-right: 16px;
}

/* ===== 公网安全备案部分 ===== */
/* 
 * 位置：第三部分（最后）
 * 特点：包含图标和文字，需要flex布局保持在同一行
 */
.footer-copyright .copyright-police {
    display: flex;
    align-items: center;
}

/* ===== 公网安全备案图标 ===== */
/* 
 * 功能：政府备案标识图标
 * 间距：与右侧文字保持6px间距
 */
.footer-copyright .copyright-police img {
    margin-right: 6px;
}

/* ======================================================================
 * 第三部分：移动端响应式布局优化（屏幕宽度 ≤ 768px）
 * ======================================================================
 * 移动端特殊要求：
 * 1. Footer版权信息改为四行垂直显示
 * 2. 极度压缩行距和整体高度
 * 3. 小字号、低透明度的精致显示效果
 * 4. 确保所有文本严格居中对齐
 * 5. 公网安全备案的图标和文字保持在同一行
 */
@media (max-width: 1000px) {
    
    /* ------------------------------------------------------------------
     * 3.1 移动端主内容区域调整
     * ------------------------------------------------------------------
     * 目的：优化移动端的主内容显示，避免额外的空间浪费
     */
    
    /* ===== 主内容区域设置 ===== */
    /* 
     * 调整：移除固定高度，取消底部内边距
     * 效果：让内容更加紧凑，减少与footer的间距
     */
    main {
        min-height: auto !important;
        padding-bottom: 0 !important;
    }
    
    /* ===== 首页容器确保正确显示 ===== */
    /* 
     * 保持：首页容器的最小高度设置
     * 目的：确保页面在移动端正确占满视口
     */
    .index_wrap {
        min-height: 100vh;
    }
    
    /* ------------------------------------------------------------------
     * 3.2 移动端Footer整体布局优化
     * ------------------------------------------------------------------
     * 目的：极度压缩footer高度，实现精致的移动端显示效果
     */
    
    /* ===== Footer容器压缩 ===== */
    /* 
     * 关键设置：padding: 0 - 完全移除上下内边距
     * 效果：footer整体高度达到真正的最小化，实现超紧凑的移动端显示
     */
    footer {
        margin-top: auto;
        flex-shrink: 0;
        padding: 0 !important;
    }
    
    /* ------------------------------------------------------------------
     * 3.3 移动端版权信息四行显示布局
     * ------------------------------------------------------------------
     * 布局结构：
     * 第一行：公司名称
     * 第二行：版权声明 
     * 第三行：ICP备案信息
     * 第四行：公网安全备案（图标+文字在同一行）
     */
    
    /* ===== 版权信息主容器重构 ===== */
    /* 
     * 核心改变：flex-direction: column - 从水平改为垂直排列
     * 显示效果：
     * - 字号：11px（小而精致）
     * - 透明度：0.8（低调显示）
     * - 行距：1.2（稍微宽松，避免过于紧凑）
     * - 内边距：1px 0（极度压缩）
     */
    .footer-copyright {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        font-size: 11px !important;
        opacity: 0.8 !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* ------------------------------------------------------------------
     * 3.4 版权信息各部分通用样式设置
     * ------------------------------------------------------------------
     * 目的：确保每个版权信息组件都严格按照移动端规范显示
     */
    
    /* ===== 所有版权信息组件的统一样式 ===== */
    /* 
     * 适用于：copyright-text, copyright-icp, copyright-police
     * 设置原则：
     * - 完全移除边距和内边距
     * - 占满容器宽度
     * - 强制居中对齐
     * - 使用flex布局便于控制
     */
    .footer-copyright .copyright-text,
    .footer-copyright .copyright-icp,
    .footer-copyright .copyright-police {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
    }
    
    /* ------------------------------------------------------------------
     * 3.5 公网安全备案特殊处理
     * ------------------------------------------------------------------
     * 特殊要求：图标和文字必须在同一行水平排列并居中
     * 这是四行布局中唯一需要水平排列的部分
     */
    
    /* ===== 公网安全备案水平布局 ===== */
    /* 
     * 特殊设置：flex-direction: row - 覆盖默认的column设置
     * 间距控制：gap: 4px - 图标和文字间的精确间距
     * 对齐方式：justify-content: center - 整体水平居中
     */
    .footer-copyright .copyright-police {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
    }
    
    /* ===== 公网安全备案图标精确控制 ===== */
    /* 
     * 目的：确保图标在移动端正确显示和对齐
     * 设置：清除所有边距，使用行内块元素，垂直居中对齐
     */
    .footer-copyright .copyright-police img {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* ------------------------------------------------------------------
     * 3.6 版权信息子元素精确控制
     * ------------------------------------------------------------------
     * 目的：确保版权文字内部的子元素（如公司名称、版权声明）正确显示
     */
    
    /* ===== 版权文字容器 ===== */
    /* 
     * 确保：内部元素垂直居中对齐
     */
    .footer-copyright .copyright-text {
        align-items: center !important;
    }
    
    /* ===== 公司名称（版权信息第一行） ===== */
    /* 
     * 显示方式：块级元素，占满宽度，居中显示
     * 行距：1.2 - 与主容器保持一致，稍微宽松的显示效果
     */
    .footer-copyright .copyright-company {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 100% !important;
        line-height: 1.2 !important;
    }
    
    /* ===== 版权声明（版权信息第二行） ===== */
    /* 
     * 显示方式：与公司名称相同的块级元素设置
     * 确保：在移动端正确换行显示，行距适度宽松
     */
    .footer-copyright .copyright-rights {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 100% !important;
        line-height: 1.2 !important;
    }
    
    /* ------------------------------------------------------------------
     * 3.7 强制居中保险措施
     * ------------------------------------------------------------------
     * 目的：防止其他CSS样式对版权信息的居中效果造成干扰
     */
    
    /* ===== 版权信息所有子元素强制居中 ===== */
    /* 
     * 范围：版权信息容器内的所有元素（使用通配符*）
     * 作用：确保即使有样式冲突，也能保持居中对齐
     * 优先级：使用!important确保最高优先级
     */
    .footer-copyright * {
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ------------------------------------------------------------------
     * 3.8 移动端技术展示部分视觉增强（index_technology）
     * ------------------------------------------------------------------
     * 目的：提升移动端技术展示部分的视觉效果和用户体验
     * 包含：标题区域放大、字号优化、整体位置调整
     */
    
    /* ===== 技术展示标题区域放大 ===== */
    /* 
     * 目标元素：.index_technology .technology_head
     * 视觉效果：
     * - transform: scale(1.1) - 放大110%，提升视觉重要性
     * - transform-origin: center top - 以顶部中心为缩放原点
     * - margin-bottom: 40px - 增加下方间距，避免与内容重叠
     * - padding: 20px 0 - 增加上下内边距，改善视觉层次
     */
    .index_technology .technology_head {
        transform: scale(1.1) !important;
        transform-origin: center top !important;
        margin-bottom: 40px !important;
        padding: 20px 0 !important;
    }
    
    /* ===== 技术展示主标题字号优化 ===== */
    /* 
     * 目标元素：.technology_head .technology_tit
     * 字号策略：32px（28px和36px的中间值）
     * 效果：在移动端提供适中的标题视觉重量
     * 间距：margin-bottom: 15px - 与副标题保持适当距离
     */
    .index_technology .technology_head .technology_tit {
        font-size: 32px !important;
        margin-bottom: 15px !important;
    }
    
    /* ===== 技术展示副标题字号优化 ===== */
    /* 
     * 目标元素：.technology_head .technology_subtit
     * 字号策略：18px（16px和20px的中间值）
     * 行距：1.6 - 确保文本的良好可读性
     * 效果：与主标题形成合适的视觉层次
     */
    .index_technology .technology_head .technology_subtit {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    
    /* ===== 技术展示整体位置调整 - 优化页面比例 ===== */
    /* 
     * 目标元素：.index_technology
     * 位置调整：
     * - margin-top: 30px - 适度增加顶部外边距，避免过度偏移
     * - padding-top: 20px - 减少顶部内边距，保持紧凑布局
     * - padding-bottom: 20px - 增加底部内边距，与footer保持适当距离
     * 效果：在一个页面视图内合理显示footer和技术展示内容
     */
    .index_technology {
        margin-top: 30px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    /* ===== 页面整体比例优化 ===== */
    /* 
     * 确保技术展示部分不会占用过多垂直空间
     * 让footer能够在合理位置显示
     */
    .index_technology .technology_strength {
        margin: 0.8rem auto 0 !important;
    }
    
    .index_technology .technology_video {
        margin-top: 0.8rem !important;
    }
    
/* ======================================================================
 * 样式表结束
 * ======================================================================
 * 
 * 【实施说明】
 * 此CSS文件应当被包含在以下页面中：
 * - index.php（网站主页）
 * - index.bis.php（网站主页备用版本）
 * 
 * 【引用方式】
 * 在HTML文档的<head>部分添加：
 * <link type="text/css" rel="stylesheet" href="css/footer-fix.css" />
 * 
 * 【维护注意事项】
 * 1. 所有样式使用!important标记，确保优先级
 * 2. 移动端断点设置为768px，适配主流移动设备
 * 3. 版权信息布局采用flexbox，兼容性良好
 * 4. 字号和间距经过精确计算，避免随意修改
 * 5. 公网安全备案部分有特殊布局要求，修改时需谨慎
 * 
 * ======================================================================
 */
}