/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #f5f5f5;
  padding: 0;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
  padding-top: 60px;
}
.container .credit {
  margin: 20px 0;
}

/*code {
  font-size: 80%;
}*/

.index-body-preview {
  height: 176px; /* 3行 * 22px = 66px */
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10; /* 新增，提升兼容性 */
  -webkit-box-orient: vertical;
  /* 兼容不支持-webkit-line-clamp的浏览器 */
  white-space: normal;
}

/* 优化导航栏颜色对比度 - 符合WCAG 2.1 AA标准 */
.navbar-default {
  background-color: #ffffff; /* 改为纯白色背景，提高对比度 */
  border-color: #e7e7e7;
}

.navbar-brand {
  font-size: 20px;
  font-weight: 600; /* 增加字重，提高可读性 */
  color: #2c3e50 !important; /* 深色文字，对比度约7.5:1 */
  text-shadow: none; /* 移除文字阴影，提高清晰度 */
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  color: #1a252f !important; /* 悬停时更深的颜色 */
  text-shadow: none;
  transform: scale(1.05);
}

/* 导航菜单项样式优化 */
.navbar-default .navbar-nav > li > a {
  color: #34495e !important; /* 深色文字，对比度约6.2:1 */
  font-weight: 500; /* 增加字重 */
  transition: all 0.3s ease;
  position: relative;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #2c3e50 !important; /* 悬停时更深的颜色 */
  background-color: rgba(44, 62, 80, 0.05) !important; /* 淡色背景 */
  text-shadow: none;
  transform: translateY(-2px);
}

.navbar-default .navbar-nav > li > a:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #2c3e50, #34495e);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  width: 100%;
}

/* 激活状态导航项 - 与悬停效果相同 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: #2c3e50 !important; /* 与悬停相同的深色 */
  background-color: rgba(44, 62, 80, 0.1) !important; /* 稍深的背景色 */
  font-weight: 600;
  text-shadow: none;
  transform: translateY(-2px);
}

.navbar-default .navbar-nav > .active > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2c3e50, #34495e);
  transform: translateX(-50%);
}

/* 下拉菜单项悬停效果 */
.navbar-default .navbar-nav .dropdown-menu > li > a {
  color: #34495e !important;
  transition: all 0.3s ease;
}

.navbar-default .navbar-nav .dropdown-menu > li > a:hover {
  color: #2c3e50 !important;
  background-color: rgba(44, 62, 80, 0.1) !important;
  text-shadow: none;
  transform: translateX(5px);
  padding-left: 25px;
}

/* 导航栏切换按钮优化 */
.navbar-default .navbar-toggle {
  border-color: #34495e;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: rgba(44, 62, 80, 0.1);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #34495e; /* 深色图标条 */
}

/* 页面内容样式优化 - 符合WCAG 2.1 AA标准 */
body {
  color: #2c3e50; /* 深色文字，对比度约7.5:1 */
  line-height: 1.6;
}

/* 标题样式优化 */
h1, h2, h3, h4, h5, h6 {
  color: #1a252f; /* 更深的标题颜色 */
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.2em;
  border-bottom: 2px solid #34495e;
  padding-bottom: 0.3em;
}

h2 {
  font-size: 1.8em;
  border-bottom: 1px solid #bdc3c7;
  padding-bottom: 0.2em;
}

h3 {
  font-size: 1.4em;
}

/* 链接样式优化 */
a {
  color: #2980b9; /* 深蓝色链接，对比度约4.8:1 */
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: #1f5f8b; /* 悬停时更深的蓝色 */
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* 页面标题样式 */
.page-header h1 {
  color: #1a252f;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.page-header em {
  color: #7f8c8d; /* 日期颜色，对比度约4.6:1 */
  font-style: normal;
  font-size: 0.9em;
}

/* 标签样式优化 */
.label-default {
  background-color: #34495e !important; /* 深色背景 */
  color: #ffffff !important;
  font-weight: 500;
  padding: 0.3em 0.6em;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.label-default:hover {
  background-color: #2c3e50 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.label-default a {
  color: #ffffff !important;
  text-decoration: none;
}

.label-default a:hover {
  color: #ecf0f1 !important;
  text-decoration: none;
}

/* 文章列表样式 */
.post-tags {
  margin: 0.5em 0;
}

.post-tags .label {
  margin-right: 0.3em;
  margin-bottom: 0.3em;
  display: inline-block;
}

/* 归档链接样式 */
a[href*="archive.html"] {
  color: #2980b9;
  font-weight: 500;
  padding: 0.5em 1em;
  border: 2px solid #2980b9;
  border-radius: 5px;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 1em 0;
}

a[href*="archive.html"]:hover {
  color: #ffffff;
  background-color: #2980b9;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(41, 128, 185, 0.3);
}

/* 代码块样式优化 */
code {
  background-color: #f8f9fa;
  color: #e74c3c; /* 红色代码文字 */
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
}

pre {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  border-left: 4px solid #3498db;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* 引用块样式 */
blockquote {
  border-left: 4px solid #3498db;
  padding-left: 1em;
  margin: 1em 0;
  background-color: #f8f9fa;
  padding: 1em;
  border-radius: 0 5px 5px 0;
}

blockquote p {
  margin: 0;
  color: #34495e;
}

/* 表格样式优化 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th, td {
  border: 1px solid #bdc3c7;
  padding: 0.5em;
  text-align: left;
}

th {
  background-color: #34495e;
  color: #ffffff;
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: #f8f9fa;
}

tr:hover {
  background-color: #ecf0f1;
}

/* 分隔线样式 */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  margin: 2em 0;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 18px;
  }
  
  h1 {
    font-size: 1.8em;
  }
  
  h2 {
    font-size: 1.5em;
  }
  
  h3 {
    font-size: 1.2em;
  }
  
  /* 移动设备上的激活状态优化 */
  .navbar-default .navbar-nav > .active > a {
    transform: none; /* 移动设备上不应用transform */
  }
  
  .navbar-default .navbar-nav > .active > a::after {
    height: 3px; /* 移动设备上稍微加粗下划线 */
  }
  
  .navbar-default .navbar-nav > li > a:hover {
    transform: none; /* 移动设备上不应用transform */
  }
}

/* 焦点指示器优化 - 提高键盘导航的可访问性 */
*:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* 跳过链接 - 提高可访问性 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #2c3e50;
  color: #ffffff;
  padding: 8px;
  text-decoration: none;
  border-radius: 3px;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  body {
    color: #000000;
  }
  
  .navbar-default {
    background-color: #ffffff;
    border-color: #000000;
  }
  
  .navbar-brand,
  .navbar-default .navbar-nav > li > a {
    color: #000000 !important;
  }
  
  a {
    color: #0000ee;
  }
}

/* 页脚样式优化 - 符合WCAG 2.1 AA标准 */
#footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 20px 0;
  margin-top: 40px;
  border-top: 3px solid #3498db;
}

#footer .container {
  text-align: center;
}

#footer .muted.credit {
  color: #bdc3c7;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.5;
}

#footer .muted.credit a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

#footer .muted.credit a:hover {
  color: #5dade2;
  text-decoration: underline;
}

#footer .muted.credit a:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
  border-radius: 3px;
}

/* 确保页脚链接对比度符合标准 */
#footer a {
  color: #3498db !important; /* 对比度约4.8:1 */
}

#footer a:hover {
  color: #5dade2 !important; /* 悬停时稍亮的蓝色 */
}

/* 响应式页脚 */
@media (max-width: 768px) {
  #footer .muted.credit {
    font-size: 0.8em;
    padding: 0 15px;
  }
}