/*
 * hsiyue 基础样式文件
 * 
 * 功能：
 * 1. 全局样式重置 - 统一不同浏览器的默认样式
 * 2. 自定义字体配置 - 阿里巴巴普惠体
 * 3. 页面布局架构 - 响应式Flex布局
 * 4. 组件容器定义 - 为各模块提供基础样式
 * 
 * 作者: YY
 * 更新时间: 2025年
 */

/* ===== 字体定义 ===== */
@font-face {
    font-family: "Alibaba PuHuiTi";
    src: url(../data/ALIBABAPUHUITI-3-85-BOLD.woff2) format('woff2'),    /* 现代浏览器优先 */
         url(../data/ALIBABAPUHUITI-3-85-BOLD.woff) format('woff'),      /* 兼容性支持 */
         url(../data/ALIBABAPUHUITI-3-85-BOLD.OTF) format('opentype');   /* 原始字体文件 */
    font-weight: bold;
    font-display: swap; /* 优化字体加载体验 */
}

/* ===== 全局样式重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 统一盒模型为border-box */
    font-family: "Alibaba PuHuiTi", -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    -webkit-text-size-adjust: none; /* 防止iOS Safari自动调整字体大小 */
}

/* ===== 基础元素样式 ===== */
a {
    text-decoration: none; /* 移除链接下划线 */
    color: inherit;       /* 继承父元素颜色 */
}

body {
    width: 100%;
    background-color: #F6F6F6; /* 浅灰色背景，减少视觉疲劳 */
    color: #333;               /* 深灰色文字，提高可读性 */
    line-height: 1.6;          /* 改善文字行间距 */
}

/* 加载占位符样式 */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* ===== 页面布局架构 ===== */

/* 顶部导航区域容器 */
.nav-container {
    width: 100%;
    height: clamp(250px, calc(214.286px + 11.161vw), 500px); /* 响应式高度 */
    background-image: url(../img/top_background.png);
    background-size: cover;
    background-position: center center;
    position: relative;
}

/* 主要内容区域 - Flex横向布局 */
.middle-container {
    width: 75%;                /* 占屏幕75%宽度 */
    margin: 0 auto;           /* 水平居中 */
    display: flex;            /* 弹性布局 */
    gap: 30px;               /* 子元素间距 */
    margin-top: 60px;        /* 顶部间距 */
}

/* 筛选栏占比 */
#filter-container{
    width: 18.8%;             /* 左侧筛选器宽度 */
}

/* 文档占比 */
#docs-container{
    width: 80%;              /* 右侧文档区域宽度 (80% + 18.8% + gap = 约100%) */
}

/* 页脚占比 */
.footer-container{
    width: 100%;
    background-color: #f0f1f3; /* 与页面背景略有区分的灰色 */
    margin: 0 auto;
}

/* ===== 响应式布局 ===== */
/* 当容器宽度小于1200px时转为垂直布局并居中 */
@media (max-width: 1200px) {
    .middle-container {
        flex-direction: column;  /* 垂直排列 */
        gap: 40px;              /* 垂直间距可以稍大一些 */
        align-items: center;     /* 所有子元素居中对齐 */
        width: 90%;             /* 在小屏幕上稍微增加宽度利用率 */
    }
    
    #filter-container {
        width: 100%;            /* 筛选栏容器占满宽度 */
        max-width: 400px;       /* 限制最大宽度 */
        order: 1;               /* 筛选栏在上方 */
    }
    
    #docs-container {
        width: 100%;            /* 文档容器占满宽度 */
        order: 2;               /* 文档内容在下方 */
        margin: 0 auto;
        margin-top: 50px;       /* 与筛选栏的间距 */
    }
}