/*
Theme Name:     Jinbo.2026
Theme URI:      http://www.jinbo123.com/
Description:    佐仔志专用子主题
Template:       twentytwelve
Version:        1.9.0
*/

/* ==========================================================================
   1. 全局设置 (Global)
   ========================================================================== */
body { font-family: 'LXGW WenKai', serif; }
html { font-size: 16px; }
a { text-decoration: none; }
body.custom-background { background-color: #cecece; }

/* 标题与Logo */
.site-header h1 a, .site-header h2 { color: #dd3333; }
.site-header h2 { line-height: 1; }
.site-header h1 a img { display: block; }

/* ==========================================================================
   2. PC端布局 (Desktop)
   ========================================================================== */
header#masthead {
    position: relative;
    padding-top: 35px;    
    padding-bottom: 35px;
}
.site-header hgroup { margin: 0 !important; padding: 0; }
.site-header h1 { margin: 0 !important; padding: 0 !important; }

.header-search { 
    position: absolute;
    right: 0;
    top: 35px; 
    height: 80px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end;
    z-index: 10;
}
.header-search form { margin: 0; padding: 0; }

/* ==========================================================================
   3. 导航菜单 (PC Default)
   ========================================================================== */
.main-navigation li a {
    border-bottom: 0;
    color: #444;
    font-size: 1rem;
    text-transform: uppercase;
}
.main-navigation li .sub-menu li {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    min-width: 100px;
}
.menu-toggle { display: none; }

/* ==========================================================================
   4. 通用内容样式
   ========================================================================== */
.the_content { text-align: justify; word-break: break-word; }
.the_content p { margin-bottom: 1.5em; }
.entry-content code, .entry-content pre { font-family: 'LXGW WenKai', sans-serif; }
.entry-content a:visited { color: #21759b; }
.entry-content img, .widget-area img { border: 0; max-width: 100%; height: auto; display: block; }

.site-content article { margin-bottom: 2rem; }
.widget-area .widget h3 { font-size: 1rem; color: #069; }
.widget-area #s { width: 100%; box-sizing: border-box; }
.blogroll { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blogroll li { width: 30%; min-width: 120px; box-sizing: border-box; }

/* ==========================================================================
   5. 移动端响应式 (Mobile - 上下堆叠居中)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 隐藏干扰元素 */
    .widget-area .widget,
    .header-search { display: none !important; }

    /* 2. 移除父主题的大边距，还原全宽 */
    body .site {
        padding-left: 0 !important;  
        padding-right: 0 !important; 
        width: 100% !important;
        box-shadow: none !important; 
        margin-top: 0 !important;
    }
    
    #main {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 10px !important;
    }
    
    .site-content { margin: 0 !important; }

    /* 3. 头部容器布局 (改为垂直堆叠) */
    header#masthead {
        display: flex !important;
        /* 【关键】方向改为列 (Column)，实现上下堆叠 */
        flex-direction: column !important;
        /* 【关键】水平居中 */
        align-items: center !important;
        justify-content: center !important;
        
        padding: 20px 15px !important; 
        position: relative;
        min-height: auto;
    }

    /* 4. Logo 容器 (上部) */
    .site-header hgroup { 
        margin: 0 0 15px 0 !important; /* 底部增加 15px 间距，隔开下方的菜单 */
        padding: 0 !important; 
        line-height: 0 !important; 
        width: auto !important;
        text-align: center !important;
    }
    
    .site-header h1 {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        display: block;
    }
    
    .site-header h1 a img {
        display: block;
        margin: 0 auto; /* 图片自身居中 */
        height: auto;
    }

    /* 5. 导航容器 (下部) */
    #site-navigation.main-navigation {
        display: block;
        width: 100% !important; /* 占满宽度，确保下拉菜单也是全宽 */
        margin: 0 !important; 
        padding: 0 !important;
        position: static !important; 
        text-align: center !important; /* 让内部按钮居中 */
    }

    /* 6. 菜单按钮 (居中显示) */
    .menu-toggle { 
        display: inline-block !important; /* 改为行内块，方便居中 */
        position: static !important; 
        margin: 0 auto !important; /* 左右自动边距实现居中 */
        transform: none !important; 
        width: 40px; 
        height: 30px; 
        background: transparent; 
        border: none; 
        padding: 0; 
        cursor: pointer; 
        z-index: 1001; 
        outline: none; 
        box-shadow: none; 
    }
    
    .icon-bar { display: block; width: 100%; height: 3px; background-color: #333; margin: 6px 0; border-radius: 2px; transition: all 0.3s ease-in-out; }

    /* 下拉菜单 */
    .main-navigation ul.nav-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 10px 20px rgba(0,0,0,0.05); padding: 0; margin: 0; z-index: 1000; border-top: 1px solid #eee; text-align: center; }
    .main-navigation li { text-align: center; border-bottom: 1px solid #f9f9f9; display: block; width: 100%; }
    .main-navigation li a { display: block; padding: 15px 0; font-size: 16px; color: #444; font-weight: 500; line-height: 1.5; }
    
    .main-navigation.toggled-on ul.nav-menu { display: block; animation: fadeInDown 0.3s ease-out forwards; }
    .main-navigation.toggled-on .menu-toggle .icon-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .main-navigation.toggled-on .menu-toggle .icon-bar:nth-child(2) { opacity: 0; }
    .main-navigation.toggled-on .menu-toggle .icon-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .blogroll li { width: 45%; }
    .comments-area article { margin-bottom: 15px !important; }
    .comments-area article header { margin-bottom: 5px !important; }
    .commentlist .children { margin-left: 15px !important; }
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   6. 评论区排版优化 (间距紧凑)
   ========================================================================== */
.comments-area article { margin-bottom: 20px !important; padding-bottom: 0 !important; }
.commentlist li.comment { margin-bottom: 20px !important; }
.comments-area article header { margin-bottom: 8px !important; }
.comment-content p { margin-bottom: 0.8em !important; }