@charset "utf-8";

@import url("../fonts/fonts.css");

:root {
    --line-height: 1.5;
    --fonts: var(--serif);
    --monospace-fonts: var(--mono);
    --heading-fonts: var(--sans);

    --border-style: solid;
    --border-width: 2px;
    --border-highlight: #816355;
    --border-shadow: #391706;
    --border-color:
        var(--border-highlight)
        var(--border-shadow)
        var(--border-shadow)
        var(--border-highlight);
    --inset-border-color:
        var(--border-shadow)
        var(--border-highlight)
        var(--border-highlight)
        var(--border-shadow);
    --border-radius: 3px;

    --default-cursor: url("../images/cursors/default.svg") 1 2, default;
    --pointer-cursor: url("../images/cursors/pointer.svg") 1 1, pointer;

    --foreground-color: #ffffff;
    --accent-color: #ffbaf9;
    --link-color: #ffe431;

    --background-image: url("../images/background/dark.png");
    --background-color: #623a27;
    --active-button-color: #6f422e;

    --backdrop-image: "";
    --backdrop-fallback: #ff00ff;
    --backdrop-animation: none;

    --shadow-color: #00ffff;
    --page-shadow: 0.5rem 0.5rem 1px #000000af;

    --icon-size: 32px;
    --icon-offset: -40px;
    --icon-spacing: calc(var(--icon-size) + 1rem);

    overflow-wrap: break-word;
    line-height: var(--line-height);
    font-family: var(--fonts);
    font-size: 1.167em;
    color-scheme: dark;
    color: var(--foreground-color);
    cursor: var(--default-cursor);
    background-color: var(--backdrop-fallback);
    background-image: var(--backdrop-image);
    accent-color: var(--accent-color);
    animation: var(--backdrop-animation);

    @media (prefers-reduced-motion) {
        animation: none;
    }

    @media (prefers-color-scheme: light) {
        --border-highlight: #ffffff;
        --border-shadow: #777777;

        --foreground-color: #000000;
        --accent-color: #94238f;
        --link-color: #062fab;

        --background-image: url("../images/background/light.png");
        --background-color: #dedede;
        --active-button-color: #e8e8e8;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
    min-inline-size: 0; /* Flexbox is evil. */
    image-rendering: pixelated;
}

::selection {
    color: #000000;
    background: var(--accent-color);

    @media (prefers-color-scheme: light) {
        color: #ffffff;
    }
}

[hidden] {
    display: none !important;
}

.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

body {
    --page-width: 36rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 100vb;
    margin: 0;

    & > * {
        max-inline-size: 100%;
    }

    &.home {
        --page-width: 13rem;

        justify-content: center;
    }
}

.warning {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
    min-block-size: 100vb;
    color: #ffffff;
    background: linear-gradient(to bottom, #320100, #710500);

    & section {
        max-inline-size: var(--page-width);
        padding-inline: 1.5rem;
    }

    & h1 {
        font-size: 2em;
        color: inherit;
    }
}

#page {
    inline-size: var(--page-width);
    margin-block: 1rem;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    background-image: var(--background-image);
    background-color: var(--background-color);
    box-shadow: var(--page-shadow);

    & > * {
        position: relative;
        padding-block: 0.75rem;
        padding-inline: 1.5rem;
    }
    & * {
        max-inline-size: 100%;
    }
}

:is(header, main)::after {
    position: absolute;
    inset-block-end: calc(var(--border-width) * -1);
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: block;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
    content: "";
}

body.home header {
    text-align: center;
}

header p {
    margin: 0;
}

.breadcrumbs a, .navigation a {
    text-decoration: none;
    font-family: var(--monospace-fonts);

    &:hover {
        text-decoration: underline;
    }
}

.breadcrumbs {
    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.5rem;
        padding: 0;
        margin: 0;
    }

    & li {
        list-style: none;
    }

    & a::after {
        /*
         * Old Firefox and WebKit versions don't support alt texts for content.
         */

        content: "/";
        content: "/" / "";
    }
}

#title {
    margin-block: 0 0.2rem;
    font-size: 1.5em;
}

main {
    --shadow-color: #003300;

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

hr {
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
    border-radius: var(--border-radius);
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 1rem;
    line-height: 1.25;
    font-family: var(--heading-fonts);
    color: var(--accent-color);
}

h2, hgroup:has(> h2) {
    margin-block-start: 1.75rem;
}

h3, hgroup:has(> h3) {
    margin-block-start: 1.375rem;
}

hgroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 0.5rem;
    margin-block: 1rem;

    & > :is(h1, h2, h3, h4, h5, h6) {
        margin: 0;
    }
}

.heading-anchor {
    /* Needed to account for the possibly mismatching font size. */

    margin-block: -0.625em;
    font-size: 1.25em;

    text-decoration: none;
    color: #9d7b6c;

    &:focus, *:hover > & {
        color: var(--link-color);
    }

    &:hover {
        text-decoration: underline;
    }

    @media (prefers-color-scheme: light) {
        color: #919191;
    }
}

.subtitle {
    margin-block-start: -1rem;
}

a {
    color: var(--link-color);
    cursor: var(--pointer-cursor);
}

a:hover {
    text-decoration: none;
}

del {
    text-decoration-color: #7f0000;
    text-decoration-thickness: var(--border-width);
}

ul, ol {
    padding-inline-start: 1.5rem; /* For consistency with blockquotes. */
}

ul {
    list-style: square;
}

li::marker {
    color: var(--accent-color);
}

ol li::marker {
    font-style: italic;
    font-weight: bold;
}

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

dd {
    position: relative;
    margin-block: 0.25rem 0.75rem;
    margin-inline: 0;
    padding-inline-start: 1.5rem;

    &:last-child {
        margin-block-end: 0;
    }

    &::before {
        position: absolute;
        inset-block-start: 0.125rem;
        inset-block-end: 0.125rem;
        inset-inline-start: calc(0.5rem - var(--border-width));
        display: block;
        border-style: var(--border-style);
        border-width: var(--border-width);
        border-color: var(--inset-border-color);
        border-radius: var(--border-radius);
        content: "";
    }

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

pre, code {
    font-size: 0.95em;
    font-family: var(--monospace-fonts);

    /* Hugo nests shit into these. I don't know why it does that. */

    & * {
        padding: 0 !important;
        font-size: inherit;
        border: none;
    }
}

pre {
    padding-inline: 0.5rem;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
    border-radius: var(--border-radius);
    overflow: auto;
}

blockquote {
    position: relative;
    padding-inline-start: 1.5rem; /* For consistency with lists. */
    margin-inline: 0;

    &::before {
        position: absolute;
        inset-block-start: -0.33rem;
        inset-inline-start: 0;
        content: "“";
        content: "“" / "";
        font-size: 2em;
        font-weight: bold;
        color: var(--accent-color);
    }

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

main img {
    /*
     * Has to be used when the image has an explicitly specified height. If you
     * don't, it'll get squeezed horizontally when the viewport shrinks.
     *
     * Related:
     * https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:map-to-the-aspect-ratio-property-(using-dimension-rules)-2
     */

    block-size: auto;

    /*
     * When the image is used with display: inline, the container needs
     * line-height: 0 to prevent excessive spacing. That, however, breaks the
     * alt text, and this fixes it back.
     *
     * Don't bother trying vertical-align: middle - it breaks link underlines.
     */

    line-height: 1;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    inline-size: fit-content;
    margin-block: 1rem;
    margin-inline: auto;

    & picture {
        line-height: 0;
    }
}

.table-wrapper {
    overflow-inline: auto;
}

table {
    border-spacing: 0;
}

td, th {
    padding-block: 0.125rem;
    padding-inline: 0.5rem;
    border-style: solid;
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
}

td {
    vertical-align: top;
}

summary {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: fit-content;
    padding-inline-end: 0.5rem;
    cursor: var(--pointer-cursor);
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-color);

    /* WebKit doesn't yet apply list-style or ::marker to <summary> elements. */

    &::-webkit-details-marker {
        display: none;
    }

    &::before {
        display: block;
        block-size: var(--icon-size);
        inline-size: var(--icon-size);
        content: "";
        background-image: url("../images/icons/pages.svg");
        background-position-y: calc(var(--icon-offset) * 4);
    }

    &:hover {
        background: var(--active-button-color);

        &::before {
            background-position-x: calc(var(--icon-offset) * 1);
        }
    }

    details[open] > & {
        margin-block-end: 0.5rem;
        border-color: var(--inset-border-color);

        &::before {
            background-position-y: calc(var(--icon-offset) * 5);
        }
    }

    & + * {
        margin-block-start: 0;
    }
}

.rating {
    margin-block: 1rem;

    & .given {
        line-height: 0.75;
        font-size: 2em;
        color: var(--accent-color);
    }

    & .explanation {
        display: block;
        font-size: 0.75em;
    }
}

.navigation ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.navigation li {
    --node-spacing: 0.375rem;
    --node-font-size: 1.125em;

    position: relative;
    padding-inline-start: var(--icon-spacing);

    /*
     * WebKit doesn't put lists with list-style: none into the accessibility
     * tree because they don't look like lists to sighted users. We respect its
     * wishes and don't touch those. Navigation lists, however, do look like
     * lists, so we gently push WebKit into acknowledging it.
     *
     * Note that navigation lists can appear outside of a <nav> parent when
     * they're used for decorative purposes, such as on the bookmarks page, so
     * don't rely on the <nav> detection. Also don't rely on the visible
     * ::before detection because it only considers ones with a non-empty,
     * non-all-whitespace content.
     *
     * See WebKit's source code for more details:
     * https://github.com/WebKit/WebKit/blob/112d07ea900f527cb07836d9373c08d020f66398/Source/WebCore/accessibility/AccessibilityList.cpp#L137-L144
     */

    list-style: "";
    list-style-position: inside;

    &::before {
        position: absolute;
        inset-inline-start: 0;
        display: block;
        block-size: var(--icon-size);
        inline-size: var(--icon-size);
        content: "";
        background-image: url("../images/icons/pages.svg");

        /* Close your eyes and pretend you can understand this. */

        inset-block-start: calc(
            var(--node-spacing)
            + var(--node-font-size) * var(--line-height) / 2
            - var(--icon-size) / 2
        );
    }
    &:hover::before {
        background-position-x: calc(var(--icon-offset) * 1);
    }
}

.navigation li {
    & > p {
        margin: 0;
    }

    &.file::before {
        background-position-y: calc(var(--icon-offset) * 1);
    }
    &.folder::before {
        background-position-y: calc(var(--icon-offset) * 2);
    }
    &.profile::before {
        background-position-y: calc(var(--icon-offset) * 3);
    }
    &.media::before {
        background-position-y: calc(var(--icon-offset) * 6);
    }
    &.link::before {
        background-position-y: calc(var(--icon-offset) * 7);
    }
}


/* All of this black magic is needed so the icon is also clickable. */

.navigation a {
    position: relative;
    display: block;
    z-index: 1;
    box-sizing: content-box;
    padding-block: var(--node-spacing);
    padding-inline-start: var(--icon-spacing);
    margin-inline-start: calc(-1 * var(--icon-spacing));
    font-size: var(--node-font-size);
}

.licensing {
    font-size: 0.75em;
}