/* ==========================================================================

NAVIGATION
========================================================================== */

/*

Breadcrumb navigation links
========================================================================== */

.breadcrumbs {

@include container;
@include clearfix;
margin-top: 0;
margin-bottom: 0;
padding-left: 2em;
padding-right: 2em;
-webkit-animation: intro 0.3s both;
        animation: intro 0.3s both;
-webkit-animation-delay: 0.30s;
        animation-delay: 0.30s;

@include breakpoint($large) {
  padding-left: 1em;
  padding-right: 1em;
}

@include breakpoint($x-large) {
  max-width: $x-large;
}

ol {
  padding: 0;
  list-style: none;
  font-size: $type-size-6;

  @include breakpoint($large) {
    @include span(10 of 12 last);
  }

  @include breakpoint($x-large) {
    @include prefix(0.5 of 12);
  }
}

li {
  display: inline;
}

.current {
  font-weight: bold;
}

}

/*

Pagination navigation links
========================================================================== */

.pagination {

@include full();
@include clearfix();
margin-top: 1em;
padding-top: 1em;

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: block;
  float: left;
  margin-left: -1px;

  a {
    display: block;
    margin-bottom: 0.25em;
    padding: 0.5em 1em;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid $border-color;
    border-radius: 0;

    &:hover {
      color: $link-color-hover;
    }

    &.current {
      color: #fff;
      background: $theme-color;
    }

    &.disabled {
      color: mix(#fff, $gray, 75%);
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  &:first-child {
    margin-left: 0;

    a {
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }
  }

  &:last-child {
    a {
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }
}

}

.page__content + .pagination, .page__meta + .pagination, .page__share + .pagination, .page__comments + .pagination {

margin-top: 2em;
padding-top: 0;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;

}

/*

Header navigation
========================================================================== */

.topnav {

-webkit-transform: translate3d(0, 0 , 0);
        transform: translate3d(0, 0 , 0);

@include clearfix();
margin: auto;
margin-bottom: 2em;
max-width: $max-width;

h2, h3, h4, h5, h6 {
  margin-bottom: 0;
}

p, li {
  font-size: 1rem; // prevent fonts from getting smaller with each layer
  line-height: 1.5;
}

}

.topnav__avatar {

display: table-cell;
vertical-align: top;
width: 7em;
height: 7em;

@include breakpoint(max-width $small) {
  @include full();
  height: inherit;
  margin-bottom: 1em;
}

img {
  height: auto;
  @include breakpoint(max-width $small) {
    width: 8em;
    display: block;
    margin: 0 auto;
  }
  @include breakpoint($large) {
    padding: 5px;
  }
}

}

.topnav__content {

display: table-cell;
vertical-align: top;
padding-left: 15px;
padding-right: 25px;
line-height: 1;

@include breakpoint(max-width $small) {
  @include full();
  h3, p, ul, li { text-align: center; }
  ul.collapsed li { text-align: left; }
}
@include breakpoint($large) {
  padding-top: 1em;
}

}

.site__name {

margin: 0;
font-family: $fancy-font-family;
font-size: $type-size-2;

}

.site__bio {

margin: 0;

}

.menu-item {

display: inline-block;
a {
  color: $text-color;
}

}

nav .links {

padding: 0;
font-size: $type-size-3;

}