//
// kremalicious3
// --------------
// Header
//

.site__header
    width: 100%
    background: $body-bg
    margin-top: ($line-height-computed/2)
    margin-bottom: ($line-height-computed/2)

    @media $breakpoint2
        margin-top: $line-height-computed
        margin-bottom: $line-height-computed

    .grid
        position: relative

        > .banner,
        > .nav-main
            padding-top: 0


// Logo
/////////////////////////////////////

.logo
    display: block
    background-image: url('../img/logo.png')
    background-repeat: no-repeat
    background-position: left top
    width: 47px
    height: 31px

    @media $breakpoint2
        width: 183px

    @media $highDPI
        background-image: url('../img/logo@2x.png')
        background-size: 183px 62px

    @media $highDPI_3x
        background-image: url('../img/logo@3x.png')
        background-size: 183px 62px

.header__title
    margin: 0
    // display toned down logo
    // by default
    @extend .logo

.header__logo
    @extend .ir
    // repeat logo
    // but display hover version
    @extend .logo
    background-position: left bottom

    // hide by default
    opacity: 0
    // show smooooothly on hover
    &:hover
        opacity: 1

    &:active
        top: 0