/*
  Blog CSS
*/

/* Progress Bar */
#progress-bar {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 5px;
    background-color: var( --white );
    z-index: 999999;
}

/* Blog Post List */
.blog-post-list {
    display: grid;
    gap: 50px;
    margin-bottom: 70px;

    .article-card {
        border: 1px solid transparent;
        background: var( --gray-darker );
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        transition: all 0.2s ease-in-out;

        &:hover {
            border-color: var( --gray-dark );
        }

        .inner {
            display: grid;
            gap: 10px;
            border-radius: 10px;
        }

        .img-wrapper {
            overflow: hidden;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .content {
            padding: 30px 25px;
            font-size: 16px;
            line-height: 1.7em;
            color: var( --gray );
        }

        h3 {
            font-size: 25px;
            line-height: 1.4em;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .excerpt {
            text-overflow: ellipsis;
            word-wrap: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 35px;
        }

        a {
            text-decoration: none;
        }
    }
}


/* Post Category */
.post-category {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;

    a {
        display: inline-block;
        font-size: 12px;
        line-height: 1.2em;
        font-weight: 700;
        padding: 5px 0px;
        text-transform: uppercase;
        border-radius: 50px;
        color: var(--gray-light);

        &:before {
            display: inline-block;
            position: relative;
            left: 0;
            top: 0;
            border-radius: 50%;
            width: 6px;
            height: 6px;
            border: 1px solid white;
            background: transparent;
            margin-right: 7px;
        }
    }

    &.lg {
        gap: 15px;
    }
}


/* Pagination */
.page-numbers {
    padding: 10px 10px;
    font-weight: 600;
}

a.page-numbers:hover {
    text-decoration: underline;
}


/*<editor-fold desc="Author Date Info">*/
.author-date-info {
    display: flex;
    align-items: center;
    gap: 12px;

    img {
        border-radius: 50px;
    }

    .name-date {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        line-height: 20px;

        .author-name {
            text-transform: uppercase;
            color: var(--white);
            font-weight: 600;
        }

        .post-date {
            color: var(--gray-light);
        }
    }
}
/*</editor-fold>*/


/* Sidebar */
.blog-sidebar {
    h4 {
        font-size: 30px;
        line-height: 1.3em;
        margin-bottom: 20px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .all-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .category-item {
            background: var(--gray-darker);
            padding: 2px 19px;
            border-radius: var(--bdr-radius);
            font-size: 15px;
            font-weight: 600;
            border: 1px solid #6e6e6e;
            transition: all 0.2s ease-in-out;
            position: relative;

            &:hover {
                border-color: var(--gray-light);
                text-decoration: none;
            }

            .post-count {
                display: none;
                color: var(--gray-light);
                font-size: 16px;
            }
        }
    }

}


/* Single Post */
body.single-post {
    /*<editor-fold desc="Meta Info Single Post">*/
    .meta-list {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mins {
            font-size: 15px;
            line-height: 24px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
    }

    .author-date-info {
        .name-date .author-name {
            font-size: 13px;
            line-height: 24px;
            text-transform: none;
        }

        .auth-img {
            width: 40px;
            height: 40px;
        }
    }
    /*</editor-fold>*/

    /*<editor-fold desc="Social Share">*/
    /* Social Share */
    .social-share-icons {
        display: inline-flex;
        font-size: 15px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--gray-dark);

        a {
            color: var(--white);
            width: 38px;
            height: 38px;
            background: var(--dark);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.2s ease-in-out;

            &:hover {
                background: var(--gray-dark);
            }
        }
    }

    #social-share-vertical-wrapper {
        position: sticky;
        top: 20%;
        z-index: 2;
    }

    .social-share-vertical {
        position: absolute;
        left: -110px;

        .social-share-icons {
            flex-flow: column;
            align-items: center;
        }
    }
    /*</editor-fold>*/

    /*<editor-fold desc="Author Bio">*/
    /* Author Bio */
    .author-bio {
        display: flex;
        gap: 30px;
        background: var(--gray-darker);
        padding: 40px 30px;
        border-radius: 10px;

        .author-avatar img {
            border-radius: 50%;
            width: 80px;
        }

        .author-name h4 {
            font-size: 18px;
            line-height: 1.2em;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .bio {
            font-size: 16px;
            line-height: 1.8em;
        }
    }
    /*</editor-fold>*/
}

/*<editor-fold desc="Table of Contents">*/
/* Table of contents */
.lwptoc-light .lwptoc_i {
    color: var(--white) !important;
    border-radius: 5px;
    padding: 32px 40px;
}

.lwptoc_item_number {
    background: var(--gray-dark);
    border-radius: 100px;
    color: var( --white );
    display: inline-flex;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    height: 31px;
    line-height: 27px;
    text-align: center;
    width: 30px;
    margin-right: 10px !important;
}

.lwptoc_header {
    margin-bottom: 25px !important;
}

.lwptoc_title {
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
}

.lwptoc .lwptoc_items .lwptoc_item {
    list-style: none;
    margin-bottom: 8px;
    margin-top: 10px;
}

.lwptoc_itemWrap .lwptoc_itemWrap {
    margin-left: 25px;
}

.lwptoc .lwptoc_i A {
    transition:  all 0.1s ease-in-out;
}

.lwptoc-notInherit .lwptoc_i DIV A .lwptoc_item_label {
    transition:  all 0.1s ease-in-out;
    text-decoration: underline;
    text-underline-offset: 6px;
}
/*</editor-fold>*/


/*<editor-fold desc="Text Styles">*/
.normal-post > h1,
.normal-post > h2,
.normal-post > h3 {
    margin-top: 2.4em !important
}

.normal-post > h1 + *,
.normal-post > h2 + *,
.normal-post > h3 + *,
.normal-post > h4 + *,
.normal-post > h5 + * {
    margin-top: .2em !important
}

.normal-post > .button,
.normal-post > blockquote,
.normal-post > div:not(.card,.feature-header,.two-column),
.normal-post > figure,
.normal-post > h1,
.normal-post > h2,
.normal-post > h3,
.normal-post > h4,
.normal-post > h5,
.normal-post > iframe,
.normal-post > img,
.normal-post > ol,
.normal-post > p,
.normal-post > section,
.normal-post > table,
.normal-post > ul,
.normal-post > video {
    /*display: inline-block;*/
    margin: 1.6em 0 .8em;
    padding: 0
}

.normal-post li {
    margin-bottom: 10px;
    margin-left: 2em;
    padding-left: .5em;
}

.normal-post video:not(.lazy) {
    height: auto;
}
/*</editor-fold>*/





/* ---------- DESKTOP ---------- */
@media only screen and (min-width: 981px){
    .blog-post-list {
        &:not(.grid-1) .article-card h3 {
            text-overflow: ellipsis;
            word-wrap: break-word;
            overflow: hidden;
            height: 112px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .article-card .img-wrapper {
            max-height: 300px;
        }
    }

    .lwptoc .lwptoc_i A {
        font-weight: 500;
    }
}

/* ---------- TABLET & MOBILE ---------- */
@media only screen and (max-width: 980px){
    /* Single Post Tablet Mobile */
    body.single-post {
        .author-date-info .auth-img {
            width: 35px;
            height: 35px;
        }
    }

    /* Blog Sidebar Tablet Mobile */
    .blog-sidebar {
        .categories-wrapper {
            margin-left: -5%;
            margin-right: -5%;
        }

        .all-categories {
            gap: 10px;
            overflow: hidden;
            width: auto;
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
            flex-wrap: nowrap;
            padding: 10px 20px 15px;

            .category-item {
                font-size: 14px;
                -webkit-appearance: button;
                cursor: pointer;
                padding: 0 18px;
            }
        }
    }
}

/* ---------- TABLET ---------- */
@media only screen and (min-width: 768px) and (max-width: 980px){

}

/* ---------- MOBILE ---------- */
@media only screen and (max-width: 768px) {
    .blog-post-list {
        gap: 30px;

        .article-card {
            background: none;

            &:hover {
                border-color: transparent;
            }

            .post-category {
                margin-bottom: 5px;
            }

            .inner {
                grid-template-columns: 1fr;
            }

            .content {
                padding: 15px 0px;
            }

            .img-wrapper {
                height: 240px;
            }

            h3 {
                margin-bottom: 15px;
            }

            .author-date-info img {
                height: 25px;
                width: 25px;
            }
        }
    }


    /* Single Post Mobile */
    body.single-post {
        .author-bio {
            flex-flow: column;
            gap: 15px;
            padding: 30px 25px;

            .author-avatar img {
                width: 50px;
            }
        }
    }

    /* Post Typography Mobile */
    .normal-post > h1, .normal-post > h2, .normal-post > h3 {
        margin-top: 1.4em !important;
    }

    /*<editor-fold desc="Table of Contents Mobile">*/
    /* Table of Contents */
    .lwptoc-light .lwptoc_i {
        padding: 20px 20px;
    }

    .lwptoc-notInherit .lwptoc_i DIV A {
        display: flex;
        font-size: 19px;
        line-height: 1.6em;
    }

    .lwptoc_item_number {
        width: 25px;
        height: 25px;
        flex-shrink: 0;
        margin-top: 3px;
    }
    /*</editor-fold>*/
}