/*
 * layout.css
 * 描述：此文件定义了应用的主体结构布局。
 * 内容：
 * 1. 主容器、侧边栏和内容区域的 flex 布局。
 * 2. 响应式设计，通过媒体查询调整不同屏幕尺寸下的布局。
 * 3. 自定义滚动条样式。
 */

/* ========================================================================= */
/* 1. 主容器与核心布局 (Main Container & Core Layout)                       */
/* ========================================================================= */
.container {
    display: flex;
    max-width: 1500px; /* 限制最大宽度，在大屏上保持优雅 */
    height: 96vh;      /* 保持 96% 的视口高度，营造浮动窗口感 */
    margin: 2vh auto;  /* 垂直居中 */

    /* 核心视觉效果：液态玻璃 */
    background-color: var(--color-card-bg); /* 使用带透明度的卡片背景色 */
    backdrop-filter: blur(30px) saturate(1.8) brightness(1.05); /* 强烈的背景模糊与饱和度提升效果 */
    -webkit-backdrop-filter: blur(30px) saturate(1.8) brightness(1.05); /* WebKit 兼容 */

    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 40px var(--color-shadow-strong), 0 5px 15px var(--color-shadow-medium); /* 多层阴影，增强立体感 */
    overflow: hidden;  /* 隐藏溢出内容，确保圆角效果正确显示 */
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed) ease; /* 所有属性平滑过渡 */
}

.left-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0; /* 禁止侧边栏在空间不足时被压缩 */
    background-color: var(--color-card-bg); /* 侧边栏背景色与容器一致 */
    backdrop-filter: blur(0px); /* 明确不模糊自身背景，只依赖父容器的 backdrop-filter */
    -webkit-backdrop-filter: blur(0px);
    border-right: 1px solid var(--color-border); /* 右侧边框作为分隔线 */
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
    position: relative; /* 为内部绝对定位元素提供参考 */
    z-index: 2; /* 确保在主内容之上 */
}

.main-content {
    flex-grow: 1; /* 占据所有剩余空间 */
    overflow-y: auto; /* 垂直滚动 */
    min-width: 0; /* 允许内容区域收缩，防止 flex 布局溢出 */
    padding: 0 2.5rem;
    background-color: transparent; /* 背景透明，以透出 .container 的模糊效果 */
    position: relative;
    z-index: 1;
}

.content-layout {
    display: flex;
    gap: 2.5rem; /* 主内容与右侧 TOC 之间的间距 */
}

#main-content-wrapper {
    flex: 1; /* 主内容区域占据大部分可用空间 */
    min-width: 0; /* 防止 flex 项目溢出 */
    transition: opacity var(--transition-speed) ease-out; /* 内容切换时的淡入淡出效果 */
    min-height: 80vh; /* 保证内容区域有最小高度，避免页脚跳动 */
    padding-top: 1px; /* 防止子元素外边距折叠 */
}

/* 文章目录侧边栏 */
.toc-sidebar {
    display: none; /* 默认隐藏，仅在宽屏和文章页通过 JS 显示 */
    width: 240px;
    flex-shrink: 0;
    position: sticky; /* 粘性定位，随页面滚动 */
    top: 2rem; /* 距离顶部的粘性位置 */
    align-self: flex-start; /* 粘性定位的容器内对齐方式 */
    height: calc(96vh - 4rem); /* 高度限制，留出上下边距 */
    overflow-y: auto;
    padding-right: 1rem;
}

.main-content-footer {
    padding: 1rem 0 2rem;
}

/* ========================================================================= */
/* 2. 自定义滚动条样式 (Scrollbar Styling)                                */
/* ========================================================================= */
.left-sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.toc-sidebar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.left-sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.toc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.left-sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.toc-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--color-fg-subtle);
    border-radius: 10px;
    border: 3px solid rgba(var(--color-card-base), 0.5); /* 轨道内边框效果 */
}
.left-sidebar::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.toc-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color-light);
}

/* Firefox 滚动条样式 */
.left-sidebar,
.main-content,
.toc-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-fg-subtle) transparent;
}

/* ========================================================================= */
/* 3. 响应式设计 (Responsive Design)                                      */
/* ========================================================================= */

/* 大桌面屏幕 (<= 1400px)：隐藏 TOC 目录 */
@media (max-width: 1400px) {
    .toc-sidebar {
        display: none !important;
    }
}

/* 小型桌面和大部分平板电脑 (<= 1200px) */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        height: 100vh; /* 占满整个视口 */
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    .main-content {
        padding: 0 2rem;
    }
    .toc-sidebar, #tag-cloud-container {
        display: none !important;
    }
}

/* 移动设备 (<= 768px) */
@media (max-width: 768px) {
    /* 减弱移动端的背景模糊效果以提升性能 */
    body::before {
        position: fixed;
        height: 100%;
        filter: blur(8px) brightness(0.9);
        -webkit-filter: blur(8px) brightness(0.9);
        transform: scale(1.02);
    }
    [data-scheme="dark"] body::before {
        filter: blur(8px) brightness(0.7) grayscale(0.2);
        -webkit-filter: blur(8px) brightness(0.7) grayscale(0.2);
    }
    body {
        overflow-x: hidden;
    }

    .container {
        flex-direction: column; /* 垂直布局 */
        height: auto;
        min-height: 100vh;
        margin: 0;
        background-color: transparent; /* 移除容器背景，依赖 body 背景 */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .main-content {
        overflow-y: visible; /* 主内容区不再独立滚动 */
        padding: 0;
    }

    #main-content-wrapper {
        min-height: auto;
    }

    .content-layout,
    .toc-sidebar,
    #tag-cloud-container {
    }

    /* 左侧边栏变为顶部导航栏 */
    .left-sidebar {
        width: 100%;
        height: auto;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        flex-direction: row; /* 水平排列 */
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap; /* 允许换行，为展开的菜单提供空间 */
        padding: 1rem 1.5rem;
        box-shadow: 0 2px 8px var(--color-shadow-medium);
        background-color: var(--color-card-bg);
        backdrop-filter: blur(15px) brightness(1.1);
        -webkit-backdrop-filter: blur(15px) brightness(1.1);
    }

    /* 当移动端菜单激活时，显示隐藏的菜单项 */
    .left-sidebar.is-active .search-form,
    .left-sidebar.is-active .site-nav,
    .left-sidebar.is-active .menu-bottom-section {
        display: flex; /* 显示菜单内容 */
    }
}