@import "theme-scss/page-blog";
@import "theme-scss/page-post-single";
@import "theme-scss/page-search";
@import "theme-scss/page-404";

/*
Blog Page
============================================= */
body.page-template-default {
    background-color: #fff;

    // when there is a Sidebar present
    &.refru-with-sidebar {
        #container > div {
            display: flex;
            flex-wrap: wrap;
        }
        #sidebar {
            width: 25%;
            margin-right: 5%;
        }

        #content {
            width: 70%;
        }
    }
}

/*
Main
-------------------------------------------- */
#main {
    margin-top: 20px;
}

/*
Entry Content (Posts & Pages)
-------------------------------------------- */
.entry-content {
    font-size: 1.125rem;
    line-height: 180%;

    p {
        margin-bottom: 1.44444444444444em;
    }
}

/*
Page Header
-------------------------------------------- */
.page-header {
    margin-bottom: 1.25rem;

    & > * {
        max-width: 45%;
        margin-left: auto;
        margin-right: auto;
    }

    @at-root .search-results #{&} {
        margin-bottom: 3.75rem;

        .page-title {
            font-size: 1.875rem;
        }
    }

    @at-root .archive #{&} {
        margin-bottom: 3.75rem;
    }

    // Extra Small
    @include media-breakpoint-only(xs) {
        & > * {
            max-width: 85%;
        }
    }
}

/*
Page Title
-------------------------------------------- */
.page-title {
    margin-bottom: 0;
    margin-top: 0;
    padding-right: 20px;
    position: relative;
    word-wrap: break-word;
}

/*
Page Content
-------------------------------------------- */
.page-content {
    margin-bottom: 4.375em;
}

/*
Welcome Box
-------------------------------------------- */
.refru-welcome-box {
    text-align: center;
    width: 100%;
    padding: 3% 5% 3%;
    margin-bottom: 10px;
    background-color: #151515;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    position: relative;

    .refru-welcome-box-title {
        font-size: 2rem;
        color: #fff;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .refru-welcome-box-desc {
        font-size: 1.25rem;
        color: #fff;
        opacity: 0.6;
        margin-bottom: 0;
    }

    .refru-welcome-box-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        width: 100%;
        transform: translateY(95%);

        path {
            fill: #151515;
        }
    }
}

// Extra Small
@include media-breakpoint-only(xs) {
    .refru-welcome-box {
        padding: 4% 5% 10%;
    }
}

/*
Extra Small
=====================================================*/
@include media-breakpoint-only(xs) {
}
