/**
 * 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(34, 34, 34, 1); /* 背景色：#163071 > #4f322d，保持50%透明度 */
    backdrop-filter: blur(8px);              /* 背景模糊效果增强 */
    border-radius: 0;                        /* 移除圆角，让footer完全铺满 */
    
    /* 间距与定位 */
    margin: 0;                               /* 移除所有边距，让footer铺满页面 */
    padding: 0.75rem 1.5rem;                   /* 左右内边距1.5rem */
    
    /* 阴影效果 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -2px rgba(0, 0, 0, 0.05);  /* 柔和阴影 */
}

.footer-container {
    display: flex;               /* 启用弹性布局 */
    flex-direction: column;      /* 垂直方向布局 */
    max-width: 88rem;            /* 最大宽度限制，与导航栏一致 */
    margin: 0 auto;              /* 水平居中 */
    width: 100%;                 /* 占满容器宽度 */
}

/* 页脚主布局
 * ------------------------------------------------
 * 左右两列布局，左侧固定宽度，右侧自适应
 */
.footer-main-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* 页脚左侧区域
 * ------------------------------------------------
 * 包含logo、sitename和title的左对齐区域
 */
.footer-left-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 这个设置控制logo和title之间的间距 */
    padding-top: 1.5rem;
}

/* 页脚右侧区域  
 * ------------------------------------------------
 * 包含菜单、分割线和copyright的右对齐区域
 */
.footer-right-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;           /* 保持与左侧一致的顶部间距 */
}

/* Logo区域样式
 * ------------------------------------------------
 * Logo和sitename水平布局
 */
.footer-logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo svg {
    width: 40px;
    height: 40px;
}

/* Footer sitename文本样式
 * ------------------------------------------------
 * 类似导航条的sitename样式，但调整为适合footer的颜色
 */
.footer-logo-text {
    /* --- 字体设置 --- */
    /* 使用 'Russo One' 字体，具有现代、科技感强的风格 */
    font-family: 'Russo One', sans-serif;
    /* 适合footer的字体大小 */
    font-size: 1.4rem; 
    /* 字间距 */
    letter-spacing: 0.5px;

    /* --- 渐变背景 --- */
    /* 创建一个从亮灰到深灰的垂直线性渐变，模拟金属光泽 */
    background: linear-gradient(180deg, #F0F0F0, hwb(0 91% 8%), #F0F0F0);

    /* --- 文字裁剪效果 --- */
    /* (核心) 将背景裁剪为文字的形状 */
    -webkit-background-clip: text;
    background-clip: text;

    /* (核心) 将文字颜色设为透明，以显示裁剪后的背景 */
    color: transparent;

    /* --- 视觉增强 --- */
    /* 添加一个细微的阴影来增加立体感 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 页脚标题样式
 * ------------------------------------------------
 * 可以换行，不影响右侧布局
 */
.footer-title {
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #B0B0B0;
    margin: 0;
    line-height: 1.6;
    max-width: 100%;
    word-wrap: break-word;
}

/* 页脚分类菜单
 * ------------------------------------------------
 * 右对齐的水平菜单
 */
.footer-category-menu {
    margin: 0;
}

.footer-category-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-category-links li {
    margin: 0;
}

.footer-category-link {
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #B0B0B0;
    text-decoration: none;
    padding: 0.25rem 0;
    position: relative;
    transition: all 0.3s ease;
}

.footer-category-link:hover {
    font-weight: 700;
    color: #f5f5f7;
}

/* Footer category link hover underline effect */
.footer-category-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background-color: #f5f5f7;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.footer-category-link:hover::after {
    width: 90%;
    background-color: #d6fe51; /* 改为绿色 */
}

/* 页脚中间分割线
 * ------------------------------------------------ 
 * 位于菜单和copyright之间的分割线
 */
.footer-middle-separator {
    height: 0.5px;
    margin: 0;
    width: 100%;
    
    /* 渐变边框效果 */
    background: linear-gradient(
        90deg, 
        rgba(63, 65, 92, 0.8) 0%,
        rgba(63, 65, 92, 0.4) 50%,
        rgba(63, 65, 92, 0.8) 100%
    );
    
    /* 添加轻微的阴影增强立体感 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    
    /* 圆角处理 */
    border-radius: 1px;
    border: none;
}

/* 页脚附加链接区域
 * ------------------------------------------------
 * Copyright和Privacy Policy的容器样式  
 */
.footer-additional-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
}

.footer-additional-text {
    color: #B0B0B0;
    white-space: nowrap;
    /* 移除悬停效果 */
}

.footer-additional-privacy {
    color: #B0B0B0;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
}

.footer-additional-privacy:hover {
    font-weight: 600;
    color: #f5f5f7;
}

/* Footer additional privacy link hover underline effect */
.footer-additional-privacy::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background-color: #f5f5f7;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.footer-additional-privacy:hover::after {
    width: 90%;
    background-color: #d6fe51; /* 改为绿色 */
}

/* 垂直分隔符样式
 * ------------------------------------------------
 * Copyright和Privacy Policy之间的"|"分隔符
 */
.footer-divider {
    position: relative;
    width: 1px;
    height: 12px;
    
    /* 垂直渐变线条 */
    background: linear-gradient(
        180deg,
        rgba(63, 65, 92, 0) 0%,
        rgba(63, 65, 92, 0.8) 50%,
        rgba(63, 65, 92, 0) 100%
    );
    
    /* 阴影效果 */
    box-shadow: 0 0 4px rgba(63, 65, 92, 0.3);
}

/* 响应式设计
 * ------------------------------------------------
 * 移动端适配
 */
@media (max-width: 768px) {
    .footer-main-layout {
        flex-direction: column;
        gap: 2rem;
        align-items: flex-start;
    }
    
    .footer-right-section {
        align-items: flex-start;
        width: 100%;
    }
    
    .footer-category-links {
        justify-content: flex-start;
        gap: 1rem;
    }
    
    .footer-additional-links {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* 响应式：移动端和平板footer左右内边距为1rem，PC端为1.5rem */
/* Responsive: Footer horizontal padding 1rem on mobile/tablet, 1.5rem on PC */
@media (max-width: 1024px) {
  .site-footer {
    padding: 0.75rem 1rem;        /* 左右内边距1rem */
  }
}