/*
Theme Name: BlankEcho
Theme URI: https://www.jingxialai.com/4839.html
Author: summer
Author URI: https://www.jingxialai.com
Description: 一个简约的纯文本型开源博客主题！
Version: 1.0.4
*/

/* 将body、各级标题、段落、有序列表、无序列表和图形元素的外边距和内边距设置为0 */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure {
    margin: 0;
    padding: 0;
}


ul li, ol li {
    padding-left: 20px; /* 内容距离左边 20px */
    list-style-position: inside; /* 项目符号与内容一起缩进 */
}


/* 设置body元素 */
body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

/* 确保html和body元素占满整个页面高度，并清除默认边距 */
html, body {
    height: 100%;
    margin: 0;
}

/* 移除所有链接的下划线 */
a {
    text-decoration: none;
}

a:hover, a:focus {
    text-decoration: none;
}

/* 容器样式 */
.becontainer {
    display: flex; 
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 980px;
    padding: 0 20px;
}

/* 主要内容区域样式 */
#primary {
    flex: 3; /* 主要内容区域占据3份空间 */
    padding: 20px;
}

/* 侧边栏样式 */
#secondary {
    flex: 1; /* 侧边栏占据1份空间 */
    padding-top: 20px;
}


/* 头部样式 */
.site-header {
    background-color: #ffffff;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

.site-title h1 {
    font-size: 2em;
    margin: 0;
}

.site-title p {
    display: none; /* 隐藏头部副标题*/
}


/* 头部标题链接 */
.site-title a {
    font-weight: bold;
    color: #333;
    text-decoration: none;
}


/* 主导航样式 */
.main-navigation {
    margin-top: 15px;
}

/* 主导航列表的样式 */
.main-navigation ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

/* 主导航列表项的样式 */
.main-navigation li {
    display: inline-block;
    margin: 0 15px;
}

.main-navigation a {
    text-decoration: none;
    color: #333;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: #0073aa;
}

/* 内容区域样式 */
.becontent-area {
    padding: 40px 0;
}

/* 确保主要内容区域占据剩余空间 */
.site-content {
    min-height: calc(100vh - 60px - 80px); /* 根据头部和底部的高度进行调整 */
    /* display: flex; */
    flex-direction: column;
}

/* 网站主体样式 */
.besite-main {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 单独页面主体样式 */
.pagesite-main {
    background-color: #ffffff;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 980px;
}

/* 页面标题样式 */
.page-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

/* 文章标题 */
.entry-header {
    margin-bottom: 20px;
    text-align: center;
}

/* 文章区域 */
.post-content {
    padding: 0 20px;
}

/* 文章列表容器样式 */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

/* 单篇文章卡片样式 */
.article-card {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
}

.article-card a {
    color: #333;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.article-card .post-thumbnail {
    flex: 0 0 150px;
    /* height: 100px; 文章卡片的图片高度*/
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
}

.article-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文章卡片的文章内容样式 */
.article-card .article-content {
    flex: 1;
}

/* 文章卡片的标题样式 */
.article-card .entry-title {
    font-size: 1.5em;
    margin: 0 0 10px 0;
    color: #333;
}

/* 文章卡片的元数据样式 */
.article-card .entry-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 10px;
}

/* 文章卡片的摘要样式 */
.article-card .entry-summary {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
     /* height: 60px;
    overflow: hidden;*/
    /* 可以固定文章卡片的高度 */
}


/* 文章内容样式 */
.entry-content {
    font-size: 1.1em;
    line-height: 1.8;
    padding: 0 20px;
}

/* 文章页脚样式 */
.entry-footer {
    margin-top: 20px;
    font-size: 0.9em;
    color: #777;
}

/* 分类链接和标签链接样式 */
.cat-links, .tags-links {
    display: inline-block;
    margin-right: 15px;
}

.cat-links a, .tags-links a {
    text-decoration: none;
    color: #0073aa;
    transition: color 0.3s ease;
}

.cat-links a:hover, .tags-links a:hover {
    color: #005177;
}

/* 分页样式 */
.page-links {
    margin-top: 20px;
}

/* 分页链接的样式 */
.page-links a {
    text-decoration: none;
    background-color: #0073aa;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.page-links a:hover {
    background-color: #005177;
}

/* 分页中的页码样式 */
.page-links span {
    padding: 5px 10px;
    background-color: #e0e0e0;
    border-radius: 3px;
}


/* 底部样式 */
.site-footer {
    background-color: #333;
    color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

/* 底部小部件的样式 */
.footer-widgets {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* 底部小部件区域的样式 */
.footer-widget-area {
    flex: 1;
    max-width: 300px;
}


/* 底部备案号和网安备案号的样式 */
.site-footer .beian-info {
    margin-bottom: 10px; /* 调整与版权信息之间的间距 */
}

.site-footer .beian-info p {
    color: #cccccc; /* 将文本颜色设置为灰白色 */
    margin: 0;
}

.site-footer .beian-info .beian-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle; /* 使图标与文本垂直居中对齐 */
    margin-right: 5px; /* 调整图标与文本之间的间距 */
}

.site-footer .beian-info a {
    color: #cccccc; /* 链接文本颜色 */
    text-decoration: none; /* 去除下划线 */
}

.site-footer .beian-info a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 底部版权信息样式 */
.site-info {
    font-size: 0.9em;
}

.site-info a {
    color: #cccccc; /* 链接文本颜色 */
}

/* 侧边栏样式 */
.sidebar {
    margin-top: 40px;
}

/* 侧边栏小工具样式 */
.widget {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.widget-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #333;
}

.widget ul li {
    list-style-type: none;
}

.widget ul li a {
    color: #000;
    display: inline-block;  /* 将链接转换为块级元素，展示触发特效 */
}

.widget ul li a:hover {
    transform: scale(1.05);
}

.widget.widget_tag_cloud a:hover {
    transform: scale(1.05);
	display: inline-block;
}

/* 确保文章和页面中的大型图像在父容器里面 */
.article-card img,
.post-content img,
.article-content img,
.entry-content img,
.page-content img {
    max-width: 100%; /* 确保图像不超过容器的宽度 */
    height: auto; /* 保持长宽比 */
    display: block; /* 删除任何默认的行间距 */
    margin: 0 auto; /* 将图像水平居中 */
}



/* 移动菜单 */
.mobile-menu-toggle {
    display: none; /* 默认下隐藏 */
    cursor: pointer;
}

.mobile-menu-toggle .menu-icon {
    font-size: 24px;
}

/* 主导航 */
#site-navigation.active {
    display: block;
    position: absolute;
    top: 60px; /* 根据页眉高度进行调整 */
    right: 0;
    width: 100%;
    z-index: 9999;
}

#site-navigation.active ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#site-navigation.active ul li {
    border-bottom: 1px solid #444;
}

#site-navigation.active ul li a {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
}


/* 分页按钮 */
.navigation.pagination {
    text-align: center;
    margin: 20px 0;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.nav-links a, .nav-links span {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to right, #00bfff, #1e90ff); /* 渐变蓝色 */
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav-links a:hover, .nav-links a:focus {
    background: linear-gradient(to right, #1e90ff, #00bfff); /* 反向渐变效果 */
    color: #ffffff;
}

.nav-links .current {
    background: linear-gradient(to right, #0066cc, #004080); /* 深蓝渐变 */
    color: #ffffff;
    cursor: default;
}

.nav-links .prev.page-numbers, .nav-links .next.page-numbers {
    background: linear-gradient(to right, #00bfff, #1e90ff); /* 渐变蓝色 */
    border-radius: 5px;
}

.nav-links .prev.page-numbers:hover, .nav-links .next.page-numbers:hover {
    background: linear-gradient(to right, #1e90ff, #00bfff); /* 反向渐变效果 */
}



/* 搜索页面 */
.custom-search-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 980px;
    padding: 20px;
}

.custom-search-content {
    width: 65%;
    margin-right: 5%;
}

.custom-search-background {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-search-title {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.custom-search-result {
    margin-bottom: 30px;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.custom-search-result-title {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.custom-search-result-excerpt {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
}

.custom-search-sidebar {
    width: 30%;
}


/* 侧边栏搜索 */
.widget_search {
    margin-bottom: 30px;
}

.widget_search .search-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.widget_search .search-field:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}

.widget_search .search-submit {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(to right, #00bfff, #1e90ff); /* 渐变蓝色 */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s ease; /* 渐变背景的过渡 */
    text-transform: uppercase;
}

.widget_search .search-submit:hover {
    background: linear-gradient(to right, #1e90ff, #00bfff); /* 反向渐变效果 */
}



/* 404样式 */
.becustom-404-container {
    text-align: center;
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.becustom-404-header .page-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
}

.becustom-404-page-content p {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 30px;
}

.becustom-404-recent-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.becustom-404-recent-posts li {
    margin-bottom: 10px;
}

.becustom-404-recent-posts li a {
    text-decoration: none;
    color: #0073aa;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.becustom-404-recent-posts li a:hover {
    color: #005a8c;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse; /* 合并单元格边框 */
    margin-bottom: 20px; /* 表格底部间距 */
}

th, td {
    padding: 12px; /* 单元格内边距 */
    text-align: left; /* 文本左对齐 */
    border: 1px solid #ddd; /* 边框样式 */
}

th {
    background-color: #f5f5f5; /* 表头背景色 */
    font-weight: bold; /* 表头加粗 */
    color: #333; /* 表头文字颜色 */
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 偶数行背景色 */
}

tbody tr:hover {
    background-color: #e0e0e0; /* 鼠标悬停行的背景色 */
}

/* 对齐方式 */
td {
    vertical-align: middle; /* 单元格垂直居中 */
}

/* 表格边框 */
table, th, td {
    border: 1px solid #ddd;
}

/* 移动端 */
@media (max-width: 768px) {
    /* 内容区域 */
    #primary {
        flex: 1 1 100%; /* 使主内容全宽 */
        order: 0; /* 将主要内容保留在侧边栏上方 */
    }
    
    /* 主体 */
    .besite-main {
        padding: 15px;
    }

    .pagesite-main {
        width: 100%;
    }

    /* 区域 */
    .becontainer {
        padding: 0; /* 移除小屏幕上的容器填充物 */
        flex-direction: row;
    }

    /* 侧边栏 */
    #secondary {
        flex: 1 1 100%; /* 边栏全宽 */
        margin-top: 20px;
        padding-top: 20px;
        order: 1; /* 将边栏移至底部 */
    }

    /* 文章卡片 */
    .article-card {
        flex: 1 1 100%;
    }

    /* 文章卡片 */
    .article-card .entry-summary {
        display: none;
    }

    /* 内容图片 */
    .post-content img,
    .page-content img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0; /* 移除手机屏幕的边距 */
    }


    /* 404 */
    .custom-404-header .page-title {
        font-size: 2em;
    }

    .custom-404-content {
        padding: 30px;
    }

    /* 搜索 */
    .widget_search .search-field,
    .widget_search .search-submit {
        padding: 12px;
    }

    .custom-search-content,
    .custom-search-sidebar {
        width: 100%;
        margin-right: 0;
    }

    .custom-search-sidebar {
        margin-top: 20px;
    }

    .nav-links a, .nav-links span {
        padding: 10px 10px;
    }

    /* 菜单 */
    #site-navigation {
        display: none;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        z-index: 9999;
    }

    .mobile-menu-toggle {
        display: block; /* 在手机上显示菜单切换 */
    }

    #site-navigation.active {
        display: block;
    }

    #site-navigation ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #site-navigation ul li {
        border-bottom: 1px solid #444;
    }

    #site-navigation ul li a {
        display: block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
    }

    .main-navigation li {
        display: block;
        margin: 10px 0;
    }

    .main-navigation {
        margin-top: 0;
    }


    /* 底部边栏 */
    .footer-widgets {
        flex-direction: column;
        align-items: center;
    }

    .footer-widget-area {
        width: 100%;
        margin-bottom: 20px;
    }

    .footer-widget-left,
    .footer-widget-right {
        text-align: center;
    }
}


/* 心情动态页面的容器 */
/* 主内容区域 */
.social-site-main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* 心情动态页面的容器 */
.social-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    margin-top: 15px;
}

/* 单个心情动态 */
.social-post {
    display: flex;
    flex-direction: column; /* 纵向排列子元素 */    
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

/* 鼠标悬停效果 */
.social-post:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 动态内容的文本 */
.social-content {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #333;
}

/* 动态内容中的图片 */
.social-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 处理心情动态中的图片 */
.social-post img {
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 根据图片数量设置不同的样式 */
.social-post.one-image img {
    width: 100%;
}

.social-post.two-images img {
    width: 49%;
    float: left;
    margin-right: 2%;
}

.social-post.two-images img:nth-child(2n) {
    margin-right: 0;
}

.social-post.three-or-more-images img {
    width: 33%;
    float: left;
    margin-right: 0.3333%;
}

.social-post.three-or-more-images img:nth-child(3n) {
    margin-right: 0;
}

/* 动态内容中的视频 */
.social-content video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 时间戳元数 */
.social-meta {
    font-size: 14px;
    color: #888;
    text-align: right;
    margin-top: auto;
}

/* 时间戳的样式 */
.social-time {
    font-style: italic;
}

/* 动态分页容器 */
.social-container .socialpagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    gap: 5px;
}

/* 分页列表项样式 */
.social-container .socialpagination li {
    margin: 0;
}

/* 分页链接和当前页面样式 */
.social-container .socialpagination a,
.social-container .socialpagination span {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    color: #333;
    background-image: linear-gradient(135deg, #f4f4f4, #e2e2e2);
    border: 2px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 悬停和当前页面样式 */
.social-container .socialpagination a:hover,
.social-container .socialpagination .current {
    background-image: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    border-color: #3498db;
}

/* 当前页面的样式 */
.social-container .socialpagination .current {
    font-weight: bold;
}

/* 上一页和下一页按钮的样式 */
.social-container .socialpagination .prev a,
.social-container .socialpagination .next a {
    font-weight: bold;
    background-image: linear-gradient(135deg, #e2e2e2, #ccc);
    border-color: #ccc;
    color: #555;
}

/* 上一页和下一页按钮的悬停样式 */
.social-container .socialpagination .prev a:hover,
.social-container .socialpagination .next a:hover {
    background-image: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    border-color: #3498db;
}

/* 确保不与全局样式冲突 */
.social-container .socialpagination a,
.social-container .socialpagination span {
    box-sizing: border-box;
    margin: 0;
    padding: 12px 20px;
}

/* 针对手机端的样式调整 */
@media (max-width: 767px) {
    /* 保持与桌面端一致的布局逻辑 */
    .social-post.one-image img {
        width: 100%;
    }

    .social-post.two-images img {
        width: 49%;
        float: left;
        margin-right: 2%;
    }

    .social-post.two-images img:nth-child(2n) {
        margin-right: 0;
    }

    .social-post.three-or-more-images img {
        width: 33%;
        float: left;
        margin-right: 0.3333%;
    }

    .social-post.three-or-more-images img:nth-child(3n) {
        margin-right: 0;
    }
    .social-container .socialpagination {
        display: block;
        justify-content: center;
        margin: 20px 0;
        padding: 5px;
    }
}