/* No automatic translation for a dictionary */         
.notranslate {
    -ms-transform: translate(0, 0); /* IE 9 */
    -webkit-transform: translate(0, 0); /* Safari */
    transform: translate(0, 0);
}

/* Body is always at least as big as the window. It is a flexbox to allow expansion */
body {
    align-items:stretch;
    margin: 8px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 16px);
}

/* This is a child of body and expands to push down the footer */
div.expand {
    flex-grow: 1;
    margin-bottom: 5px;
}

/* First hr should have no margin below for spacing, and all hrs should be wide */
body > hr {
    margin-bottom: 0;   
}
hr {
    width: 100%;
}

/* Holds some information at the bottom of the page */
footer {
    padding-top:0;
    
    > p {
        margin:0;
    }
}  

/* Page starts with a header including title and form */
header {
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    flex-grow: 0;
 
    > .title {
    display: flex;
    }
    
    div.title {
        margin-left: 3px;
        font-size: x-large;
        align-self: flex-start;
    }

    form {
        margin:0;
    }
}

/* div.sbs holds to nav element and main side-by-side */
div.sbs {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* The main dictionary, which grows to fill the space. It must not overflow itself */
main {
    flex-grow: 1;
    overflow: hidden;
}

/* The navigation bar (holding dictionary entries), and coloured blocks below */
nav {
    top: 0;
    position: sticky;
    min-width:8em;
    margin-right: 10px;
    display: flex;
    flex-direction: column;

    a {
        display:block;
        padding: 2px;
        margin-top: 4px;
        border-width: 1px;
        border-color: grey;
        border-style: solid;
        border-radius: 5px;
        text-align: center;
        min-height: calc(1em + 2px);
    }
    .word {
        background-color: green;
        color: white;
    }
    
    .pre, .post {
        background-color: floralwhite;
        color: black;
    }

    .far {
        display:none;
    }
    
    .none {
        background-color: lightgrey;
    }

    .word.unlisted {
        background-color: rgb(200, 49, 49);
        color: white; 
    }
}

/* Each definition is in an article. It is a flex box to control the position of the aside. Th first hr is not drawn */
hr + hr,  main > hr:first-child {
    display: none;
}

section {
    display: flex;
    justify-content: space-between;

    > div {
        flex-grow: 1;
        min-width: 225px;
    }
}

/* A headword and description labels the word. Selectable for easy copying */
p.headword {
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: x-large;
    
    span {
        font-weight: normal;
        font-size: medium;
        font-style: italic;
    }
    .type {
        text-transform: lowercase;
        padding-left: 20px;
    }
    span.open, span.closed {
        padding-left: 20px;
        padding-right: 10px;
        font-style: normal;
        cursor: pointer;  
    }    
 
    span.cswitch {
        /* display: inline-block; */
        display: none;
        float:right;
        width:0.45em;
        height: 0.45em;
        margin-top: 0.3em;
        margin-right: -10px;
        border: 1px solid black;
        font-size: inherit;        
    }
    
}


/*  Under both headword and title, no decoration of the links */
p.headword a, .title a {
    text-decoration: inherit;
    color: inherit;
    user-select: text;
}

/* Display arrow with showDetails */
article {
    /* default state */
    .open {
        display: none;
    }
    .closed {
        display: inline;
    }
    
    /* if showDetails */
    &.showDetails {
        /* display details in heading */
        .open {
            display: inline;
        }
        .closed {
            display: none;
        }
    }
}

/* Hide second options except under showDetails, excluding vocative */
article:not(.showDetails) {
    tr:not(.vocative) {
        span.alt, span.comma {
                display: none;
            }
    }
}

/* Colouring and showDetails */
.showDetails, .showColour
{
    * { /* default if unusued class */
        .cmid {color:red}
        .cend {color:blue}
        .cend2{color:forestgreen}   
    }
     
    /* noun-like */
    .adjective, .noun, .proper, .pronoun {
        .cmid {color:red}
        .cend {color:blue}
        .cend2{color:forestgreen}
    }
    
    /* verbs */
    .verb {
        .cmid {color: red} /* stem changes always red */
        .cend {color: blue}
        
        .present, .subjunct, .imperative, .imperfect,
        .infin, .pp, .gerund, .long {
            .cinfix0 {color: red} /* e.g. h in crachez */
            .cinfix  {color: forestgreen}
            .cend    {color: blue}
        }

        .simple {
            .cinfix0, 
            .cinfix  {color: forestgreen} 
            .cend    {color: blue}
        }
        
        .plup {
            .cinfix0 {color: forestgreen}
            .cinfix  {color: deeppink}
            .cend    {color: blue}
        }        
    } 
    
    .ckey {
        display: revert;
        margin: 0 0 0.5em 0;
        text-align: right;
        
        font-size: small;
        
        span:not(:first-child) {
            margin-left: 0.6em;
            margin-right: 5px;
        }
        
        .cstem   {color: red}  
        .cend    {color: blue}
        .cinfix  {color: forestgreen}
        .cplupin {color: deeppink}
        .cpost   {color: forestgreen}
    }
    
    table.verb + .ckey {
        .cpost   {display: none}
    }
    
    table:not(.verb) + .ckey {
        .cinfix  {display: none}
        .cplupin {display: none}
    }    
    
}

/* Default hidden parts */
.details, .uform, table.alt { /* uform is -u form of -ul words */
    display: none;
}

/* Secondary tables - create gap */
table.alt {
    margin-top: 1.5em;
}

/* Hidden parts and showDetails */
.showDetails {
    table.alt, .uform {
        display: revert;
    }
}

/* details formatting only if the list has details */
article.showDetails ol.hasDetails {
    /* Separating list items */
    li:not(:first-child)::before {
        display: block;
        content: "";
        position: relative;
        left: -1.5em; 
        top: -0.25em;
        width: calc(100% + 1.5em);
        height: 0px; 
        border-top: 1px solid grey; 
    }  

    li {
        margin-top: 5px;
        margin-bottom: 8px;
    }

    .details {
        display: block;
        margin: 12px 0 20px 15px;

        /* ux and uxi are for translations */
        .ux, .uxi {
            margin-left: 0;

            /* English version of the translation */
            > .uxt {
                margin-left: 30px;
                margin-top: 5px;
                margin-bottom: 7px;
            }
            /* Literal translation */
            > .uxlit {
                margin-left: 0px;
                margin-top: 5px;
                margin-bottom: 7px;
                > span {
                    display: inline-block;
                    font-style: italic;
                    font-size: small;
                    color: grey;
                    width: 60px;
                }
                > span::after {
                    content: ":";
                }
            }            
        }

        /* synonyms and antonyms */
        div.ant, div.syn {
            margin-bottom: 4px;
            margin-left: 0em;
        }

        > div {
            width: calc(100% - 2em);
        }

        > div:nth-child(n+2) {
            margin-top: 2px;
            padding-top: 4px;
            border-top: solid grey 1px;
        }      

        a {
            color: green;
        }
    }
}

/* A list of items is found under the headword */
ol {
    margin-top: 0;
}
li { /*also affects the welcome list */
    padding-left: 5px;
    margin-bottom: 1px;
}
li i {
    padding-right: 1px; /* Adjust the padding value as needed */
}

/* A usage comment is found twice. The one directly under "main" is not printed until the screen shrinks. */
p.use {
    margin-left: 10px;
    font-style: italic;
    color: grey;
    margin-bottom: 0.7em;
    font-size: 1em;
}
article > p.use {
    display:none;
    margin-top: 2px;
    margin-bottom: 0;
    text-align: right;
}

/* the aside holds a div holds a table. The aside is in a flex box (changes as screen shrinks). The div holds the table and adds a scrollbar if too little space. */
aside {
    order: 2;
    margin-left:20px;
    margin-top: 15px;
}
aside > div {
    width: 100%; /* use all available space */
    overflow-y: auto;
}

table {
    margin-left: auto; /* keep right */
    margin-bottom: 5px;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Hide table key by default */
.ckey {
    display: none;
}

/* firefox needs an extra pixel on the left because of a bug */
@supports (-moz-appearance:none){
    table {
        margin-left: 1px;
}}

/* remove top left from non-verb tables */
table:not(.verb) > tbody > tr:nth-child(1) > td:nth-child(1) {
    border: none;
}

/* table formatting */
th, td {
    font-size:.875rem;
    font-family: Open Sans, Arial, sans-serif;
    border: lightgrey 1px solid;
    border-collapse: collapse; 
    letter-spacing: .02rem;
}

td {
    padding-left: 5px;
    padding-right: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    min-width: 6em;
}
tr.heading > td, td.heading {
    letter-spacing: normal;
    color: dimgrey;
    font-size: small;
    font-style: italic;
    min-width: 5em;
    word-wrap: break-word; 
    text-align: center;
}

/* no colouring for lins in a table*/
table a {
    color: inherit;
}

/* This controls the small lettering in the tables. It is also used for footer lettering */
span.article, footer {
    letter-spacing: normal;
    color: darkgrey;
    font-size: small;        
}

/* Throughout, no underlining of links */
a {
    color: blue;
    text-decoration: none;
}


/* Override for smallish screens and windows */
@media screen and (max-width:900px)
{
    /* so inflection tables under defintions */
    section { 
        flex-direction: column;
    }
    aside {
        margin-top:5px;
        margin-left: 0;
        display: flex;
        flex-flow: row-reverse;
    }

    /* hide the first usage case and show the second, right aligned */
    div > p.use {
        display: none;
    }
    article > p.use {
        display: block;
    }
    
    /* cswitch needs changed margin */
    p.headword span.cswitch {
        margin-right: 10px;
    }

}

/* Override for very small screens or phones */
@media screen and (max-width:655px)
{
    /* so title is above dictionary */
    header {
        flex-direction: column;
    
        > .title {
            margin-bottom: 10px;
            width: 100%;
        }
        
        div > div.title {
            flex-grow: 1;
        }
    }
    /* make some text a little larger */
    li, span.desc {
        font-size: revert;
    }
    p.headword {
        font-size: x-large;
    }
    td, th {
        font-size: 1rem;
    }
    
    /* move dictionary navigation to horizontal and format*/
    div.sbs {
        flex-wrap: wrap;
    }
    nav {
        position: inherit;
        
        flex-direction: row;
        
        margin-top: 10px;
        margin-right: 0;

        padding-top: 3em;
        padding-right: 2em;
        padding-left: 2em;
        padding-bottom: 3em;
        
        overflow-x:auto;
        
        a {
            transform: rotate(-50deg);
            min-width: 7em;
            position: relative;
            margin: 0 -2em;
            height: fit-content;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        
        .far {
            display: block;
        }
    }
    nav::-webkit-scrollbar {
        display: none;
    }
    main > hr:first-child {
        display: block;
    }
    
    /* increase size of search bar */
    input, label, button {
        font-size: large;
    }
}