:root {
    --wordlist-sep: 0.8lh;
    --default-left: 2lh;
}

html {
    color-scheme: light dark;
    background-color: light-dark(white, #0F0E12);
}

body {
    font-family: sans-serif;
}

@font-face {
    font-family: tinellb;
    src: url('../assets/tinellb.ttf');
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.5rem;
}

h1 a:visited,
h1 a:link {
    color: light-dark(black, white);
    text-decoration: none;
}

a:link {
    color: light-dark(#55F, #59F);
    /* light blue */
}

a:visited {
    color: light-dark(#95A, #85F);
    /* light violet */
}

abbr.glossary {
    font-variant: small-caps;
    font-style: normal;
    text-decoration: none;
}

abbr.glossary::after {
    content: "?";
    vertical-align: super;
    font-size: smaller;
}

.flex {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    /* width: 95%;              Removing for now, because I think it's not needed   */
}

.primary {
    width: min(95%, 90ch);
    margin-inline-end: max(5ch, 5%);
}

.javascript,
.hidden,
.mobile,
.portrait {
    display: none;
}

.highlight {
    border: 1px solid red;
    padding: 4px 5px;
    border-radius: 15px;
    line-height: 2;
}

.ipa {
    font: normal larger 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    white-space: nowrap;
}

.ipa strong {
    font-weight: 900;
    color: red;
}

.multiline .tinellbian {
    display: block;
}

.nextline {
    display: block;
}

.no-breaks {
    white-space: nowrap;
}

.overline {
    text-decoration: overline;
}

.self-link {
    font-weight: bold;
}

.stars p {
    text-align: center;
    margin-block: 1em;
    letter-spacing: 2vw;
}

.symbol {
    font: italic larger serif;
}

.tinellbian {
    font-family: tinellbian, tinellb;
    font-size: larger;
}

.tinellbian:lang(x-tlb-hl) {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.tinellbian:lang(x-tlb-hl)::after {
    content: "\202c\00e8";
    font-size: 0;
}

.transliteration {
    font-weight: bold;
    font-size: 0.95rem;
}

nav {
    font-weight: bold;
}

nav a {
    /* both types of nav */
    text-decoration: none;
    cursor: pointer;
    font-weight: initial;
    /* colour does nothing because of 'a:link' in `basic_style.css` */
}

nav a:hover {
    text-shadow: 0px 0px 1px currentColor;
    text-decoration: underline;
}

nav li.normal,
nav li.normal a {
    /* Top-level folder of current page */
    font-weight: bold;
    letter-spacing: 0;
    text-decoration: underline;
}

nav li.link a {
    text-decoration: none;
}

nav button {
    display: block;
    margin: auto;
}

nav form.search {
    --search-color: none;
    margin-block: 2em;
    margin-inline: auto;
    display: flex;
    width: 60%;
    min-width: min-content;
    justify-content: center;
    background-color: var(--search-color);
    border: 1px solid light-dark(black, grey);
}

nav form.search label {
    background-color: none;
    margin-block: auto;
    padding-block: auto;
    padding-inline-start: 2ch;
    font-weight: 100;
}

nav form.search input {
    border: none;
    background-color: var(--search-color);
    padding-inline-start: 2ch;
    flex-grow: 1;
    width: 20%;
}

nav form.search input:focus-within {
    outline: none;
}

nav form.search button {
    background-color: var(--search-color);
    border: none;
    outline: none;
    cursor: pointer;
}

nav form.search button:focus {
    --search-color: green;
}

nav form.search p {
    padding-block-end: 0;
}

nav form.search svg {
    height: 33px;
    min-width: 24px;
    padding: 0 7px;
    width: 24px;
    fill: light-dark(black, white)
}

nav .random {
    text-align: center;
}

nav.sidebar {
    width: max(25%, 200px);
    margin-block-start: 2rem;
    text-align: center;
}

nav.sidebar details summary {
    list-style-type: "☰ ";
}

/* nav .javascript {    text-align: left;} */
nav.sidebar details[open] summary {
    list-style-type: '✖ ';
    margin-block-end: 2em;
}

nav.sidebar .nav-links {
    margin-inline: auto;
    width: fit-content;
    text-align: left;
    line-height: 1.7;
}

nav.sidebar ul {
    list-style-type: none;
    list-style-position: inside;
    padding: 0;
    line-height: 1.9;
}

nav.sidebar ul ul {
    margin-inline-start: 2ch;
    text-align: left;
}

nav.sidebar p {
    font-family: sans-serif;
    margin-block: 0;
    padding-inline-start: 15%;
    padding-right: 15%;
}

nav.sidebar details > p:first-of-type {
    font-weight: bold;
    font-size: larger;
    text-wrap: balance;
}

nav.mini {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

nav.mini p {
    padding-inline-start: 0;
    margin-inline-start: 0;
}

main p a,
main li a {
    text-decoration: none;
}

main p {
    text-align: left;
    line-height: 2;
}

main p.example {
    margin-block-start: 1em;
}

main table {
    border-collapse: collapse;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-block-start: 1em;
}

main td,
main th {
    border: 1px solid darkgrey;
    white-space: nowrap;
}

main th {
    padding-block-start: 4px;
    padding-block-end: 4px;
    padding: 0 1em;
}

main th a {
    color: inherit;
    text-decoration: inherit;
}

main tbody th {
    text-align: right;
}

main td {
    padding: 2px 6px;
    text-align: center;
}

main textarea {
    margin-inline-start: 15%;
    width: min(80%, 80ch);
    height: 10lh;
}

main .also p {
    margin-inline-start: 5%;
}

main .gloss {
    font-style: italic;
}

main .message p {
    margin-block-start: 1em;
    margin-block-end: 1em;
    font-size: smaller;
    color: red;
}

main .results a {
    text-decoration: none;
}

main .results {
    margin-block-start: 3lh;
    width: fit-content;
    margin-inline: auto;
}

main .results ul {
    list-style: "> ";
}

main .results li {
    line-height: 1.6;
    padding-inline-start: 1ch;
}

main .results .title-results {
    font-weight: bold;
    padding-inline-start: 5%;
    padding-block-end: 1em;
}

main .searchbox {
    margin-block-start: 2lh;
}

main .toc {
    border-left: 2px solid light-dark(purple, mediumpurple);
    border-bottom: 2px solid light-dark(purple, mediumpurple);
    margin-block-start: 2rem;
    margin-inline-start: 10%;
    padding-block: 2rem;
    padding-inline-start: 2rem;
}

main .toc::before {
    content: 'Continue with:';
    font-size: larger;
    font-style: italic;
    position: relative;
    top: -0.5em;
    left: 5%;
}

main .toc p {
    line-height: 2.5;
    margin-inline-start: 10%;
    margin-block: 0.2lh 0;
}

main .toc p:first-child {
    margin-block-start: 0.5lh;
}

main .toc p::before {
    content: '\227b';
    /* (greater-than sign) */
    font-size: large;
    line-height: 1;
    padding-right: 2em;
}

main .toc a {
    color: light-dark(black, white);
}

main .universe {
    display: inline;
    font-family: serif;
}

main details {
    cursor: pointer;

    p,
    +p,
    li,
    +li {
        line-height: 1.5;
        margin-block: 0;
    }

    summary {
        margin-inline-start: -1.5ch;
    }
}


main .wordlist {
    margin-inline: 0% 15%;
    margin-block: var(--default-left) 2.5lh;
    padding-block: 0.5lh 1lh;
    padding-inline-start: 10%;
    border-left: 1px solid green;
    border-bottom: 1px solid green;
    overflow: visible;
    --folding-padding: 0;
    list-style: none;

    >li,
    >ul {
        margin-block: var(--wordlist-sep);

        &:first-child {
            margin-block-start: 0;
        }

        &:last-child {
            margin-block-end: 0;
        }
    }

    >details {
        margin-block-start: var(--wordlist-sep);

        &:first-child {
            margin-block-start: 0;
        }

        &:last-child {
            margin-block-end: 0;
        }

    }

    >li {
        &:first-child .block {
            margin-block-start: 0;
        }

        &:last-child .block {
            margin-block-end: 0;
        }

        .block {
            padding-inline: 0;
            margin-block: calc(2.5 *var(--wordlist-sep));

            >li,
            >ul {
                margin-block: var(--wordlist-sep);

                &:first-child {
                    margin-block-start: 0;
                }

                &:last-child {
                    margin-block-end: 0;
                }

            }
        }

        >details {
            margin-block-start: var(--wordlist-sep);

            &:first-child {
                margin-block-start: 0;
            }

            &:last-child {
                margin-block-end: 0;
            }
        }
    }

    ul {
        list-style: none;
    }

    .block details+li,
    details li,
    details+li {
        margin-block: 0;
    }
}


main .wordlist-caption {
    /* margin-inline-start: 3ch; */
    font-weight: bolder;
}

main .wordlist-caption+.wordlist {
    margin-block-start: -0.5lh;
}

footer {
    margin-block-start: 2rem;
    margin-inline-start: 30%;
    margin-inline-end: 10%;
    margin-block-start: 1rem;
    font-size: smaller;
    font-family: serif;
    text-align: right;
    width: 70%;
}

footer .copyright {
    font-size: smaller;
    font-family: serif;
    text-align: right;
    width: 85%;
    line-height: 1.5;
}

footer .copyright p {
    display: inline;
}

@media screen and (max-width: 800px) {
    input#wordsearch {
        width: 80%;
    }

    .flex {
        margin-inline-start: auto;
        margin-inline-end: auto;
        flex-direction: column;
    }

    .primary {
        width: 100%;
    }

    .desktop,
    .landscape {
        display: none;
    }

    .landscape table {
        display: none;
    }

    .mobile,
    .portrait {
        display: initial;
    }

    .portrait table {
        margin-inline-start: auto;
        margin-inline-end: auto;
    }

    nav.sidebar {
        width: 100%;
    }

    nav.mini p {
        text-indent: 0;
    }

    main {
        width: calc(100% - 4ch);
        margin-inline-start: 2ch;
        margin-inline-end: 2ch;
    }

    main abbr.glossary::after {
        content: "";
        vertical-align: super;
        font-size: smaller;
    }

    footer {
        margin-inline-start: 5%;
        margin-inline-end: 5%;
        text-align: right;
        width: 95%;
    }

    footer .copyright {
        width: 100%;
    }
}