/**
 * footer.css
 * ================================================
 * 页脚样式定义文件
 * ------------------------------------------------
 * 功能说明：
 * 1. 定义网站底部页脚的视觉样式
 * 2. 实现响应式布局适配不同设备屏幕
 * 3. 保持与网站整体设计风格的一致性
 * 
 * 样式组织：
 * - 页脚容器 (.site-footer)
 * - 内容容器 (.footer-container)
 * - 文本样式 (.footer-text)
 * 
 * 响应式断点：
 * - 移动设备：默认样式
 * - 平板设备：min-width: 640px
 * - 桌面设备：min-width: 1024px
 * 
 * 配色方案：
 * - 背景色：rgba(31, 41, 55, 0.8)（半透明深灰）
 * - 文字颜色：#a0aec0（浅灰色）
 * 
 * 版本: 1.0.1
 * 最后更新: 2023-05-15
 */

/* 页脚主容器样式
 * ------------------------------------------------
 * 创建一个半透明的页脚，带有背景模糊效果
 * 应用圆角和阴影增强视觉层次感
 */
.site-footer {
    /* 背景与边框 */
    background-color: rgba(31, 41, 55, 0.8); /* 半透明深灰色背景，与导航栏一致 */
    backdrop-filter: blur(8px);              /* 背景模糊效果增强 */
    border-radius: 0.5rem;                   /* 圆角边框 */
    
    /* 间距与定位 */
    margin: 0 1rem 0.75rem 1rem;             /* 上右下左边距 */
    padding: 0.75rem 1.5rem;                 /* 内部填充，与导航栏一致 */
    
    /* 阴影效果 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -2px rgba(0, 0, 0, 0.05);  /* 柔和阴影 */
}

/* 响应式样式 - 平板设备
 * ------------------------------------------------
 * 在宽度达到640px的设备上应用更大的左右边距
 */
@media (min-width: 640px) {
    .site-footer {
        margin-left: 1.5rem;    /* 左侧更大边距 */
        margin-right: 1.5rem;   /* 右侧更大边距 */
    }
}

/* 响应式样式 - 桌面设备
 * ------------------------------------------------
 * 在宽度达到1024px的设备上进一步增加左右边距
 */
@media (min-width: 1024px) {
    .site-footer {
        margin-left: 2rem;      /* 左侧最大边距 */
        margin-right: 2rem;     /* 右侧最大边距 */
    }
}

/* 页脚内容容器
 * ------------------------------------------------
 * 创建一个水平居中的容器，用于放置页脚内容
 * 设置最大宽度确保在大屏幕上内容不会过宽
 */
.footer-container {
    display: flex;               /* 启用弹性布局 */
    justify-content: center;     /* 水平居中对齐 */
    align-items: center;         /* 垂直居中对齐 */
    max-width: 88rem;            /* 最大宽度限制，与导航栏一致 */
    margin: 0 auto;              /* 水平居中 */
}

/* 页脚文本样式
 * ------------------------------------------------
 * 定义版权信息等文本的字体和颜色
 */
.footer-text {
    color: #a0aec0;              /* 浅灰色文字，提高可读性 */
    font-size: 1rem;             /* 字体大小 */
    text-align: center;          /* 文本居中 */
    padding: 0.25rem 0;          /* 上下填充 */
    letter-spacing: 0.5px;       /* 字母间距略微增加，提高可读性 */
}