/* Header Builder Common */



.site-header {
    position: relative;
    .customify-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.builder-item {
    .item--inner {
        display: inline-block;
        vertical-align: middle;
    }
    &.builder-item--group {
        .item--inner {
            margin-right: ($gl-gutter/2);
            @include for_device( tablet ) {
                margin-right: 1.0em;
            }
            @include for_device( mobile ) {
                margin-right: .4em;
            }
            &:last-child {
                margin-right: 0px;
            }
        }
    }
}

//.customify-grid {
//    &.cb-row--desktop {
//        margin: 0 -0.5em;
//        > [class*="customify-col-"] {
//            padding-left: 0.5em;
//            padding-right: 0.5em;
//        }
//    }
//}

.layout-fullwidth {
    .customify-container {
        max-width: initial;
    }
}

.header--row {

    .customify-grid {
        @include for_device( desktop ) {
            margin: 0 -0.5em;
            [class~="customify-col-"], [class*="customify-col-"], [class*="customify-col_"] {
                padding-left: 0.5em;
                padding-right: 0.5em;
            }
        }
    }

    .customify-grid {
    }
    &.layout-full-contained {
        .customify-container {
            background: transparent !important;
        }
    }
    &.layout-full-contained, &.layout-fullwidth {
        .customify-container {
            border: 0 none !important;
            box-shadow: none !important;
        }
    }
    @include for_device( desktop ){
        &.layout-contained {
            background: transparent !important;
            border: 0 none;
            box-shadow: none !important;
            .customify-container {

            }
        }
    }
    &.layout-fullwidth {
        .customify-container {
            box-shadow: none !important;
        }
    }
}


// Titlebar
.page-titlebar {
    padding: 21px 0px 22px;
    border-bottom: 1px solid $color_border;
    word-break: break-word;
    background: #f9f9f9;
    @include for_device( tablet ) {
        padding: 19px 0px 20px;
    }
    @include for_device( mobile ) {
        padding: 18px 0px 20px;
    }
    .page-titlebar-inner {
        width: 100%;
    }
    .titlebar-title {
        margin-bottom: 0px;
    }
    .titlebar-tagline {
        margin-top: 5px;
        font-size: ms(-1);
    }
}

// Breadcrumbs
.page-breadcrumb {
    padding: 9px 0px 9px;
    border-bottom: 1px solid $color_border;
    color: $color_meta;
    line-height: 1.6;
    background: #FFF;
    .page-breadcrumb-inner {
        width: 100%;
    }
}
.page-breadcrumb-list {
    list-style: none;
    margin: 0px 1em;
    padding: 0px;
    li {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        &:after {
            border-top: 1px solid currentColor;
            border-left: 1px solid currentColor;
            content: "";
            width: 5px;
            height: 5px;
            display: inline-block;
            transform: rotate(135deg);
            left: auto;
            position: relative;
            top: -1px;
        }

        &:last-child {
            &:after {
                display: none;
            }
        }
        a {
            font-weight: 500;
            margin-right: 10px;
        }
    }
}
.page-titlebar, .page-cover {

    .customize-partial-edit-shortcut button {
        left: 0px;
    }
    .page-breadcrumb-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .page-breadcrumb {
        border-bottom: none;
        padding-bottom: 0px;
        background: transparent;
    }
}


// Header Cover
.page-cover {
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &:before {
        position: absolute;
        content: "";
        background-color: rgba( 0,0,0,.3 );
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 1;
    }
    .page-cover-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 5;
        padding: 1em 30px;
        @include for_device( desktop ){
            min-height: 300px;
        }
        @include for_device( tablet ){
            min-height: 250px;
            padding: 1em 15px;
        }
        @include for_device( mobile ){
            min-height: 200px;
        }
    }
    .page-breadcrumb-list {
        color: rgba(255, 255, 255, .8);
        a, li:after {
            color: inherit;
        }

        a:hover {
            color: rgba(255, 255, 255, .8);
        }
    }
}
.page-cover-title {
    margin-bottom: 0.5em;
}
.page-cover-tagline {
    margin-bottom: 1.2em;
}
.page-cover-title, .page-cover-tagline {
    display: inline-block;
    position: relative;
    color: rgba(255, 255, 255, .99);
    z-index: 5;
    p {
        &:last-child {
            margin-bottom: 0px;
        }
    }
}

/* Customizer Shortcut */
#masthead, #header-menu-sidebar {
    .customize-partial-edit-shortcut {
        display: none;
    }
}
#masthead{
    > .customize-partial-edit-shortcut {
        &.customize-partial-edit-shortcut-header_builder_panel {
            display: none;
        }
        button {
            left: 0px;
        }
    }
}