/*
--------------------------------------
layout
--------------------------------------
*/
.main-header {
    display               : grid;
    grid-template-columns : var(--container-margin-primary) auto 1fr auto var(--container-margin-primary);
    align-items           : center;
}

.header-bg {
    grid-column : 1/-1;
    grid-row    : 1/4;
    align-self  : stretch;
    background  : var(--color-black-alt-default);
    z-index     : 4;
}

.header-banner,
.header-infos,
.header-burger,
.header-logo,
.header-search,
.header-actions {
    z-index : 5;
}

.header-burger,
.header-logo,
.header-actions {
    padding : 4px 0;
}

.header-banner,
.header-infos {
    grid-column : 1/-1;
}

.header-banner {
    grid-row : 1;
}

.header-infos {
    grid-row : 2;
}

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

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

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

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

.header-actions {
    grid-column : 4;
    grid-row    : 3;
    align-self  : stretch;
}

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

.header-nav {
    z-index    : 5;
    box-shadow : 0 0 10px rgba(0, 0, 0, 0.19);
}

@media (min-width : 1200px) {
    .main-header {
        grid-template-columns: var(--container-margin-primary) auto 15% auto auto var(--container-margin-primary);
    }

    .header-search {
        padding : 15px 0;
    }

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

    .header-banner,
    .header-infos,
    .header-nav {
        grid-column : 1/-1;
    }

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

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

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

    .header-search {
        grid-column : 4;
        padding     : 0 25px;
    }

    .header-actions {
        grid-column : 5;
    }

    .header-nav {
        z-index : 3;
    }
}

/*
--------------------------------------
global
--------------------------------------
*/

.main-header {
    padding-bottom : 10px;
}

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

/*
--------------------------------------
main header
--------------------------------------
*/

.main-header {
    padding-bottom : 10px;
}

body[data-is-desktop="true"] .main-header {
    padding-bottom : 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         : var(--color-grey-font-default);
    border        : 1px solid rgba(0, 0, 0, .25);
    transition    : all .3s ease-out;
}

.search-widget form input[type=text]:focus {
    border-color : var(--color-primary);
    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(--color-primary);
    border          : 1px solid var(--color-primary);
    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;
    }
}