// Header
body > header {
  border-top: 5px solid $border-color-03;
  border-bottom: 1px solid $border-color-01;
  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;

  > div > a {
    position: absolute;
    left: 0;
    top: 0;
//    transform: translateY(-100%);
//    transition: transform 0.3s;

    & :focus {
      transform: translateY(0%);
      color: red;
    }
  }

  & a,
  & a:visited {
    color: $site-title-color;
  }

  h2 {
    @include relative-font-size(1.625);
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 0;
    float: left;

    @include media-query($on-tablet) {
//      padding-right: 45px;
    }
  }

  nav {
    position: absolute;
    margin-top: 9px;
    right: calc($spacing-unit / 2);
    background-color: $background-color;
    border: 1px solid $border-color-01;
    border-radius: 5px;
    text-align: right;
    float: right;
    line-height: $base-line-height * $base-font-size * 2.25 - 18px;

    details > a {
      padding-right: 9px;
    }

    summary::-webkit-details-marker { display: none; }
    summary {
      cursor: pointer;
      list-style: none;
      line-height: 16px;
      padding: 10px 9px 8px;

      > svg path {
        fill: $border-color-03;
      }
    }

    a {
      color: $text-color;
      line-height: $base-line-height;
      display: block;
      padding: 5px 0;

      &:last-child {
        padding-bottom: 10px;
      }
      margin-left: 20px;
    }

    @media screen and (min-width: $on-medium) {
      position: absolute;
      right: calc((100% - #{$content-width} + #{$spacing-unit} * 2) / 2);
    }
  }
}


// Main
body > main {
  padding: $spacing-unit 0;
  flex: 1 0 auto;


  // Home page, category page
  > div {
    > h1 {
      @include relative-font-size(2);
      line-height: 1.2em;
    }

    > p {}

    > h2 {
      @include relative-font-size(1.75);
      margin-bottom: 0;
    }

    > article {
      &:not(:first-child) {
        margin-top: $spacing-unit;
      }

      > header {
        margin-bottom: 0;
      }

      > header dt,
      > header dd {
        display: inline;
      }
      > header dt:after {
        content: ":\00a0";
      }
      > header dt:not(:first-child):before {
        content: " • ";
      }

      > header > time {}

      > header > h3 {
        @include relative-font-size(1.5);
        margin-bottom: 1px;
        line-height: 1.2;
      }

      + p {
        margin-top: $spacing-unit;
      }
    }
  }


  // Page, Post
  > article {
    > header > img {
      margin-bottom: calc($spacing-unit / 2);
    }

    > header > h1 {
      @include relative-font-size(2);
      // margin-bottom: 0; for only post b/c meta
    }

    > header dt,
    > header dd {
      display: inline;
    }
    > header dt:after {
      content: ":\00a0";
    }
    > header dt:not(:first-child):before {
      content: " • ";
    }

    > div {
      margin-bottom: $spacing-unit;

      h1, h2, h3, h4, h5, h6 { margin-top: $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.25);
      }

      h5 {
        @include relative-font-size(1.125);
      }

      h6 {
        @include relative-font-size(1.0625);
      }

      img {
        display: block;
        margin: 0 auto calc($spacing-unit / 2);
      }

      figcaption { text-align: center; }
    }


    // Home, Post
    > header {
      margin-bottom: $spacing-unit;
    }
  }


  // Tumblelog
  > h1 {
    @include relative-font-size(2);
    line-height: 1.2em;
    margin-bottom: $spacing-unit;
  }

  > article {
    > header > h2 {
      @include relative-font-size(2);
      margin-bottom: 1px;
      line-height: 1.2;
    }

    > div > h2 {
      @include relative-font-size(1.75);
      line-height: 1.15;
    }
  }


  article > header * {
    margin-bottom: 0;
  }

  article > header > h1 {
    margin-bottom: calc($spacing-unit / 2);
  }

  article > header > time,
  article > header > dl {
    font-size: $small-font-size;
    color: $brand-color;
  }

  article > header > h1 {
    @include relative-font-size(2.625);
    letter-spacing: -1px;
    line-height: 1.15;

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


// Footer
body > footer {
  border-top: 1px solid $border-color-01;
  padding: $spacing-unit 0;

  * {
    color: $brand-color;
  }

  h2 {
    @include relative-font-size(1.125);
    margin-bottom: calc($spacing-unit / 2);

    > a,
    > a:visited { color: $site-title-color; }

    span {
      margin-left: calc($spacing-unit / 5);
      a {
        padding: calc($spacing-unit / 5);
        &:hover { color: $border-color-02; }
        svg {
          color: $brand-color;
          width: 1em;
          height: 1em;
          display: inline-block;
          fill: currentColor;
          vertical-align: text-bottom;
        }
      }
    }
  }

  p,
  form {
    @include relative-font-size(0.9375);
  }

  p {
    margin-bottom: calc($spacing-unit / 2);
  }

  input[type="search"] {
    width: 100%;
    font-size: $base-font-size;
    border: 1px solid $border-color-01;
    background-color: $background-color;
    color: $text-color;
  }

  input[type="submit"] { visibility: hidden; }
}


table {
  margin-top: $spacing-unit;
}

// Make sure embeds and iframes fit their containers
embed,
iframe,
object,
video {
	margin-bottom: $spacing-unit;
	max-width: 100%;
	vertical-align: middle;
}

@media screen and (min-width: $on-small) {
  body > footer input[type="search"] { width: 50%; }
}


// Footnotes. The class is automatically created by either the kramdown or gfm plugin
hr:has(+ .footnotes) {
  margin-bottom: calc($spacing-unit / 2);
}

.footnotes {
  font-size: $small-font-size;
}