@import "constants.less";

.site-header {
    min-height: @navbar-height;
    position: relative;
    background-color: white;
    box-shadow: @box-shadow;
}

.site-title {
    font-size: 26px;
    font-weight: 300;
    line-height: @navbar-height;
    letter-spacing: -1px;
    color: @grey-color-dark;
    white-space: nowrap;
    padding-left: @spacing-unit/2;
}

.site-header {
    background-color: #879BAF;
}

.site-header > .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    .social-media {
        margin-left: @spacing-unit/2;
    }
}

.site-title {
    color: white;
}

.site-nav {
    height: @navbar-height;
    color: @text-color;
    display: flex;
    align-items: center;

    li {
        padding: 0px;
        height: 100%;
    }

    li a {
        margin: 0px;
        display: block;
        width: 100%;
        height: 100%;
    }

    .menu-icon {
        display: none;
        float: right;
    }

    a {
        text-decoration: none;
        color: @text-color;
    }

    .page-link {
        .font(18);


        &:not(:last-child) {
            margin-right: 20px;
        }
    }

    ul {
        padding: 0;
        list-style: none;
        overflow: hidden;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        -webkit-flex-direction: row;
        flex-direction: row;
        flex-wrap: nowrap;

        li {
            margin-left: @spacing-unit/2;
            transition: border-bottom 0.18s;
        }

        li:not(:hover) {
            padding-bottom: 4px;
        }

        li:hover {
            border-bottom: 4px solid @grey-color;
            border-radius: 1px;
        }
    }


}

.video-container {
    display: flex;
}

.site-footer {
    padding: @spacing-unit/2 0;
    position: absolute;
    bottom: 0;
    height: @footer-height;
    width: 100%;
    background-color: @background-color-page;
    box-shadow: @box-shadow;
}


.site-footer .container {
    color: white;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
}


.page-heading {
    font-size: @font-size-larger;
}

.post-content, .post {
    padding-top: @spacing-unit/2;
    padding-bottom: @spacing-unit/2;
}

.page-container {
    color: white;
    background-color: @background-color-page;
    box-shadow: @box-shadow;
    margin-bottom: @spacing-unit/2;
    margin-top: @spacing-unit/2;
    padding: @spacing-unit @spacing-unit;
}

.link-spacer {
    font-size: @font-size-smaller;
    font-weight: normal;
    padding: 0 3px;
}

@media only screen and (max-width: @on-palm) {

    .site-header > .wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .page-container {
        padding: @spacing-unit/2 @spacing-unit/2;
    }

    .video-container {
        flex-wrap: wrap;
    }
}

