/*  
---------------------------------------------------
Header
---------------------------------------------------  
*/

header#site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1001;
    min-height: @small-header;
    transition: box-shadow 0.4s ease-in-out 0s;
}

header#site-header a { 
    text-decoration: none;
}

header#site-header::after { 
    content:"";
    position:absolute; right:0; bottom:0; left:0; z-index:1;
    height:@base-border-width;
    background-color:@header-borders;
}

body.max-width header#site-header {
    width:100%; max-width: @site-max-width;
    margin: 0 auto;
    right:auto; left:auto;
}

header#site-header #logo {
    position: relative; top: 0;
    padding: 15px;
    height: @small-header;
}

header#site-header #logo a {
    display: block;
}

header#site-header #logo picture,
header#site-header #logo img { 
    width:auto; height:auto; 
    max-height:~"calc(@{small-header} - 30px)";
    border-radius:0;
}

header#site-header #logo:not(.no-image) span { 
    display:none;
}

header#site-header #logo.no-image span { 
    display: table-cell;
    vertical-align: middle;
    height:~"calc(@{small-header} - 30px)";
}

@media (min-width:0) and (max-width:@small-breakpoint) {
    html.reveal-out header#site-header {
        height: 100%; max-height: 100%;
        overflow: auto;
        padding-bottom:@small-header;
    }
    header#site-header>.container-fluid>.row,
    header#site-header>.container>.row { 
        display:block!important;
    }
    html.reveal-out header#site-header::after { 
        display:none;
    }
}

@media (min-width:@large-breakpoint) {
    header#site-header {
        min-height: @large-header;
    }

    header#site-header #logo {
        padding: 20px;
        height: @large-header;
    }
    header#site-header #logo picture,
    header#site-header #logo img { 
        max-height:~"calc(@{large-header} - 40px)";
    }

    header#site-header #logo.no-image span { 
        height:~"calc(@{large-header} - 30px)";
    }

    header#site-header #logo::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: @base-border-width;
        height: @large-header;
        background-color: @header-borders;
    }
}



/*  
--------------------------------------------------- 
Header on scroll & transparent header
---------------------------------------------------  
*/

@media (min-width:@large-breakpoint) {

    html.nav-up body:not(.browser-safari) header#site-header { 
        top:-@header-on-scroll;
    }
    body:not(.browser-safari) header#site-header { 
        transition:all 0.4s ease-in-out 0s, box-shadow 0.4s ease-in-out 0s;
    }
    body:not(.browser-safari) header#site-header #logo,
    body:not(.browser-safari) header#site-header #logo span,
    body:not(.browser-safari) header#site-header #logo picture,
    body:not(.browser-safari) header#site-header #logo img,
    body:not(.browser-safari) header#site-header #logo::after,
    body:not(.browser-safari) header#site-header nav.main,
    body:not(.browser-safari) header#site-header nav.main::after { 
        transition:all 0.4s ease-in-out 0s;
    }


    html.nav-up body:not(.browser-safari) header#site-header #logo { 
        top: @header-on-scroll;
        padding: 10px;
    }
    html.nav-up body:not(.browser-safari) header#site-header #logo picture,
    html.nav-up body:not(.browser-safari) header#site-header #logo img { 
        max-height:~"calc(@{header-on-scroll} - 20px)";
    }
    html.nav-up body:not(.browser-safari) header#site-header #logo.no-image span { 
        height:~"calc(@{header-on-scroll} - 20px)";
    }
    html.nav-up body:not(.browser-safari) header#site-header #logo::after { 
        height: @header-on-scroll;
    }

    html.nav-up body:not(.browser-safari) header#site-header nav.main { 
        top: @header-on-scroll;
    }
    html.nav-up body:not(.browser-safari) header#site-header nav.main::after { 
        opacity:0;
    }


    /* Transparency */
    body.transparent-header header#site-header,
    body.transparent-header header#site-header::after,
    body.transparent-header header#site-header #logo::after,
    body.transparent-header nav.main::after,
    body.transparent-header header#site-header .site-search a.expand-search::after {
        background: transparent;
    }
    body.transparent-header nav.main>ul>li { 
        border-color: transparent;
    }

    html.nav-down:not(.reached-top) body.transparent-header header#site-header, 
    html.nav-up:not(.reached-top) body.transparent-header header#site-header {
        background: @header-bg;
    }
    html.nav-down:not(.reached-top) body.transparent-header header#site-header::after,
    html.nav-up:not(.reached-top) body.transparent-header header#site-header::after,
    html.nav-down:not(.reached-top) body.transparent-header header#site-header #logo::after,
    html.nav-up:not(.reached-top) body.transparent-header header#site-header #logo::after,
    html.nav-down:not(.reached-top) body.transparent-header nav.main::after,
    html.nav-up:not(.reached-top) body.transparent-header nav.main::after,
    html.nav-down:not(.reached-top) body.transparent-header header#site-header .site-search a.expand-search::after,
    html.nav-up:not(.reached-top) body.transparent-header header#site-header .site-search a.expand-search::after {
        background: @header-borders;
    }
    html.nav-down:not(.reached-top) body.transparent-header nav.main>ul>li,
    html.nav-up:not(.reached-top) body.transparent-header nav.main>ul>li { 
        border-color: @header-borders;
    }

}