/* ***********************************************************************
 *
 *  File:   custom.css
 *
 *  Descr:  Stylesheet for L(The Bad Bohemian) by Cecil Parrott.
 *
 *  Author: Jomar Hønsi, 2026
 *
 * ************************************************************************/

:root {
    --color-border: #ccc;
    --color-text-muted: #555;
    --bg-info: #f5f2edcc;
    --bg-notes: #f9f9f988;
    --shadow-default: 0 0 10px var(--color-border);
    --font-mono: Courier, monospace;

    /* Review section */
    --bg-error: rgb(240, 224, 224);
    --bg-warning: #f3f392;
    --bg-note: rgb(209, 246, 166);
}

body {
    font-family: Georgia, serif;
    max-width: 50em;
    margin: 2em auto;
    line-height: 1.5;
    padding: 0 1em;
    font-size: 1.2em;
    color: #333;
}

div.main {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-default);
}

h1 {
    text-align: center;
    padding-bottom: 0;
    margin: 0;
    color: #c00000;
}

h2 {
    font-size: 1.1em;
    margin-top: 2em;
    padding-bottom: 0.2em;
    text-align: center;
}

h2.sub-title {
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000000aa;
}

h3.chapter-notes {
    scroll-margin-top: 1em;
    font-size: 1em;
}

h3.section-notes {
    scroll-margin-top: 1em;
    font-size: 1.2em;
}

div.info {
    font-size: 0.9em;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    margin: 0;
    padding: 10px;
    background-color: var(--bg-info);

    & p.motto {
        /* use a sans-serif font for the motto */
        font-family: Arial, sans-serif;
        font-size: 0.7em;
        color: #c00;
        margin: 0;
        padding: 0;
        text-align: center;
    }
}

p.author {
    text-align: center;
    font-style: italic;
    margin-top: 0.5em;
    margin-bottom: 2em;
}


#toc {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 3em;
    font-size: 0.9em;

    & h2 {
        font-size: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    & ol {
        columns: 2;
    }

    & ul {
        margin-left: 40%;
        columns: 1;
    }
}

a.sup {
    text-decoration: none;
    color: rgb(32, 96, 243);
    vertical-align: super;
    font-size: 0.7em;
    font-weight: normal;
    margin: 0 0.2em;
}

a.sup::before {
    content: "";
}

a.sup::after {
    content: "";
}

.page-break {
    display: block;
    scroll-margin-top: 1em;
    text-align: center;
    font-size: 0.8em;
    letter-spacing: 0.15em;
    margin: 0 0 10px 0;
    border-bottom: 5px solid #fff;
    padding: 0 0 10px 0;
}

p.note {
    font-size: 0.7em;
    color: var(--color-text-muted);
    margin: 0;
    padding: 0;
}

p.note::before {
    content: "* ";
}

pre {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: black;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

p.quote, div.quote {
    font-style: italic;
    font-size: 0.9em;
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid #ccc;
}

.uppercase {
    text-transform: uppercase;
}

section.end-notes {
    padding: 0 10px 0 10px;
    border-top: 1px solid var(--color-border);
    background-color: var(--bg-notes);
    font-size: 0.9em;
}

section.index-names, section.bibliography {
    padding: 0 10px 0 10px;
    border-top: 1px solid var(--color-border);
    background-color: var(--bg-notes);
    font-size: 0.9em;

    & pre {
        font-family: var(--font-mono);
        font-size: 0.7em;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        margin: 10px 0;
    }

    & ol {
        margin: 10px;
        padding-left: 20px;
        font-size: 0.9em;
    }

    & ul {
        margin: 10px;
        padding-left: 10px;
        font-size: 0.9em;

        & li {
            padding-left: 2ch;
            text-indent: -2ch;
        }
    }
}

/* Custom styles for the bibliography section */
.fn-popup {
    font-size: 1em;
}

.fn-close {
    font-size: 0.7em;
    text-decoration: none;
    margin-left: 15px;
}

/* Images */
figure {
    & img {
        display: block;
        margin: 1em auto;
        width: 100%;
        height: auto;
    }

    & figcaption {
        font-size: 0.8em;
        color: #336;
        padding: 0 20px 0 20px;
    }

    padding-bottom: 10px;
    border-bottom: 5px solid white;
}

/* Review section */

#review-info {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-default);
    background-color: #f8f0f0cc;
    padding: 10px;
    font-size: 0.8em;
    margin: 10px 0;

    & p {
        font-size: 0.9em;
        color: var(--color-text-muted);
        margin: 0;
        padding: 0;
    }

    & div {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--color-border);
        text-align: center;

        & p {
            margin: 10px;
            padding: 0;
            text-align: center;
        }
    }

}

fn-error, fn-warning, fn-info, fn-note {
    display: block;
    margin-top: 0.5em;
    font-size: 1em;
    padding: 2px 1ch 1ch 2ch;
    text-indent: -2ch;
    /* Independent letter sequences for R1() markers and Z1() quotations, kept in sync by position */
    counter-reset: src-ref src-quote;

    & a.ref {
        text-decoration: underline;
        font-size: 0.9em;
        font-weight: normal;
    }
}

fn-info {
    background-color: var(--bg-note);
    border-right: 5px solid green;
}

fn-warning {
    background-color: var(--bg-warning);
    border-right: 5px solid #cccc00;
}

fn-error {
    background-color: var(--bg-error);
    border-right: 5px solid red;
}


.note-1 {
    background-color: var(--bg-note);

    & a.sup {
        color: rgb(61, 148, 229);
        font-weight: bold;
        font-size: 0.8em;
    }
}

.warning-1 {
    background-color: var(--bg-warning);

    & a.sup {
        color: rgb(61, 148, 229);
        font-weight: bold;
        font-size: 0.8em;
    }
}

.error-1 {
    background-color: var(--bg-error);
    text-decoration: underline red;

    & a.sup {
        color: rgb(61, 148, 229);
        font-weight: bold;
        font-size: 0.8em;
    }
}

.wip {
    background-color: #f0f0f0;
    opacity: 0.8;
}

.wip::after {
    content: " (AI generated text - to be replaced)";
    font-size: 0.8em;
    color: #c00;
}

a.rev {
    text-decoration: none;
    color: blue;
    vertical-align: super;
    font-weight: normal;
    margin: 0 5px;
    font-size: 0.7em;
}

.review-hidden {
    display: none;
}

.review-visible {
    display: block;
}

.source-quotation {
    font-family: var(--font-mono);
    display: block;
    font-size: 0.6em;
    margin: 4px 0 0 20px;
    padding-left: 1em;
    counter-increment: src-quote;

    & strong {
        font-weight: normal;
    }
}

.source-quotation::before {
    content: "[" counter(src-quote, lower-alpha) "] ";
    font-weight: bold;
}

n-1 {
    counter-increment: src-ref;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0 0 0 5px;
    padding: 0;
}

n-1::before {
    content: "[" counter(src-ref, lower-alpha) "]";
    color: rgb(122, 34, 4);
}

a.ext-link {
    text-decoration: none;
    color: rgb(32, 96, 243);
    font-size: 1em;
    margin-left: 0.1em;
    font-weight: bold;
}