/**

  @site-header
--------------------------------------------------------
  modules/_site-header.scss
--------------------------------------------------------

  Site-wide header

------------------------------------------------------ */

.site-header {
  @include clearfix();
  padding: 1*$unit 0;
  border-bottom: 1px solid $color__grey--light;
}





/* @branding
--------------------------------------------------------

  The logo & (optional) wordmark

  Example: Branding logo
  <a class="branding" href="/">
    <img class="branding__logo img--title" src="images/logo.svg" alt="My Company">
    <h1 class="branding__wordmark">My Company</h1>
  </a>

------------------------------------------------------ */

.branding {
  margin: 0 auto 1*$unit;
  text-decoration: none;
  display: block;
  text-align: center;
  @include bp-at-least($breakpoint__md) {
    margin: 0;
    float: left;
    text-align: left;
  }
}

.branding__logo {
  height: 3*$unit;
  width: 3*$unit;
  @include bp-at-least($breakpoint__md) {
    float: left;
    margin-right: 1*$unit;
  }
}

.branding__wordmark {
  font-size: 1.5*$unit;
  white-space: nowrap;
  line-height: 2*$unit;
  margin: 0;
}





/*

  @site-nav
--------------------------------------------------------

  The main site navigation.

-----------------------------------------------------  */

.site-nav {
  text-align: center;
  @include bp-at-least($breakpoint__md) {
    float: right;
  }
  a {
    display: inline-block;
    height: 3*$unit;
    line-height: 3*$unit;
    padding: 0 .5em;
    margin-left: .5*$unit;
    &:first-child {
      margin-left: 0;
    }
  }

}