/* term.css */

/* -------------------------------------------------------------------------------- *
 * External files
 * -------------------------------------------------------------------------------- */

/* Asciidoctor doesn't support multiple CSS files. `adbook` _could_ support it but I was not temped
 * to do. So let's just import them here:
 */

@import url("partials/term_adoc.css");
@import url("partials/prism_okidia.css");

/* Some hack to hide callouts characters (`(1)` for example) when using Prism.js */
.highlight b {
    display: none;
}

/* Web fonts */
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700");

/* -------------------------------------------------------------------------------- *
 * Global rules
 * -------------------------------------------------------------------------------- */

/* Insert indentations automatically, without adding indents to the source files */
:not(li) > .paragraph {
    text-indent: 1em;
}

:root {
    --sidebar-width: 20em;
    --bg: #2f2f2f;
    --article-max-width: calc(52em + (2 * var(--article-max-pad)));
    /* Required paddings applied to the entire article space */
    --content-pad: 15px;
    /* Additional paddings applied to each flex column */
    --article-max-pad: 60px;
    --header-height: 50px;
}

/* Fix for mobile (height of browser chrome, navigator) */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

/* -------------------------------------------------------------------------------- *
 * Document outline
 * -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- *
 * sidebar
 */

#sidebar {
    position: absolute;
    top: 0;
    background-color: rgb(45, 45, 45);
    border-right: 1px solid black;

    /* for <ol> */
    padding-left: 15px;

    width: calc(var(--sidebar-width) - 15px);
    height: 100%;
    /* see also: `main > ` */
    max-height: calc(
        100vh - var(--header-height) - 10px /* why do we need this space */
    );
    overflow-y: auto;
    font-size: 15px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.sidebar li a {
    text-decoration: none;
    display: block;
}

.sidebar li a.active {
    color: rgb(192, 192, 192);
    padding: 0;
}

.sidebar li a.inactive {
    color: rgb(96, 96, 96);
    padding: 0;
}

/* .sidebar ol li, div.sidebar-item-flex { */
.sidebar ol li,
div.sidebar-item-flex {
    /* FIXME: fill width anyways */
    width: 100%;
}

.sidebar-item-flex {
    /* div for aligning title and toggle button in one line */
    display: flex;
}

.sidebar-item-flex-title {
    margin-left: 0;
    margin-right: auto;
}

/* toggle button */
.sidebar-item-flex-toggle {
    margin-left: auto;
    margin-right: 0;
    padding: 0 10px;
}

.sidebar-item-flex-toggle {
    transition: transform 0.5s;
}

.expanded .sidebar-item-flex-toggle {
    transform: rotate(90deg);
}

/* numbering */
.sidebar ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

.sidebar ol > li {
    display: table;
    counter-increment: item;
    margin-bottom: 1em; /* space between sections */
}

.sidebar li ol > li {
    margin: 0.6em; /* space between section items */
}

/* consider nest items */
.sidebar ol > li:before {
    width: 1px; /* as small as possible */
    content: counters(item, "-") ". ";
    display: table-cell;
    padding-right: 9px;
}

.sidebar li ol > li:before {
    width: 1px; /* as small as possible */
    content: counters(item, ".") " ";
}

/* -------------------------------------------------------------------------------- *
 * title
 */

#header {
    position: absolute;
    width: 100vw;

    border-bottom: 1px solid #d75f5f;
    background-color: var(--bg);
    top: 0px;
    z-index: 1000;
    display: flex;
}

#sidebar {
    z-index: 999;
    margin-top: var(--header-height);
    padding-top: 10px;
}

/* Title */
h1 {
    font-size: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    height: 40px;
    margin: auto;
}

#nav-btn {
    border: none;
    background: none;
    margin: 6px 0 0 12px;
    top: 0;
    font-size: 32px;
    width: 32px;
    height: 32px;
    z-index: 1001;
}

#nav-btn i {
    color: rgb(200, 200, 50);
}

#nav-btn-click {
    width: 32px;
    height: 32px;
    /* color: none; */
    /* background-color: none; */
    /* position: fixed; */
}

h1 {
    text-align: center;
}

/* This is some nice trick from the default Asciidoctor CSS! */
#adoc-meta br {
    display: none;
}

#adoc-meta br + span:before {
    content: "\00a0\2013\00a0";
}

/* -------------------------------------------------------------------------------- *
 * Scroll bar
 */

/* TODO: is this working? my firefox doesn't apply this style, so */
main {
    scrollbar-width: thin;
    scrollbar-color: #1eaf90 #555555;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #555555;
}

::-webkit-scrollbar-thumb {
    background: #1eaf90;
}

::-webkit-scrollbar-thumb:hover {
    background: #4abfa6;
}

/* -------------------------------------------------------------------------------- *
 * article
 */

body {
    overflow: hidden;
}

/* Wrapper of all the colums */
#content {
    /* padding-left: var(--content-pad); */
    /* padding-right: var(--content-pad); */
    overflow-x: auto;
    overflow-y: hidden;
}

#dummy-header {
    width: 100vw;
    height: var(--header-height);
}

h2 {
    margin-block-start: 0;
}

/* author, email and revdate in AsciiDoc word */
#adoc-meta {
    text-align: center;
    margin: 0.5em 0 0.5em 0;
    font-size: 0.9rem;
    color: #a1a1a1;
}

/* -------------------------------------------------------------------------------- *
 * footer (footnotes)
 */

/* remove horizontal line */
#footnotes hr:first-child {
    display: none;
}

div#footnotes {
    margin-top: 1em;
}

.footnote {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.footnote:first-of-type {
    padding-top: 1em;
}

.footnote:last-of-type {
    padding-bottom: 1em;
}

/* -------------------------------------------------------------------------------- *
 * Article style
 * -------------------------------------------------------------------------------- */

body {
    background-color: var(--bg);
    color: #cccccc;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
}

main {
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title {
    font-family: "Times", serif;
    color: #d8d8d8; /* lighter color */
}

/* headers*/
h2,
h3,
h4 {
    /* font-style: oblique; */
    padding-bottom: 2px;
}

h2 {
    font-size: 1.8rem;
    border-bottom: 1px solid #4f4f4f;
}

h3 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: #a0a0a0;
    text-decoration-thickness: 2px;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.15rem;
}

h6 {
    font-size: 1.10rem;
}

/* link */
a:link {
    color: #22c3a1;
}
a:visited {
    color: #d75f5f;
}
a:hover {
    color: #84edb9;
}
a:active {
    color: #458588;
}

/* text decorations */
strong {
    /* *strong text* */
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #22c3a1;
    text-underline-position: under;
}

.big {
    /* [.big]#big# */
    font-size: larger;
}

.small {
    /* [.small]#small# */
    font-size: smaller;
}

.underline {
    /* [.underline]#text with underline# */
    text-decoration: underline;
    text-underline-position: under;
}

.line-through {
    /* [.line-through]#text with linethrough# */
    text-decoration: line-through;
}

.text-center {
    /* [.text-center] */
    text-align: center;
}

/* list */
.ulist p,
.olist p {
    margin-bottom: 0.35em;
    margin-top: 0.35em;
}

li {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

li:last-child {
    margin-bottom: 0.5em;
}

ul {
    margin-block-start: 0em;
    margin-block-end: 1em;
}

/* horizontal line */
hr {
    border-top: solid 1px #d75f5f;
    border-bottom: none;
    height: 1px;
    background: #d75f5f;
}

/* collapsable panel in CSS word */
details {
    margin: 0.5em;
    padding: 0.5em;
    border: 4px solid #4b3738;
}

summary {
    font-size: 1.1em;
}

/* -------------------------------------------------------------------------------- *
 * Inline block styles
 * -------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------
 * btn:[OK]
 */

.button::before,
b.button::after {
    position: relative;
    top: -1px;
    font-weight: 400;
}

b.button::before {
    content: "[";
    padding: 0 3px 0 2px;
}

b.button::after {
    content: "]";
    padding: 0 2px 0 3px;
}

/* -------------------------------------------------------------------------------- *
 * Block styles
 * -------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------
 * Admonition blocks, implemented as a table)
 */

.admonitionblock > table {
    /* no border */
    border-collapse: separate;
    border: 0;
    background: none;
    width: 100%;
}

.admonitionblock > table td.content {
    /* verical line */
    padding-left: 1.125em;
    padding-right: 1.25em;
    border-left: 1px solid rgb(128, 128, 128);
}

.admonitionblock p {
    /* small space */
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

/* --------------------------------------------------------------------------------
 * |=== (table)
 */

table {
    /* width: 100%; */
    margin-top: 1em;
    margin-bottom: 1em;
}

td > p,
th {
    padding: 0.5em;
    margin: 0;
}

table > .title {
    text-align: left;
    margin-bottom: 0.1em;
}

.halign-center {
    text-align: center;
}

.halign-right {
    text-align: right;
}

.halign-left {
    text-align: left;
}

.valign-top {
    vertical-align: top;
}

.valign-bottom {
    vertical-align: bottom;
}

table {
    border-collapse: collapse;
    border: 1px solid black;
}

table th {
    border-bottom: 1px solid black;
}

table td.tableblock {
    border-right: 1px solid black;
}

table th.tableblock {
    border-right: 1px solid black;
}

/* --------------------------------------------------------------------------------
 * [source]
 * ----
 */

/* inline code block */
:not(pre) > code {
    font-family: "Source Code Pro", monospace;
    background-color: #458588;
}

/* code block (font) */
pre > code {
    font-family: "Source Code Pro", monospace;
}

/* code block (background color & layout) */
div.listingblock > .title {
    color: rgb(192, 192, 192);
    padding-left: 0.5em;
}

pre {
    padding: 1em;
    margin: 0;
}

div.listingblock {
    /* color applied to paddings in `pre` */
    background-color: rgb(26, 28, 30);
    /* background color is supplied by Prism.js. */
}

/* code block (scroll bar) */
div.listingblock > div.content {
    overflow: auto;
}

/* --------------------------------------------------------------------------------
 * sidebar
 */

div.sidebarblock {
    background-color: #222222;
    padding: 1em;
    border-bottom: 1px solid #161616;
}

.sidebarblock .title {
    font-size: 1.2em;
    text-align: center;
    font-style: oblique;
    color: #d8d8d8;
}

/* --------------------------------------------------------------------------------
 * image::path[] and video::path[]
 */

/* image and video */
.imageblock > .title {
    text-align: center;
}

:not(.freesize) img,
video {
    max-width: 100%;
}

/* -------------------------------------------------------------------------------- *
 * Print
 * -------------------------------------------------------------------------------- */

@media print {
    /* hide browser header/footer */
    @page {
        margin-top: 0;
        margin-bottom: 0;
    }

    body {
        padding-top: 72px;
        padding-bottom: 72px ;
    }

    /* unset flex */
    body, main, main > * {
        display: block !important;
        flex-direction: none !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow-x: scroll imporntant;
        overflow-y: scroll imporntant;
    }

    /* colors */
    body {
        /* enable background color (Chrome only?) */
        -webkit-print-color-adjust: exact !important;
    }

    #sidebar {
        display: none;
    }

    *,
    *:before {
        background-color: transparent;
        color: #000;
        box-shadow: none;
        text-shadow: none;
    }

    /* restore settings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-shadow: none;
    }

    /* colors */
    :not(pre) > code {
        background: #abd3d5;
    }

    .conum[data-value] {
        background: #946d6f;
    }

    .title {
        color: #000 !important;
    }

    #header {
        border-color: #000;
    }


    hr {
        background: #000;
    }
}

/* -------------------------------------------------------------------------------- *
 * References
 * -------------------------------------------------------------------------------- */

/* colors
color0   #2f2f2f
color8   #555555
color1   #d75f5f
color2   #d4d232
color10  #8fee96
color3   #af865a
color11  #cd950c
color4   #22c3a1
color12  #458588
color5   #775759
color13  #775759
color6   #84edb9
color14  #84edb9
color7   #c0b18b
color15  #d8d8d8
*/