/* ## Entries
--------------------------------------------- */

.entry {
    margin-bottom: 10%;
    &:last-of-type {
        margin-bottom: 0;
    }
    .single & {
        max-width: map-get($breakpoints,sm);
        margin: auto;
    }
    a {
        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }
}

.entry-content {
    ol,
    ul {
        margin-bottom: 28px;
        margin-left: 40px;
    }
    ol>li {
        list-style-type: decimal;
    }
    ul>li {
        list-style-type: disc;
    }
    ol ol,
    ul ul {
        margin-bottom: 0;
    }
    code {
        background-color: $color-border;
        display: inline-block;
        padding: 1rem 2rem;
    }
    >*:last-child {
        margin-bottom: 0;
    }
}

.entry-image-link {
    display: block;
    img {
        display: block;
    }
    .blog &,
    .archive & {
        margin-bottom: 1em;
    }
}

.entry {
    .featured-image {
        display: block;
        margin-bottom: 2.5rem;
        @include breakpoint(sm) {
            margin-bottom: 4rem;
        }
        img {
            min-width: 100%;
        }
    }
}


/* ## Entry Meta
--------------------------------------------- */

p.entry-meta {
    font-size: $font-size-body * .8;
    text-transform: capitalize;
    margin-bottom: 0;
    .blog &,
    .archive &,
    .single & {
        padding: 0 0 20px;
    }
    .blog .entry-footer &,
    .archive .entry-footer &,
    .single .entry-footer & {
        padding: 20px 0 0;
    }
}

.entry-categories,
.entry-tags {
    display: block;
}

.entry-comments-link::before {
    content: "\2014";
    margin: 0 6px 0 2px;
}


/* ## Pagination
--------------------------------------------- */

.pagination {
    clear: both;
    margin: 0 auto;
}

.adjacent-entry-pagination {
    background-color: $color-border;
    padding: 25px 0;
    @include breakpoint(sm) {
        padding: 50px 0;
    }
}

.archive-pagination {
    li {
        display: inline;
    }
    a {
        color: $color-text;
        cursor: pointer;
        display: inline-block;
        font-size: 16px;
        font-size: 1.6rem;
        padding: 8px 12px;
        text-decoration: none;
        border-radius: 5px;
    }
    li a {
        margin-bottom: 4px;
        @include breakpoint(sm) {
            margin-bottom: 0;
        }
    }
    a:hover,
    a:focus,
    .active a {
        background-color: $color-text;
        color: $color-white;
    }
}


/* # Sidebars
--------------------------------------------- */

.sidebar {
    font-size: 16px;
    font-size: 1.6rem;
    margin: 10% auto 5%;
    @include breakpoint(md) {
        margin: 0 auto 40px;
    }
    .content-sidebar.breadcrumbs &,
    .sidebar-content.breadcrumbs & {
        padding-top: 145px;
    }
}

/* ## Comments
--------------------------------------------- */

.comment-respond,
.entry-comments,
.entry-pings {
    font-size: $font-size-body;
    margin-top: 5%;
    @include breakpoint(sm) {
        margin-top: 40px;
    }
}

.comment-list li {
    padding: 40px 0 0 30px;
}

.comment-list .depth-1 {
    padding-left: 0;
}

.comment-header {
    margin-bottom: 30px;
    p {
        margin-bottom: 0;
    }
}

.comment-content {
    clear: both;
    ul>li {
        list-style-type: disc;
    }
}

.comment-respond label {
    display: block;
    margin-right: 12px;
}

.entry-pings .reply {
    display: none;
}

.form-submit {
    margin-bottom: 0;
}

@include breakpoint(sm) {
    .comment-respond input[type="email"],
    .comment-respond input[type="text"],
    .comment-respond input[type="url"] {
        width: 50%;
    }
}


/* ## Masonry
--------------------------------------------- */

.masonry {
    .site-inner {
        background-color: $color-border;
    }
    .content {
        margin-bottom: 100px;
        .archive-pagination {
            position: absolute;
            bottom: -100px;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
        }
    }
    .entry {
        display: inline-block;
        margin-bottom: 3rem;
        width: 100%;
        background-color: $color-white;
        border-radius: 5px;
        @include transition;
        @include breakpoint(xs) {
            width: calc(50% - 15px);
        }
        @include breakpoint(sm) {
            width: calc(33.3333333333333333% - 20px);
        }
        @include breakpoint(xl) {
            width: calc(25% - 23px);
        }
        &:hover {
            box-shadow: 0 5px 40px rgba(0, 10, 20, 0.0618);
        }
        .entry-image-link {
            display: block;
            margin-bottom: 0;
            img {
                display: block;
                border-radius: 5px 5px 0 0;
            }
        }
        >.entry-meta,
        .entry-content {
            padding: 0 20px;
        }
        .entry-title {
            font-size: $font-size-body * 1.2;
            margin: 10px 20px 20px;
        }
        >.entry-meta {
            padding-top: 20px;
        }
        .entry-footer {
            margin: 20px 20px;
            border-top: 1px solid $color-border;
        }
    }
}


/* ## Pricing Table
--------------------------------------------- */

.pricing-tables-page {
    .site-inner {
        background-color: $color-border;
    }
}

.pricing-table {
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
    @include breakpoint(sm) {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 60px;
        .one-half,
        .three-sixths,
        .two-fourths {
            width: 50%;
        }
        .one-third,
        .two-sixths {
            width: 33.333333333333333%;
        }
        .four-sixths,
        .two-thirds {
            width: 66.666666666666666%;
        }
        .one-fourth {
            width: 25%;
        }
        .three-fourths {
            width: 75%;
        }
        .one-fifth {
            width: 20%;
        }
        .two-fifths {
            width: 40%;
        }
        .three-fifths {
            width: 60%;
        }
        .four-fifths {
            width: 80%;
        }
        .one-sixth {
            width: 16.66666666666667%;
        }
        .five-sixths {
            width: 83.33333333333335%;
        }
    }
    >div {
        background-color: $color-white;
        padding: 40px 20px 50px;
        transition: all .3s ease;
        box-shadow: 0 5px 40px rgba(10, 20, 30, .05);
        border-radius: 5px;
        margin-bottom: 25px;
        @include breakpoint(sm) {
            margin: 0;
        }
        &:hover {
            transform: scale(1.0382);
            z-index: 2;
            @include breakpoint(sm) {
                transform: scale(1.1);
            }
        }
    }
    .featured {
        z-index: 1;
        position: relative;
        box-shadow: 0 10px 50px rgba(10, 20, 30, .1);
        @include breakpoint(sm) {
            transform: scale(1.0618);
        }
        &:hover {
            z-index: 2;
            @include breakpoint(sm) {
                transform: scale(1.1);
            }
        }
        button,
        .button {
            @include gradient;
        }
    }
    strong {
        font-weight: $font-weight-bold;
        color: $color-text;
        font-size: 2rem;
    }
    span {
        font-style: italic;
        font-size: 1.3rem;
    }
    small {
        position: absolute;
        margin-top: 10px;
        margin-left: -10px;
    }
    big {
        font-size: 3rem;
        color: $color-text;
        font-weight: $font-weight-bold;
    }
    p {
        margin: 0;
    }
    ul {
        margin: 10px 0 20px;
        li {
            margin: 0;
            list-style-position: inside;
            list-style-type: none;
        }
    }
}


.icon-styles-page {
    .entry-content {
        p {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        span {
            display: block;
            width: 25%;
            margin-bottom: 2em;
            align-items: center;
        }
        i {
            margin-right: 1rem;
            line-height: 1rem;
        }
    }
}