@import "_reset";
@import "_mixins";
@import "_fonts";
@import "_vars";

html {
    font-size: 110%;
}

body {
    background: $color-footer-bg; // The page background is set on .sitewrapper
    line-height: 1.5;
    padding-bottom: 1rem;
    font-family: "Rebond Grotesque", sans-serif;
    font-feature-settings:
        "ss06" 1,
        "ss07" 1,
        "ss09" 1,
        "liga" 1,
        "calt" 1,
        "dlig" 1;
    font-display: swap;
    color: $color-fg;
    @media (prefers-color-scheme: dark) {
        color: invert($color-fg);
        background: invert($color-footer-bg);
    }
}

.skip-link {
    position: absolute;
    top: 0;
    transform: translateY(-100%);

    &:focus {
        transform: translateY(0);
    }
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: $color-heading;
    @media (prefers-color-scheme: dark) {
        color: invert($color-heading);
    }
}

h1 {
    font-size: $font-size-h1;
}
h2 {
    font-size: $font-size-h2;
}
h3 {
    font-size: $font-size-h3;
}
h4 {
    font-size: $font-size-h4;
}
h5 {
    font-size: $font-size-h5;
}
h6 {
    font-size: $font-size-h6;
}

big {
    font-size: $font-size-h4;
    line-height: 1.2;
}

a {
    color: $color-primary;
    text-underline-offset: 2px;

    @media (prefers-color-scheme: dark) {
        color: invert($color-primary);
    }
}

header,
main,
footer {
    padding: 0 1rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

dl {
    dt {
        float: left;
        margin-right: 4px;

        &::after {
            content: ":";
        }
    }
}

blockquote {
    border-left: 2px solid $color-primary;
    padding-left: 1rem;
    font-style: italic;

    @media (prefers-color-scheme: dark) {
        border-left-color: invert($color-primary);
    }
}

pre {
    overflow-x: scroll;
}

input {
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    border: 1px solid $color-input-border;
    background: $color-input-bg;
    font: inherit;
    @media (prefers-color-scheme: dark) {
        background: invert($color-input-bg);
        border: 1px solid invert($color-input-border);
        color: invert($color-fg);
    }
}

input[type="button"],
input[type="submit"] {
    background: $color-primary;
    color: invert($color-heading);
    border: 1px solid darken($color-primary, 10%);

    @media (prefers-color-scheme: dark) {
        background: invert($color-primary);
        border-color: darken(invert($color-primary), 10%);
        color: $color-fg;
    }

    &:hover {
        background: darken($color-primary, 10%);
        cursor: pointer;

        @media (prefers-color-scheme: dark) {
            background: darken(invert($color-primary), 10%);
        }
    }
}

.sitewrapper {
    @include stack(1.5rem);
    background: $color-bg;
    padding: 1.5rem 0;
    border-bottom: 1px solid $color-border;
    @media (prefers-color-scheme: dark) {
        background: invert($color-bg);
        border-color: invert($color-border);
    }
}

header {
    display: flex;
    gap: 0.5rem;
    align-items: center;

    nav {
        display: flex;
        gap: 0.8rem;

        a {
            text-decoration: none;
            color: $color-fg;
            font-weight: 500;

            &.active,
            &:hover {
                color: $color-heading;
                text-decoration: underline;
                text-underline-offset: 4px;
                text-decoration-thickness: 2px;
                text-decoration-color: $color-primary;

                @media (prefers-color-scheme: dark) {
                    color: invert($color-heading);
                    text-decoration-color: invert($color-primary);
                }
            }

            @media (prefers-color-scheme: dark) {
                color: invert($color-fg);
            }
        }
    }

    .hero {
        &__arne {
            height: 64px;
            width: auto;
        }

        &__arne--alt-1 {
            .mouth-1 {
                visibility: hidden;
            }
            .mouth-2 {
                visibility: visible;
            }
        }

        &__arne--alt-2,
        &__arne.noscript:hover {
            .eyes-1,
            .mouth-2 {
                visibility: hidden !important;
            }
            .eyes-2,
            .tounge {
                visibility: visible;
            }
        }
    }
}

main {
    img {
        max-width: 100%;

        @media (prefers-color-scheme: dark) {
            opacity: 0.8;
        }
    }

    article,
    section,
    .e-content {
        @include stack;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.2;
    }
}

.blog,
.page {
    @include stack;
}

.weekly {
    @include stack;

    &__header {
        @include stack(0.5rem);
    }

    &__subscribe_form {
        @include stack(0.5rem);

        small {
            display: block;
            line-height: 1.2;
        }

        input[type="email"] {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
        }

        input[type="submit"] {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    &__overview {
        &_issue {
            display: flex;

            a {
                font-weight: 500;
            }

            .divider {
                flex-grow: 1;
                border-bottom: 1px dashed $color-light-grey;
                position: relative;
                top: -0.75rem;
                margin: 0 0.5rem;

                @media (prefers-color-scheme: dark) {
                    border-color: invert($color-light-grey);
                }
            }

            .byline {
                white-space: nowrap;
            }
        }
    }
}

.book_reviews {
    &__cover {
        float: right;
        margin-left: 1rem;
        width: 33%;
    }

    &__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;

        a {
            width: calc(25% - 0.75rem);

            img {
                width: auto;
            }

            &:hover {
                opacity: 0.8;
            }
        }
    }
}

footer {
    padding: 1.5rem 1rem 1rem;
    font-size: $font-size-small;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    color: $color-footer-fg;

    a {
        color: $color-footer-fg;
    }

    @media (prefers-color-scheme: dark) {
        color: invert($color-footer-fg);

        a {
            color: invert($color-footer-fg);
        }
    }

    > br {
        // Don't confuse flexbox
        display: none;
    }

    nav {
        text-align: right;
    }

    .arrow {
        text-decoration: none;
        padding: 0.1rem;
    }
}

.index {
    &__hero {
        h1 {
            font-size: $font-size-large;
            margin-bottom: 0.25rem;
        }
    }
}

.no-underline {
    text-decoration: none;
}

.blog {
    @include stack;

    &__article_list {
        @include stack(2rem);
    }
}

pre,
code {
    font-family: "Pragmata Pro", monospace;
    font-size: 0.9em; // Works better with the default text
    font-feature-settings: normal;
    line-height: 1.2;

    .name,
    .entity,
    .reserved {
        color: $color-primary;

        @media (prefers-color-scheme: dark) {
            color: invert($color-primary);
        }
    }

    .variable,
    .quoted,
    .comment,
    .punctuation {
        color: $color-grey;

        @media (prefers-color-scheme: dark) {
            color: invert($color-grey);
        }
    }
}

.medium {
    font-weight: 500;
}

.footnote-ref {
    display: inline-block;
    margin-top: -4px;
}
