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


/* =========================
   PEICircle Global
========================= */


:root {

    --ocean-blue: #0077B6;

    --deep-blue: #023E8A;

    --lobster-red: #E76F51;

    --sand-color: #F8F5EF;

    --light-blue: #F3FAFD;

    --text-color: #243447;

    --gray: #6B7280;

}



* {

    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,

    "Segoe UI",

    "Microsoft YaHei",

    Arial,

    sans-serif;

    line-height:1.7;

}



a {

    color:var(--ocean-blue);

    text-decoration:none;

}



a:hover {

    color:var(--lobster-red);

}



img {

    max-width:100%;

    height:auto;

}



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


.container {

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 25px;

}





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


.site-header {

    background:white;

    position:sticky;

    top:0;

    z-index:99;

    box-shadow:

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

}





.header-inner {

    max-width:1200px;

    margin:auto;

    padding:15px 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}





/* Logo */

.site-branding {

    display:flex;

    align-items:center;

}



.custom-logo-link img {

    max-height:110px;

    width:auto;

}



.site-logo {


    font-size:46px;

    font-weight:800;

    color:var(--deep-blue);

    letter-spacing:1px;

}





.site-logo:hover {

    color:var(--lobster-red);

}






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


.main-navigation ul {

    display:flex;

    align-items:center;

    gap:28px;

    list-style:none;

    padding:0;

    margin:0;

}





.main-navigation a {

    font-size:16px;

    font-weight:600;

    color:#374151;

    transition:.25s;

}





.main-navigation a:hover {

    color:var(--ocean-blue);

}





/* =========================
   Homepage Base
========================= */


.homepage {

    padding-top:40px;

    padding-bottom:60px;

}




.community-grid {

    max-width:1200px;

    margin:0 auto;

    padding:0 25px;

    display:grid;

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

    gap:28px;

}



/* =========================
   Community Cards
========================= */


.community-box {

    background:white;

    border-radius:22px;

    padding:30px;

    min-height:280px;

    border-top:6px solid var(--ocean-blue);

    box-shadow:

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

    transition:

    transform .3s ease,

    box-shadow .3s ease;

}



.community-box:hover {

    transform:translateY(-8px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);

}





.community-box h2 {

    margin-top:0;

    font-size:24px;

}



.community-box h2 a {

    color:var(--deep-blue);

}



.community-box p {

    color:var(--gray);

    margin-bottom:20px;

}





.community-box ul {

    list-style:none;

    padding:0;

    margin:20px 0;

}



.community-box li {

    padding:8px 0;

    border-bottom:

    1px solid #eee;

}



.community-box li:last-child {

    border-bottom:none;

}



.community-box li a {

    color:#374151;

}



.community-box li a:hover {

    color:var(--ocean-blue);

}





/* 六个栏目品牌颜色 */


.community-box:nth-child(1){

    border-color:#0077B6;

}


.community-box:nth-child(2){

    border-color:#E76F51;

}


.community-box:nth-child(3){

    border-color:#2A9D8F;

}


.community-box:nth-child(4){

    border-color:#F4A261;

}


.community-box:nth-child(5){

    border-color:#E9C46A;

}


.community-box:nth-child(6){

    border-color:#264653;

}





.more-link {

    display:inline-block;

    margin-top:10px;

    font-weight:600;

}







/* =========================
   Category Page
========================= */


.category-page,

.search-page,

.single-page,

.page-content {

    padding:50px 0;

}





.category-header,

.search-header {

    text-align:center;

    margin-bottom:40px;

}



.category-header h1,

.search-header h1 {

    font-size:36px;

    color:var(--deep-blue);

}






.category-card,

.search-card,

.default-post,

.page-card,

.single-post {


    background:white;

    border-radius:20px;

    padding:35px;

    margin-bottom:25px;

    box-shadow:

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


}



.category-card h2,

.search-card h2 {


    margin-top:0;


}



.post-meta,

.search-meta,

.single-meta {


    color:var(--gray);

    font-size:14px;

    margin-bottom:20px;

}





.read-more {


    font-weight:600;

}






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


.single-header h1 {


    font-size:42px;

    color:var(--deep-blue);


}



.featured-image {


    margin:30px 0;

}



.single-content {


    font-size:18px;

}





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


.comments-area {


    background:white;

    border-radius:20px;

    padding:30px;

    margin-top:40px;


}



.comment-form input,

.comment-form textarea {


    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:10px;


}







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


.site-footer {


    background:var(--deep-blue);

    color:white;

    padding:50px 20px;

    text-align:center;


}



.site-footer a {


    color:white;


}



.site-footer a:hover {


    color:#FFD6C9;


}





.footer-container {


    max-width:1200px;

    margin:auto;


}







/* =========================
   404
========================= */


.error-page {


    padding:100px 0;

    text-align:center;


}



.error-box {


    background:white;

    padding:50px;

    border-radius:25px;


}



.button {


    display:inline-block;

    background:var(--ocean-blue);

    color:white;

    padding:12px 25px;

    border-radius:30px;

    margin:10px;


}



.button:hover {


    background:var(--lobster-red);

    color:white;


}







/* =========================
   Mobile
========================= */


@media(max-width:900px){


.header-inner {


    flex-direction:column;

    gap:15px;


}



.main-navigation ul {


    flex-wrap:wrap;

    justify-content:center;

    gap:15px;


}



.community-grid {


    grid-template-columns:1fr;

}



.single-header h1 {


    font-size:30px;


}



}
/* =========================
   Hero Section
========================= */


.hero-section {

    max-width:1200px;

    margin:0 auto 40px;

    padding:50px 25px;

    text-align:center;

    background:white;

    border-radius:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06);

}



.hero-section h1 {

    font-size:42px;

    color:#023E8A;

    margin-bottom:10px;

}



.hero-section p {

    font-size:20px;

    color:#6B7280;

}






.hero-links span:hover {

    background:#E76F51;

    color:white;

}
/* 调整顶部Logo图片大小 */

.custom-logo-link img,
.site-branding img {

    width: auto !important;

    max-height: 120px !important;

    height: auto !important;

}