/*
  公共样式文件 - style.css

  说明：
  - 本文件只包含静态样式定义，用于控制页面的全局布局、主要容器、标题、内容区和底部（footer）。
  - 根据要求，不改变现有样式，仅在关键位置增加详细注释，便于后续维护与学习。
*/

/* ------------------------------------------------------------
   全局基础：html / body
   说明：确保页面占满可视高度，移除默认边距，并设置默认字体与行高。
   - height: 100% 用于配合 min-height:100vh 保持页面高度一致
   - margin / padding 清零，避免浏览器默认样式影响布局
   - font-family 使用系统字体优先，提升渲染性能
   ------------------------------------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  line-height: 1.6; /* 行高用于提升文本可读性 */
}

/* ------------------------------------------------------------
   body 布局：使用 Flexbox 实现“推到底部”效果
   说明：通过将 body 设为 flex 容器，并使用 column 方向，
   可以让 .container 占据剩余空间，从而让 footer 始终位于页面底部
   （即使内容高度不足时也会贴底）。
   - min-height: 100vh 确保 body 至少占满视口高度
   ------------------------------------------------------------ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   主容器 .container
   说明：限制最大宽度并居中，添加内边距和文本居中。
   - flex: 1 使其在 flex 布局中自动扩展占据可用空间
   ------------------------------------------------------------ */
.container {
  flex: 1; /* 在 body 的 flex 布局中占据剩余空间 */
  max-width: 1200px; /* 限制内容宽度，避免超宽阅读疲劳 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px; /* 内容距离边缘的内边距 */
  text-align: center; /* 默认文本居中，适用于简洁页面布局 */
}

/* ------------------------------------------------------------
   header 区域
   说明：用于放置站点标题 / logo 等，当前仅设置底部间距。
   - 可在此处添加背景、边框或 logo 图片的样式
   ------------------------------------------------------------ */
header {
  margin-bottom: 40px; /* header 与主体内容的间距 */
}

/* ------------------------------------------------------------
   header h1（站点主标题）
   说明：定义标题颜色、字号与外边距。
   - 颜色和字号可根据品牌要求调整
   ------------------------------------------------------------ */
header h1 {
  color: #2c3e50;
  font-size: 2.5rem; /* 相对单位利于响应式 */
  margin: 0; /* 去掉默认外边距，使间距由 header 控制 */
}

/* ------------------------------------------------------------
   main 区域与 section 内容区
   说明：为主体内容提供底部间距与卡片式样式（背景、圆角、阴影）
   - 这种卡片样式常用于凸显主要内容块
   ------------------------------------------------------------ */
main {
  margin-bottom: 40px; /* 主体与 footer 的间距 */
}

section {
  background: #f8f9fa; /* 轻微灰色背景，区分内容与页面背景 */
  padding: 30px; /* 内边距用于增加内容呼吸感 */
  border-radius: 8px; /* 圆角提升视觉友好度 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 轻微阴影制造悬浮感 */
}

section h2 {
  color: #34495e;
  margin-top: 0; /* 避免标题与卡片顶部重叠 */
}

/* ------------------------------------------------------------
   页面底部（footer）样式
   说明：定义底部背景、边框与内边距，同时使用 margin-top: auto
   配合 body 的 flex 布局，使其总是位于页面底部。
   - 背景与边框颜色保持低对比，作为次要信息展示区域
   ------------------------------------------------------------ */
.footer {
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef; /* 顶部细线分隔内容 */
  padding: 20px 0;
  margin-top: auto; /* 关键：在flex容器中推送footer到底部 */
  text-align: center;
  color: #6c757d; /* 次要文本颜色 */
  font-size: 14px;
}

/* ------------------------------------------------------------
   .footer-content
   说明：限制 footer 内部的最大宽度并对齐内容，与 .container 保持一致
   ------------------------------------------------------------ */
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* 两侧内边距防止内容紧贴屏幕边缘 */
}

/* footer 内段落样式 */
.footer-content p {
  margin: 5px 0; /* 各段落之间垂直间距 */
}

/* ------------------------------------------------------------
   链接样式（雷池 WAF 链接）
   说明：使用醒目的绿色并去掉下划线，hover 时增加下划线提示可点击
   ------------------------------------------------------------ */
.footer-waflink {
  color: #27b876; /* 品牌绿色或强调色 */
  text-decoration: none;
}

.footer-waflink:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   ICP / 版权信息样式
   说明：微小字号和灰色用于降低视觉优先级，属于辅助信息
   ------------------------------------------------------------ */
.icp-info {
  color: #868e96;
  font-size: 12px;
}

/* 版权样式与备案号相同的视觉层级 */
.copyright {
  color: #868e96;
  font-size: 12px;
  margin-top: 10px; /* 与上一行信息保持一定间距 */
}

/* ------------------------------------------------------------
   可扩展建议（注释）：
   - 如果需要响应式优化，可在此处添加 media queries，例如
     @media (max-width: 600px) { header h1 { font-size: 1.6rem; } }
   - 若需将 header 替换为带 logo 的布局，建议使用 flexbox 对齐
   - 若需深色主题，请创建 .theme-dark 并在根元素切换
   ------------------------------------------------------------ */