:root {

  --header-margin-grid : 2%;

}

/*
--------------------------------------
layout
--------------------------------------
*/

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

.header-bg {
  grid-column : 1/-1;
  grid-row    : 1;
  align-self  : stretch;
  background  : transparent;
  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 : 1;
}

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

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

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

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

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

/*
--------------------------------------
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] {
  font-size     : 15px;
  border-radius : 30px;
  /*box-shadow    : 0 0 15px rgba(0, 0, 0, .1);*/
  width         : 100%;
  padding       : 10px;
  padding-left  : 2em;
  color         : #fff;
  border        : 1px solid rgba(0, 0, 0, .25);
  transition    : all .3s ease-out;
}

.search-widget form input[type=text]:focus {
  border-color : rgba(234, 227, 210, 0.40);
  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;
}


/*
--------------------------------------
--------------------------------------
--------------------------------------
Responsive
--------------------------------------
--------------------------------------
--------------------------------------
*/

@media (min-width : 1200px) {

  body[data-is-desktop="true"] .main-header {
    grid-template-columns: var(--header-margin-grid) calc(60px + (290 - 60) * ((100vw - 1200px) / (1920 - 1200))) 1fr calc(60px + (290 - 60) * ((100vw - 1200px) / (1920 - 1200))) var(--header-margin-grid);
  }

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

  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 : 2;
  }

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

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

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

  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 .bwa-menu__top__wrapper {
    background : transparent;
    border-top : none;
  }

  .search-widget form input[type=text] {
    min-height : 52px;
  }

}