/**
 * Site header
 */
.site-header {
  // border-top: 5px solid $grey-color-dark;
  // border-bottom: 1px solid $grey-color-light;
  min-height: $spacing-unit * 1.865;
  // line-height: $base-line-height * $base-font-size * 2.25;

  // Positioning context for the mobile navigation icon
  position: relative;
}

.top-bar {
  height: $spacing-unit * 1.365;
  line-height: $spacing-unit * 1.365;
  border-bottom: 1px solid $grey-color-light;
  background-color: $grey-color-extra-light;

  .contact {
    a {
      color: $grey-color;

      &:hover {
        text-decoration: none;
      }
    }
  }

  .social-links {
    float: right;
  }

  &:after {
    clear: both;
  }
}

.logo-wrapper {
  padding: $spacing-unit * 0.865 0 $spacing-unit * 0.865 0;
  text-align: center;

  .logo-text {
    font-size: 18pt;
    color: $text-color;
    @include relative-font-size(2.382);
  }

  a {
    &:hover {
      text-decoration: none;
    }
  }

  img {
    width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  @media screen and (min-width: $on-medium) {
    padding: $spacing-unit * 1.865 0 $spacing-unit * 1.865 0;

    img {
      width: 50%;
      height: auto;
      margin: 0 auto;
      display: block;
    }
  }
}

.site-nav {
  border-top: 1px solid $grey-color-light;
  border-bottom: 1px solid $grey-color-light;
  text-align: center;

  .page-link {
    display: inline-block;
    color: $grey-color;
    padding: ($spacing-unit / 2);

    &:hover {
      color: $grey-color-dark;
      text-decoration: none;
    }

    margin-left: 20px;

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

    &:last-child {
      padding-right: 0;
      margin-right: 0;
    }
  }

  @media screen and (min-width: $on-medium) {
    // position: static;
    // float: right;
    // border: none;
    // background-color: inherit;

    // label[for="nav-trigger"] {
    //   display: none;
    // }

    // .menu-icon {
    //   display: none;
    // }

    // input ~ .trigger {
    //   display: block;
    // }

    // .page-link {
    //   display: inline;
    //   padding: 0;

    //   &:not(:last-child) {
    //     margin-right: 20px;
    //   }
    //   margin-left: auto;
    // }
  }
}

/**
 * Site footer
 */
.site-footer {
  border-top: 1px solid $grey-color-light;
  padding: $spacing-unit 0;
}

.footer-heading {
  @include relative-font-size(1.125);
  margin-bottom: $spacing-unit / 2;
}

.contact-list,
.social-media-list {
  list-style: none;
  margin-left: 0;
}

.footer-col-wrapper {
  @include relative-font-size(0.9375);
  color: $grey-color;
  margin-left: -$spacing-unit / 2;
  @extend %clearfix;
}

.footer-col {
  width: -webkit-calc(100% - (#{$spacing-unit} / 2));
  width: calc(100% - (#{$spacing-unit} / 2));
  margin-bottom: $spacing-unit / 2;
  padding-left: $spacing-unit / 2;
}

.footer-col-1,
.footer-col-2 {
  width: -webkit-calc(50% - (#{$spacing-unit} / 2));
  width: calc(50% - (#{$spacing-unit} / 2));
}

.footer-col-3 {
  width: -webkit-calc(100% - (#{$spacing-unit} / 2));
  width: calc(100% - (#{$spacing-unit} / 2));
}

@media screen and (min-width: $on-large) {
  .footer-col-1 {
    width: -webkit-calc(35% - (#{$spacing-unit} / 2));
    width: calc(35% - (#{$spacing-unit} / 2));
  }

  .footer-col-2 {
    width: -webkit-calc(20% - (#{$spacing-unit} / 2));
    width: calc(20% - (#{$spacing-unit} / 2));
  }

  .footer-col-3 {
    width: -webkit-calc(45% - (#{$spacing-unit} / 2));
    width: calc(45% - (#{$spacing-unit} / 2));
  }
}

@media screen and (min-width: $on-medium) {
  .footer-col {
    float: left;
  }
}

/**
 * Page content
 */
.page-content {
  padding: $spacing-unit 0;
  flex: 1 0 auto;
}

.page-heading {
  @include relative-font-size(2);
}

.post-list-heading {
  @include relative-font-size(1.75);
}

.post-list {
  margin-left: 0;
  list-style: none;

  >li {
    // margin-bottom: $spacing-unit;
    padding: $spacing-unit 0;
    border-bottom: 1px solid $grey-color-light;
  }

  .post-content {
    @include relative-font-size(1);
    margin-top: $spacing-unit * 0.191;
  }
}

.post-meta {
  font-size: $small-font-size;
  color: $grey-color;
  margin-bottom: $spacing-unit * 0.382;

  i {
    color: $brand-color;
  }
}

.post-title {
  .post-link {
    display: block;
    color: $text-color;
    @include relative-font-size(1.5);

    &:hover {
      text-decoration: none;
    }
  }

  margin: 0 0 $spacing-unit * 0.382 0;
}

.post-store {
  display: flex;
  margin-top: $spacing-unit * 0.382;

  a {
    flex: 1;
    margin: $spacing-unit * 0.382;
  }

  @media screen and (min-width: $on-medium) {
    a {
      margin: $spacing-unit * 0.382 $spacing-unit * 2.618 $spacing-unit * 0.382 $spacing-unit * 2.618;
    }
  }
}

/**
 * Posts
 */
.post {
  .post-store {
    margin-bottom: $spacing-unit;
  }

  .post-header {
    margin-bottom: $spacing-unit;
  }

  .post-landing-image {
    margin: 0 0 $spacing-unit * 0.618 0;
  }

  .post-title,
  .post-content h1 {
    @include relative-font-size(2.625);
    letter-spacing: -1px;
    line-height: 1;

    @media screen and (min-width: $on-large) {
      @include relative-font-size(2.625);
    }
  }

  .post-content {
    margin-bottom: $spacing-unit;

    h2 {
      @include relative-font-size(1.75);

      @media screen and (min-width: $on-large) {
        @include relative-font-size(2);
      }
    }

    h3 {
      @include relative-font-size(1.375);

      @media screen and (min-width: $on-large) {
        @include relative-font-size(1.625);
      }
    }

    h4 {
      @include relative-font-size(1.125);

      @media screen and (min-width: $on-large) {
        @include relative-font-size(1.25);
      }
    }
  }

}

.social-media-list {
  display: table;
  margin: 0 auto;

  li {
    float: left;
    margin: 0 5px;

    &:first-of-type {
      margin-left: 0;
    }

    &:last-of-type {
      margin-right: 0;
    }

    a {
      display: block;
      padding: $spacing-unit / 4;
      border: 1px solid $grey-color-light;
    }

    &:hover .svg-icon {
      fill: currentColor;
    }
  }
}

/**
 * Grid helpers
 */
@media screen and (min-width: $on-large) {
  .one-half {
    width: -webkit-calc(50% - (#{$spacing-unit} / 2));
    width: calc(50% - (#{$spacing-unit} / 2));
  }
}


/**
 * Etc
 */
.brand-bg a i {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  font-size: 14px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -o-transition: background 2s ease;
  -ms-transition: background 2s ease;
  transition: background 2s ease;
}

.brand-bg a i:hover {
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -o-transition: background 2s ease;
  -ms-transition: background 2s ease;
  transition: background 2s ease;
}

.brand-bg a.facebook i {
  background: #3280e7;
}

.brand-bg a.facebook i:hover {
  background: #134fa0;
}

.brand-bg a.twitter i {
  background: #32c8de;
}

.brand-bg a.twitter i:hover {
  background: #188392;
}

.brand-bg a.telegram i {
  background: #32c8de;
}

.brand-bg a.telegram i:hover {
  background: #188392;
}

.brand-bg a.google-plus i {
  background: #f96f4a;
}

.brand-bg a.google-plus i:hover {
  background: #eb6440;
}

.brand-bg a.linkedin i {
  background: #729fda;
}

.brand-bg a.linkedin i:hover {
  background: #3069b6;
}

.brand-bg a.keybase i {
  background: #729fda;
}

.brand-bg a.keybase i:hover {
  background: #3069b6;
}

.brand-bg a.microdotblog i {
  background: #f8a841;
}

.brand-bg a.microdotblog i:hover {
  background: #cc7607;
}

.brand-bg a.pinterest i {
  background: #ed5441;
}

.brand-bg a.pinterest i:hover {
  background: #b72411;
}

.brand-bg a.dropbox i {
  background: #32c8de;
}

.brand-bg a.dropbox i:hover {
  background: #188392;
}

.brand-bg a.bitcoin i {
  background: #f8a841;
}

.brand-bg a.bitcoin i:hover {
  background: #cc7607;
}

.brand-bg a.foursquare i {
  background: #22bed4;
}

.brand-bg a.foursquare i:hover {
  background: #146f7c;
}

.brand-bg a.flickr i {
  background: #ff61e7;
}

.brand-bg a.flickr i:hover {
  background: #fa00d4;
}

.brand-bg a.github i {
  background: #666666;
}

.brand-bg a.github i:hover {
  background: #333333;
}

.brand-bg a.instagram i {
  background: #d6917a;
}

.brand-bg a.instagram i:hover {
  background: #b35637;
}

.brand-bg a.skype i {
  background: #32c8de;
}

.brand-bg a.skype i:hover {
  background: #188392;
}

.brand-bg a.tumblr i {
  background: #84a1c8;
}

.brand-bg a.tumblr i:hover {
  background: #476d9f;
}

.brand-bg a.vimeo i {
  background: #32c8de;
}

.brand-bg a.vimeo i:hover {
  background: #188392;
}

.brand-bg a.dribbble i {
  background: #ff2edf;
}

.brand-bg a.dribbble i:hover {
  background: #c700a9;
}

.brand-bg a.youtube i {
  background: #ed5441;
}

.brand-bg a.youtube i:hover {
  background: #b72411;
}

.brand-bg a.youtube_channel i {
  background: #ed5441;
}

.brand-bg a.youtube_channel i:hover {
  background: #b72411;
}

.brand-bg a.email i {
  background: #32c8de;
}

.brand-bg a.email i:hover {
  background: #188392;
}

.brand-bg a.rss i {
  background: #d6917a;
}

.brand-bg a.rss i:hover {
  background: #b35637;
}

.brand-bg a.mastodon i {
  background: #3280e7;
}

.brand-bg a.mastodon i:hover {
  background: #134fa0;
}

/* Circle */
.circle-1 {
  display: inline-block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
}

.circle-2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 100%;
}

.circle-3 {
  display: inline-block;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 100%;
}

.circle-4 {
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
}

.circle-5 {
  display: inline-block;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 100%;
}