/**
 * Site header
 */
.site-header {
    border-top: 5px solid $grey-colour-dark;
    border-bottom: 1px solid $grey-colour-light;
    min-height: 56px;

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

.site-title {
    font-size: 36px;
    font-weight: bold;
    line-height: 64px;
    letter-spacing: -1px;
    margin-bottom: 0;

    color: $text-color;
    &:visited {
        color: $text-color;
    }
}


/**
 * Site footer
 */
body > footer {
    border-top: 1px solid $grey-colour-light;
    padding: $spacing-unit 0;
    margin-top: $spacing-unit;
}


/**
 * Post list
 */

.past-issues {
    margin-top: 20px;

    li.nav-header h2 {
        border-bottom: 1px solid $grey-colour-light;
    }

    li {
        line-height: 1.8;
    }
}

.time-prefix {
    font-family: "Fira Mono", monospace;
}

.post-title {
    font-size: 20px;
}

/**
 * Search
 */
 .search {
    li.nav-header h2 {
        border-bottom: 1px solid $grey-colour-light;
    }

    li {
        line-height: 1.8;
    }
}

.stork-close-button {
    right: 15px;
    top: 149px;
    bottom: unset;
}

.stork-progress {
    position: relative;
}

/**
 * Page content
 */
.page-content {
    padding-top: $spacing-unit;
}

.page-heading {
    font-size: 20px;
}

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

    > li {
        margin-bottom: $spacing-unit;
    }
}

.post-meta {
    font-size: $small-font-size;
    color: $grey-colour;
}

.post-link {
    display: block;
    font-size: 24px;
}



/**
 * Posts
 */

.post {
    margin-bottom: 32px;
    border-bottom: 1px solid $grey-colour-light;
    padding: 24px;
    border-radius: 8px;
}

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

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

    h1, h2, h3, h4 {
        font-weight: bold;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 16px;
    }
}

.post-neighbors {
    font-size: 16px;
    margin-top: 15px;
    &::after {
        content: " ";
        display: block;
        clear: both;
    }
    $arrow-margin: 6px;

    .neighbor {
        display: inline-flex;
        align-items: center;
        line-height: 1.25;
        color: $text-color;
        &:hover {
            text-decoration: none;
            .neighbor-title {
                text-decoration: underline;
            }
        }

        &.prev-article {
            float: left;
            .neighbor-arrow {
                margin-right: $arrow-margin;
            }
        }
        &.next-article {
            float: right;
            text-align: right;
            .neighbor-arrow {
                margin-left: $arrow-margin;
            }
        }

        .neighbor-arrow {
            font-size: 24px;
            display: inline-block;
        }
        .neighbor-content {
            display: inline-block;

            .neighbor-label {
                display: block;
            }
            .neighbor-title {
                color: $brand-color;
            }
        }
    }
}

blockquote p {
  white-space: pre-line;
}

.emoji {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 0px none;
}

/**
 * For honeypot
 */
.out-of-view-input {
  position: absolute;
  left: -5000px;
}
