/* swap指展示默认字体，然后才是自定义字体，避免一篇空白 */
/* @font-face {
  font-family: 'Taipei-Sans-TC-Beta-Light-2';
  src: url('/fonts/Taipei-Sans-TC-Beta-Light-2.woff2') format('woff2'),
       url('/fonts/Taipei-Sans-TC-Beta-Light-2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
} */

:root {
  --primary: #3490dc;
  --secondary: #ffed4a;
  --danger: #e3342f;
  --success: #38c172;
}

* {
  padding: 0;
  box-sizing: border-box;
}

/* mac系统为华文细黑，windows系统为微软雅黑 */
body {
  font-family: 'STXihei', 'Microsoft YaHei', 'Heiti SC', 'SimSun', 'Arial', sans-serif;
  line-height: 1.8;
  color: #2d3748;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  
}

.header-content {
  position: relative;
  display: flex;
  justify-content: center;
  width: 180px;
}

/* 小鸡图片 */
#chicken-img {
  width: 24px;
  height: 24px;
  position: absolute;
  margin-right: 12px; 
  top: -24px; /* 调整图片在输入框上方的位置 */
  /* 计算位置：搜索框左边距离 + (搜索框宽度的一半) - (小鸡图片宽度) */
  /* left: calc(var(--search-bar-left) + (200px / 2) - 24px); 
  max-width: 24px; */
  box-shadow: none; /* 清除全局的 box-shadow */
}

/* Navigation */
nav {
  background-color: #f8f9fa;
  padding: 1rem;
  margin-bottom: 2rem;
}

nav a {
  color: #4a5568;
  text-decoration: none;
  margin-right: 1rem;
  font-weight: 600;
}

nav a:hover {
  color: var(--primary);
}

/* Typography */
.title{
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

section h2:not(.title):not(.section-title) {
  padding-left: 1rem;
  border-left: 5px solid #000;
  min-height: 1.8rem; 
  line-height: 1.5rem;
}

h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.btn-primary:hover {
  background-color: #2779bd;
}

/* Form elements */
input[type="text"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

/* Search results */
#search-results {
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#search-results a {
  display: block;
  padding: 0.5rem 1rem;
  color: #4a5568;
  text-decoration: none;
}

#search-results a:hover {
  background-color: #f7fafc;
}

/* Utility classes */
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.text-lg { font-size: 1.125rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; }

/* 限制图片大小 */
img {
  max-width: 80%;   /* 最大宽度 */
  height: auto;       /* 保持宽高比 */
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3); /* 添加边框，对所有浏览器有效 */
  /* border: grey, 0.5px solid; */ /* 添加边框，仅对chrome有效 */
}

/* 改动序列号的相对位置 */
ol {
  padding-left: 1em; /* 或者更大的值，根据需要调整 */
}

ul {
  padding-left: 1em; /* 或者更大的值，根据需要调整 */
}

/* markdown重点符号的效果，不会影响代码块 */
/* 自定义 Markdown 内联代码样式 - 黄色效果 */
p code, li code, td code {
  font-size: 1em; /* 保持与周围文本相同的字体大小 */
  background-color: #fffacd; /* 浅黄色背景 (Lemon Chiffon) */
  color: #8b4513; /* 深褐色文本 (Saddle Brown) 以增加对比度 */
  padding: 2px 4px; /* 添加一些内边距 */
  border-radius: 3px; /* 圆角边框 */
  border: 0.5px solid #ffd700; /* 金色边框 */
  font-family: 'Courier New', Courier, monospace; /* 等宽字体 */

  transition: all 0.2s ease; /* 添加过渡效果 */
}

/* 加粗效果 */
strong {
    font-weight: 800;
    color: #000;
    letter-spacing: 0.5px;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);  /* 添加轻微阴影 */
    padding: 0 2px;  /* 两边加点间距 */
}

/* 目录效果 */
.toc {
  background: #f9f9f9;
  padding: 10px;
  margin-bottom: 30px;
}

.toc ul {
  list-style: none;
}

.toc a {
  color: rgb(25, 153, 203);
  text-decoration: none;

}