@use '../utilities' as *;

.site-content {
    margin: 15px 0 40px 0;
}

// Site Content Main
.site-content .content-wrapper {
    @include gridColNoGap ( 70% 30% );
}

.site-content .content-wrapper .entry-content a,
.site-content .widget-area .widget_text a {
    background-color: rgba( 230, 230, 230, 0.5 );
    border-bottom: 1px solid $gray;
}

.site-content .content-area {
    word-break: break-word;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

.site-content .content-wrapper .content-area {
    padding-right: 10px;
    border-right: 1px solid $grey;
}

.site-content .content-area p {
    font-size: .9rem;
}

.content-area .category a {
    display: inline-block !important;
    margin: 0 0 2px 0 !important;
}

.site-content .content-wrapper .widget-area {
    padding-left: 10px;
}

.site-content .content-wrapper.fullwidth {
    display: block;
}

.site-content .content-wrapper.fullwidth .content-area {
    padding-right: 0;
    border-right: none;
}

.site-content .content-wrapper.fullwidth .widget-area {
    display: none;
}


@media(max-width: 992px) {
    .site-content .content-wrapper {
        display: block;
    }

    .site-content .content-wrapper .content-area {
        padding-right: 0;
        border-right: none;
    }

    .site-content .content-wrapper .widget-area {
        padding-left: 0;
        margin-top: 30px;
    }
}

// HOME CONTENT

// Blog Container (GRID)
.blog-container {
    @include gridColumnsGap(repeat(2, 1fr), 20px);
}

.blog-container .blog-content {
    padding: 4px;
    border: 1px solid $grey;
}

.blog-container .blog-content .text-container {
    padding: 5px 12px;
}

.blog-container .blog-content .entry-meta {
    font-size: .7rem;
    color: $secondary_black;
    padding: 5px 0 !important;
    line-height: 1;
}

.blog-container .blog-content .entry-meta a {
    font-size: .75rem;
    color: $secondary_black;
}

.blog-container .blog-content .entry-title {
    line-height: .9;
    padding: 0 0 10px 0 !important;
    margin: 5px 0 !important;
    border-bottom: 1px solid $grey;
}

.blog-container .blog-content .entry-title a {
    color: $secondary_black;
    font-size: 1.1rem;
    text-decoration: none;
}

.blog-container .blog-content .entry-title a:hover {
    color: $cyan;
}

.blog-container .blog-content .entry-summary {
    font-size: .9rem;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
}

.blog-container .blog-content .entry-summary p {
    font-size: .9rem;
    line-height: 1.4;
}

.blog-container .blog-content .read-more-btn-container {
    display: none !important;
}

.blog-container .blog-content .read-more-btn {
    padding: 8px 18px !important;
    margin-top: 0;
    font-size: .75rem !important;
}

// Blog Container (DEFAULT)
.blog-container.default {
    display: block;
}

.blog-container.default .blog-content {
    padding: 4px;
    border: 1px solid $grey;
    margin-bottom: 40px;
}

// Blog Container (GRID-3-COLUMNS)
.blog-container.grid-3-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-container .blog-content {
    padding: 4px;
    border: 1px solid $grey;
}

.blog-container.blog-list {
    display: block;
}

.blog-container.blog-list .blog-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-bottom: 30px;
}

@media(max-width: 992px) {
    .blog-container.grid-3-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .blog-container.blog-list .blog-content {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media(max-width: 768px) {
    .blog-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .blog-container.grid-3-columns {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
}


// SINGLE POST PAGE
.single-post-container .text-container {
    padding: 10px 0;
}

.single-post-container .text-container .entry-title {
    padding: 4px 0 !important;
    margin: 0 !important;
    line-height: 1.2;
    font-size: 1.4rem;
    font-weight: weight(normal);
    border-top: 1px solid $grey;
    border-bottom: 1px solid $grey;
}

.single-post-container .text-container .entry-meta {
    padding: 0 !important;
    margin: 0 0 4px 0;
    font-size: .75rem;
    color: $secondary_black;
    border: none !important;
}

.single-post-container .text-container .entry-meta a {
    font-size: .75rem;
    color: $secondary_black;
}

.single-post-container .text-container .entry-meta span a {
    padding: 2px;
}

.single-post-container .text-container .entry-content {
    margin: 14px 0 !important;
    padding: 0 !important;
}

.single-post-container .text-container .entry-content p {
    font-size: .9rem;
}

.single-post-container .text-container .entry-content h1,
.single-post-container .text-container .entry-content h2,
.single-post-container .text-container .entry-content h3,
.single-post-container .text-container .entry-content h4,
.single-post-container .text-container .entry-content h5,
.single-post-container .text-container .entry-content h6 {
    font-weight: bolder;
}

.single-post-container .text-container .entry-content h1 {
    font-size: 2em
}

.single-post-container .text-container .entry-content h2 {
    font-size: 1.5em;
}

.single-post-container .text-container .entry-content h3 {
    font-size: 1.17em;
}

.single-post-container .text-container .entry-content h4 {
    font-size: 1em;
}

.single-post-container .text-container .entry-content h5 {
    font-size: .83em;
}

.single-post-container .text-container .entry-content h6 {
    font-size: .67em;
}

.single-post-container .text-container .entry-content ul,
.single-post-container .text-container .entry-content ol {
    margin-left: 20px;
}

.single-post-container .text-container .entry-content ul li,
.single-post-container .text-container .entry-content ol li {
    font-size: .91rem;
}

.share-btn-container {
    margin-top: 10px;
}

// ARCHIVE / SEARCH PAGE
.archive-container .archive-content {
    display: block;
    padding: 0;
    margin: 0 0 5px 0;
    border-bottom: 1px solid $border_color !important;
}

@media(max-width: 767px) {
    .archive-container .archive-content {
        margin-bottom: 15px;
    }
}

.archive-container .archive-content .text-container {
    padding: 0;
    margin: 0;
}

.archive-container .archive-content .entry-meta {
    font-size: .7rem;
    color: $secondary_black;
    margin: 0;
    padding: 4px 0;
    border-top: 1px solid $border_color !important;
    border-bottom: 1px solid $border_color !important;
}

.archive-container .archive-content .entry-meta span {
    color: $secondary_black;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: .7rem;
}

.archive-container .archive-content .entry-meta a {
    color: $dark_cyan !important;
}

.archive-container .archive-content .category a:hover {
    color: $cyan !important;
}

.archive-container .archive-content .text-container .entry-title {
    padding: 0 0 5px 0;
    margin: 0;
    line-height: 1.2;
}

.archive-container .archive-content .text-container .entry-title a {
    font-size: 1.15rem;
    color: $secondary_black;
    text-decoration: none;
}

@media(max-width: 600px) {
    .archive-container .archive-content .text-container .entry-title a {
        font-size: 1rem !important;
    }
}

.archive-container .archive-content .text-container .entry-meta {
    padding: 0;
    margin: 0 0 4px 0;
    font-size: .7rem;
    color: $secondary_black;
    border: none;
}

.archive-container .archive-content .text-container .entry-meta a {
    font-size: .7rem;
    color: $secondary_black;
}

.archive-container .archive-content .text-container .entry-meta span a {
    padding: 4px 0;
}

.archive-container .archive-content .text-container .entry-summary {
    padding: 0;
    margin: 0;
    font-size: .8rem;
}

.archive-container .archive-content .text-container .entry-summary p {
    font-size: .8rem;
    text-align: justify;
}

// TEMPLATE / THEME ARCHIVE
.archive-container .widget-recent-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media(max-width: 992px) {
    .archive-container .widget-recent-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 600px) {
    .archive-container .widget-recent-template {
        grid-template-columns: repeat(1, 1fr);
    }
}

// PAGE CONTENT
.entry-header .entry-title {
    padding: 0 0 8px 0;
    margin: 0;
    border-bottom: 1px solid $grey;
    font-size: 1.5rem;
    font-weight: weight(bold);
}

// Comments Section
.comments-container {
    margin-top: 40px;
}

.comments-container .logged-in-as a {
    color: $cyan;
    font-size: .85rem;
}

.comments-container .form-top-field {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
}

@media(max-width: 767px) {
    .comments-container .form-top-field {
        display: block !important;
    }
}

.comments-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid $grey;
}

.comments-container .commenter-details {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.comments-container .comments-area {
    padding: 10px 0 !important;
    margin-bottom: 20px;
}

.comments-container .comments-area .comments-title {
    font-size: 1.4rem;
    font-weight: weight(bold);
    margin-bottom: 15px;

    span {
        font-size: 1.2rem;
        text-transform: uppercase;
    }
}

.comments-container .comments-area .comment-list {
    list-style: none !important;

    .vcard {
        img {
            border-radius: 50% !important;
            margin-right: 10px;
            margin-bottom: -25px;
        }
    }

    .fn {
        margin-top: -20px;

        a {
            color: $secondary_black;
            font-size: 1rem;
        }
    }

    .comment-metadata {
        margin: 0 0 5px 60px !important;

        a {
            font-size: .8rem;
            color: $cyan;
        }
    }

    .comment-content {
        margin: 5px 0 !important;
        padding: 15px 10px;
        border: 1px solid $grey;
        box-shadow: 0 0 3px 0 rgba($main_dark, .25);

        a {
            background-color: rgba( 230, 230, 230, 0.5 );
            border-bottom: 1px solid $gray;
        }

        p {
            text-align: justify;
            font-size: .9rem;
        }

        ul,
        ol {
            margin-left: 0;
            padding-left: 0 !important;
        }

        h1 {
            font-size: 1.2rem !important;
        }

        h2 {
            font-size: 1.1rem !important;
        }

        h3 {
            font-size: 1rem !important;
        }

        h4,
        h5,
        h6 {
            font-size: .95rem !important;
        }
    }

    .reply {
        margin: 0 0 15px 0 !important;
        text-transform: capitalize;

        a {
            font-size: .85rem;
            font-weight: weight(semi-bold);
            color: $cyan;
        }
    }

    .children {
        padding: 0;
        padding-left: 20px;
        list-style: none;
    }
}

ol.comment-list,
ul.comment-list {
    padding: 0;
    margin: 0;
}

#reply-title {
    font-size: 1.4rem;

    small {
        margin-left: 8px;
    }
}
@media (max-width: 767px) {
    .comments-container .commenter-details {
        display: block;
    }

    .comments-container .comments-area .comment-list {
        margin: 0 !important;
    }
}

// 404 Page
.error-404 {
    text-align: center;
}

.error-404 .page-content {
    margin: 0;
}

.not-found-msg {

    .entry-title {
        font-size: 8rem;
        font-weight: weight(bold);
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        padding: 0 !important;
        margin: 0 !important;
    }

    .sub-text-1 {
        font-size: 1.2rem;
        padding: 5px 0 !important;
        margin: -10px 0 0 0 !important;
        font-weight: weight(semi-bold);
    }

    .sub-text-2 {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1rem;
        font-weight: weight(semi-bold);
    }

}

.not-found-search {
    margin: 20px 0 !important;

    input[type="search"] {
        width: 60%;
        margin: auto;
    }
}

.or {
    font-size: 1.2rem;
    font-weight: weight(semi-bold);
}

.go-home-button {
    margin: 20px 0 60px 0;

    .home-btn {
        padding: 10px 20px !important;
        font-size: 1.25rem !important;
        font-weight: weight(semi-bold) !important;
        text-decoration: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
}

@media(max-width: 600px) {
    .not-found-msg .entry-title {
        font-size: 5rem !important;
    }

    .not-found-msg .sub-text-1 {
        font-size: 1rem !important;
    }

    .not-found-msg .sub-text-2 {
        font-size: .85rem !important;
    }

    .go-home-button {
        margin: 15px 0 100px 0 !important;
    }

    .go-home-button .home-btn {
        padding: 8px 15px !important;
        font-size: 1.1rem !important;
    }

    .not-found-search {
        margin: 15px 0 !important;
    }

    .not-found-search input[type="search"] {
        width: 100% !important;
    }
}


// Posts Navigation
.site-content .content-wrapper .post-navigation {
    padding: 10px 0;
    margin-bottom: 10px;
}

.site-content .content-wrapper .post-navigation .nav-links a {
    color: $secondary_black;
    font-size: .85rem;
    font-weight: weight(semi-bold);
}

// Categories, Tags, Comments and Edit Links
.post-entry-footer {
    padding: 4px 8px;
    border: 1px solid $border_color;
}

.cat-links,
.tags-links,
.comments-link,
.edit-link {
    font-size: .8rem;
    color: $text_color;
}

.cat-links a,
.tags-links a,
.comments-link a,
.edit-link a {
    font-size: .8rem;
    color: $dark_cyan;
}
