/*
Theme Name: PEICircle
Theme URI: https://peicircle.com
Author: PEICircle
Description: PEI 华人生活社区主题
Version: 1.4.1
Text Domain: peicircle
*/


/* =====================================
   PEICircle v1.4.1 Final
   Base System
===================================== */


/* =========================
   Variables
========================= */


:root{

    --ocean-blue:#0077B6;

    --deep-blue:#023E8A;

    --lobster-red:#E76F51;

    --light-blue:#F3FAFD;

    --sand-color:#F8F5EF;

    --text-color:#243447;

    --gray:#6B7280;

    --white:#ffffff;

}



/* =========================
   Reset
========================= */


*{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    margin:0;

    padding:0;

    background:var(--light-blue);

    color:var(--text-color);

    font-family:

    -apple-system,

    BlinkMacSystemFont,

    "Microsoft YaHei",

    "PingFang SC",

    Arial,

    sans-serif;

    line-height:1.7;

}



img{

    max-width:100%;

    height:auto;

    display:block;

}



a{

    text-decoration:none;

    color:var(--ocean-blue);

    transition:.25s ease;

}



a:hover{

    color:var(--lobster-red);

}



/* =========================
   Container
========================= */


.container{

    max-width:1200px;

    margin:auto;

    padding:0 25px;

}



/* =========================
   Header
========================= */


.site-header{

    background:#fff;

    position:sticky;

    top:0;

    z-index:999;

    box-shadow:

    0 2px 15px rgba(0,0,0,.06);

}



.header-inner{

    max-width:1200px;

    margin:auto;

    padding:12px 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.site-branding{

    display:flex;

    align-items:center;

    gap:15px;

}



.custom-logo-link img,

.site-branding img{

    max-height:65px!important;

    width:auto!important;

}



.site-intro{

    display:flex;

    flex-direction:column;

}



.brand-name{

    font-size:20px;

    font-weight:700;

    color:var(--deep-blue);

}



.site-logo{

    font-size:36px;

    font-weight:800;

    color:var(--deep-blue);

}



.site-tagline{

    font-size:14px;

    color:#4B5563;

}



/* =========================
   Header Actions
========================= */


.header-actions{

    display:flex;

    align-items:center;

    gap:10px;

}



.header-actions a{

    font-size:13px;

    padding:7px 16px;

    border-radius:20px;

    background:#F3F6F8;

    color:#374151;

}



.header-actions a:hover{

    background:var(--ocean-blue);

    color:#fff;

}



/* =========================
   Navigation
========================= */


.main-navigation ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    list-style:none;

    padding:10px 25px;

    margin:0;

}



.main-navigation a{

    display:block;

    padding:8px 16px;

    border-radius:20px;

    color:#374151;

    font-weight:600;

}



.main-navigation a:hover{

    color:var(--ocean-blue);

}



.main-navigation .current-menu-item>a{

    background:var(--ocean-blue);

    color:#fff;

}



/* =========================
   Common
========================= */


.more-link{

    display:inline-block;

    margin-top:15px;

    font-weight:600;

}
/* =====================================
   Homepage
===================================== */


.homepage{

    padding-top:30px;

    padding-bottom:60px;

}



/* =========================
   Quick Tools
========================= */


.quick-tools{

    max-width:1200px;

    margin:0 auto 25px;

    padding:0 25px;

    display:flex;

    gap:15px;

}



.quick-tools div{

    background:#fff;

    padding:12px 20px;

    border-radius:14px;

    box-shadow:

    0 5px 15px rgba(0,0,0,.05);

}



/* =========================
   Notice
========================= */


.notice-box{

    max-width:1200px;

    margin:0 auto 40px;

    padding:22px 25px;

    background:#fff8e8;

    border-left:5px solid var(--lobster-red);

    border-radius:15px;

}



.notice-box h2{

    margin-top:0;

    color:#8a4b20;

}



/* =====================================
   Home Two Column
===================================== */


.home-two-column{

    max-width:1200px;

    margin:40px auto;

    padding:0 25px;

    display:flex;

    gap:35px;

}



.news-slider-section{

    flex:1.3;

}



.forum-section{

    flex:1;

}



.news-slider-section h2,
.forum-section h2{

    font-size:30px;

    color:var(--deep-blue);

}



/* =====================================
   News Slider
===================================== */


.news-slider{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    height:360px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}



.news-slide{

    display:none;

    height:100%;

}



.news-image{

    width:100%;

    height:100%;

    position:relative;

}



.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.no-image{

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eee;

}



.news-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:35px;

    color:#fff;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.75)

    );

}



.news-overlay h3{

    margin:0;

}



.news-overlay h3 a{

    color:#fff;

    font-size:28px;

}



.news-overlay h3 a:hover{

    color:#FFD6C9;

}



.news-buttons{

    text-align:center;

    margin:20px 0;

}



.news-buttons span{

    display:inline-flex;

    width:30px;

    height:30px;

    justify-content:center;

    align-items:center;

    margin:5px;

    border-radius:50%;

    background:#EAF5FA;

    cursor:pointer;

}



.news-buttons .active,
.news-buttons span:hover{

    background:var(--ocean-blue);

    color:#fff;

}



/* =====================================
   Forum
===================================== */


.forum-box{

    background:#fff;

    padding:25px;

    border-radius:22px;

    height:360px;

    overflow:hidden;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}



.forum-item{

    padding:14px 0;

    border-bottom:1px solid #eee;

}



.forum-item a{

    color:var(--text-color);

    font-size:17px;

}



.forum-item a:hover{

    color:var(--ocean-blue);

}



/* =====================================
   Life Grid
===================================== */


.life-grid{

    max-width:1200px;

    margin:50px auto;

    padding:0 25px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.life-box{

    background:#fff;

    min-height:280px;

    padding:25px;

    border-radius:22px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.06);

    transition:.25s ease;

    overflow:hidden;

}



.life-box:hover{

    transform:translateY(-4px);

    box-shadow:

    0 12px 30px rgba(0,0,0,.1);

}



.life-box h3{

    margin:0;

    font-size:25px;

    color:var(--deep-blue);

}



.life-box p{

    color:var(--gray);

}



.category-posts{

    padding:0;

    margin:15px 0;

    list-style:none;

}



.category-posts li{

    padding:8px 0;

    border-bottom:1px solid #eee;

}



.category-posts li a{

    color:var(--text-color);

}



/* =====================================
   Yellow Page
===================================== */


.yellow-page{

    max-width:1200px;

    margin:50px auto;

    padding:0 25px;

}



.yellow-page h2{

    font-size:30px;

    color:var(--deep-blue);

}



.yellow-box{

    height:220px;

    background:#fff;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gray);

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}



/* =====================================
   Advertisement
===================================== */


.advertisement{

    max-width:1200px;

    height:160px;

    margin:50px auto;

    background:#fff;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    color:var(--gray);

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}
/* =====================================
   Category Archive
===================================== */


.category-page,
.search-page,
.single-page,
.page-content{

    padding:50px 0;

}



.category-layout{

    max-width:1400px;

    margin:0 auto;

    padding:0 25px;

}



/* 分类顶部 */


.category-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.category-top h1{

    margin:0;

    font-size:36px;

    color:var(--deep-blue);

}



/* 发帖按钮 */


.post-button{

    background:var(--ocean-blue);

    color:#fff;

    padding:10px 25px;

    border-radius:25px;

    font-weight:600;

}



.post-button:hover{

    background:var(--lobster-red);

    color:#fff;

}



/* =====================================
   Category Posts
===================================== */


.category-posts{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.category-card{

    display:flex;

    gap:20px;

    width:100%;

    padding:20px;

    background:#fff;

    border-radius:20px;

    box-shadow:

    0 5px 18px rgba(0,0,0,.06);

    transition:.25s ease;

}



.category-card:hover{

    transform:translateY(-3px);

    box-shadow:

    0 12px 30px rgba(0,0,0,.1);

}



/* 图片区域 */


.post-images{

    display:flex;

    gap:10px;

    flex-shrink:0;

}



.post-thumb{

    width:180px;

    height:120px;

    border-radius:15px;

    overflow:hidden;

}



.post-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.no-image{

    background:#f1f1f1;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#999;

}



.more-images{

    display:flex;

    align-items:center;

    justify-content:center;

    width:80px;

    height:80px;

    background:#eee;

    border-radius:12px;

}



/* 内容区域 */


.post-info{

    flex:1;

    min-width:0;

}



.post-info h2{

    margin:0 0 10px;

    font-size:24px;

}



.post-info h2 a{

    color:var(--deep-blue);

}



.post-info h2 a:hover{

    color:var(--lobster-red);

}



.post-meta{

    color:var(--gray);

    font-size:14px;

    margin-bottom:10px;

}



.post-info p{

    color:#555;

    line-height:1.8;

    margin:0 0 15px;

}



.read-more{

    font-weight:600;

}



/* 分页 */


.navigation.pagination{

    margin-top:40px;

    text-align:center;

}



.navigation.pagination a,
.navigation.pagination span{

    display:inline-block;

    padding:8px 14px;

    margin:3px;

    border-radius:20px;

    background:#fff;

}



.navigation.pagination .current{

    background:var(--ocean-blue);

    color:#fff;

}



/* =====================================
   Single Article
===================================== */


.single-header{

    max-width:850px;

    margin:auto;

}



.single-header h1{

    font-size:42px;

    color:var(--deep-blue);

}



.single-meta{

    color:var(--gray);

    font-size:14px;

}



.featured-image {
    margin:30px auto;
    text-align:center;
}

.featured-image img {
    display:block;
    margin:0 auto;
}



.single-content{

    max-width:850px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

}



/* =====================================
   Post Rules
===================================== */


.post-rules{

    background:#F3FAFD;

    border-left:5px solid var(--ocean-blue);

    padding:20px;

    border-radius:15px;

    margin-bottom:25px;

}



.post-rules h3{

    color:var(--deep-blue);

}
/* =====================================
   Comments
===================================== */


.comments-area{

    max-width:850px;

    margin:50px auto;

    padding:35px;

    background:#fff;

    border-radius:20px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.06);

}



.comments-title{

    font-size:26px;

    color:var(--deep-blue);

    margin-bottom:25px;

}



.comment-list{

    list-style:none;

    padding:0;

    margin:0;

}



.comment-body{

    background:#F8FCFE;

    padding:20px;

    border-radius:15px;

    margin-bottom:20px;

}



.comment-author{

    font-weight:700;

    color:var(--deep-blue);

}



.comment-metadata{

    font-size:13px;

    color:var(--gray);

}



.comment-content{

    margin-top:15px;

    line-height:1.8;

}



.reply{

    margin-top:15px;

}



.reply a{

    color:var(--ocean-blue);

    font-weight:600;

}



/* 评论表单 */


.comment-form{

    max-width:850px;

    margin:40px auto;

}



.comment-form label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}



.comment-form input,
.comment-form textarea{

    width:100%;

    padding:12px 15px;

    border:1px solid #ddd;

    border-radius:10px;

    background:#fff;

}



.comment-form textarea{

    min-height:150px;

}



#submit,
.comment-form input[type="submit"],
button[type="submit"]{

    background:var(--ocean-blue);

    color:#fff;

    border:none;

    padding:12px 28px;

    border-radius:25px;

    cursor:pointer;

    font-weight:600;

}



#submit:hover,
.comment-form input[type="submit"]:hover,
button[type="submit"]:hover{

    background:var(--deep-blue);

}



/* =====================================
   Comment Buttons
===================================== */


.peicircle-comment-buttons{

    display:flex;

    gap:15px;

    margin-top:15px;

    font-size:14px;

}



.peicircle-comment-buttons a{

    color:var(--ocean-blue);

}



.peicircle-comment-buttons a:hover{

    color:var(--lobster-red);

}



/* =====================================
   Report Popup
===================================== */


#peicircle-report-box{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:9999;

    align-items:center;

    justify-content:center;

}



.report-inner{

    width:350px;

    max-width:90%;

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.2);

}



.report-inner h3{

    margin-top:0;

    color:var(--deep-blue);

}



.report-inner label{

    display:block;

    margin:12px 0;

}



.report-inner button{

    padding:10px 20px;

    border:none;

    border-radius:20px;

    background:var(--ocean-blue);

    color:#fff;

    cursor:pointer;

}



/* =====================================
   Footer
===================================== */


.site-footer{

    background:var(--deep-blue);

    color:#fff;

    padding:50px 20px;

    text-align:center;

}



.site-footer a{

    color:#fff;

}



.site-footer a:hover{

    color:#FFD6C9;

}



.footer-container{

    max-width:1200px;

    margin:auto;

}



.footer-container p{

    margin:8px 0;

    font-size:14px;

}



/* =====================================
   Responsive
===================================== */


@media(max-width:900px){


.header-inner{

    flex-direction:column;

    gap:15px;

}



.header-actions{

    justify-content:center;

    flex-wrap:wrap;

}



.main-navigation ul{

    gap:10px;

    flex-wrap:wrap;

}



.home-two-column{

    flex-direction:column;

}



.life-grid{

    grid-template-columns:repeat(2,1fr);

}



.category-card{

    gap:15px;

}



.post-thumb{

    width:120px;

    height:90px;

}


}



@media(max-width:768px){


.container{

    padding-left:18px;

    padding-right:18px;

}



.category-top{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}



.category-card{

    flex-direction:column;

}



.post-images{

    width:100%;

}



.post-thumb{

    width:100%;

    height:220px;

}



.post-info h2{

    font-size:22px;

}



.news-slider{

    height:280px;

}



.news-overlay{

    padding:20px;

}



.news-overlay h3 a{

    font-size:22px;

}



.life-grid{

    grid-template-columns:1fr;

}



.post-button{

    width:100%;

    text-align:center;

}



.comments-area{

    padding:20px;

}



.site-footer{

    padding:35px 15px;

}



}



@media(max-width:600px){


.site-logo{

    font-size:30px;

}



.brand-name{

    font-size:17px;

}



.site-tagline{

    font-size:12px;

}



.main-navigation ul{

    overflow-x:auto;

    flex-wrap:nowrap;

}



.main-navigation li{

    flex-shrink:0;

}



.comment-body{

    padding:15px;

}


}
/* =====================================
   PEICircle News Category Layout v1.5
   追加到现有 style.css 最底部
===================================== */


/* 普通分类页仍然保持居中 */

.category-layout{
    max-width:1200px;
    margin:0 auto;
    padding:0 25px;
}


/* 资讯页三栏布局 */

.news-category-layout{
    max-width:1500px;
    display:grid;
    grid-template-columns:250px minmax(0, 900px) 250px;
    justify-content:center;
    align-items:start;
    gap:28px;
}


/* 中间资讯主栏 */

.news-category-layout .category-main{
    width:100%;
    min-width:0;
}


/* 侧栏 */

.news-sidebar{
    position:sticky;
    top:125px;
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0;
}


/* 侧栏卡片 */

.sidebar-panel{
    background:#fff;
    padding:20px;
    border-radius:18px;
    box-shadow:0 5px 18px rgba(0,0,0,.055);
}

.sidebar-panel h3{
    position:relative;
    margin:0 0 16px;
    padding-bottom:12px;
    color:var(--deep-blue);
    font-size:19px;
    line-height:1.4;
}

.sidebar-panel h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:38px;
    height:3px;
    border-radius:10px;
    background:var(--lobster-red);
}


/* 侧栏普通列表 */

.sidebar-list,
.sidebar-links{
    padding:0;
    margin:0;
    list-style:none;
}

.sidebar-list li,
.sidebar-links li{
    padding:11px 0;
    border-bottom:1px solid #edf0f2;
}

.sidebar-list li:last-child,
.sidebar-links li:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.sidebar-list a,
.sidebar-links a{
    display:block;
    color:#374151;
    font-size:14px;
    line-height:1.65;
}

.sidebar-list a:hover,
.sidebar-links a:hover{
    color:var(--ocean-blue);
}


/* 热门资讯编号 */

.popular-news-list{
    margin:0;
    padding-left:25px;
}

.popular-news-list li{
    padding:10px 0 10px 4px;
    border-bottom:1px solid #edf0f2;
    color:var(--lobster-red);
    font-weight:700;
}

.popular-news-list li:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.popular-news-list a{
    color:#374151;
    font-size:14px;
    font-weight:500;
    line-height:1.65;
}

.popular-news-list a:hover{
    color:var(--ocean-blue);
}


/* 暂无内容提示 */

.sidebar-empty{
    margin:0;
    color:var(--gray);
    font-size:14px;
}


/* 广告占位框 */

.sidebar-ad{
    min-height:300px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:2px dashed #d7e0e5;
    border-radius:18px;
    background:rgba(255,255,255,.62);
    color:#9ca3af;
    text-align:center;
}

.sidebar-ad span{
    font-size:17px;
    font-weight:700;
}

.sidebar-ad small{
    font-size:12px;
}


/* 分类标题说明 */

.category-heading{
    min-width:0;
}

.category-description{
    margin-top:6px;
    color:var(--gray);
    font-size:14px;
}

.category-description p{
    margin:0;
}


/* 资讯列表顶部 */

.news-category-layout .category-top{
    margin-bottom:24px;
}


/* 资讯卡片控制宽度和比例 */

.news-category-layout .category-card{
    padding:18px;
    gap:18px;
    border:1px solid rgba(2,62,138,.035);
}

.news-category-layout .post-images{
    max-width:300px;
}

.news-category-layout .post-thumb{
    width:210px;
    height:135px;
}

.news-category-layout .post-images .post-thumb:nth-child(n+2){
    width:82px;
    height:64px;
}

.news-category-layout .more-images{
    width:64px;
    height:64px;
    flex-shrink:0;
}


/* 标题和摘要 */

.news-category-layout .post-info h2{
    margin:0 0 8px;
    font-size:22px;
    line-height:1.45;
}

.news-category-layout .post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:8px;
}

.news-category-layout .post-info p{
    margin:0 0 10px;
    line-height:1.7;
}


/* 无内容卡片 */

.category-empty{
    padding:50px 25px;
    background:#fff;
    border-radius:20px;
    text-align:center;
    box-shadow:0 5px 18px rgba(0,0,0,.06);
}

.category-empty h2{
    margin:0 0 8px;
    color:var(--deep-blue);
}

.category-empty p{
    margin:0;
    color:var(--gray);
}


/* 分页 */

.category-pagination{
    margin-top:35px;
}


/* 中等屏幕：隐藏左侧栏，保留右侧栏 */

@media(max-width:1350px){

    .news-category-layout{
        max-width:1180px;
        grid-template-columns:minmax(0, 880px) 250px;
    }

    .news-sidebar-left{
        display:none;
    }

}


/* 平板：侧栏全部隐藏 */

@media(max-width:1050px){

    .news-category-layout{
        max-width:920px;
        display:block;
    }

    .news-sidebar{
        display:none;
    }

}


/* 手机端 */

@media(max-width:768px){

    .category-layout,
    .news-category-layout{
        padding-left:16px;
        padding-right:16px;
    }

    .news-category-layout .category-card{
        padding:15px;
    }

    .news-category-layout .post-images{
        max-width:none;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .news-category-layout .post-thumb,
    .news-category-layout .post-images .post-thumb:nth-child(n+2){
        width:100%;
        height:165px;
    }

    .news-category-layout .post-images .post-thumb:first-child:last-child{
        grid-column:1 / -1;
        height:220px;
    }

    .news-category-layout .more-images{
        width:100%;
        height:165px;
    }

    .news-category-layout .post-info h2{
        font-size:21px;
    }

}