/*
 * Sphinx stylesheet to add some customizations to the default Alabaster theme.
 * 
 * The source for the default stylesheet can be found at 
 * https://github.com/bitprophet/alabaster/blob/master/alabaster/static/alabaster.css_t
 *
 */

/* -- HEADER ------------------------------------------------------------------------------- */

div.header {
    background-color: #140f46;
    top:0;
    position: fixed;
    width: 100%;
    padding: 0 30px 30px 30px;
}

#siteBanner {
    width: 100%;
    height: 80px; 
    margin: 0;
    opacity: 0.95;
    z-index: 1;
    transform: translate3d(0px, 0px, 0px);
    position: relative;
}

#siteBanner input {
    border-width: 0;
    /*color: rgb(244, 244, 244);
    background-color: #140f46;
    font-size: 0.9rem;*/
    letter-spacing: 0.1rem;
    /*width: 12rem;*/
}

#siteBanner input:focus, 
#siteBanner textarea:focus, 
#siteBanner select:focus{
    outline: none;
}

div.logocontainer {
    height: 72px;
    width: 350px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

div.linkcontainer {
    width: 70%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 15px;
}

div.linkbar {
    float:right;
}

.linkbar a {
    color: black;
    font-size: 20px;
    margin-left: 20px;
    text-decoration: none;
}

.linkbar a:hover {
    text-decoration: underline;
}


/* CODEQL DOCUMENTATION AND SEARCHBOX BANNER ---------------------------------------------------------- */

#title-banner {
    background: #140f46;
    height: 50px;
    position: relative;
}

#title-banner a {
    color: white;
    font-size: 32px;
    text-decoration: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 32px;
}

#searchbox-title-banner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 32px;
}

#searchbox-navbar {
    display: none;
}

#textfield {
    position: relative;
    float: left;
}

#searchbutton {
   position: relative;
   float: left;
}

/* -- WRAPPER CONTAINING NAVBAR AND MAIN BOX --------------------------------------------------*/

div.wrapper {
    margin-bottom: 0px;
    height: 637px;
}

/* -- DOCUMENT ------------------------------------------------------------------------------- */

div.document {
    width: 95%;
    padding: 0;
    margin: 0 0 30px 0;
}

div.documentwrapper {
    width: 90%;
    margin: 20px 20px 20px 20px;
    padding-bottom: 50px;
}
div.mainBox {
    margin-left: calc(30% + 25px);  /* Allow 25px for the width of the ToC scrollbar */
}

div.privacy {
    text-align: right;
    padding-right: 5%;
    padding-bottom: 20px;
}

div.body li {
    margin: 0 0 0.5em 0; /* Increase spacing between list items */
}

/* -- SIDEBAR ------------------------------------------------------------------------------- */

div.navBox {
    width:29%;
    padding-left: 25px;
    height: calc(100% - 108px);
    z-index: 100;
    background-color: #FFFFFF;
    padding-top: 30px;
    color: black;
    float: left;
}

.navBox li {
    margin: 10px 0 10px 0px; 
}

.navBox ul, .navBox ol, .navBox li {
    list-style-type: none;
}

.navBox ul li a {
    border-bottom: none;
    color: black;
}

.navBox ul li a:hover {
    font-weight: bold;
    border-bottom: none;
}

.navBox a.current {
    font-weight: bold;
    text-decoration: underline;
}

/* -- SIDEBAR TOC ----------------------------------------------------------------------------------*/

#toc h1 {
   font-size: 20px;
   font-weight: bold;
   margin-left: 28px;
}

/* -- SMALL SCREEN ------------------------------------------------------------------------------- */

@media screen and (max-width: 875px){ 
   
    body {
        margin: 0;
        padding: 0;
        overflow: inherit;
        width: 100%;
    }

    #siteBanner {
        position: relative;
    }

    div.logocontainer {
        width: 200px;
    }  

    .linkcontainer a:not(:first-child) {  /* Only display Learn CodeQL link on small screen */
        display: none;
    }
    
    #title-banner a {
        font-size: 5vw;
    }

    #searchbox-title-banner { /* Move searchbox from title banner to sidebar on small screen */
        display: none;
    }

    #searchbox-navbar {
       display: block; 
       float: left;
       margin-right: 20px;
    }

    div.navBox {
        position: relative;
        width: 95%;
        border-color: #2f1695; 
        padding-top: 10px;      
    }
    
    #toc h1 { /* Slightly reposition the heading on small screens */
        margin-left: 18px;
    }
    
    div.wrapper {
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding-top: 0px;
    }  
    div.mainBox {
        margin: 0 10px 0 10px;
        position: relative;
        height: 100%;
        width: 95%;
    } 
    div.documentwrapper {
        padding-left: 20px;
        width:100%;
        box-shadow: none;
        margin: 0;
        padding-left:0;
    }

    div.body {
        min-width: unset;
    }

    ul {
    margin: 10px 20px 10px 20px;
    }

    div.privacy {
        padding-right: 0%;
    }

}
    
/* -- PRINT VIEW ----------------------------------------------------------------------------*/

@media print {
    div.navBox {
        display: none;
    }

    #siteBanner {
        display: none;
    }

    div.wrapper {
        /*margin-top:-100px;*/
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding-top: 0px;
    }  
    div.mainBox {
        margin: 0 10px 0 10px;
        position: relative;
        height: 100%;
        width: 100%;
    } 
    div.documentwrapper {
        padding-left: 20px;
        width:100%;
        box-shadow: none;
        margin: 0;
        padding-left:0;
    }

    body {
        margin: 0;
        padding: 0;
        overflow: inherit;
        width:95%;
    }

    div.body {
        min-width: unset;
    }
    div.linkbar {
        display: none;
    
    } 
    .small-bar {
        display: inherit;
    }
    
    ul {
    margin: 10px 20px 10px 20px;
    }

    div.privacy {
        display: none;
    }
}

/* -- MAIN BODY ---------------------------------------------------------------------------- */

div.body {
    max-width: 100%;  /* overrule 800px in basic.css */
} 

/* 
 * Override default styling for "admonitions". 
 * This includes: note, tip, important, and caution.
 *
 */
 
div.admonition p.admonition-title { 
    /* Make title same size and font as body, but bold. */
    font-family: Lato, sans-serif; 
    font-size: 14px;
    font-weight: bold;
}

p.admonition-title:after {
    content: ""; /* Don't insert a colon after the title */
}

/* 
 * Don't use yellow for footnote background.
 *
 */

.footnote:target {
    background-color: unset;
}

/* 
 * Add a border with rounded corners around code blocks
 * (as in the QL language spec).
 *
 */

pre {
    border: 1px solid #BBB;
    background: #F6F6F6;
    border-radius: 5px;
    white-space: pre-wrap;
}

/*
 * Use more appropriate colors for syntax highlighting
 *
 */

.highlight { color: #333 } /* default */
.highlight .s { color: #06994a } /* strings */
.highlight .m { color: #333 } /* numbers (no special highlighting) */
.highlight .c1 { color: #007020; font-style: italic } /* one-line comments */
.highlight .cm { color: #007020; font-style: italic } /* multiline comments */
.highlight .cp { color: #2F1695; font-style: italic } /* QLDoc comments */
.highlight .k { color: #7a65cd; font-weight: bold } /* keywords */
.highlight .kt { color: #7a65cd; font-weight: bold } /* built-in type keywords */
.highlight .kr { color: #333; font-style: italic } /* annotations */

div.context { /* hide rst search snippets */
    display: none;
}

/* -- INDEX -------------------------------------------------------------------------------- */

table.indextable li > a {
    text-decoration: unset;
}


/* -- FOOTER ------------------------------------------------------------------------------- */

/* Adjust anchor targets to allow for the fixed banner */
div.documentwrapper a[name], 
div.documentwrapper :target::before,
div.footnote-group a[name], 
div.footnote-group :target::before
 {
    content: "";
    display: block;
    height: 78px;      /* Height of banner */
    margin-top: -78px; /* Prevent this showing as a gap */      
}

/* make anchor highlighting more sensible */

dt:target::before {
    background-color: white;
}

/* -- CSV TABLE STYLING ------------------------------------------------------------------------------- */

table.colwidths-auto.fullwidthtable.docutils {
    width: 100%;
    margin-bottom: 20px;
}

table.colwidths-auto.fullwidthtable.docutils caption {
    top-outside: true;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: left;
    font-size: 150%;
}

/* -- FOOTNOTE TABLE STYLING ------------------------------------------------------------------------------- */

table.docutils.footnote {
    border: none;
    background: transparent;
    margin-left: 10px;
}

/* -- STYLE PULL-QUOTE AS ADMONITION WHILE DOCS STILL PARSED FOR LGTM EMBEDDED HELP------------------------- */

blockquote.pull-quote {
    margin: 20px 30px;
    padding: 10px 20px;
    background-color: #EEE;
    border: #CCC;
    border-radius: 5px;
} 

blockquote.pull-quote p:first-of-type {
    font-weight: bold;
    margin-top: 0px;
}

blockquote.pull-quote > :last-child {
    margin-bottom: -10px;
}

/* -- COLLAPSIBLE SECTIONS --------------------------------------------------------------------------------- */

.toggle .name {
    display: block;
    clear: both;
}

.toggle .name:hover {
    cursor: pointer;
}

.toggle .name:after {
    content: " ▶";
}

.toggle .name.open:after {
    content: " ▼";
}