///
/// Phantom by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Header */

#header {
  @include padding(0, 0, (2em, 0, -5em, 0));
  margin-bottom: 4.6em;

  .logo {
    display: block;
    border-bottom: 0;
    color: inherit;
    font-weight: _font(weight-bold);
    letter-spacing: _font(letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    max-width: 220px;
    @include breakpoint(min-small) {
      &.hidden-desktop {
        display: none;
      }
    }
    @include breakpoint(small) {
      &.hidden-mobile {
        display: none;
      }
    }
    @include breakpoint(xsmall) {
      margin-bottom: 1em;
    }
    &.hidden-desktop {
      max-width: 50px;
    }

    > * {
      display: inline-block;
      vertical-align: middle;
    }

    .symbol {
      margin-right: 0.65em;
    }
    svg {
      max-width: 100%;
      height: auto;
    }
  }

  nav {
    position: fixed;
    right: 2em;
    top: 2em;
    z-index: _misc(z-index-base);

    ul {
      @include vendor("display", "flex");
      @include vendor("align-items", "center");
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        display: block;
        padding: 0;

        a {
          display: block;
          position: relative;
          height: 3em;
          line-height: 3em;
          padding: 0 1.5em;
          background-color: transparentize(_palette(bg), 0.5);
          border-radius: _size(border-radius);
          border: 0;
          font-size: 0.8em;
          font-weight: _font(weight-bold);
          letter-spacing: _font(letter-spacing);
          text-transform: uppercase;
        }

        a[href="#menu"] {
          -webkit-tap-highlight-color: transparent;
          width: 4em;
          text-indent: 4em;
          font-size: 1em;
          overflow: hidden;
          padding: 0;
          white-space: nowrap;

          &:before,
          &:after {
            @include vendor(
              "transition",
              "opacity #{_duration(transition)} ease"
            );
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 2em 2em;
          }

          &:before {
            background-image: svg-url(
              '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>'
            );
            opacity: 0;
          }

          &:after {
            background-image: svg-url(
              '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>'
            );
            opacity: 1;
          }

          &:hover {
            &:before {
              opacity: 1;
            }

            &:after {
              opacity: 0;
            }
          }
        }
      }
    }
  }

  @include breakpoint(small) {
    nav {
      right: 0.5em;
      top: 0.5em;

      ul {
        li {
          a[href="#menu"] {
            &:before,
            &:after {
              background-size: 1.5em 1.5em;
            }
          }
        }
      }
    }
  }
}
.header {
  &-content {
    @include vendor("display", "flex");
    @include vendor("align-items", "center");
    @include vendor("justify-content", "space-between");
    @include breakpoint(xsmall) {
      flex-wrap: wrap;
      justify-content: center;
    }
    &-logo {
      margin-right: 20px;
    }
    &-menu {
      @include vendor("display", "flex");
      @include vendor("align-items", "center");
      @include vendor("justify-content", "flex-end");
      flex: 1 0 auto;
      @include breakpoint(xsmall) {
        margin-bottom: 1em;
        @include vendor("justify-content", "center");
      }
    }
    .menu-list {
      @include vendor("display", "flex");
      @include vendor("align-items", "center");
      list-style: none;
      list-style-image: none;
      margin-bottom: 0;
      padding: 0;
      &-item {
        margin: 0 15px;
        padding-left: 0;
      }
      .link {
        img {
          margin-right: 16px;
        }
        .text {
          margin-left: 0;
        }
      }
    }
  }
}

#hamburger_menu_close {
  display: none;
}

.header-content-logo aside {
  display: none;
}

$topBarSize: 58px;

@include breakpoint(small) {
  .header-content .menu-list {
    display: block;
    margin-top: -91px;
  }
  .header-content .menu-list-item {
    margin: 12px 10px;
  }
  .header-content-menu {
    width: 100%;
    position: absolute;
    height: calc(100vh - #{$topBarSize});
    background: #fff;
    top: $topBarSize;
    z-index: 2;
    left: 100%;
    #custom-searchbox {
      display: none;
    }
  }
  .link {
    position: relative;
    font-size: 20px;
    img {
      position: absolute;
      left: -36px;
      top: 2px;
    }
  }
  #header {
    padding: 15px 0;
    box-shadow: 0px 0px 6px rgba(41, 41, 132, 0.12);
    position: fixed;
    overflow: hidden;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: #ffffff;

    .logo {
      margin-bottom: 0;
    }
  }
  .header-content-logo {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 0;
    .blog-page & {
      padding: 0 15px;
    }
    aside {
      position: relative;
      display: block;

      img {
        display: block;
        position: absolute;
        top: 50%;
        height: 40px;
        min-width: 28px;
        transform: translateY(-50%);
        right: -0;
      }
    }
  }
}
