/* STYLE FOR ORG-MODE ELEMENTS */

/* SETUP FOR DARK-MODE AND LIGHT-MODE */

:root {
    /* Light theme */
    --c-light-text: black;
    --c-light-background: linen;
    --c-light-focus: olive;
    --c-light-interactive: chocolate;
    --c-light-code-fg: midnightblue;
    --c-light-code-bg: lightsteelblue;
    --c-light-link-unvisited: navy;
    --c-light-link-visited: darkred;
    --c-light-definition-bg: #d8e9a8; /**/
    --c-light-ex-bg: #bbe1fa;         /**/
    --c-light-problem-bg: #e9b5d2;    /**/
    --c-light-proof-bg: #eeeeee; /**/
    --c-light-proposition-bg: #dbdffd; /**/
    --c-light-theorem-bg: #a77979;

    /* Dark theme */
    --c-dark-text: mistyrose;
    --c-dark-background: #202020;
    --c-dark-focus: aquamarine;
    --c-dark-interactive: sandybrown;
    --c-dark-code-fg: honeydew;
    --c-dark-code-bg: darkslategrey;
    --c-dark-link-unvisited: steelblue;
    --c-dark-link-visited: salmon;
    --c-dark-definition-bg: #062925; /**/
    --c-dark-ex-bg: #0C2233;         /**/
    --c-dark-problem-bg: #420516;    /**/
    --c-dark-proof-bg: #2d2424; /**/
    --c-dark-proposition-bg: #352f44; /**/
    --c-dark-theorem-bg: #472d2d;

    /* define school colors */
    --c-school-dark: #154360;
    --c-school-lite: #d5f5e3;

    /* define background colors for tikz */
    --c-tikz-bg: #a9dfbf;
}

/* Set default theme to dark theme */
:root {
    --c-text: var(--c-dark-text);
    --c-background: var(--c-dark-background);
    --c-focus: var(--c-dark-focus);
    --c-interactive: var(--c-dark-interactive);
    --c-code-fg: var(--c-dark-code-fg);
    --c-code-bg: var(--c-dark-code-bg);
    --c-link-unvisited: var(--c-dark-link-unvisited);
    --c-link-visited: var(--c-dark-link-visited);
    --c-quote-background: var(--c-school-dark);
    --c-quote-other: var(--c-school-lite);
    --c-definition-bg: var(--c-dark-definition-bg);
    --c-ex-bg: var(--c-dark-ex-bg);
    --c-problem-bg: var(--c-dark-problem-bg);
    --c-proof-bg: var(--c-dark-proof-bg);
    --c-proposition-bg: var(--c-dark-proposition-bg);
    --c-theorem-bg: var(--c-dark-theorem-bg);
}

/* Override default theme with light theme */
@media (prefers-color-scheme: light) {
    :root {
        --c-text: var(--c-light-text);
        --c-background: var(--c-light-background);
        --c-focus: var(--c-light-focus);
        --c-interactive: var(--c-light-interactive);
        --c-code-fg: var(--c-light-code-fg);
        --c-code-bg: var(--c-light-code-bg);
        --c-link-unvisited: var(--c-light-link-unvisited);
        --c-link-visited: var(--c-light-link-visited);
        --c-quote-background: var(--c-school-lite);
        --c-quote-other: var(--c-school-dark);
        --c-definition-bg: var(--c-light-definition-bg);
        --c-ex-bg: var(--c-light-ex-bg);
        --c-problem-bg: var(--c-light-problem-bg);
        --c-proof-bg: var(--c-light-proof-bg);
        --c-proposition-bg: var(--c-light-proposition-bg);
        --c-theorem-bg: var(--c-light-theorem-bg);
    }
}

.theme-container {
    /* Make the dark theme the default */
    --c-text: var(--c-dark-text);
    --c-background: var(--c-dark-background);
    --c-focus: var(--c-dark-focus);
    --c-interactive: var(--c-dark-interactive);
    --c-code-fg: var(--c-dark-code-fg);
    --c-code-bg: var(--c-dark-code-bg);
    --c-link-unvisited: var(--c-dark-link-unvisited);
    --c-link-visited: var(--c-dark-link-visited);
    --c-quote-background: var(--c-school-dark);
    --c-quote-other: var(--c-school-lite);
    --c-definition-bg: var(--c-dark-definition-bg);
    --c-ex-bg: var(--c-dark-ex-bg);
    --c-problem-bg: var(--c-dark-problem-bg);
    --c-proof-bg: var(--c-dark-proof-bg);
    --c-proposition-bg: var(--c-dark-proposition-bg);
    --c-theorem-bg: var(--c-dark-theorem-bg);

    padding: 1.5rem;
    color: var(--c-text);
    background-color: var(--c-background);
    /* match viewport height */
    min-height: 100vh;
}

.light-mode-checkbox:checked ~ .theme-container {
    /* Override the default theme */
    --c-text: var(--c-light-text);
    --c-background: var(--c-light-background);
    --c-focus: var(--c-light-focus);
    --c-interactive: var(--c-light-interactive);
    --c-code-fg: var(--c-light-code-fg);
    --c-code-bg: var(--c-light-code-bg);
    --c-link-unvisited: var(--c-light-link-unvisited);
    --c-link-visited: var(--c-light-link-visited);
    --c-quote-background: var(--c-school-lite);
    --c-quote-other: var(--c-school-dark);
    --c-definition-bg: var(--c-light-definition-bg);
    --c-ex-bg: var(--c-light-ex-bg);
    --c-problem-bg: var(--c-light-problem-bg);
    --c-proof-bg: var(--c-light-proof-bg);
    --c-proposition-bg: var(--c-light-proposition-bg);
    --c-theorem-bg: var(--c-light-theorem-bg);
}

.light-mode-label {
    margin-bottom: 1em;
}

:focus,
.light-mode-checkbox:focus ~ .theme-container .light-mode-label {
    outline: 2px solid var(--c-focus);
}


/* REPLACE ORIGINAL CHECKBOX */

.light-mode-label::before {
    content: "\2610";
}

.light-mode-checkbox:checked ~ .theme-container .light-mode-label::before {
    content: "\2611";
}

/*
visibility-hidden utility class

Source: https://github.com/h5bp/html5-boilerplate

Hide only visually, but have it available for screen readers:
https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

1. For long content, line feeds are not interpreted as spaces
   and small width causes content to wrap 1 word per line:
   https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap; /* 1. */
}

/* Grow content to viewport */

/* Allow body’s children to grow to 100% of viewport’s height */
html,
body {
    height: 100vh;
    /* make navbar reasonable */
    scroll-padding-top: 100px;
    display: flex;
}

/* Allow content area to grow to  viewport height */
body {
    display: flex; /* 1. */
    flex-direction: column; /* 1. */
    /* fix navbar over-scroll problem */
}

/* Grow content area to take remaining height inside body element */
.grow { flex-grow: 1; /* 1. */ }


/* BASIC STYLES */

* { font-family: "Courier New", "Fira Mono", monospace; }
body {
    margin: 0;
    font-family: "Courier New", "Fira Mono", monospace;
    font-size: 1em;
    line-height: 1.5em;
}
/* fix title background */
h1 {
    margin: 0;
    padding: 1em 1em 1em 1em;
    background-color: var(--c-school-dark);
    color: var(--c-school-lite);
   }
h1.title {
    margin-bottom: -0.25em;
    text-align: center;
    color-background: var(--c-background);
}
h2 {
    padding: 1em 1em 1em 1em;
    margin: 0;
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 1em;
    color: var(--c-school-lite);
}
h3 {
    margin: 0;
    font-size: 1.3333333333333333em;
    line-height: 1.125em;
    margin-bottom: 1em;
}
h4 {
    margin: 0;
    font-size: 1.1666666666666667em;
    line-height: 1.2857142857142858em;
    margin-bottom: 1.2857142857142858em;
}
p, ul, pre, td, th, label {
    margin: 0;
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}
p.small, #postamble {
    margin: 0;
    font-size: 0.8333333333333334em;
    line-height: 1.8em;
}
table {
    border-collapse: collapse;
    margin-bottom: 1.5em;
}
blockquote {
    margin-bottom: 10px;
    padding: 10px;
    /* background-color: var(--c-quote-background); */
    border-left: 2px solid var(--c-quote-other);
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

/* outlines for section headers */
.outline-2 h2 {
    background: var(--c-school-dark);
    padding: 0.5em;
    margin-right: 2em
}
.outline-1, .outline-2, .outline-3, .outline-4, .outline-5, .outline-6 {
    margin-left: 2em;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    background-color: var(--c-school-dark);
    padding: 1em;
    border: 1px solid #ccc;
}

#header {height: 10;}
/* margin-top for navbar */
#content {
    margin: 3.75em 0 0 0;
    max-width: 100%;
}

/* link formatting */
a {bottom-border: #ffdd99 0.125em solid;}
/* unvisited */
a:link {color: var(--c-link-unvisited);}
/* visited */
a:visited {color: var(--c-link-visited);}

a:hover {
    color: var(--c-school-lite);
    /* border-bottom: 3px dotted var(--c-interactive); */
}

code {
    font-family: 'Fira Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    color: var(--c-code-fg);
    background-color: var(--c-code-bg);
}


/* DESCRIPTION LISTS */
dl {
    padding: 0.25ex;
}
dt {
    float: left;
    clear: left;
    text-align: right;
    font-weight: bold;
    padding: 0 1ex 0 0;
    margin: 0 0 0 2ex;
}
dt:after { content: ":"; }
/* dd { */
/*     /\* margin: 0 0 0 110px; *\/ */
/*     padding: 0 0 0.5em 0; */
/* } */

/* TIKZ */
.tikz {
    display: block;
    margin: 1ex 1ex 1ex 1ex;
    padding: 1ex 1ex .5ex 1ex;
    background-color: var(--c-tikz-bg);
    border-style: solid;
    border-color: green;
    margin: auto;
    margin-top: 2ex;
    margin-bottom: 2ex;
    min-width: 50ex;
    width: 30%;
}


/* THEOREM STYLES */
body {
    counter-reset: result;
    counter-reset: problem;
}

.corollary, .lemma, .named-result, .problem, .proposition, .theorem {
    display: block;
    margin: 0ex 0ex 1ex 0ex;
    font-style: normal;
    padding: 1ex 1ex .5ex 1ex;
}

.corollary {
    counter-increment: result;
    background-color: var(--c-proposition-bg);
}
.lemma {
    counter-increment: result;
    background-color: var(--c-proposition-bg);
}
.named-result { background-color: var(--c-theorem-bg); }
.problem {
    counter-increment: problem;
    background-color: var(--c-problem-bg);
}
.proposition {
    counter-increment: result;
    background-color: var(--c-proposition-bg);
}
.theorem {
    counter-increment: result;
    background-color: var(--c-theorem-bg);
}

.corollary::before, .lemma::before, .named-result::before, .problem::before, .proposition::before, .theorem::before {
    float: left;
    font-weight: bold;
    margin: 0 1ex 0 0:
}
.corollary::before { content: 'Corollary ' counter(result) ':\00a0'; }
.lemma::before { content: 'Lemma ' counter(result) ':\00a0'; }
.named-result::before { content: attr(result-name) ':\00a0'; }
.problem::before { content: 'Problem ' counter(problem) ':\00a0'; }
.proposition::before { content: 'Proposition ' counter(result) ':\00a0'; }
.theorem::before{ content: 'Theorem ' counter(result) ':\00a0'; }