/*------------------------------------*\
  $HEADER
\*------------------------------------*/

$menu-toggle-background-color: $brand;
$javascript-notice-background-color: #ffe5e5;
$javascript-notice-text-color: red;

.page-header {
  position: relative;
  overflow: hidden;

  margin: 0;
  padding: 20px;
  background: $white;

  border: 1px solid #d9d9d9;
  border: {
    bottom: 5px solid #D0D0D0;
  }

  border-radius: 6px 6px 0 0;

  @include mq(mq600) {
    padding: 25px;
  }

  @include mq(mq960) {
    padding: 30px;
  }

  @include mq(mq1200) {
  }

  &__link {
    float: left;
    clear: left;
  }

  .link {

    &--admin {
      font: {
        size: font-size(26);
        weight: bold;
      }
      text-transform: uppercase;

      margin: {
        bottom: 20px;
      }

      color: $base-font-color;

      @include mq(mq600) {
        margin: 0;
      }

      @include mq(mq960) {
        position: absolute;
        top: 0;
        left: 0;

        margin: 30px;

        line-height: 30px;
      }
    }

    &--site,
    &--sign-out {
      @include mq(mq600) {
        float: right;
        clear: right;
      }

      @include mq(mq960) {
        line-height: 30px;
      }
    }

    &--site {
      margin: {
        bottom: 10px;
      }

      @include mq(mq960) {
        margin: {
          left: 35%;
          bottom: 0;
        }
        position: absolute;

        top: 30px;
        left: 30px;

        float: left;
        clear: none;
      }

      @include mq(mq1200) {
        margin: {
          left: 25%;
        }
      }
    }

    &--sign-out {

      span {
        color: $base-font-color;
      }

      @include mq(mq960) {
        clear: none;
      }
    }
  }
}

.js-notice {
  padding: 20px 0;
  background: {
    color: $javascript-notice-background-color;
  }
  text-align: center;

  p {
    margin: 0;
    color: $javascript-notice-text-color;
  }
}