/* ==================================================
   前端样式文件
   功能：定义网站的各种视觉效果和布局样式
   ================================================== */

/* --------------------------------------------------
   卡片悬停效果样式
   -------------------------------------------------- */

/* 基础卡片样式：添加平滑过渡动画 */
.card-hover {
    transition: all 0.3s ease;  /* 所有属性变化都在0.3秒内平滑完成，缓动效果 */
}

/* 鼠标悬停时的卡片效果 */
.card-hover:hover {
    transform: translateY(-5px);  /* 向上移动5像素，产生上浮效果 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  /* 添加阴影，增强立体感 */
}

/* --------------------------------------------------
   文章内容样式
   -------------------------------------------------- */

/* 文章内容容器的基础样式 */
.article-content {
    line-height: 1.8;  /* 行高设为1.8倍，让文字更容易阅读 */
}

/* 文章段落样式 */
.article-content p {
    margin-bottom: 1.5rem;  /* 段落之间的距离是1.5倍字体大小 */
}

/* 文章标题样式（h1到h6） */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    font-weight: 700;  /* 字体加粗，700是最粗 */
    margin-top: 2rem;  /* 标题上方距离 */
    margin-bottom: 1rem;  /* 标题下方距离 */
}

/* 一级标题样式 */
.article-content h1 {
    font-size: 2rem;  /* 字体大小是基础字体的2倍 */
}

/* 二级标题样式 */
.article-content h2 {
    font-size: 1.75rem;  /* 字体大小是基础字体的1.75倍 */
}

/* 三级标题样式 */
.article-content h3 {
    font-size: 1.5rem;  /* 字体大小是基础字体的1.5倍 */
}

/* 四级标题样式 */
.article-content h4 {
    font-size: 1.25rem;  /* 字体大小是基础字体的1.25倍 */
}

/* 文章列表样式（无序列表和有序列表） */
.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;  /* 列表底部距离 */
    padding-left: 2rem;  /* 列表缩进2倍字体大小 */
}

/* 无序列表样式 */
.article-content ul {
    list-style-type: disc;  /* 使用圆点作为列表标记 */
}

/* 有序列表样式 */
.article-content ol {
    list-style-type: decimal;  /* 使用数字作为列表标记 */
}

/* 列表项样式 */
.article-content li {
    margin-bottom: 0.5rem;  /* 列表项之间的距离 */
}

/* 引用块样式 */
.article-content blockquote {
    border-left: 4px solid #3b82f6;  /* 左边添加4像素宽的蓝色边框 */
    padding-left: 1.5rem;  /* 左边缩进 */
    margin: 1.5rem 0;  /* 上下边距 */
    font-style: italic;  /* 斜体字 */
    color: #64748b;  /* 灰色文字 */
}

/* 代码块样式 */
.article-content pre {
    background-color: #1e293b;  /* 深色背景 */
    color: #e2e8f0;  /* 浅色文字 */
    padding: 1.5rem;  /* 内边距 */
    border-radius: 0.5rem;  /* 圆角 */
    overflow-x: auto;  /* 内容过长时可以横向滚动 */
    margin-bottom: 1.5rem;  /* 底部边距 */
}

/* 行内代码样式 */
.article-content code {
    background-color: #f1f5f9;  /* 浅灰色背景 */
    padding: 0.125rem 0.375rem;  /* 内边距，上下小，左右稍大 */
    border-radius: 0.25rem;  /* 小圆角 */
    font-family: 'Fira Code', 'Consolas', monospace;  /* 使用等宽字体 */
    font-size: 0.875rem;  /* 字体稍小 */
}

/* 代码块内的代码样式（覆盖行内代码样式） */
.article-content pre code {
    background-color: transparent;  /* 透明背景 */
    padding: 0;  /* 去除内边距 */
}

/* 文章内图片样式 */
.article-content img {
    max-width: 100%;  /* 图片最大宽度不超过容器 */
    height: auto;  /* 高度自动按比例缩放 */
    border-radius: 0.5rem;  /* 圆角 */
    margin: 1.5rem 0;  /* 上下边距 */
}

/* 文章链接样式 */
.article-content a {
    color: #3b82f6;  /* 蓝色文字 */
    text-decoration: underline;  /* 下划线 */
}

/* 链接悬停样式 */
.article-content a:hover {
    color: #2563eb;  /* 鼠标悬停时颜色变深 */
}

/* 表格样式 */
.article-content table {
    width: 100%;  /* 表格宽度100% */
    border-collapse: collapse;  /* 边框合并 */
    margin-bottom: 1.5rem;  /* 底部边距 */
}

/* 表格单元格样式 */
.article-content th,
.article-content td {
    border: 1px solid #e2e8f0;  /* 浅灰色边框 */
    padding: 0.75rem;  /* 内边距 */
    text-align: left;  /* 左对齐 */
}

/* 表头样式 */
.article-content th {
    background-color: #f8fafc;  /* 浅灰色背景 */
    font-weight: 600;  /* 加粗 */
}

/* --------------------------------------------------
   文本截断样式
   -------------------------------------------------- */

/* 限制只显示2行文字，超出部分省略 */
.line-clamp-2 {
    display: -webkit-box;  /* 使用弹性盒模型 */
    -webkit-line-clamp: 2;  /* 限制显示2行 */
    -webkit-box-orient: vertical;  /* 垂直方向排列 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* --------------------------------------------------
   视频比例样式
   -------------------------------------------------- */

/* 保持16:9的视频宽高比 */
.aspect-video {
    aspect-ratio: 16 / 9;  /* 宽高比16:9 */
}

/* --------------------------------------------------
   页脚信息区域样式
   -------------------------------------------------- */

/* 页脚信息容器 */
.footer-info {
    display: flex;  /* 使用弹性布局 */
    flex-direction: row;  /* 横向排列 */
    flex-wrap: nowrap;  /* 不换行 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
    gap: 0.25rem 0.5rem;  /* 元素之间的间距（上下0.25rem，左右0.5rem） */
    width: 100%;  /* 宽度100% */
    box-sizing: border-box;  /* 边框和内边距包含在宽度内 */
}

/* 页脚信息行 */
.footer-info-row {
    display: flex;  /* 使用弹性布局 */
    flex-direction: row;  /* 横向排列 */
    flex-wrap: nowrap;  /* 不换行 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
    gap: 0.25rem 0.5rem;  /* 元素之间的间距 */
    width: auto;  /* 宽度自动 */
}

/* 版权信息样式 */
.footer-copyright {
    color: #64748b;  /* 灰色文字 */
    font-size: 0.95rem;  /* 字体稍小 */
    text-align: center;  /* 文字居中 */
    word-wrap: break-word;  /* 允许单词内换行 */
    overflow-wrap: anywhere;  /* 允许在任何位置换行 */
    word-break: break-word;  /* 单词过长时换行 */
    hyphens: auto;  /* 自动断字 */
    line-height: 1.6;  /* 行高1.6倍 */
    max-width: 100%;  /* 最大宽度100% */
    white-space: nowrap;  /* 不换行 */
}

/* 备案信息容器 */
.footer-beian {
    display: flex;  /* 使用弹性布局 */
    flex-direction: row;  /* 横向排列 */
    flex-wrap: nowrap;  /* 不换行 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
    gap: 0.25rem 0.5rem;  /* 元素之间的间距 */
    width: auto;  /* 宽度自动 */
}

/* 备案链接样式 */
.footer-beian a {
    color: #94a3b8;  /* 浅灰色文字 */
    text-decoration: none;  /* 无下划线 */
    font-size: 0.9rem;  /* 字体稍小 */
    transition: color 0.3s ease;  /* 颜色变化有平滑过渡 */
    word-wrap: break-word;  /* 允许单词内换行 */
    overflow-wrap: anywhere;  /* 允许在任何位置换行 */
    word-break: break-word;  /* 单词过长时换行 */
    hyphens: auto;  /* 自动断字 */
    line-height: 1.6;  /* 行高1.6倍 */
    max-width: 100%;  /* 最大宽度100% */
    display: inline-block;  /* 行内块级元素 */
}

/* 备案链接悬停样式 */
.footer-beian a:hover {
    color: #cbd5e1;  /* 鼠标悬停时颜色变浅 */
}

/* --------------------------------------------------
   公安备案图标样式
   -------------------------------------------------- */

/* 字体图标样式 */
.police-icon {
    margin-right: 0.15rem;  /* 右边距 - 图标与文字间距略大于文字间距 */
    font-size: 1rem;  /* 图标大小 */
    vertical-align: middle;  /* 垂直居中对齐 */
}

/* 图片图标样式 */
.police-icon-img {
    width: 22px;  /* 宽度16像素 */
    height: 22px;  /* 高度16像素 */
    margin-right: 0.05rem;  /* 右边距 - 图标与文字间距略大于文字间距 */
    vertical-align: middle;  /* 垂直居中对齐 */
    display: inline-block;  /* 行内块级元素 */
    object-fit: contain;  /* 保持图片比例，完整显示 */
}

/* --------------------------------------------------
   响应式样式 - 中等屏幕（平板尺寸）
   屏幕宽度在768px到1199px之间生效
   -------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-info {
        flex-wrap: wrap;  /* 允许换行 */
        gap: 0.2rem 0.4rem;  /* 调整间距 */
    }
    
    .footer-info-row {
        flex-wrap: wrap;  /* 允许换行 */
        gap: 0.2rem 0.4rem;  /* 调整间距 */
    }
    
    .footer-beian {
        flex-wrap: wrap;  /* 允许换行 */
        gap: 0.2rem 0.4rem;  /* 调整间距 */
    }
    
    .footer-copyright {
        white-space: normal;  /* 允许换行 */
    }
}

/* --------------------------------------------------
   响应式样式 - 大屏幕（桌面尺寸）
   屏幕宽度大于等于1200px时生效
   -------------------------------------------------- */
@media (min-width: 1200px) {
    .footer-info {
        flex-direction: row;  /* 横向排列 */
        flex-wrap: nowrap;  /* 不换行 */
        justify-content: center;  /* 水平居中 */
        gap: 0.5rem;  /* 间距0.5rem */
    }
    
    .footer-info-row {
        flex-direction: row;  /* 横向排列 */
        flex-wrap: nowrap;  /* 不换行 */
        width: auto;  /* 宽度自动 */
        gap: 0.5rem;  /* 间距0.5rem */
    }
    
    .footer-beian {
        flex-direction: row;  /* 横向排列 */
        flex-wrap: nowrap;  /* 不换行 */
        gap: 0.5rem;  /* 间距0.5rem */
    }
    
    .footer-copyright {
        white-space: nowrap;  /* 不换行 */
    }
}

/* --------------------------------------------------
   响应式样式 - 小屏幕（手机尺寸）
   屏幕宽度小于等于767px时生效
   -------------------------------------------------- */
@media (max-width: 767px) {
    .footer-info {
        flex-direction: column;  /* 纵向排列 */
        flex-wrap: wrap;  /* 允许换行 */
        gap: 0.35rem;  /* 间距0.35rem */
    }
    
    .footer-info-row {
        flex-direction: column;  /* 纵向排列 */
        flex-wrap: wrap;  /* 允许换行 */
        gap: 0.35rem;  /* 间距0.35rem */
    }
    
    .footer-beian {
        flex-direction: column;  /* 纵向排列 */
        flex-wrap: wrap;  /* 允许换行 */
        gap: 0.35rem;  /* 间距0.35rem */
    }
    
    .footer-copyright {
        font-size: 0.9rem;  /* 字体稍小 */
        padding: 0 1rem;  /* 左右内边距 */
        white-space: normal;  /* 允许换行 */
    }
    
    .footer-beian a {
        font-size: 0.85rem;  /* 字体更小 */
        padding: 0 0.5rem;  /* 左右内边距 */
        white-space: normal;  /* 允许换行 */
    }
}

/* --------------------------------------------------
   暗色模式样式
   -------------------------------------------------- */

/* 暗色模式下的版权信息 */
.dark .footer-copyright {
    color: #94a3b8;  /* 浅灰色文字 */
}

/* 暗色模式下的备案链接 */
.dark .footer-beian a {
    color: #94a3b8;  /* 浅灰色文字 */
}

/* 暗色模式下的备案链接悬停 */
.dark .footer-beian a:hover {
    color: #e2e8f0;  /* 更浅的灰色 */
}

/* --------------------------------------------------
   暗色模式下的文章内容样式
   -------------------------------------------------- */

/* 文章内容容器 - 暗色模式 */
.dark .article-content {
    color: #d1d5db;
}

/* 文章标题 - 暗色模式 */
.dark .article-content h1,
.dark .article-content h2,
.dark .article-content h3,
.dark .article-content h4,
.dark .article-content h5,
.dark .article-content h6 {
    color: #f9fafb;
}

/* 文章段落 - 暗色模式 */
.dark .article-content p {
    color: #d1d5db;
}

/* 引用块 - 暗色模式 */
.dark .article-content blockquote {
    border-color: #3b82f6;
    color: #9ca3af;
}

/* 代码块 - 暗色模式 */
.dark .article-content pre {
    background-color: #1f2937;
    color: #e5e7eb;
}

/* 行内代码 - 暗色模式 */
.dark .article-content code {
    background-color: #374151;
    color: #fca5a5;
}

/* 代码块内的代码 - 暗色模式 */
.dark .article-content pre code {
    background-color: transparent;
    color: #e5e7eb;
}

/* 文章链接 - 暗色模式 */
.dark .article-content a {
    color: #60a5fa;
}

/* 链接悬停 - 暗色模式 */
.dark .article-content a:hover {
    color: #93c5fd;
}

/* 表格 - 暗色模式 */
.dark .article-content table {
    border-color: #4b5563;
}

/* 表格单元格 - 暗色模式 */
.dark .article-content th,
.dark .article-content td {
    border-color: #4b5563;
}

/* 表头 - 暗色模式 */
.dark .article-content th {
    background-color: #374151;
    color: #f3f4f6;
}

/* 表格单元格文字 - 暗色模式 */
.dark .article-content td {
    color: #d1d5db;
}

/* 列表 - 暗色模式 */
.dark .article-content ul,
.dark .article-content ol {
    color: #d1d5db;
}

/* 删除线 - 暗色模式 */
.dark .article-content del {
    color: #9ca3af;
}