// -----------------------------------------------------------------------------
// 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;

  }
}