// -----------------------------------------------------------
// Site header
//
// The very top of the site, element that usually includes
// the site navigation and search for example.
// -----------------------------------------------------------

.site-header {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  z-index: 15;

  @media (min-width: $responsivenav) {
    padding-top: 20px;
  }

  .container {
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;

    @media (max-width: $responsivenav - 1px) {
      padding: 0;
    }
  }
}

.site-branding {
  float: left;
}

.site-title {
  margin: 0;

  // The point where logo touches the left side
  @media (max-width: $grid-base-size+20) {
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
  }

  // The point where navigation turns into mobile nav
  @media (max-width: $responsivenav - 1px) {
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 0;
    margin-right: 0;
  }

  a {
    display: block;
    position: relative;

    @media(max-width: $responsivenav) {
      top: 1rem;
    }

    svg {
      fill: #fff;
      transition: all .22s;
    }

    &:hover {
      svg {
        fill: $color-links;
      }
    }
  }
}