/* Main layout */

body {
    display: flex;
    flex-flow: column nowrap;
    scrollbar-width: thin; /* Firefox only */
}

.container {
    margin: 0 auto;
    max-width: calc(100% - 3.5em);
}

header, footer, main {
    padding: 0.5em 0;
}

main {
    flex-grow: 1;

    & .container {
        height: 100%;
    }
}

header {
    border-bottom: 1px solid var(--accent);
    position: sticky;
    background-color: var(--background);
    top: 0;
    z-index: 10;

    & > .container {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 0.5em;

        & #page-title {
            margin-right: auto;
            font-size: 1.4em;

            --decoration-before: "{";
            --decoration-after: "}";
        }

        & #nav-toggler {
            border: 1.5px solid var(--accent);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2.5em;
            width: 2.5em;
            margin-right: -1em;

            rotate: 360deg;
            transition: rotate 0.5s ease-in-out;

            & span::before {
                content: "</>";
            }
        }

        & #main-nav {
            flex-basis: 100%;

            & ul {
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-evenly;
                align-items: center;
                list-style: none;
                gap: 1em;
                margin: 1em 0;

                & li {
                    position: relative;

                    & a {
                        --decoration-before: "<";
                        --decoration-after: ">";
                        --decoration-current-before: "<";
                        --decoration-current-after: "/>";
                    }

                    &::after {
                        content: " ";
                        position: absolute;
                        bottom: -0.1em;
                        left: 50%;
                        width: 0;
                        border-bottom: 1px solid var(--text);
                        transition: all 0.2s ease-in-out;
                    }

                    &:hover::after {
                        left: 0;
                        width: 100%;
                    }
                }
            }
        }
    }
}

footer {
    border-top: 1px solid var(--accent);

    & > .container {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 0.5em;

        & .copyright-info {
            color: var(--weak);
            text-align: center;
            font-size: 0.8em;
        }

        & #impressum-link {
            font-size: 0.8em;

            --decoration-before: "[";
            --decoration-after: "]";
        }

        & nav#social_links ul {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            list-style: none;
            gap: 1em;
            margin: 0;

            & a {
                color: var(--weak);
                text-decoration: none;

                --hover-color: white; /* fallback color when none is set on icon */

                &:hover {
                    color: var(--hover-color);
                }
            }
        }
    }
}

/* Nav links */

.decorated-nav-link {
    position: relative;
    color: var(--text);
    text-decoration: none;
    font-weight: bold;

    &::before {
        position: absolute;
        right: calc(100% + 0.15em);
        bottom: 0;
        color: var(--weak);
        content: var(--decoration-before);
        white-space: nowrap;
    }

    &::after {
        position: absolute;
        left: calc(100% + 0.15em);
        bottom: 0;
        color: var(--weak);
        content: var(--decoration-after);
        white-space: nowrap;
    }

    &.current {
        color: var(--accent);

        &::before {
            content: var(--decoration-current-before, var(--decoration-before))
        }

        &::after {
            content: var(--decoration-current-after, var(--decoration-after))
        }
    }
}

/* When nav hidden */

body.nav-hidden {
    #nav-toggler {
        rotate: 0deg;

        & span::before {
            content: "<>";
        }
    }

    #main-nav {
        display: none;
    }
}

/* Elements */

:is(h2, h3, h4, h5, h6):not(.no-decor) {
    position: relative;
    margin: 0.75em 0 0.25em;

    &::before {
        content: "#";
        position: absolute;
        left: -1.25em;
        color: var(--weak);
        font-weight: normal;
    }
}

hr {
    width: 100vw;
    position: absolute;
    left: 0;
    color: var(--accent)
}

a {
    color: var(--accent);
    text-decoration: underline;

    &:hover {
        filter: brightness(0.75);
    }
}

p {
    margin: 0.5em 0;
}

ul, ol {
    margin-left: 1.25em;
}

/* Utils */

.hidden {
    display: none !important;
}

.weak {
    color: var(--weak);
}

.accent {
    color: var(--accent);
}

.btn {
    display: inline-block;
    padding: 0.5em 0.7em;
    text-decoration: none;
    border-radius: 0.5rem;
    filter: brightness(1);
    border: none;

    &.primary {
        color: var(--background);
        background-color: var(--btn-primary);
    }

    &.secondary {
        color: var(--text);
        background-color: var(--btn-secondary);
    }

    &:hover {
        filter: brightness(0.75);
    }
}

.center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pre-line {
    white-space: pre-line;
}

/* Breakpoints */

@media (min-width: 481px) {
    .container {
        max-width: calc(460px - 3.5em);
    }
}

@media (min-width: 769px) {
    .container {
        max-width: calc(740px - 3.5em);
    }


    footer > .container {
        flex-direction: row;
        justify-content: space-between;

        & nav#social_links ul {
            gap: 0.5em;
        }
    }
}

@media (min-width: 979px) {
    .container {
        max-width: calc(930px - 3.5em);
    }

    header > .container {
        flex-wrap: nowrap;
    }

    #nav-toggler {
        display: none !important;
    }

    #main-nav {
        display: block !important;
        flex-shrink: 1;

        & ul {
            flex-flow: row nowrap !important;
            justify-content: flex-end !important;
            gap: 2.5em !important;
            margin: 0 !important;
        }
    }

    .mobile-only {
        display: none;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: calc(1240px - 3.5em);
    }
}