$header-height:          80px;
$margin-top:             ($header-height - 2*$line-height)/2;
$margin-side:            $header-height/6;
$image-width:            80px;

header#potato-head {
    overflow:            hidden;
    margin:              0;
    width:               100%;
    flex:                0 0 $header-height;
    max-height:          $header-height;
    box-shadow:          0 1px 4px rgba(0,0,0,0.15);
    background-color:    $white;
    display:             flex;
    flex-direction:      row;
    justify-content:     space-between;
    position:            relative;
}

hgroup#potato-brand {
    flex:                0 0 auto;
    align-self:          flex-start;
    margin-left:         $margin-side;
    margin-top:          $margin-top;
    padding-left:        $image-width + $font-size;
    background-image:    url('/assets/img/potatochips2.png');
    background-size:     $image-width auto;
    background-repeat:   no-repeat;
    background-position: left center;

    a {
        text-decoration: none;
        color:           darken($titanium, 25%);
    }

    h1 {
        text-transform:  uppercase;
        margin:          0;
        letter-spacing:  4px;
        font-size:       1.7*$font-size;
        font-family:     $fonts-list;
        font-weight:     900;
        line-height:     1.4*$line-height;
    }

    h2 {
        font-weight:     400;
        font-style:      italic;
        margin:          0;
        font-size:       0.9*$font-size;
        line-height:     0.6*$line-height;
        color:           darken($titanium, 10%);
    }
}

nav#potato-links {
    flex:                0 1 auto;
    align-self:          flex-end;
    display:             flex;
    flex-direction:      column;
    justify-content:     center;
    height:              $header-height;
    margin-left:         2*$font-size;
    margin-right:        $margin-side;
    border:              0;
    padding:             0;
    height:              $header-height - $margin-top;

    a {
        text-decoration: none;
        color:           $black;

        &:hover {
            text-decoration: underline;
            color:           darken($classicblue, 10%);
        }
    }

    section#user {
        padding-bottom:  0.4*$font-size;

        a {
            color:       $classicblue;
        }

        p {
            margin:      0;
            text-align:  right;
            font-size:   0.9*$font-size;
            line-height: 1.4*$font-size;

            span#logout {
                float:   right;
                display: block;
            }

            span#settings {
                float:   left;
                display: block;
            }
        }
    }

    ul {
        list-style:      none;
        display:         inline-block;
        margin:          0;
        padding:         0;

        li {
            margin:       0;
            padding:      0;
            display:      inline-block;
            padding-left: 0.8*$font-size;
            padding-right:0.8*$font-size;
            font-size:    1.2*$font-size;
        }
    }

    ul + ul:before {
        content:      '|';
        margin-right: 0.8*$font-size;
        margin-left:  0.8*$font-size;
    }
}

@media screen and (max-width: 500px) {
    header hgroup {
        background-size: 12vh auto;
        padding-left:    calc(12vh + 2vw);
        h1 {
            font-size:   4.8vw;
            line-height: 3.5vh;
        }
        h2 {
            font-size:   2.5vw;
            line-height: 4vh;
        }
    }
    header nav ul li {
        font-size:       4vw;
        margin-bottom:   1vh;
        margin-right:    4vw;
    }
}