/* style.css */

/* 容器宽度始终与屏幕宽度匹配 */
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  /* 关键设置：最大宽度为100%，不限制容器宽度 */
  max-width: 100% !important;

  /* 保留默认内边距，避免内容紧贴屏幕边缘（可根据需要调整） */
  padding-left: 1rem;
  padding-right: 1rem;

  /* 确保容器是块级元素并占满宽度 */
  width: 100%;
  box-sizing: border-box;
}

/* 全局链接样式
   移除默认下划线，添加颜色过渡动画
   定义四种链接状态的颜色：未访问、已访问、悬停、活动
   定义鼠标悬停在 label 元素上时显示为指针样式
*/
a {
    text-decoration: none; /* 移除默认下划线 */
    transition: color 0.3s; /* 添加颜色过渡动画，提升交互体验 */
}
a:link, a:visited {
    color: #73a6ff; /* 未访问和已访问链接的颜色，使用浅蓝色 */
}
a:hover, a:active {
    text-decoration: underline; /* 悬停和活动状态显示下划线 */
    color: #ff8a70; /* 使用浅橙色作为强调色，增强视觉层次 */
}
label {
    cursor: pointer;    /* 鼠标悬停在 label 元素上时显示为指针样式 */
}

/* 全局样式精简
   为所有div添加圆角，设置页面背景色
   清除body的默认margin，避免出现意外空白
*/
div {
    border-radius: 5px; /* 为所有div元素添加轻微圆角，统一视觉风格 */
}
body {
    background-color: #121212; /* 设置深灰色背景，适合深色模式 */
    margin: 0; /* 清除body的默认margin，确保内容从页面边缘开始 */
    color: #e0e0e0; /* 设置文本颜色为浅灰色，提高可读性 */
}

/* 导航栏样式
   设置深灰色背景，确保导航链接清晰可见
   定义链接悬停效果，增强交互反馈
*/
.menu {
    background-color: #212121; /* 深灰色背景，确保内容突出 */
}
.menu .menu-bar a:link {
    color: #e0e0e0; /* 导航链接默认颜色 */
}
.menu .menu-bar a:hover {
    color: #ff4500; /* 悬停时变为橙红色，提供明确的交互反馈 */
    text-decoration: none; /* 覆盖全局的hover下划线，保持导航栏简洁 */
}

/* 搜索栏样式
   设计简洁的搜索界面
   使用flex布局实现输入框和按钮的无缝衔接
*/
.search-bar {
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许元素换行 */
    align-items: center; /* 垂直居中对齐 */
    width: 100%; /* 宽度占满父容器 */
    max-width: 500px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
}
.search-input {
    flex: 1; /* 输入框占据剩余空间 */
    padding: 10px; /* 内边距 */
    border: 1px solid #333; /* 边框 */
    border-radius: 4px 0 0 4px; /* 左侧圆角 */
    border-right: none; /* 移除右侧边框，与按钮无缝衔接 */
    outline: none; /* 移除聚焦时的默认轮廓 */
    font-size: 16px; /* 字体大小 */
    background-color: #1e1e1e; /* 深灰色背景 */
    color: #e0e0e0; /* 文本颜色 */
}
.search-button {
    padding: 10px 20px; /* 内边距 */
    background-color: #007bff; /* 蓝色背景 */
    color: #fff; /* 白色文字 */
    border: 1px solid #007bff; /* 边框 */
    border-radius: 0 4px 4px 0; /* 右侧圆角 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 16px; /* 字体大小 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
}
.search-button:hover {
    background-color: #0056b3; /* 悬停时更深的蓝色 */
    border-color: #0056b3; /* 边框颜色同步变化 */
}