/* GHO-STATIC THEME FILE: don't edit it. Running gho-static --get-all-themes
   replaces it, losing any changes. To make your own version of this theme,
   select it with gho-static --use-theme default_developer_ugly, then copy it
   into theme_templates/custom_themes with gho-static --generate theme_templates/<new_name>,
   and edit the copy. */

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* The templated values below are filled in from theme_preferences.yaml at
   build time. Change them there rather than here. */
:root {
    --banner-color: #add8e6;
    --banner-text-color: #000000;
    --background-color: #ffffff;
    --text-color: #000000;
    --link-color: #0000ee;
    --link-clicked-color: #551a8b;
    --tag-color: #add8e6;
    --tag-text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --banner-color: #add8e6;
        --banner-text-color: #000000;
        --background-color: #000000;
        --text-color: #ffffff;
        --link-color: #8ab4f8;
        --link-clicked-color: #c58af9;
        --tag-color: #add8e6;
        --tag-text-color: #000000;
    }
}

/* The light/dark mode toggle on the themes showcase pages. Gho-Static adds
   the colours it swaps to the end of this file when building. */
.mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 1em 0;
    cursor: pointer;
}

html, body {
    height: 100%;
}

body {
    font-family: sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

a:visited {
    color: var(--link-clicked-color);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

/* anywhere, unlike break-word, also lets flex items (e.g. the pager) shrink
   past long words and URLs, so nothing pushes the page wider than the
   screen. */
body {
    overflow-wrap: anywhere;
}

/* Wide code blocks and tables scroll within the content instead. */
#content pre,
#content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

#content {
    width: 60%;
    max-width: 1500px;
    margin: calc(70px + 30px) auto 30px;
}

#content p + p {
    margin-top: 1em;
}

/* Keeps markdown lists' bullets and numbers inside the content. Template
   lists have a class, and are styled on their own. */
#content :is(ul, ol):not([class]) {
    padding-left: 20px;
}

/* GitHub-style alerts, e.g. > [!WARNING] in markdown. */
.alert {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 4px solid var(--link-color);
}

.alert-warning,
.alert-caution {
    border-left-color: #d29922;
}

.alert-title {
    font-weight: bold;
}

/* The table of contents, from a <!-- toc --> line in markdown. */
.toc {
    margin: 1em 0;
}

.toc-title {
    margin: 0 0 0.5em;
    font-size: 1.2em;
}

.toc summary {
    cursor: pointer;
}

.toc ul {
    list-style: none;
}

/* Each level of heading is a little smaller and lighter than the last. */
.toc > ul > li {
    font-size: 1.1em;
    font-weight: bold;
}

.toc ul ul li {
    font-size: 0.95em;
    font-weight: normal;
}

.toc > ul > li > details > ul > li {
    font-weight: 600;
}

/* A gallery page's images, centred, at full size up to the content's
   width. */
.page-images img {
    margin: 1em auto;
}

.byline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    opacity: 0.6;
}

.byline-date {
    margin-left: auto;
}

.warnings {
    margin-bottom: 20px;
    padding: 10px 15px;
    border: 2px solid darkred;
    border-radius: 10px;
    background-color: #ffcccc;
    color: #000000;
}

.warning-title {
    font-size: 1.4em;
    font-weight: bold;
    color: darkred;
}

/* Tag pills: 0.7em text centred in a 1em (of the surrounding text) high
   pill, never split over lines. */
.tag,
a.tag:visited {
    display: inline-block;
    height: calc(1em / 0.7);
    line-height: calc(1em / 0.7);
    padding: 0 0.6em;
    margin-right: 0.4em;
    font-size: 0.7em;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: calc(0.5em / 0.7);
    background-color: var(--tag-color);
    color: var(--tag-text-color);
    text-decoration: none;
}

.pager {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.pager-next {
    margin-left: auto;
}

/* Wider screens put the sidebars either side of the content. The content
   keeps its width, only narrowing to leave each sidebar its 150px (plus
   20px either side), and stays centred between equal side columns. */
@media (width > 1080px) {
    #main {
        display: grid;
        grid-template-columns: 1fr min(1500px, 60%, 100% - 2 * (150px + 40px)) 1fr;
        align-items: start;
    }

    #main > #content {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (width <= 1080px) {
    #content {
        width: auto;
        margin: calc(70px + 30px) 20px 30px;
    }

    .byline {
        flex-direction: column;
    }

    .byline-date {
        margin-left: 0;
    }
}

/* Added by Gho-Static: the colours the light/dark mode toggle swaps to. */
:root:has(#mode-toggle:checked) {
    color-scheme: dark;
    --banner-color: #add8e6;
    --banner-text-color: #000000;
    --background-color: #000000;
    --text-color: #ffffff;
    --link-color: #8ab4f8;
    --link-clicked-color: #c58af9;
    --tag-color: #add8e6;
    --tag-text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root:has(#mode-toggle:checked) {
        color-scheme: light;
        --banner-color: #add8e6;
        --banner-text-color: #000000;
        --background-color: #ffffff;
        --text-color: #000000;
        --link-color: #0000ee;
        --link-clicked-color: #551a8b;
        --tag-color: #add8e6;
        --tag-text-color: #000000;
    }
}