/**
 * 文件用途：主 CSS 文件（X风格三栏布局）
 * 功能描述：用于全局变量定义、基础样式重置、三栏布局控制，并统一引入其他页面的分离 CSS 文件。
 * 布局结构：左侧导航边栏（275px）+ 中间内容区（自适应）+ 右侧边栏（320px）
 */

/* 引入头部导航 CSS 文件 */
@import url('header.css');
/* 引入底部区域 CSS 文件 */
@import url('footer.css');
/* 引入首页列表 CSS 文件 */
@import url('log_list.css');
/* 引入文章详情 CSS 文件 */
@import url('echo_log.css');
/* 引入单页面 CSS 文件 */
@import url('page.css');
/* 引入 404 错误页 CSS 文件 */
@import url('404.css');
/* 引入模块和侧边栏组件 CSS 文件 */
@import url('module.css');
/* 引入标签云页面 CSS 文件 */
@import url('tags.css');
/* 引入分类目录页面 CSS 文件 */
@import url('sorts.css');
/* 引入评论系统 CSS 文件 */
@import url('comment.css');

/* 定义全局 CSS 变量，便于统一管理主题色彩和间距 */
:root {
    /* 主题主色调，深蓝色 */
    --primary-color: #006fff;
    /* 文本主颜色，深灰色 */
    --text-color: #333333;
    /* 文本次颜色，浅灰色 */
    --text-muted: #888888;
    /* 页面背景颜色，极浅灰 */
    --bg-color: #f5f6f7;
    /* 卡片背景颜色，纯白色 */
    --card-bg: #ffffff;
    /* 边框颜色，浅灰色 */
    --border-color: #ebebeb;
    /* 全局基础圆角，8像素 */
    --border-radius: 8px;
    /* 基础间距，16像素 */
    --spacing: 16px;
    /* 激活状态背景色，主色调10%透明度浅蓝 */
    --active-bg: rgba(0, 111, 255, 0.1);
    /* 激活状态文字色，与主色调一致 */
    --active-color: var(--primary-color);
    /* 激活状态字重，600半粗体 */
    --active-weight: 600;
    /* 左侧导航边栏宽度，275像素 */
    --sidebar-width: 275px;
    /* 右侧边栏宽度，320像素 */
    --right-side-width: 320px;
}

/* 基础样式重置，移除浏览器默认内外边距，统一盒子模型 */
*, *::before, *::after {
    /* 将边框和内边距计算在元素总宽高内 */
    box-sizing: border-box;
    /* 移除默认外边距 */
    margin: 0;
    /* 移除默认内边距 */
    padding: 0;
    /* 禁用移动端点击高光效果 */
    -webkit-tap-highlight-color: transparent;
}

/* 网页主体样式设置 */
body {
    /* 设置全局背景颜色 */
    background-color: var(--bg-color);
    /* 设置全局文本颜色 */
    color: var(--text-color);
    /* 设置全局字体家族 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 设置基础行高 */
    line-height: 1.6;
    /* 设置基础字体大小 */
    font-size: 14px;
}

/* 移除链接默认下划线并继承文本颜色 */
a {
    /* 移除链接下划线 */
    text-decoration: none;
    /* 继承父元素的文本颜色 */
    color: inherit;
    /* 增加颜色过渡动画 */
    transition: color 0.3s ease;
}

/* 链接悬停状态样式 */
a:hover {
    /* 悬停时文本颜色变为主色调 */
    color: var(--primary-color);
}

/* 移除列表默认样式 */
ul, ol {
    /* 移除列表项前面的圆点或数字 */
    list-style: none;
}

/* 文本溢出省略号工具类 */
.txt-overflow {
    /* 文本不换行 */
    white-space: nowrap;
    /* 溢出内容隐藏 */
    overflow: hidden;
    /* 溢出文本显示省略号 */
    text-overflow: ellipsis;
}

/* 全局隐藏滚动条，保留滚动功能 */
* {
    /* 隐藏IE/Edge滚动条 */
    -ms-overflow-style: none;
    /* 隐藏Firefox滚动条 */
    scrollbar-width: none;
}

/* 隐藏Chrome/Safari/Opera滚动条 */
*::-webkit-scrollbar {
    /* 宽度设为0，完全隐藏滚动条 */
    display: none;
}

/* ============================================
   X风格三栏布局
   左侧导航 + 中间内容 + 右侧边栏
   ============================================ */

/* 三栏布局外层容器 */
.layout-wrap {
    /* 弹性布局，水平排列三栏 */
    display: flex;
    /* 最大宽度1280像素 */
    max-width: 1280px;
    /* 水平居中 */
    margin: 0 auto;
    /* 最小高度占满视口 */
    min-height: 100vh;
}

/* 中间+右侧内容区域 */
.content-wrap {
    /* 占据剩余空间 */
    flex: 1;
    /* 最小宽度为0，允许内容自适应 */
    min-width: 0;
    
}

/* 页面主要内容容器（中间内容+右侧边栏） */
.site-main {
    /* 弹性布局，水平排列中间内容和右侧边栏 */
    display: flex;
    /* 元素间距10像素 */
    gap: 10px;
    /* 顶部内边距为0，让内容贴紧顶部；左右右侧内边距0；底部内边距0，让内容贴紧底部 */
    padding: 0 10px 0 0;
    /* 最大宽度限制，确保右侧边栏不被挤出 */
    max-width: 100%;
}

/* 统一设置中间内容区自适应：所有页面的主内容区都使用.main-content类名 */
/* 只需在此处设置一次flex:1+min-width:0，所有页面自动获得自适应能力 */
/* 与Joe主题的.joe_main、AIO主题的.aio-main、monie_jj主题的.main-left同理 */
.main-content {
    /* 占据剩余空间，自动填充右侧边栏以外的所有宽度 */
    flex: 1;
    /* 最小宽度为0，允许flex子项内容自适应截断，防止内容溢出 */
    min-width: 0;
}

/* 响应式适配：移动端单列布局 */
@media screen and (max-width: 768px) {
    /* 三栏布局改为垂直排列 */
    .layout-wrap {
        /* 垂直方向排列 */
        flex-direction: column;
    }

    /* 主内容容器改为垂直排列 */
    .site-main {
        /* 主轴方向改为垂直 */
        flex-direction: column;
        /* 减小内边距 */
        padding: 10px var(--spacing);
        /* 减小元素间距 */
        gap: 16px;
    }

    /* 侧边栏宽度撑满 */
    .col-side {
        /* 宽度100%，占满整行 */
        width: 100%;
        /* 允许侧边栏被压缩 */
        flex-shrink: 1;
    }
}

/* 中等屏幕适配：侧边栏下移全宽显示，保留小工具和footer */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 主内容容器改为垂直排列，使侧边栏显示在内容下方 */
    .site-main {
        /* 主轴方向改为垂直 */
        flex-direction: column;

    }

    /* 侧边栏宽度撑满，不再固定320px */
    .col-side {
        /* 宽度100%，占满整行 */
        width: 100%;
    }
}