/*
    Theme Name: BlogTech
    Author: KuaKee Team
    Author URI: https://blog.kuakee.com/
    Requires at least: 5.6
    Description: 
    Tested up to: 5.6
    Requires PHP: 5.6
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: blogtech
    Tags: two-columns
    BlogTech WordPress Theme, (C) 2020 KuaKee.com
    BlogTech is distributed under the terms of the GNU GPL.
*/
body {
    color: #262626;
    font-family: "Chinese Quote","-apple-system","BlinkMacSystemFont","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 13px;
}
a {
    text-decoration: none !important;
}

header {
    background-color: #F6F6F6;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 0 5px #ddd;
}
footer {
    background-color: #3b3b3b;
    color: #fff;
}

.avatar {
    border-radius: 50%;
    margin-right: .25em;
}
.xshadow {
    box-shadow: 1px 1px 1em #efefef;
}

.site-title {
    background: #4285f4;
}

.site-title,
.site-title a {
    color: #fff;
}

.main-menu, .post-navi, .categories ul, #comments ul, header ul, footer ul {
    list-style-type: none;
}


main#content .main-menu,
main#content .categories ul,
footer .footer-menu {
    margin: 0;
    padding: 0;
}
main#content .main-menu .menu-item > a {
    color: #262626;
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: .25em 0;
    padding: .25em .5em;
    text-align: center;
}
main#content .categories {
    background-color: #F6F6F6;
    border-radius: .25em;
}
main#content .categories > ul > li {
    flex: 0 0 12.5%;
}
main#content .categories > ul > li > a {
    color: #262626;
    display: block;
    font-size: 1.25em;
}
main#content .categories > ul > li > a:hover,
main#content .categories > ul > li.current > a,
main#content .main-menu .menu-item > a:hover,
main#content .main-menu .menu-item.current-menu-item > a {
    background-color: #4285f4;
    color: #fff;
}

footer .footer-menu {
    align-items: center;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    padding: 2em;
}
footer .footer-menu li {
    margin: 0 .5em;
    text-align: center;
}
footer .footer-menu li a {
    color: #fff;
    font-size: 1.25em;
}
footer .footer-menu li a:hover {
    color: #b3ccf4;
}

main#content .post-date {
    border-bottom: 1px solid #ddd;
    font-size: 1.5em;
    font-weight: bold;
    padding: .5em;
}
main#content article.post h1.title {
    font-size: 2.5em;;
}
main#content article.post h3.title {
    font-size: 1.5em;
}
main#content article.post a {
    color: #262626;
}
main#content article.post a:hover {
    color: #4d7fd0;
}
main#content article.post .summary {
    list-style: none;
}
main#content article.post.list-item:first-child {
    margin-top: .25em !important;
}
main#content article.post.list-item:hover {
    box-shadow: 1px 1px 1em #efefef;
} 
main#content article.post.list-item.sticky::before {
    background-color: #F00;
    color: #fff;
    content: '推荐';
    display: block;
    padding: .25em .5em;
    position: absolute;
} 
main#content article.post.list-item .wp-post-image {
    max-width: 160px;
}

main#content article.post > .content {
    font-size: 1.25em;
    line-height: 1.5em;
}
main#content article.post > .content a {
    color: #4d7fd0;
}
main#content article.post > .content a:hover {
    text-decoration: underline !important;
}

main#content .post-navi { 
    font-size: 1.25em;
}

/* comment-list 和 comment-form 的标题样式 */
main#content h3.comment-reply-title,
main#content h3.comments-title {
    font-size: 1.5em;
}
/* comment-list style - start */
main#content #comments {
    border-top: 1px solid #ddd;
} 
main#content #comments ul > li {
    border-radius: .5em;
    box-shadow: 1px 1px 5px #ddd;
    margin: 1em 0;
    padding: .5em;
}
main#content #comments .comment > .comment-body {
    display: flex;
    flex-flow: row wrap;
}
main#content #comments .comment > .comment-body > .vcard, 
main#content #comments .comment > .comment-body > .comment-meta {
    flex: 0 0 50%;
}
main#content #comments .comment > .comment-body > p,
main#content #comments .comment > .comment-body > .reply {
    flex: 0 0 100%;
}
main#content #comments .comment > .comment-body > .comment-meta,
main#content #comments .comment > .comment-body > .reply {
    text-align: right;
}
main#content #comments .comment > .comment-body > p {
    background-color: #90da6a;
    border-radius: .5em;
    margin: .75em 0 .5em;
    padding: .75em 1em;
    width: 100%;
}
main#content #comments .comment > .comment-body > .vcard > .says {
    margin-left: .25em;
}
main#content #comments .comment > .comment-body > .comment-awaiting-moderation {
    display: none;
}
/* comment-list style - end */

/* comment-form style - start */
main#content .comment-form {
    box-shadow: 1px 1px 5px #ddd;
    display: flex;
    flex-flow: column nowrap;
    padding: 1em;
} 
main#content .comment-form .comment-form-author,
main#content .comment-form .comment-form-email,
main#content .comment-form .comment-form-url {
    width: 30%;
}
main#content .comment-form .comment-form-author input,
main#content .comment-form .comment-form-email input,
main#content .comment-form .comment-form-url input,
main#content .comment-form textarea {
    background-color: #F0F0F0;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: .5em;
    width: 100%;
} 
/* comment form style - end */

/* card box style (侧边栏) */
.card-box {
    border-top: 3px solid #4285f4;
    box-shadow: 1px 1px 5px #ddd;
}
.card-box > .title {
    font-size: 1.5em;
    margin-left: .25em;
}
.card-box > .title::after {
    border-bottom: 1px solid #ddd;
    content: " ";
    display: block;
    padding-top: .25em;
    width: 1.5em;
}
.card-box > .content {
    min-height: 200px;
}
.card-box > .content ul {
    list-style-type: none;
}
.card-box.light-box {
    border: none;
    box-shadow: none;
}
.card-box.light-box > .title {
    margin-left: .75em;
}
.card-box.light-box > .title::before {
    border-left: 4px solid #b3ccf4;
    border-right: 4px solid #b3ccf4;
    content: ' ';
    display: block;
    left: 10px;
    height: .75em;
    padding: 0 2px;
    position: absolute;
    transform:skew(-20deg);
    width: .5em;
}
.card-box.light-box > .title::after {
    display: none;
} 
.card-box > .content ul > li {
    padding: .5em 0;
}
.card-box > .content ul > li a {
    color: #262626;
    padding: .25em 0;
}
.card-box > .content ul > li a:hover {
    color: #4d7fd0;
}
.card-box.light-box > .content > ul > li { 
    border-bottom: 1px solid #ddd;
} 

.card-box > .content ul > li a.title,
.card-box > .content ul > li a.display_name {
    font-size: 1.1em;
}
.card-box > .content > .avatar-box .display_name {
    font-size: 1.5em
}
.card-box > .content > .author-list > li {
    display: flex;
    margin: .75em 0;
    padding: .75em .5em;
}
.card-box > .content > .author-list > li .avatar {
    margin-right: .5em;
}
.card-box > .content > .author-list > li .display_name {
    font-weight: bold;
}

.card-box > .content > ul.author-post-list {
    border-left: 1px solid #b3ccf4;
    padding-left: 1em !important;
}
.card-box > .content > ul.author-post-list > li {
    border-bottom: none;
}
.card-box > .content > ul.author-post-list > li::before {
    background-color: #4d7fd0;
    border-radius: 50%;
    content: ' ';
    display: inline-block;
    height: 10px;
    left: -1.5em; 
    margin-right: -1em;
    position: relative;
    width: 10px;
}
.card-box > .content > ul.hot-post-list > li .comment-user-list > .avatar:not(:first-child) {
    margin-left: -10px !important;
}
.card-box > .content > ul.author-post-list > li.pure-link {
    background-color: #4285f4;
    font-size: 1.25em;
}
.card-box > .content > ul.author-post-list > li.pure-link a {
    color: #fff;
}
.card-box > .content > ul.author-post-list > li.pure-link::before {
    display: none;
}
.card-box > .content > ul.recent-comment-list > li {
    border-bottom: none;
}
.card-box > .content > ul.recent-comment-list > li .message-box {
    background-color: #90da6a;
    border-radius: .5em;
}
main#content #comments .comments-list .comment-body > p::before,
.card-box > .content > ul.recent-comment-list > li .message-box::before {
    content: ' ';
    display: block;
    height: 1px;
    width: 1px;
    position: absolute;
    margin-top: -15px;
    border-top: none;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #90da6a;
    border-right: 10px solid transparent;
}

/* responsible style */
@media screen and (max-width: 1024px) {
    
    #body-sidebar { display: none;}
    #main-menu { flex: 0 0 12.5% !important; max-width: 12.5%; }
    #main-body { flex: 0 0 87.5% !important; max-width: 87.5%; }
    #body-content { flex: 0 0 100% !important; max-width: 100%; }
    
    
}
@media screen and (max-width: 760px) {

    .site-title { width: 100%; }
    #searchform, #searchform .custom-control {
        width: 100%;
    }
    #searchform .custom-control {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        padding: .25em .5em;
    }
    #searchform .custom-control > .form-control {
        margin-right: .5em;
    }
    #searchform .custom-control > .btn {
        width: 7.5em;
    }
    #searchform .hot-tags {
        margin-bottom: .5em;;
    }
    
    #main-menu, #body-sidebar { display: none;}
    #main-body, #body-content { flex: 0 0 100% !important; max-width: 100%; }
    #body-content { padding: .25em 2.5em }
    
    #body-content .categories {
        display: none !important;
    }
    #body-content article.post.list-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #body-content article.post > .image-preview img.wp-post-image {
        height: 75px !important;
        width: 125px !important;
    }
    #body-content article.post > .summary > .info {
        flex-direction: column;
    }
}