/* ========================================
 * 导航网站自定义样式
 * 基于橙红色猫咪头像配色方案的主题设计
 * ========================================
 * 
 * 主题色彩说明：
 * - 主色调: #FF6B47 (橙红色) - 来源于猫咪头像的主要颜色
 * - 辅助色: #fff5f2 (淡橙色) - 用于背景和悬停效果
 * - 中性色: #f9f9f9 (浅灰色) - 卡片背景色
 * - 边框色: #e4e4e4 (灰色) - 用于边框和分隔线
 * - 文字色: #666, #777, #888 (不同深度的灰色) - 确保良好的可读性
 * 
 * 设计理念：
 * - 现代卡片式布局设计
 * - 响应式网格系统
 * - 平滑的交互动画
 * - 清晰的视觉层次
 * ======================================== */

/* ========================================
 * 内容区域基础样式
 * ======================================== */

/* 内容section的显示控制 - 实现单页应用的section切换 */
.content-section {
	display: none;           /* 默认隐藏所有section */
}
.content-section.active {
	display: block;         /* 显示当前激活的section */
}

/* ========================================
 * 链接网格布局系统
 * ======================================== */

/* 响应式网格容器 - 自动适应不同屏幕尺寸 */
.link-grid {
	display: grid;                                      /* 使用CSS Grid布局 */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列数，最小宽度300px */
	gap: 1.5em;                                        /* 网格项之间的间距 */
	margin: 2em 0;                                     /* 上下外边距 */
}

/* ========================================
 * 链接卡片样式设计
 * ======================================== */

/* 基础卡片样式 - 现代卡片设计 */
.link-card {
	background: #f9f9f9;                               /* 浅灰色背景 */
	border: 1px solid #e4e4e4;                        /* 浅灰色边框 */
	border-radius: 5px;                               /* 圆角设计 */
	padding: 1.5em;                                   /* 内边距确保内容舒适间距 */
	transition: all 0.3s ease;                        /* 平滑过渡动画 */
}

/* 卡片悬停效果 - 提供视觉反馈 */
.link-card:hover {
	background: #fff5f2;                              /* 悬停时变为淡橙色背景 */
	border-color: #FF6B47;                            /* 边框变为主题色 */
	transform: translateY(-3px);                       /* 向上移动增强效果 */
	box-shadow: 0 6px 20px rgba(255,107,71,0.25);    /* 更强的橙红色阴影 */
	cursor: pointer;                                  /* 指针光标提示可点击 */
}

/* 卡片点击效果 - 提供即时反馈 */
.link-card:active {
	transform: translateY(-1px);                       /* 点击时轻微下压 */
	box-shadow: 0 2px 8px rgba(255,107,71,0.3);      /* 减弱阴影模拟按下 */
	transition: all 0.1s ease;                        /* 快速过渡 */
}

/* 卡片标题样式 */
.link-card h4 {
	margin: 0 0 0.5em 0;                              /* 标题边距 */
	color: #FF6B47;                                    /* 主题色标题 */
}

/* 卡片描述文字样式 */
.link-card p {
	margin: 0 0 1em 0;                                /* 段落边距 */
	font-size: 0.9em;                                 /* 稍小的字体 */
	color: #666;                                      /* 深灰色文字 */
}

/* 卡片内链接样式 */
.link-card a {
	color: #FF6B47;                                    /* 链接使用主题色 */
	text-decoration: none;                            /* 移除默认下划线 */
	border-bottom: 1px solid transparent;            /* 透明底边框，用于悬停效果 */
}

/* 卡片内链接悬停效果 */
.link-card a:hover {
	border-bottom-color: #FF6B47;                    /* 悬停时显示底边框 */
}

/* ========================================
 * 文本内容样式设计
 * ======================================== */

/* 文本内容基础样式 */
.text-content {
	line-height: 1.8;                                 /* 增加行高提高可读性 */
}

/* H3标题样式 - 主要章节标题 */
.text-content h3 {
	color: #FF6B47;                                    /* 主题橙红色 */
	margin: 1.5em 0 0.8em 0;                          /* 上下边距控制间距 */
}

/* H4标题样式 - 次级标题 */
.text-content h4 {
	color: #777;                                      /* 深灰色，层次分明 */
	margin: 1.2em 0 0.6em 0;                          /* 适中的上下边距 */
}

/* 列表样式 - 有序和无序列表 */
.text-content ul, .text-content ol {
	margin: 1em 0;                                    /* 列表上下边距 */
}

/* 引用块样式 - 突出显示重要信息 */
.text-content blockquote {
	background: #fff5f2;                              /* 淡橙色背景呼应主题 */
	border-left: 4px solid #FF6B47;                  /* 左侧主题色装饰条 */
	padding: 1em 1.5em;                               /* 内边距 */
	margin: 1.5em 0;                                  /* 上下边距 */
	font-style: italic;                              /* 斜体强调引用性质 */
}

/* 行内代码样式 - 文本中的代码片段 */
.text-content code {
	background: #f4f4f4;                              /* 浅灰色背景区分代码 */
	padding: 0.2em 0.4em;                             /* 紧凑的内边距 */
	border-radius: 3px;                              /* 小圆角 */
	font-family: 'Source Code Pro', monospace;       /* 等宽字体确保代码对齐 */
	font-size: 0.9em;                                /* 稍小的字体 */
}

/* 代码块样式 - 多行代码显示 */
.text-content pre {
	background: #f4f4f4;                              /* 与行内代码一致的背景色 */
	padding: 1em;                                     /* 充足的内边距 */
	border-radius: 5px;                              /* 圆角设计 */
	overflow-x: auto;                                /* 水平滚动处理长代码行 */
	margin: 1.5em 0;                                  /* 上下边距 */
}

/* 代码块内的代码样式 - 重置行内代码样式 */
.text-content pre code {
	background: none;                                /* 移除背景色 */
	padding: 0;                                      /* 移除内边距 */
}

/* ========================================
 * 加载状态样式 - 提供用户反馈
 * ======================================== */

/* 加载提示容器 - 在Markdown解析期间显示 */
.loading {
	text-align: center;                               /* 居中对齐 */
	padding: 3rem 2rem;                              /* 增加内边距提升视觉效果 */
	color: #FF6B47;                                   /* 使用主题色 */
	font-size: 1.1rem;                               /* 稍大的字体 */
	position: relative;                              /* 为动画定位 */
}

/* 加载动画效果 - 旋转指示器 */
.loading::after {
	content: '';                                     /* 空内容用于动画 */
	display: inline-block;                           /* 行内块元素 */
	width: 20px;                                     /* 动画圆圈宽度 */
	height: 20px;                                    /* 动画圆圈高度 */
	margin-left: 10px;                               /* 与文字的间距 */
	border: 2px solid #FF6B47;                       /* 主题色边框 */
	border-radius: 50%;                              /* 圆形 */
	border-top-color: transparent;                   /* 顶部透明创建旋转效果 */
	animation: spin 1s linear infinite;              /* 旋转动画 */
	vertical-align: middle;                          /* 垂直居中对齐 */
}

/* 旋转动画关键帧 */
@keyframes spin {
	to {
		transform: rotate(360deg);                   /* 360度旋转 */
	}
}

/* 错误状态样式 - 友好的错误提示 */
.error-message {
	text-align: center;                               /* 居中对齐 */
	padding: 2rem;                                   /* 充足的内边距 */
	color: #d63031;                                  /* 错误红色 */
	background-color: #ffeaa7;                       /* 温和的黄色背景 */
	border: 1px solid #fdcb6e;                       /* 橙色边框 */
	border-radius: 8px;                              /* 圆角设计 */
	margin: 1rem 0;                                  /* 上下边距 */
	font-size: 1rem;                                 /* 标准字体大小 */
}

/* 错误标题样式 */
.error-message h3 {
	color: #d63031;                                  /* 错误红色标题 */
	margin-bottom: 0.5rem;                           /* 底部边距 */
	font-size: 1.2rem;                               /* 稍大的标题字体 */
}

/* 错误描述样式 */
.error-message p {
	margin: 0.5rem 0;                                /* 段落边距 */
	line-height: 1.5;                                /* 行高提高可读性 */
}

/* ========================================
 * 滚动条优化和布局修复
 * ======================================== */

/* 防止水平滚动条出现 */
body {
	overflow-x: hidden;                               /* 隐藏水平滚动条 */
}

/* 包装器高度和滚动控制 */
#wrapper {
	height: 100vh;                                   /* 全视口高度 */
	overflow-y: auto;                                /* 允许垂直滚动 */
}

/* 主内容区域高度限制 */
#main {
	max-height: calc(100vh - 4em);                   /* 限制最大高度，预留空间给其他元素 */
}

/* ========================================
 * 表格样式设计
 * ======================================== */

/* 表格基础样式 */
.text-content table {
	width: 100%;                                      /* 全宽显示 */
	border-collapse: collapse;                       /* 合并边框 */
	margin: 1.5em 0;                                 /* 上下边距 */
	border: 1px solid #e4e4e4;                       /* 外边框 */
}

/* 表格单元格通用样式 */
.text-content table th,
.text-content table td {
	padding: 0.8em 1em;                              /* 单元格内边距 */
	border: 1px solid #e4e4e4;                       /* 单元格边框 */
	text-align: left;                               /* 左对齐 */
}

/* 表头样式 */
.text-content table th {
	background: #fff5f2;                             /* 淡橙色背景呼应主题 */
	font-weight: bold;                               /* 加粗字体 */
	color: #FF6B47;                                   /* 主题色文字 */
}

/* 斑马纹效果 - 提高表格可读性 */
.text-content table tr:nth-child(even) {
	background: #fafafa;                             /* 偶数行浅灰色背景 */
}

/* ========================================
 * 响应式设计 - 适配不同屏幕尺寸
 * ======================================== */

/* 大屏幕优化 (桌面显示器 1200px+) */
@media screen and (min-width: 1200px) {
	.link-grid {
		grid-template-columns: repeat(4, 1fr);           /* 大屏显示4列 */
		gap: 1.8rem;                                    /* 增大间距 */
	}
	
	.link-card {
		padding: 1.8rem;                                /* 增加内边距 */
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 更流畅的过渡 */
	}
	
	.link-card:hover {
		transform: translateY(-5px) scale(1.02);         /* 悬停上浮和轻微放大 */
		box-shadow: 0 12px 30px rgba(255, 107, 71, 0.25); /* 更强的阴影效果 */
	}
}

/* 中等屏幕优化 (平板设备 737px-1024px) */
@media screen and (max-width: 1024px) and (min-width: 737px) {
	.link-grid {
		grid-template-columns: repeat(2, 1fr);           /* 平板显示2列 */
		gap: 1.2rem;                                    /* 适中间距 */
	}
	
	.link-card {
		padding: 1.4rem;                                /* 适中内边距 */
	}
}

/* 小屏幕设备样式调整 (手机端 ≤736px) */
@media screen and (max-width: 736px) {
	/* 链接网格在小屏幕上改为单列布局 */
	.link-grid {
		grid-template-columns: 1fr;                     /* 单列布局节省空间 */
		gap: 1rem;                                      /* 紧凑间距 */
		margin: 1.5rem 0;                               /* 减少外边距 */
	}
	
	.link-card {
		padding: 1.2rem;                                /* 适合手机的内边距 */
		margin-bottom: 0.5rem;                          /* 底部边距 */
	}
	
	.link-card h4 {
		font-size: 1.1rem;                              /* 手机端标题稍小 */
		line-height: 1.3;                               /* 紧凑行高 */
	}
	
	.link-card p {
		font-size: 0.9rem;                              /* 手机端描述文字稍小 */
		line-height: 1.4;                               /* 适中行高 */
	}
	
	/* 表格在小屏幕上的优化 */
	.text-content table {
		font-size: 0.85rem;                             /* 进一步减小字体 */
		overflow-x: auto;                               /* 水平滚动 */
		display: block;                                 /* 块级显示支持滚动 */
		white-space: nowrap;                            /* 防止文字换行 */
	}
	
	/* 表格单元格紧凑布局 */
	.text-content table th,
	.text-content table td {
		padding: 0.5rem 0.7rem;                         /* 更紧凑的内边距 */
		min-width: 100px;                               /* 最小宽度确保可读性 */
	}
	
	/* 加载状态在小屏幕上的调整 */
	.loading {
		padding: 2rem 1rem;                             /* 减少内边距 */
		font-size: 1rem;                                /* 标准字体大小 */
	}
	
	/* 错误信息在小屏幕上的调整 */
	.error-message {
		padding: 1.5rem;                                /* 减少内边距 */
		margin: 0.5rem 0;                               /* 减少外边距 */
		font-size: 0.9rem;                              /* 稍小字体 */
	}
}