// —————————————————————————– // This file contains all styles related to the header of the site/application. // —————————————————————————–

/**

* Site header
*/

.site-header {

border-top: 5px solid $grey-color-dark;
border-bottom: 1px solid $grey-color-light;
box-sizing: content-box;
padding: 0.50rem 0;

}

.header-layout {

// compatibility with all browsers (desktop/mobile) less
// - IE < 10
// - Opera (desktop/mobile) < 12.1
// more datails: http://caniuse.com/#feat=flexbox

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;

-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

@include media-query($on-laptop) {

  margin-right: $spacing-unit;
  margin-left: $spacing-unit;

}

}

.site-title {

font-size: 26px;
font-weight: 300;

&,
&:visited {

  color: $grey-color-dark;

}

}

.burguer {

border: 1px solid $grey-color-dark;
border-radius: 0.25rem;
padding: $spacing-unit / 4;

@include media-query($on-palm) {

  display: none;

}

> svg {

  vertical-align: text-top;

  path {

    fill: $grey-color-dark;

  }
}

}

.site-menu {

background: $background-color;
list-style: none;
margin-left: 0;
position: absolute;
left: -50%;
top: 3.8rem;
transition: 0.5s;

@include media-query($on-palm) {

  position: inherit;
  margin-bottom: 0;
  transition: none;

  // compatibility with all browsers (desktop/mobile) less
  // - IE < 10
  // - Opera (desktop/mobile) < 12.1
  // more datails: http://caniuse.com/#feat=flexbox

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

}

li:last-child {

  border-bottom: 3px solid $grey-color-dark;

  @include media-query($on-palm) {

    border: none;

  }

}

.page-link {

  display: block;
  padding: 0.25rem 0.50rem 0.25rem 2rem;
  color: $text-color;
  border-right: 1px solid $grey-color-light;
  border-bottom: 1px solid $grey-color-light;

  @include media-query($on-palm) {

    border: none;
    padding: 0.25rem 0.50rem;

  }
}

}

/* checkbox */ menu-icon {

display: none;

/* show menu */
&:checked ~ .site-menu {

  transition: 0.5s;
  right: 50%;
  left: 0;

}

}