/**

* Site header
*/

.site-header {

// border-top: 5px solid $grey-color-dark;
border-bottom: 1px solid $grey-color-light;
box-shadow: 0px 3px 11px 1px rgba(0,0,0,0.08);
min-height: $spacing-unit * 1.865;
// Positioning context for the mobile navigation icon
position: relative;

}

.site-title {

@include relative-font-size(1.625);
font-weight: 300;
line-height: $base-line-height * $base-font-size * 2.25;
letter-spacing: -1px;
margin-bottom: 0;
float: left;
&,
&:visited {
    color: $grey-color-dark;
}
img {
    width: $base-line-height * $base-font-size;
    padding: 0 10px 0 0;
}

}

.site-nav {

float: right;
line-height: $base-line-height * $base-font-size * 2.25;
.nav-trigger {
    display: none;
}
.menu-icon {
    display: none;
}
.page-link {
    color: $grey-color;
    line-height: $base-line-height;
    // Gaps between nav items, but not on the last one
    &:not(:last-child) {
        margin-right: 20px;
    }
    &:hover {
        color: $text-color;
    }
}
@include media-query($on-palm) {
    position: absolute;
    top: 9px;
    right: $spacing-unit / 2;
    background-color: $background-color;
    border: 1px solid $grey-color-light;
    border-radius: 5px;
    text-align: right;
    label[for="nav-trigger"] {
        display: block;
        float: right;
        width: 36px;
        height: 36px;
        z-index: 2;
        cursor: pointer;
    }
    .menu-icon {
        display: block;
        float: right;
        width: 36px;
        height: 26px;
        line-height: 0;
        padding-top: 10px;
        text-align: center;
        > svg {
            fill: $grey-color-dark;
        }
      }
    input ~ .trigger {
        clear: both;
        display: none;
      }
    input:checked ~ .trigger {
        display: block;
        padding-bottom: 5px;
      }
    .page-link {
        display: block;
        padding: 5px 10px;
        &:not(:last-child) {
            margin-right: 0;
        }
        margin-left: 20px;
    }
}

}

/**

*/ back-to-top {

overflow: hidden;
z-index: 999;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 50px;
background-color: transparent;
color: #555;
text-align: center;
font-size: 30px;
text-decoration: none;
display: none;
&:hover {
    color: #000;
    font-size: 35px;
    bottom: 47px;
    right: 47px;
}

}

/**

*/ .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 {

float: left;
margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2;

}

.footer-col-1 {

width: -webkit-calc(30% - (#{$spacing-unit} / 2));
width:         calc(30% - (#{$spacing-unit} / 2));

}

.footer-col-2 {

width: -webkit-calc(30% - (#{$spacing-unit} / 2));
width:         calc(30% - (#{$spacing-unit} / 2));

}

.footer-col-3 {

width: -webkit-calc(40% - (#{$spacing-unit} / 2));
width:         calc(40% - (#{$spacing-unit} / 2));

}

@include media-query($on-laptop) {

.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));
}

}

@include media-query($on-palm) {

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

}

/**

*/ .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;
}

}

.post-meta {

font-size: $small-font-size;
color: $grey-color;

}

.post-link {

display: block;
@include relative-font-size(1.5);

}

.post-category {

display: inline-block;
padding: 5px;
border-radius: 7px;
min-width: 20px;
margin: 5px;
color: #fff;
background: $grey-color-dark;
position: relative;
text-decoration: none;
&,
&:hover,
&:visited {
    color: #fff;
}

}

.timeline-wrapper {

position: relative;

}

.timeline {

padding: 5px;
border-radius: 10px;
margin: 15px 5px;
width: 100%;
display: grid;
grid-template-columns: 180px 1fr;
@include media-query($on-palm) {
    display: inline;
}

}

.timeline-date {

color: $grey-color;
font-style: italic;
padding: 8px 15px;

}

.timeline-container {

box-shadow: 0px 3px 11px 1px rgba(0,0,0,0.08);
padding: 8px 15px;
margin-right: 20px;

}

.timeline-content {

display: table;
width: 100%;

}

/**

*/ .post-header {

margin-bottom: $spacing-unit;

}

.post-title {

@include relative-font-size(2.625);
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
    @include relative-font-size(2.25);
}
text-align: center;

}

.post-content {

margin-bottom: $spacing-unit;
h1 {
    @include relative-font-size(2.25);
    @include media-query($on-laptop) {
        @include relative-font-size(2);
    }
    &:before {
        content: '>';
        color: $before-header-color;
        padding-right: 0.5em;
    }
}
h2 {
    @include relative-font-size(2);
    @include media-query($on-laptop) {
        @include relative-font-size(1.75);
    }
    &:before {
        content: '≫';
        color: $before-header-color;
        padding-right: 0.5em;
    }
}
h3 {
    @include relative-font-size(1.625);
    @include media-query($on-laptop) {
        @include relative-font-size(1.375);
    }
    &:before {
        content: '⋙';
        color: $before-header-color;
        padding-right: 0.5em;
    }
}
h4 {
    @include relative-font-size(1.25);
    @include media-query($on-laptop) {
        @include relative-font-size(1.125);
    }
}

}

.post-card {

// border: solid #fafafa;
padding: 5px 15px;
margin: 5px 5px;
box-shadow: 0px 3px 11px 1px rgba(0,0,0,0.08);
border-radius: 5px;
min-width: 200px;
display: inline-block;

}

.post-date {

display: inline-block;
color: $grey-color;
padding: 0 15px 0 0;
font-style: italic;

}

.post-name {

display: inline-block;
a {
    font-size: 1.2em;
}

}