/* sidebar.css */

/* 侧边栏样式
   设计侧边栏的标题和内容布局
   使用列表展示相关内容，控制文本溢出
*/
.side {
    border: solid 2px #333; /* 深灰色边框 */
    margin: 10px 0; /* 上下间距 */
    padding: 0; /* 清除内边距 */
    overflow: hidden; /* 防止内容溢出 */
}
.side ul {
    list-style: none; /* 移除列表默认样式 */
    padding-left: 20px; /* 左侧内边距 */
    margin: 0; /* 清除外边距 */
}
.side ul li {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出部分显示省略号 */
    padding: 5px 0; /* 上下内边距 */
}
.side ul li a:hover {
    color: #ff8a70; /* 侧边栏链接悬停颜色与主内容区保持一致 */
}


/* 回到顶部按钮基础样式 */
.simple-back-to-top {
    width: 100%;                     /* 按钮宽度充满容器 */
    padding: 8px 0;                  /* 上下内边距8px，左右0 */
    background-color: #f8f9fa;       /* 浅灰色背景 */
    border: 1px solid #dee2e6;       /* 浅灰色边框 */
    border-radius: 4px;              /* 4px圆角 */
    text-align: center;              /* 文字居中 */
    font-size: 25px;                 /* 大号字体 */
    font-weight: bold;               /* 粗体文字 */
    color: #495057;                  /* 深灰色文字 */
    cursor: pointer;                 /* 鼠标悬停手型指针 */
}

/* 按钮悬停状态 */
.simple-back-to-top:hover {
    background-color: #e9ecef;       /* 悬停时背景色变深 */
}

/* 桌面端响应式样式 - 屏幕宽度≥768px时生效 */
@media (min-width: 768px) {
    /* 粘性定位容器 */
    .sticky-sidebar-container {
        position: sticky;            /* 启用粘性定位 */
        top: 10px;                  /* 距离视口顶部10px时固定 */
        z-index: 100;               /* 确保显示在最上层 */
    }

    /* 热门文章列表 */
    #most-list {
        max-height: 50vh;           /* 最大高度为视口高度的50% */
        overflow-y: auto;           /* 内容超出时显示垂直滚动条 */
    }
}

/* 移动端响应式样式 - 屏幕宽度≤767.98px时生效 */
@media (max-width: 767.98px) {
    /* 粘性定位容器 */
    .sticky-sidebar-container {
        position: static;           /* 禁用粘性定位，恢复普通文档流 */
    }
}