/* ==================== 重置所有元素的边距和内边距 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== 设置html和body ==================== */
html, body {
    font-family: Arial, sans-serif;
    background-color: #181818; /* 深色背景 */
    color: #ffffff; /* 默认文字颜色 */
    transition: background-color 0.3s, color 0.3s;
}

/* ==================== Logo 样式 ==================== */

/* logo容器 */
header .logo {
    background-color: transparent; /* logo 背景透明 */
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* logo字体样式 */
header .logo h1 {
    font-size: 2.5rem; /* logo字体大小 */
    color: white; /* logo字体颜色 */
    margin: 0;
    text-transform: uppercase; /* logo文字大写 */
    letter-spacing: 2px; /* 设置文字间距 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* logo阴影效果 */
}

/* 鼠标悬停时logo的灰色阴影 */
header .logo h1:hover,
header .logo h1:focus {
    text-shadow: 2px 2px 6px rgba(169, 169, 169, 1); /* 灰色阴影效果 */
    cursor: pointer; /* 鼠标变为指针 */
}

/* ==================== 页眉样式 ==================== */

/* 页眉容器 */
header {
    background-color: #000000; /* 页眉背景颜色 */
    color: white; /* 页眉字体颜色 */
    padding: 20px 0; /* 页眉上下内边距 */
    text-align: center; /* 页眉内容水平居中 */
    display: flex;
    flex-direction: column; /* 使logo和导航栏垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    border-top: 2px solid #555; /* 页眉上方边框 */
    border-bottom: 2px solid #555; /* 页眉下方边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 页眉阴影效果 */
}

/* ==================== 导航栏样式 ==================== */

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
}

nav ul li a {
    color: #fff; /* 导航栏链接字体颜色 */
    text-decoration: none;
    font-size: 1.2rem;
    padding: 5px 10px;
}

/* 鼠标悬停时，改变导航栏链接颜色 */
nav ul li a:hover {
    background-color: #555; /* 鼠标悬停时，背景色 */
}

/* ==================== 主要内容区样式 ==================== */

main {
    padding: 20px;
}

/* 文章网格布局 */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动生成网格列 */
    gap: 20px; /* 网格间隙 */
}

/* 文章卡片样式 */
.article-card {
    background-color: #000000; /* 卡片背景颜色 */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    color: #ffffff; /* 卡片字体颜色 */
}

/* 卡片鼠标悬停时浅灰色阴影效果 */
.article-card:hover {
    box-shadow: 0 8px 16px rgba(169, 169, 169, 0.6); /* 浅灰色阴影 */
}

/* 图片样式 */
.article-card img {
    width: 100%; 
    height: auto;
    object-fit: cover;  /* 保证图片填充并适应容器 */
    border-radius: 10px;
    display: block;
    margin-bottom: 10px;
}

/* 文章信息样式，文本居中 */
.article-info {
    padding: 10px 0;
    text-align: center;
}

/* 文章标题样式 */
.article-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px; /* 增加标题与内容之间的间距 */
}

/* 文章描述样式 */
.article-info p {
    font-size: 1rem;
    margin-bottom: 10px; /* 增加描述与视频之间的间距 */
    text-align: center;
}

/* 文章分类样式 */
.article-categories {
    font-size: 0.9em;
    margin-top: 5px; /* 与标题的间距 */
    margin-bottom: 10px; /* 增加与发布时间的间距 */
    color: #b3b3b3; /* 分类文字颜色为深灰色 */
}

.article-categories a.category-link {
    color: #b3b3b3; /* 分类链接颜色为深灰色 */
    text-decoration: none;
    font-weight: bold; /* 加粗分类标签 */
}

.article-categories a.category-link:hover {
    color: #ff4500; /* 鼠标悬停时改为橙色 */
    text-decoration: underline; /* 添加下划线 */
}

/* 发布日期样式 */
.article-date {
    font-size: 0.8em;
    color: #666; /* 日期文字颜色 */
    margin-top: 5px; /* 与分类的间距 */
}

/* ==================== 单个文章页面内容样式 ==================== */

/* 文章内容页面的最大宽度，居中显示 */
.article-page .article-content {
    max-width: 1000px;  /* 限制文章宽度 */
    margin: 0 auto;  /* 使内容居中 */
    padding: 20px;  /* 页面内容的内边距 */
    text-align: center;  /* 使文本居中 */
}

/* 文章标题样式 */
.article-page .article-content h2 {
    font-size: 1.5rem; /* 设置文章标题大小 */
    margin-bottom: 20px; /* 增加标题与内容之间的间距 */
}

/* 文章描述样式 */
.article-description {
    text-align: center; /* 确保文章描述居中 */
    margin-bottom: 30px; /* 增加描述与视频之间的间距 */
}

.article-description p {
    font-size: 1.2rem; /* 设置文章描述大小 */
    margin-top: 20px; /* 增加描述与标题的间距 */
    margin-bottom: 30px; /* 增加描述与视频之间的间距 */
    text-align: center; /* 确保文章描述内容居中 */
}

/* ==================== 视频嵌入样式 ==================== */

/* 自适应视频播放器容器 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    margin-bottom: 20px; /* 与下方内容的间距 */
    overflow: hidden;
    background: black; /* 视频加载前的背景色 */
}

/* 自适应视频播放器 */
.responsive-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 视频预览图样式 */
.video-preview-images {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.video-preview-images img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* 增加视频下方与其他内容之间的间距 */
article-video iframe + p {
    margin-top: 20px; /* 视频下方的间距 */
}

/* 文章内容的居中样式 */
.article-page .article-content {
    max-width: 1000px;
    margin: 0 auto; /* 居中内容 */
    padding: 20px;
    text-align: left; /* 标题与描述保持左对齐 */
}

/* 文章分类和标签 */
.article-categories-tags {
    margin-top: 20px; /* 给分类和标签添加间距 */
}

/* 分类部分显示在一行 */
.category {
    display: inline-block;
    margin-right: 10px; /* 分类标签之间的间距 */
}

/* 标签部分换行显示 */
.tags {
    display: block; /* 使标签部分换行显示 */
    margin-top: 10px; /* 给标签部分添加间距 */
}

.tags a {
    display: inline-block; /* 保持标签在同一行显示 */
    margin-right: 10px; /* 标签之间的间距 */
}

/* ==================== 页脚样式 ==================== */

/* 页脚容器 */
footer {
    background-color: #333; /* 页脚背景颜色 */
    color: white; /* 页脚字体颜色 */
    padding: 20px 0;
    text-align: center;
    margin-top: 20px;
    border-top: 4px solid #555; /* 页脚上方边框 */
}

footer p {
    font-size: 1rem;
}

/* 页脚链接样式 */
footer .footer-links a {
    color: #808080; /* 默认超链接颜色 */
    text-decoration: none; /* 去掉下划线 */
}

footer .footer-links a:hover {
    color: #ff4500; /* 鼠标悬停时改为橙色 */
    text-decoration: underline; /* 添加下划线 */
}

footer .footer-links a:active {
    color: #32cd32; /* 点击时改为绿色 */
}

/* ==================== 响应式设计 ==================== */

/* 手机端 - 居中图片并自适应 */
@media (max-width: 600px) {
    .article-card {
        display: flex;            /* 使用 Flexbox */
        justify-content: center;  /* 水平居中 */
        align-items: center;      /* 垂直居中（可选） */
        text-align: center;       /* 文本居中 */
    }

    .article-card img {
        display: block;           /* 将图片设置为块级元素 */
        margin: 0 auto;           /* 自动边距实现水平居中 */
        max-width: 100%;          /* 最大宽度为 100% */
        height: auto;             /* 高度自适应 */
        object-fit: cover;        /* 图片自适应容器并填充 */
    }
}

@media (max-width: 900px) {
    .article-card {
        display: flex;
        justify-content: center; /* 确保卡片中的内容（图片）居中 */
        align-items: center;     /* 垂直居中（可选） */
        text-align: center;      /* 确保文本也居中（如果有的话） */
    }

    .article-card img {
        max-width: 80%;          /* 图片最大宽度为容器的 80% */
        height: auto;            /* 高度自动调整，保持宽高比 */
        object-fit: cover;       /* 确保图片填充并适应容器 */
        display: block;          /* 强制图片为块级元素，这样才能应用居中 */
        margin-left: auto;       /* 使图片左右居中 */
        margin-right: auto;      /* 使图片左右居中 */
    }
}

@media (min-width: 901px) {
    .article-card img {
        max-width: 350px;
        height: 208px;
        object-fit: cover;
    }
}

/* 页面内容的居中 */
.article-page .article-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* ==================== 超链接样式 ==================== */

/* 超链接的默认颜色 */
a {
    color: #ffffff; /* 默认超链接颜色 */
    text-decoration: none; /* 去掉下划线 */
}

/* 超链接鼠标悬停时的颜色 */
a:hover {
    color: #ff4500; /* 鼠标悬停时改为橙色 */
    text-decoration: underline; /* 添加下划线 */
}

/* 超链接点击时的颜色 */
a:active {
    color: #32cd32; /* 点击时改为绿色 */
}

/* ==================== 广告位样式 ==================== */

/* 广告位容器 */
.ad-container {
    margin: 20px 0;
    text-align: center;
}

/* ==================== 标签云样式 ==================== */
.tag-cloud {
    text-align: center; /* 容器内容居中 */
    margin: 20px 0; /* 上下间距 */
}

.tag-cloud .cloud a {
    display: inline-block; /* 标签显示为行内块 */
    margin: 5px; /* 标签间距 */
    padding: 5px 10px; /* 标签内边距 */
    background-color: #333; /* 标签背景颜色 */
    color: #fff; /* 标签文字颜色 */
    border-radius: 5px; /* 圆角 */
    text-decoration: none; /* 去掉下划线 */
    transition: background-color 0.3s; /* 悬停动画 */
    text-align: center; /* 标签文本居中 */
}

.tag-cloud .cloud a:hover {
    background-color: #555; /* 悬停时背景颜色 */
}

/* ==================== 分类云样式 ==================== */
.category-cloud {
    text-align: center; /* 容器内容居中 */
    margin: 20px 0; /* 上下间距 */
}

.category-cloud .cloud a {
    display: inline-block; /* 分类显示为行内块 */
    margin: 5px; /* 分类间距 */
    padding: 5px 10px; /* 分类内边距 */
    background-color: #333; /* 分类背景颜色 */
    color: #fff; /* 分类文字颜色 */
    border-radius: 5px; /* 圆角 */
    text-decoration: none; /* 去掉下划线 */
    transition: background-color 0.3s; /* 悬停动画 */
    text-align: center; /* 分类文本居中 */
}

.category-cloud .cloud a:hover {
    background-color: #555; /* 悬停时背景颜色 */
}

/* ==================== 推荐文章样式 ==================== */

/* 推荐文章容器 */
.recommended-articles {
    margin-top: 30px;
}

/* 推荐文章网格布局 */
.recommended-articles .article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* 推荐文章卡片样式 */
.recommended-articles .article-card {
    background-color: #000;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

/* 推荐文章卡片鼠标悬停样式 */
.recommended-articles .article-card:hover {
    box-shadow: 0 8px 16px rgba(169, 169, 169, 0.6);
}

/* ==================== 分页样式 ==================== */

/* 分页容器 */
.pagination {
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin: 20px 0;
    gap: 10px; /* 设置元素之间的间距 */
}

/* 分页链接样式 */
.pagination a {
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    line-height: 1.5; /* 确保文本垂直居中 */
}

/* 分页链接鼠标悬停样式 */
.pagination a:hover {
    background-color: #555;
}

/* 分页文本样式（例如 "Page X of Y"） */
.pagination span {
    padding: 5px 10px;
    color: #cccccc; /* 设置文本颜色 */
    line-height: 1.5; /* 确保文本垂直居中 */
}

/* ==================== 页脚独立页面样式 ==================== */

/* 独立页面容器 */
.terms-of-service, .privacy-policy, .contact, .usc_2257 {
    text-align: center; /* 内容居中 */
    margin: 40px auto; /* 上下间距 40px，左右自动居中 */
    max-width: 800px;
    padding: 20px; /* 内边距 */
}

/* 独立页面文本样式 */
.terms-of-service p, .privacy-policy p, .contact p, .usc_2257 p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px; /* 段落间距 */
    text-align: center; /* 内容居中 */
    max-width: 700px; /* 限制文本宽度 */
    margin-left: auto; /* 文本居中 */
    margin-right: auto; /* 文本居中 */
}

/* ==================== 搜索框样式 ==================== */

/* ==================== 新增样式 ==================== */

/* 图片居中样式 */
.image-container {
    text-align: center;
    margin: 20px 0;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 视频预览图样式 */
.video-preview-container {
    margin-top: 20px;
}

.video-preview-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.video-preview-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.video-preview-images img:hover {
    transform: scale(1.05);
}