/*
--------------------------------------
layout
--------------------------------------
*/
.main-header {
    display        : grid;
    align-items    : center;
    padding-bottom : 10px;
}

.header-bg {
    grid-column : 1/-1;
    grid-row    : 1;
    align-self  : stretch;
    background  : white;
    z-index     : 4;
}

.main-header > :not(.header-bg) {
    z-index : 5;
}

.main-header .header-nav {
    z-index : 10;
}

.header-burger,
.header-logo,
.header-actions {
    grid-row : 3;
}

.header-search {
    grid-row : 4;
}

.header-burger {
    grid-column : 2;
}

.header-logo {
    grid-column : 4;
}

.header-actions {
    grid-column : 5;
    align-self  : stretch;
}

.header-search {
    grid-column : 2/-2;
}

.header-nav {
    z-index    : 5;
    background : transparent;
}

@media (max-width : 1199px) {
    .main-header {
        grid-template-columns : var(--margin-for-default-container) auto auto 1fr auto var(--margin-for-default-container);
        padding               : 1.56rem 0;
    }

    .main-header > .search-trigger {
        margin-left : calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    }

    .header-logo {
        text-align : center;
    }

    .main-header > .search-trigger {
        grid-row    : 3;
        grid-column : 3;
    }

    .main-header > .header-search {
        z-index : 10;
    }
    /*.header-search {*/
    /*    position       : absolute;*/
    /*    top            : 1.56rem;*/
    /*    left           : 0;*/
    /*    right          : 0;*/
    /*    transform      : translate3d(0, -50%, 0) scale(0.9);*/
    /*    opacity        : 0;*/
    /*    visibility     : hidden;*/
    /*    pointer-events : none;*/
    /*    transition     : all .3s;*/
    /*}*/

    .header-search--is-show {
        transform      : translate3d(0, 0, 0) scale(1);
        opacity        : 1;
        visibility     : visible;
        pointer-events : all;
    }
}

@media (min-width : 1200px) {
    body[data-is-desktop="true"] .main-header {
        grid-template-columns : var(--margin-for-default-container) auto auto 1fr auto auto var(--margin-for-default-container);
    }

    body[data-is-desktop="true"] .main-header > * {
        grid-row : 1;
    }

    body[data-is-desktop="true"] .main-header > .search-trigger {
        display : none;
    }

    body[data-is-desktop="true"] .header-search {
        padding : 15px 0;
    }

    body[data-is-desktop="true"] .header-burger {
        grid-column : 2;
    }

    body[data-is-desktop="true"] .header-logo {
        grid-column : 3;
    }

    body[data-is-desktop="true"] .header-nav {
        grid-column : 4;
    }

    body[data-is-desktop="true"] .header-search {
        grid-column : 5;
    }

    body[data-is-desktop="true"] .header-actions {
        grid-column : 6;
    }

    body[data-is-desktop="true"] .header-burger {
        display : none;
    }

    body[data-is-desktop="true"] .main-header {
        padding-bottom : 0;
        position       : -webkit-sticky;
        position       : sticky;
        top            : 0;
    }

    body[data-is-desktop="true"] .main-header > *:not(.header-nav) {
        padding-top    : 7px;
        padding-bottom : 7px;
    }

    body[data-is-desktop="true"] .header-search {
        padding : 7px 25px;
    }

    body[data-is-desktop="true"] .header-nav {
        /*height  : 100%;*/
        align-self: stretch;
        display : flex;
        /*align-items : center;*/
    }

    body[data-is-desktop="true"] .header-nav .bwa-menu__top__wrapper {
        background : transparent;
        border-top : none;
    }
}

/*
--------------------------------------
global
--------------------------------------
*/
.overlay_global {
    left : 0;
}

/*
--------------------------------------
burger
--------------------------------------
*/
.header-burger {
    text-align : center;
    /*margin-right : 10px;*/
}

.header-burger p {
    margin : 0;
}

/*
--------------------------------------
Search
--------------------------------------
*/
.search-widget {
    width : 100%;
}

.search-widget form {
    position    : relative;
    display     : flex;
    align-items : center;
}

.search-widget input[type=text] {
    border-radius : 30px;
    box-shadow    : 0 0 15px rgba(0, 0, 0, .1);
    width         : 100%;
    padding       : 10px;
    padding-left  : 2em;
    color         : #7a7a7a;
    border        : 1px solid rgba(0, 0, 0, .25);
    transition    : all .3s ease-out;
}

.search-widget form input[type=text]:focus {
    border-color : var(--primary-color);
    outline      : none;
}

.search-widget form button[type=submit] {
    position        : absolute;
    right           : 0;
    height          : 100%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 0 15px;
    text-align      : center;
    color           : #fff;
    background      : var(--primary-color);
    border          : 1px solid var(--primary-color);
    border-radius   : 0 30px 30px 0;
}

.search-widget form input[type=text]:focus + button .search {
    color : white;
}

@media (min-width : 1200px) {
    .search-widget form input[type=text] {
        min-height : 52px;
    }
}

/*
--------------------------------------
Header template Override
--------------------------------------
*/
@media (min-width : 1200px) {
    body[data-is-desktop="true"] .main-header {
        grid-template-columns : var(--margin-for-default-container) 1fr auto 1fr var(--margin-for-default-container);
    }

    body[data-is-desktop="true"] .header-search {
        grid-column : 2/-2;
    }

    body[data-is-desktop="true"] .header-nav {
        grid-column : 2;
    }

    body[data-is-desktop="true"] .header-logo {
        grid-column : 3;
    }

    body[data-is-desktop="true"] .header-actions {
        grid-column     : 4;
        display         : flex;
        justify-content : flex-end;
    }
}

@media (min-width : 1200px) {
    body[data-is-desktop="true"] .close-search-trigger {
        display : inline-block;
    }

    body[data-is-desktop="true"] .header-search-trigger {
        display        : flex;
        flex-direction : column;
        align-items    : center;
        cursor         : pointer;
        color          : #232323;
        transition     : all .3s;
    }

    body[data-is-desktop="true"] .header-search-trigger:hover {
        color : var(--link-color-on-hover);
    }

    body[data-is-desktop="true"] .header-search {
        /*display          : flex;*/
        /*align-items      : center;*/
        /*justify-content  : center;*/
        /*grid-column      : 2/-2;*/
        z-index          : 15;
        /*transform-origin : top center;*/
        /*transform        : translate3d(0, -20px, 0) scale(0.8);*/
        /*opacity          : 0;*/
        /*visibility       : hidden;*/
        /*pointer-events   : none;*/
        /*transition       : all .2s ease-out;*/
    }

    body[data-is-desktop="true"] .header-search--is-show {
        transform      : translate3d(0, 0, 0) scale(1);
        opacity        : 1;
        visibility     : visible;
        pointer-events : all;
        transition     : all .3s ease-in-out .2s;
    }

    body[data-is-desktop="true"] .header-search-bg {
        z-index        : 10;
        pointer-events : none;
        padding        : 0;
        height         : 100%;
        grid-column    : 1/-1;
        opacity        : 0;
        background     : white;
        transition     : all .2s ease-out .2s;
    }

    body[data-is-desktop="true"] .header-search-bg--is-show {
        opacity    : 1;
        transition : all .2s ease-in-out;
    }
}
