/* !!! KEYBOARD NAVIGATION NEEDS IMPROVING ; need to fix focus and outlines for consistency*/

:root{
    --content-width: min(50em, 90vw);
    --outline: solid .15rem var(--alt-fg);
}

body{
    align-items:center;
    background-color:var(--bg);
    color:var(--fg);
    font-family:var(--main-font);
}

h1{font-size:2em;}
h2{font-size:1.5em;}

a{
    color:var(--alt-fg);
    text-decoration:none;
}
a.url::before{
    content:'-> ';
}
p.right{
    text-align: right;
}
p, li{
    margin-bottom:0.5em;
}

li{
    list-style-type:disc;
    margin-left:1em;
}
li:before{

    color:var(--dim-fg);
}
li li {
    list-style-type:circle;
}

.mono{
    font-family:var(--monospace);
    font-size:0.97em;
}


a:focus,
a:hover, a.current{
    text-decoration:underline;
    outline: transparent;
    text-underline-offset:.3em;
    text-decoration-thickness:.1em;
}

header{
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    width:var(--content-width);
    padding:.5em;
}

header>*{
    padding:0.2rem;
}

header h1>a{
    display:flex;
    flex-direction:column;
}
header h1>a::after{
    content:'';
    width:100%;
    height:0.12rem;
}
header h1>a:hover::after,
header h1>a:focus::after{
    background:linear-gradient(90deg, var(--fg) 68%, var(--alt-fg) 70%);
}

header h1 svg{
    height:3rem;
}
header #studer-revox{
    fill:var(--fg);
}
header #-ftp{
    fill:var(--alt-fg);
}
header h1 svg>text{
    fill:var(--alt-fg);
    font-family: 'Barlow', sans-serif;
}



header nav{
    font-family: 'Barlow', sans-serif;
}
header nav a{
    margin: 0 .5em;
    padding: 0 .4em;
    font-size:0.99em;
    color:var(--alt-fg);
}
header nav a.current,
header nav a:hover{
    color:var(--fg);
}

header nav *:focus,
label#mobile_menu:focus{
    outline: solid .15rem var(--alt-fg);
    border-radius:.25em;
    text-decoration:none;
}

nav#path{
    width:var(--content-width);
    font-size:.9em;
    background-color:var(--alt-bg);
    border:solid var(--alt-bg);
    border-width: .1em 1.5em;
    border-radius:.2em;
    box-sizing: content-box;
}
nav#path>*{
    margin:0 0.15em;
}

main{
    font-family: SF Pro, 'Inter', sans-serif;
    font-size:0.9em;
    padding:1em;
    width:var(--content-width);
    margin:auto;
    flex-grow:2;
    justify-content:center;
    /* background-color:var(--alt-bg); */
}

main h2{
    font-family:'Barlow', sans-serif;
    margin: .4em;
    margin-left:-.7em;
    color:var(--alt-fg);
}

main a:visited{
    color:var(--dim-fg);
}

footer small.privacy_notice{
    color:var(--dim-fg);
    font-family:var(--sans-serif);
    opacity:0.5;
    padding:0.5em;
    font-size:0.7em;
}
footer small.privacy_notice a:hover{
    text-decoration-thickness: 0.1em;
}

pre#error_url
{
    margin-left:-2.5rem;
    margin-top:-1.5rem;
}

main.error{
    justify-content:flex-start
}

main.home{
    align-items:center;
    justify-content: space-evenly;
}

form#theme_and_language{
    display:flex;
    flex-direction:column;
    font-size:0.9rem; /* use this to set form size */
}
form#theme_and_language input{display:none;}

form#theme_and_language fieldset{
    display:flex;
    border-radius:.3em;
    overflow:clip;
}
form#theme_and_language svg{
    width:100%;
    height:100%;
}
form#theme_and_language label
{
    background-color:var(--alt-bg);
    fill:var(--fg);
    stroke:var(--fg);
    stroke-width:0;
}
form#theme_and_language svg#light_icon{
    stroke-width:  7%;
}

body:has(input#select_en:checked)    form#theme_and_language label[for=select_en],
body:has(input#select_fr:checked)    form#theme_and_language label[for=select_fr],
body:has(input#select_dark:checked)  form#theme_and_language label[for=select_dark],
body:has(input#select_light:checked) form#theme_and_language label[for=select_light]
{
    background-color:var(--fg);
    cursor:default;
    fill:var(--bg);
    stroke:var(--bg);
}

/* DESKTOP */
@media screen and (min-width:60.01em)
{
    header{
        margin-top:1em;
    }
    header label#mobile_menu{
        display:none;
    }

    form#theme_and_language{
        position:absolute;
        top:.8rem;
        right:max(calc(50vw - 35em), 1.2rem);
        height:3em;
        width:3em;
    }
    form#theme_and_language fieldset{
        width:100%;
        height:50%;
        margin:.2em;
    }
}

/* MOBILE */
@media screen and (max-width:60em)
{
    header{
        align-items: center;
        margin-top:min(1em, 1vw);
        width:95vw;
    }
    header h1 svg{
        max-width:78vw;
    }
    label#mobile_menu{
        z-index:2;
    }
    label#mobile_menu svg{
        fill:var(--alt-fg);
        height:min(3rem, 8.5vw);
    }
    label#mobile_menu:hover svg{
        fill:var(--fg);
    }



    header nav{
        display:none;
        position:absolute;
        top:4.3em;
        left:0;
        width:100vw;
        height:calc(100vh - 4.3em);

        flex-direction:column;
        justify-content: center;
        align-items:center;
        background-color:var(--bg);
    }

    header nav a.current{

    text-decoration:underline;
    text-decoration-thickness: 0.15em;
    }

    body:has(label#mobile_menu>input:checked) main{
        height:0;
        overflow:hidden;
    }
    header:has(label#mobile_menu>input:checked) nav{
        display:flex;
    }
    header nav>div{
        flex-direction:column;
    }


    header nav>div>a{
        margin:.5em 0;
        padding:.5em;
    }
    header nav>div>a:before{
        content:'->';
        font-family:'Fira Code';
        padding-right:0.5em;
        display:inline-block;
    }

    form#theme_and_language{
        margin:5vh 0;
    }
    form#theme_and_language fieldset{
        width:3em;
        height:1.5em;
        margin:1vh 0;
    }
}

/* browser */
main#browse{
    justify-content:flex-start;
}
main#browse li{
    list-style:none;
    margin-left:0;
}

    ul.folder{
        /* display:inline-grid; */
        border-left:solid 1px transparent;
        max-width:fit-content;
        padding: .2em .5em 0;
        margin-bottom: .2em;
    }

    /* ul.folder>li{
        border-left:solid 1px transparent;
    } */

    /* file item */
    ul.folder>li.file>a:first-of-type{
        color:var(--fg);
    }
    ul.folder>li.file>a:first-of-type:hover{
        color:var(--alt-fg);
    }

    /* folder item */
    ul.folder>li.folder>label{
        color:var(--fg);
    }
    ul.folder>li.folder>label:hover{
        color:var(--alt-fg);
    }
    ul.folder>li.empty{
        color:transparent;
        height:.5em;
    }

    /* folder drop down */
    ul.folder>li>label>input,
    ul.folder>li>ul.folder{
        display:none;
    }

    ul.folder>li>label:has(input:checked)
    {
        display:inline-grid; /* avoids spacing with parent folder's label */
        border-bottom:solid 1px var(--dim-fg);
        font-weight:600;
        letter-spacing: .05em;
    }
    ul.folder>li:has(>label>input:checked)>ul.folder{
        border-left-color: var(--dim-fg);
        display:block;
    }

    /* all items, additionnal ui elements */
    ul.folder>li>small.info{
        font-size:0.8em;
        color:var(--dim-fg);
    }
    ul.folder a.arrow{
        margin: 0 0.5em;
        font-size:1.2em;
        line-height:1em;
    }
    ul.folder a.arrow:hover{
        text-decoration: none;
        color:var(--fg);
        transform:scale(1.2);
        display:inline-block;
    }