/**
 * 文件名称：site.css
 * 文件描述：站点自定义样式表，定义网站的全局样式
 * 创建时间：2026-04-08
 * 所属项目：HuangWeb
 * 文件路径：wwwroot/css/site.css
 * 
 * 功能说明：
 * - 定义网站的自定义CSS样式
 * - 覆盖和扩展Bootstrap样式
 * - 实现粘性页脚布局
 */

/* 
 * 请参阅以下文档了解如何配置此项目以捆绑和压缩静态Web资源：
 * https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
 * 
 * 捆绑和压缩可以：
 * - 减少HTTP请求数量
 * - 减小文件大小
 * - 提高页面加载速度
 */

/* 导航栏品牌链接样式 */
a.navbar-brand {
  /* white-space: normal：允许文本换行 */
  /* 默认情况下，导航栏品牌链接不换行，这里改为允许换行 */
  white-space: normal;
  
  /* text-align: center：文本居中对齐 */
  text-align: center;
  
  /* word-break: break-all：允许在任意字符处换行 */
  /* 防止长文本溢出容器 */
  word-break: break-all;
}

/* 提供与白色背景足够的对比度 */
/* 全局链接样式 */
a {
  /* color: #28a745：链接颜色为绿色 */
  /* 使用绿色主题，与整体色调保持一致 */
  color: #28a745;
}

/* 主要按钮样式 */
/* 覆盖Bootstrap的btn-primary样式 */
.btn-primary {
  /* color: #fff：文本颜色为白色 */
  color: #fff;
  
  /* background-color: #28a745：背景颜色为绿色 */
  background-color: #28a745;
  
  /* border-color: #1e7e34：边框颜色为深绿色 */
  border-color: #1e7e34;
}

/* 导航药丸样式：活动状态 */
/* .nav-pills .nav-link.active：导航药丸中的活动链接 */
/* .nav-pills .show > .nav-link：显示状态下的导航链接（用于下拉菜单） */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  /* color: #fff：文本颜色为白色 */
  color: #fff;
  
  /* background-color: #28a745：背景颜色为绿色 */
  background-color: #28a745;
  
  /* border-color: #1e7e34：边框颜色为深绿色 */
  border-color: #1e7e34;
}

/* 导航栏样式：浅绿色背景 */
.navbar {
  /* background-color: #e8f5e9 !important：浅绿色背景 */
  /* !important：提高优先级，覆盖Bootstrap默认样式 */
  background-color: #e8f5e9 !important;
}

/* 页脚样式：浅绿色背景 */
.footer {
  /* background-color: #e8f5e9：浅绿色背景 */
  background-color: #e8f5e9;
}

/* 
 * 粘性页脚样式
 * -------------------------------------------------- 
 * 粘性页脚：页脚始终固定在页面底部
 * 即使内容不足以填满整个页面，页脚也会保持在底部
 */

/* HTML根元素样式 */
html {
  /* font-size: 14px：默认字体大小为14像素 */
  /* 这是移动设备的默认字体大小 */
  font-size: 14px;
}

/* 媒体查询：屏幕宽度大于等于768px（平板及以上设备） */
@media (min-width: 768px) {
  html {
    /* font-size: 16px：字体大小增加到16像素 */
    /* 在较大屏幕上使用更大的字体，提高可读性 */
    font-size: 16px;
  }
}

/* 顶部边框样式 */
.border-top {
  /* border-top: 1px solid #e5e5e5：顶部边框，1像素宽，实线，浅灰色 */
  border-top: 1px solid #e5e5e5;
}

/* 底部边框样式 */
.border-bottom {
  /* border-bottom: 1px solid #e5e5e5：底部边框，1像素宽，实线，浅灰色 */
  border-bottom: 1px solid #e5e5e5;
}

/* 盒阴影样式 */
.box-shadow {
  /* box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05)：盒阴影效果 */
  /* 参数说明：
   * 0：水平偏移量（无偏移）
   * .25rem：垂直偏移量（向下偏移0.25rem）
   * .75rem：模糊半径
   * rgba(0, 0, 0, .05)：阴影颜色（黑色，透明度5%）
   */
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* 接受政策按钮样式 */
button.accept-policy {
  /* font-size: 1rem：字体大小为1rem（相对于根元素字体大小） */
  font-size: 1rem;
  
  /* line-height: inherit：继承父元素的行高 */
  line-height: inherit;
}

/* 
 * 粘性页脚样式
 * -------------------------------------------------- 
 * 以下样式实现粘性页脚布局
 */

/* HTML根元素样式：为粘性页脚做准备 */
html {
  /* position: relative：相对定位 */
  /* 为绝对定位的页脚提供定位参考 */
  position: relative;
  
  /* min-height: 100%：最小高度为视口高度的100% */
  /* 确保页面至少占满整个视口高度 */
  min-height: 100%;
}

/* 主体样式 */
body {
  /* Margin bottom by footer height：底部外边距等于页脚高度 */
  /* margin-bottom: 60px：底部外边距60像素 */
  /* 为页脚预留空间，防止内容被页脚遮挡 */
  margin-bottom: 60px;
}

/* 页脚样式 */
.footer {
  /* position: absolute：绝对定位 */
  /* 相对于html元素（最近的定位祖先）定位 */
  position: absolute;
  
  /* bottom: 0：固定在底部 */
  bottom: 0;
  
  /* width: 100%：宽度占满整个父元素 */
  width: 100%;
  
  /* white-space: nowrap：文本不换行 */
  /* 防止页脚内容换行，保持在一行内 */
  white-space: nowrap;
  
  /* line-height: 60px：行高60像素 */
  /* Vertically center the text there：垂直居中文本 */
  /* 行高等于页脚高度，使文本垂直居中 */
  line-height: 60px;
}