/* tre.css */
/* load via <link rel="stylesheet" href=path2file> */
/* contains all things related to style besides `:root {}`, `body.tre-light` => filled by calling makestyles.jl*/


/* css variables (can be overridden in html or other css files) */
:root {
    /* colors */
    --c_main: #c80000ff;
    --c_bg: #000000ff;
    --c_body_text: #ffffffff;
    --c_tabrow_bg: #5f5f5fff;
    --c_tabrow_hover: #a10000ff;
    --c_tabborder: #ffffffff;
    --c_footnote_text: #c0c0c0ff;
    --c_footnote_box: #000000ff;
    --c_footnote_boxshadow: #bebebeff;
    --c_blockquote_border: #a10000ff;
    --c_blockquote_bg: #aaaaaaff;
    --c_blockquote_text: #000000ff;
    --c_link_text: #c80000ff;
    --c_link_visited: #a10000ff;
    --c_link_hover: #ff0000ff;
    --c_link_active: #ff0000ff;
    --c_list1_text: #ffffffff;
    --c_list2_text: #ffffffff;
    --c_caption_bg: #000000ff;
    --c_caption_text: #ffffffff;
    --c_comment_ls: #ff6969ff;
    --c_todo_ls: #ff9100ff;
    --c_bibcolor_ls: #a80000ff;
    --c_code_bg: #1e1e1eff;
    --c_code_constant: #569cd6ff;
    --c_code_comment: #6a9955ff;
    --c_code_string: #d16969ff;
    --c_code_numeric: #b5cea8ff;
    --c_code_keyword: #569cd6ff;
    --c_poster_sectnode: #4d4d4dff;
    --c_poster_mainnode: #c10000ff;
    /* fontsizes */
    --fs_h1: 1.5em;
    --fs_h2: 1.3em;
    --fs_h3: 1.1em;
    --fs_h4: 1.0em;
    --fs_footnote_text: 0.8em;
    --fs_blockquote_text: 1.2em;
    --fs_list1_text: 1em;
    --fs_list2_text: 1em;
}

/* defines colors for light mode (better than 2 files) */
body.tre-light {
    /* colors */
    --c_main: #c80000ff;
    --c_bg: #000000ff;
    --c_body_text: #ffffffff;
    --c_tabrow_bg: #5f5f5fff;
    --c_tabrow_hover: #a10000ff;
    --c_tabborder: #ffffffff;
    --c_footnote_text: #c0c0c0ff;
    --c_footnote_box: #000000ff;
    --c_footnote_boxshadow: #bebebeff;
    --c_blockquote_border: #a10000ff;
    --c_blockquote_bg: #aaaaaaff;
    --c_blockquote_text: #000000ff;
    --c_link_text: #c80000ff;
    --c_link_visited: #a10000ff;
    --c_link_hover: #ff0000ff;
    --c_link_active: #ff0000ff;
    --c_list1_text: #ffffffff;
    --c_list2_text: #ffffffff;
    --c_caption_bg: #000000ff;
    --c_caption_text: #ffffffff;
    --c_comment_ls: #ff6969ff;
    --c_todo_ls: #ff9100ff;
    --c_bibcolor_ls: #a80000ff;
    --c_code_bg: #1e1e1eff;
    --c_code_constant: #569cd6ff;
    --c_code_comment: #6a9955ff;
    --c_code_string: #d16969ff;
    --c_code_numeric: #b5cea8ff;
    --c_code_keyword: #569cd6ff;
    --c_poster_sectnode: #4d4d4dff;
    --c_poster_mainnode: #c10000ff;
}


/* ################################################################## */
/* GLOBAL DEFAULTS */
* {
    /* applies to all elements */
    scrollbar-width: auto;
    scrollbar-color:  var(--c_body_text) color-mix(in srgb, var(--c_bg) 80%, var(--c_body_text) 20%);
}


html, body {
    background-color: var(--c_bg);
    color: var(--c_body_text);
    /* init counters */
    counter-reset: fig 0 tab 0 bibindex 0;
}
body {
    max-width: 98%;
    display: grid;
    grid-template-columns: 150px auto;
    grid-template-areas: 
        'header header'
        'nav main'
        'nav footer';
    min-height: 100vh;
    text-align: justify;
    gap: 0;
    overflow-x: hidden;            
}


/* ################################################################## */
/* HTML AREAS */
header {
    grid-area: header;
    text-align: center;
    position: relative;
}
header h1 {
    font-size: 3em;
    margin-bottom: 0;
    padding-bottom: 0;
}
header h2 {
    font-size: 1.5em;
    margin-top: 0;
}
/* horizontal line */
header::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 0.75rem;
    background: linear-gradient(
        to right,
        var(--c_body_text) 0%,
        var(--c_body_text) calc(50% - 16px),
        transparent calc(50% - 16px),
        transparent calc(50% + 16px),
        var(--c_body_text) calc(50% + 16px),
        var(--c_body_text) 100%
    );
}
/* red dot */
header::before {
    content: "";
    position: absolute;
    left: calc(50%);
    top: 96%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: var(--c_main);
    border-radius: 50%;				
}

main {
    grid-area: main;
}
footer {
    grid-area: footer;
}

/* nav-bar */
nav {
    background-color: var(--c_bg);
    position: sticky;
    margin-top: 1em;
    top: 0;
    left: 0;
    grid-area: nav;
    height: 100vh;
    font-size: 1.5em;
    text-align: left;
}
nav ul a:link,
nav ul a:visited {
    font-style: normal;
    color: var(--c3);
}
nav ul {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav-subitem li:not(:last-child) {
margin-bottom: 0.3em;
}
.nav-item .nav-subitem {
    /* settings to hide layout */
    /* position: absolute; */
    /* visibility: hidden; */
    /* opacity: 1; */
    transform: translateY(10px);
    /* top: 100%; */
    /* settings to show layout */
    position: inherit;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    /* general settings */
    margin-left: 1em;
    display: block;
    pointer-events: none;
    font-size: 0.8em;
    transition:
        opacity 200ms ease,
        transform 200ms ease,
        visibility 200ms linear 200ms;
}
.nav-item:hover .nav-subitem,
.nav-item.active .nav-subitem {
    position: inherit;  /* back in layout */
    opacity: 1;
    display: block;
    margin-left: 1em;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 200ms ease,
        transform 200ms ease,
        visibility 0s;    
}


/* ################################################################## */
/* HEADERS */
h1 {
    color: var(--c_body_text);
    font-size: var(--fs_h1);
    font-weight: bold;
}
h2 {
    color: var(--c_body_text);
    font-size: var(--fs_h2);
    font-weight: bold
}
h3 {
    color: var(--c_body_text);
    font-size: var(--fs_h3);
    font-weight: bold
}
h4 {
    color: var(--c_body_text);
    font-size: var(--fs_h4);
    font-weight: bold
}

/* ################################################################## */
/* FLOATS */
/* tables */
table {
    display: inline-block;
    overflow: hidden;
    counter-increment: tab;
    width: 100%;
    table-layout: auto;
}
table :is(th, tr:nth-child(even)) {			/*style all elements in `:is` (th...table header; tr:nth-child(even)...even table rows*/
    background-color: var(--c_bg);
    border: 1px solid var(--c_tabborder);
    padding: 0.3cqi;
}
table tbody tr:nth-child(odd) {				/*odd table rows*/
    background-color: var(--c_tabrow_bg);
}
table tbody tr:hover td {					/*highlight on hover*/
    background: var(--c_tabrow_hover);
}
table td {
    width: 1%;  /* tiny minimum width => browser tries to expand regardless of content*/
}
table caption {
    width: 100%;
    display: block;
    text-align: left;
}
table caption::before {
    content: "Table " counter(tab) ": ";
    font-weight: bold;
}
table tfoot > tr > td {
    border-top: 1px solid;
}
table tfoot > tr > td::before {
    content: "Notes: ";
    font-weight: bold;
}

/* figures */
figure {
    display: inline-block;
    overflow: hidden;
    counter-increment: fig;
    width: fit-content;
    margin: 0 auto;    
}
figure :where(img, iframe, div.plotly-jsonplot) {
    width: 100%;    /* because always wrapped in figure */
    height: auto;
    overflow: hidden;
}
figure figcaption {
    width: 100%;
    display: block;
    text-align: left;
}
figure figcaption::before{
    content: "Figure " counter(fig) ": ";
    font-weight: bold;
}
figure.nonumber {
    counter-increment: none;
}            

/* ################################################################## */
/* other building blocks */
span.footnote {
    color: var(--c_footnote_text);
    font-size: var(--fs_footnote_text);
    position: relative;
    cursor: pointer;
    vertical-align: super;
    counter-increment: footnotes;
}
span.footnote::before {
    content: counter(footnotes)" ";
    vertical-align: super;
    font-size: var(--fs_footnote_text);
}
span.footnote::after {
    content: attr(data-note);
    position: absolute;
    width: max-content;
    max-width: 15rem;
    background-color: var(--c_footnote_box);
    border-radius: 4px;
    box-shadow: 0 2px 6px var(--c_footnote_boxshadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.15s ease, transform 0.15s ease;    
    z-index: 10;
    white-space: normal;

}
span.footnote:hover::after {
    opacity: 1;
    transform: translateY(0);
}

blockquote {
    display: inline-block;
    overflow: hidden;
    font-size: var(--fs_blockquote_text);
    text-align: left;
    width: 95%;
    color: var(--c_blockquote_text);
    margin-left: 0.5rem;    
    border-left: 0.5rem var(--c_blockquote_border) solid;
    background-color: var(--c_blockquote_bg);
}

/* ################################################################## */
/* INTERACTIVE ELEMENTS */
/* user input */
select, input, textarea, button {
    background-color: var(--c_bg);
    color: var(--c_body_text);
    border-radius: 5px;
}
button {
    font-weight: bold;
}
button:active {
    background-color: color-mix(in srgb, var(--c_bg) 70%, var(--c_body_text) 30%);
}
button:hover {
    cursor: pointer;
    background-color: color-mix(in srgb, var(--c_bg) 80%, var(--c_body_text) 20%);
}

/* download button */
a.download {
    outline: 0px;
    padding-left: 0.1em;
    justify-items: left;
}
a.download::before {
    content: "\1F847";
    font-style: normal;
    border-radius: 5px;
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    outline: 1px solid var(--c_link_text);
}
a.download:hover::before {
    content: "\1F847 Download";
}

/* tooltips */
.tooltip {
    /* base style for tooltips */
    color: var(--c_body_text);
    /* hide info */
    position: absolute;
    visibility: hidden;
    opacity: 0;
    /* box positioning */
    z-index: 1000;
    bottom: 125%; /* above the hovered element */
    left: 50%;
    transform: translateX(-50%);
    /* text styling */
    font-size: 1rem;
    font-weight: normal;
    overflow-wrap: break-word;
    
    /* box styling */
    width: max(100%, 15rem);
    /* height: min(auto, 5em); */
    height: 5em;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--c_bg), var(--c_body_text) 20%);
    padding: 0.4em 0.5em;
    overflow-y: scroll;

    /* text styling */
    white-space: pre;

    /* smoothing effects */
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* input error-highlights */
@keyframes flash-bg {
    0%   { background-color: transparent; }
    20%  { background-color: color-mix(in srgb, var(--c_main) 50%, var(--c_body_text) 50%); }
    40%  { background-color: transparent; }
    60%  { background-color: color-mix(in srgb, var(--c_main) 50%, var(--c_body_text) 50%); }
    100% { background-color: transparent; }
}
.error-highlight {
    animation: flash-bg 0.8s ease-in-out;
}

.future {
    /* anything that happens in the future */
    color: color-mix(in srgb, var(--c_body_text) 60%, var(--c_bg) 40%);
}
.package {
    /* formatting for packages */
    font-family: monospace;
}
.hidden {
    /* hides elements from layout */
    display: none;
}

/* ################################################################## */
/* CUSTOM BUILDING BLOCKS */
/* bibliography */
tre-bibliography a:link,
tre-bibliography a:visited {
    color: color-mix(in srgb, var(--c_main), var(--c_body_text) 70%);
}
tre-bibliography tre-bib-item {
    display: flex;
    margin-bottom: 0.5em;
}
tre-bibliography tre-bib-item::before {
    counter-increment: bibindex;
    content: "[" counter(bibindex) "]\00a0";
}
tre-bibliography tre-bib-item-body > div {
    display: inline;
}

/* glossary */
tre-glossary:before {
    content: "Glossary";
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 0.5em;
}
tre-glossary .head {
    display: block;
    font-weight: bold;
    width: inherit;
}
tre-glossary .body {
    display: block;
    margin-left: 1em;
    width: inherit;
    overflow-wrap: break-word;
}

/* gls, cite in text */
tre-gls,
tre-cite {
    position: relative;   
}
tre-gls-hover,
tre-bib-hover {
    /* inherits from .tooltip */
}
:where(tre-gls-hover,tre-bib-hover).tooltip {
    /* inherits from .tooltip */
    overflow-x: hidden;
    white-space: normal;
}
tre-gls:hover tre-gls-hover,
tre-cite:hover tre-bib-hover {
    /* above element */
    /* display: block;
    visibility: visible;
    opacity: 0.95; */
    /* always at the bottom */
    position: fixed;
    bottom: 5%;
    left: 50vw;
    transform: translateX(-47vw);
    width: 90%;    
}

/* ################################################################## */
/* CROSSREFERENCES */
a:link {
    color: var(--c_link_text);
    background-color: transparent;
    text-decoration: none;
    font-style: italic;
}

a:visited {
    color: var(--c_link_visited);
    background-color: transparent;
    text-decoration: none;
    font-style: italic;
}

a:hover {
    color: var(--c_link_hover);
    background-color: transparent;
    text-decoration: underline;
    font-style: italic;
}

a:active {
    color: var(--c_link_active);
    background-color: transparent;
    text-decoration: underline;
    font-style: italic;
}

/* ################################################################## */
/* LISTS */

/* ---------------------------------------- */
/* bullet lists */
ul {
    font-size: var(--fs_list1_text);
    color: var(--c_list1_text);
    margin-top: 0.2rem;
}

/* custom bullet (red button? */
/* ul > li:before {	
    content: "🍪 ";
} */

ul ul {
    font-size: var(--fs_list2_text);
    color: var(--c_list2_text);
}

/* ---------------------------------------- */
/* ordered lists */
/* top level */
ol {
    font-size: var(--fs_list1_text);
    margin-top: 0.2rem;
    counter-reset: item;
    list-style: none;
    padding-left: 1.5rem;
}
ol > li {
    counter-increment: item;
    color: var(--c_list1_text);
}
ol > li::before{
    content: counters(item, ".") ". ";
}
li > ol {   /* reset counter when new nested element starts */
    counter-reset: item;
}

ol ol {
    font-size: var(--fs_list2_text);
    color: var(--c_list2_text);
}
/* ################################################################## */
/* ITERATION COMMANDS */
.commentLS {
    color: var(--c_comment_ls);
    text-decoration: underline;
    text-decoration-style: wavy;
    font-style: italic;
}

.commentLS::after {
    content: " [LS: " attr(data-comment) "]";
    text-decoration: none;
}

.todoLS {
    color: var(--c_todo_ls);
    font-style: italic;
}

.todoLS::before {
    content: "[TODO LS: ";
}

.todoLS::after {
    content: "]";
}


/* ################################################################## */
/* MEDIA QUERIES */
@media (max-width: 768px) {
    body {
        max-width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-auto-rows: min-content;
        grid-template-areas: 
            'header'
            'nav'
            'main'
            'footer';
        min-height: 100vh;
        text-align: justify;
        margin: 1em;
        gap: 0;
        overflow-x: hidden; 
    }
    nav {
        height: auto;
        position: inherit;
    }
    .nav-item,
    .nav-subitem {
        color: color-mix(in srgb, var(--c_body_text), var(--c_bg) 20%);
        font-size: 0.8em;
    }
    .nav-item .nav-subitem {
        position: relative;  /* back in layout */
        opacity: 1;
        display: block;
        margin-left: 1em;
        margin-bottom: 0.5em;
        transform: translateY(0);
        visibility: visible;
    }
    figure figcaption {
        text-align: justify;
    }
    tre-gls:hover tre-gls-hover,
    tre-cite:hover tre-bib-hover {
        position: fixed;
        bottom: 5%;
        left: 50vw;
        transform: translateX(-47vw);
        width: 90vw;
        /* height: auto;
        z-index: 1000; */
    }    
}