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

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

@keyframes header-slide-down {
  from   { top: -200px; }
  to     { top: 0px; }
}

.page-header {
  overflow: hidden;

  .site--home & {
    position: relative;
    z-index: 2;
  }

  @include mq(mq960) {
    &.is-sticky {
      background: #fff;
      box-shadow: 0 0 5px rgba(#000, 0.25);

      position: fixed;
      top: -90px;

      width: 100%;
      height: 90px;
      padding: 0;

      z-index: 100;

      animation: header-slide-down .5s;
      animation-delay: .5s;
      animation-fill-mode: forwards;

      .wrap {
        height: 90px;
        width: 2000px;
        max-width: 100%;
        padding: {
          right: 20px;
          left: 15px;
        }
      }

      .page-header {
        &__logo {
          width: 62px;
          height: 67px;
          position: relative;
          top: 11px;

          img {
            border: 0;
            width: 62px;
            height: 67px;
          }
        }

        &__number {
          display: none;
        }
      }

      .btn {
        right: 20px;
        z-index: 11;

        &--share {
          display: none;
        }
      }

      .primary-navigation {
        margin: {
          top: -90px;
        }

        ul {
          width: auto;
          max-width: 100%;
          position: absolute;
          top: 0;
          right: 257px; // 467
          margin: 0;
          height: 90px;
        }

        li {
          &:last-of-type a {
            border-right: 1px solid #e5e5e5;
          }
        }

        a {
          height: 90px;
          line-height: 90px;
          padding: {
            right: 10px;
            left: 10px;
          }
        }
      }
    }
  }

  @include mq(mq1080) {
    &.is-sticky {
      .primary-navigation {
        ul {
          right: 268px;
        }

        a {
          padding: {
            right: 20px;
            left: 20px;
          }
        }
      }
    }
  }

  @include mq(mq1200) {
    &.is-sticky {
      .primary-navigation {
        ul {
          right: 273px;
        }

        a {
          padding: {
            right: 25px;
            left: 25px;
          }
        }
      }
    }
  }

  @include mq(mq1300) {
    &.is-sticky {
      .primary-navigation {
        ul {
          right: 278px;
        }

        a {
          padding: {
            right: 30px;
            left: 30px;
          }
        }
      }
    }
  }

  @include mq(mq1400) {
    &.is-sticky {
      .page-header {
        &__number {
          display: block;
        }
      }

      .primary-navigation {
        ul {
          right: 467px;
        }

        a {
          padding: {
            right: 30px;
            left: 30px;
          }
        }
      }
    }
  }

  .wrap {
    // max-width: 100%;
    overflow: hidden;
    position: relative;

    @include mq(mq960) {

    }
  }

  &__logo {
    float: left;

    width: 110px;
    height: 117px;
    position: relative;
    z-index: 10;

    @include mq(mq600) {
      width: 138px;
      height: 149px;
    }

    @include mq(mq960) {
      width: 170px;
      height: 184px;
    }

    /**
     * 1. Fixes an issue that causes a jump when converting images to svg code
     */
    svg,
    img {
      display: block; /* 1 */
      width: 108px;
      height: 117px;
      border: 1px solid #e5e5e5;
      margin: 0;

      @include mq(mq600) {
        width: 138px;
        height: 149px;
      }

      @include mq(mq960) {
        width: 168px;
        height: 182px;
      }
    }
  }

  &__cutmaster {
    position: absolute;

    left: 130px;
    top: 30px;

    width: 130px;

    @include mq(mq600) {
      top: 40px;
      left: 175px;
    }

    @include mq(mq768) {
      top: 30px;
      width: auto;
    }

    @include mq(mq960) {
      left: 200px;
      top: 20px;
    }

    .is-sticky & {
      display: none;
    }
  }

  &__number {
    display: none;
    float: right;
    color: $brand;
    font: {
      family: $heading-font;
      weight: 400;
      size: font-size(20);
    }

    @include mq(mq600) {
      display: block;
      position: absolute;
      top: 47px;
      right: 83px;
    }

    @include mq(mq960) {
      top: 35px;
      right: 265px;
    }

    strong {
      font: {
        family: $heading-font;
        weight: 400;
      }
      color: $dark-grey;
    }
  }

  &__menu {
    float: right;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 25px;
    right: 0;
    border: 0;
    padding: 0;
    background: #fff;

    @include mq(mq600) {
      top: 35px;
    }

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

    svg {
      width: 22px;
      height: 19px;
      fill: $brand;
      display: block;
      position: relative;
      left: 50%;
      margin: {
        left: -11px;
      }
    }
  }

  .btn {
    display: none;

    @include mq(mq960) {
      display: block;
    }

    &--enquiry {
      position: absolute;
      top: 25px;
      right: 0;
    }

    &--share {
      position: absolute;
      top: 37px;
      right: 483px;

      svg {
        fill: #3e3e3e;
      }
    }
  }
}

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

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