// Header
//
// This is on the top of every page. Find in _includes/layout/header.html
//
// Markup:
// <header class="header">
//   <div>
//     <a class="header-image_link" href="/">
//       <img class="header-image" src="https://eiti-dev.18f.gov/img/NRRD-logo.svg" alt="NRRD logo">
//     </a>
//   </div>
//   <nav class="header-nav">
//     <ul class="header-nav_inner">
//       <li class="header-nav_item">
//         <a class="header-nav_item_link" href="{{ site.baseurl }}/">Home</a>
//       </li>
//       <li class="header-nav_item">
//         <a class="header-nav_item_link" href="{{ site.baseurl }}/about">About USEITI</a>
//       </li>
//     </ul>
//   </nav>
// </header>
//
// Styleguide blocks.header

//header,
//.header {
//  margin-top: $base-padding;
//}

.header-image_link {
  &:hover,
  &:focus {
    border: none;
    text-decoration: none;
  }
}

.header-image {
  width: $nrrd-logo-width;

  @include respond-to(tiny-down) {
    width: 225px;
  }
}

.header-left {
  @include span-columns(6);
  margin-bottom: $base-padding-base;

  @include respond-to(medium-up) {
    @include span-columns(3);
    margin-bottom: 0;
    margin-top: 2rem;
 }
}

.header-right {
  float: right;

  &.header-bars {
    display: inline-block;
    margin-right: (-1 * $base-padding-lite); // unfortunately necessary hack
    margin-top: 1px; // for alignment with logo
    padding: 0 $base-padding-lite;

    icon {
      @include font-size(1.87);
    }
  }

  &.header-nav {
    display: none;
  }

  @include respond-to(medium-up) {

    &.header-bars {
      display: none;
    }

    &.header-nav {
      @include span-columns(9);
      @include omega();
      display: inline-block;
    }
  }
}

.header-bars {
  background-color: transparent;
}

.header-nav_top,
.header-nav_bottom {
  @include heading('para-md');
  display: inline-block;
  float: right;

  @include respond-to(medium-up) {
    padding-right: 0;
  }
}

.header-nav_bottom {
  margin-bottom: $base-padding-base;
}

.header-nav_top {
  margin-bottom: 2.865em;

  @include respond-to(huge-plus-up) {
    margin-bottom: 4.875em;
  }
}

.header-nav_item,
.header-nav_item_top {
  display: inline-block;
  font-weight: $weight-light;
  padding-bottom: $base-padding-lite;
  padding-right: $base-padding;
  padding-top: 0;
}

.header-nav_item_top {
  padding-top: $base-padding / 2;
}

.header-nav_item:last-child,
.header-nav_item_top:last-child {
  padding-right: 0;
}

.header-nav_item.active {
  .header-nav_item_link {
    font-weight: $weight-bold;
  }
}

.header-nav_item_link {
  @include font-size(0.875);
  color: $gray-darkest;
  font-weight: $weight-light;
  text-decoration: none;

  @include respond-to(large-up) {
    @include font-size(1);
  }

  &:hover,
  &:active {
    text-decoration: underline;
  }
}

.header-nav_item_top {
  font-weight: $weight-light;
  padding-right: $base-padding-lite;

  &:nth-child(2),
  &:nth-child(3) {
    padding-left: $base-padding-lite;

  }

  &:last-child {
    margin-bottom: 0.4rem;
    padding-top: 0.35rem;
    vertical-align: top;
  }

  .header-nav_search {
    @include font-size(0.65);

    border-bottom-right-radius: 0;
    border-color: $gray-light;
    border-right: none;
    border-top-right-radius: 0;
    color: $gray-darkest;
    display: inline-block;
    float: left;
    font-family: $base-font-family;
    height: 30px;
    margin: 0;
    margin-left: $base-padding;
    padding: 0.52rem;
    width: 150px;

    @include respond-to(huge-up) {
      padding: 0.42rem;
    }

    @include respond-to(huge-plus-up) {
      @include font-size(0.75);
    }
  }

  .header-nav_search_icon {
    background-color: $blue;
    border-radius: 0 $base-border-radius $base-border-radius 0;
    color: $white;
    cursor: pointer;
    float: right;
    height: 30px;
    padding: 0.42rem;
    width: 37px;
  }
}

.header-nav_item_link_top {
  @extend .header-nav_item_link;
  @include font-size(0.75);

  font-weight: $weight-book;

  &.active {
    font-weight: $weight-book;
    color: $black;
  }
}

.header-nav_item_link_spacer {
  color: $gray-light;
}

[eiti-drawer-toggle] {
  display: inline-block;

  @include respond-to(medium-up) {
    display: none;
  }
}

.header-nav {
  display: none;

  @include respond-to(medium-up) {
    display: block;
  }
}
