/* change $mainnav_collapse to change when to toggle. Put it up to something higher than your screen resolution to see the responsive Version, or resize Browser window */

// Variables
//---------------------------------------------

// Colors
$white: #FDFDFD;
$black: #121212;

$salmon: #de9e99;
$purple: #5a4c66;
$pine: #607873;
$teal: #789094;
$grass: #b5ccb2;
$beige: #e3dfd7;

// Settings
$noborder: 0px solid transparent;
$background: $beige;

$max-width: 1500px;

// Main Nav
$mainnav_name: Menu;
$mainnav_collapse: 600px;

$mainnav_bg: $pine;
$mainnav_a_color: lighten($salmon, 10%);
$mainnav_a_hover: $white;
$mainnav_a_hover_bg: $salmon;
$mainnav_responsive_text_align: center;

// Toggle Nav
$toggle_nav_bg: $white;
$toggle_button_color: $black;
$toggle_button_border: 2px solid $black;
$toggle_button_hover_border_color: $white;
$toggle_button_hover_bg: rgba(white, .5);


// General Style 
body{
    font:{
        family: Roboto;
        size: 18px;
        weight: 300;
    }
    line-height: 1.5;
    color: $black;
    background: $background;
    overflow-x: hidden;
}

a{
    text-decoration: none;
    transition: all 1s ease;

    &:hover{
        transition: all .3s ease;
    }
}
// Main Nav
.main_menu{
    background: $mainnav_bg;
    text-align: center;
    position: relative;
    top: 0px;
    width: 100%;
    rleft: 0px;
}

#menu{
    position: relative;
    margin: 0px auto;
    display: block;
    background: $mainnav_bg;
    max-width: $max-width;
    box-sizing: border-box;
    color: $mainnav_a_color;
    font-size: 1em;
    width: 100%;
    z-index: 105;

    a{
        color: $mainnav_a_color;

        &:hover{
            opacity: .8;
        }
    }

    .toggle_link{
        display: none;
    }

    > ul {
        text-align: center;
    }

    li{
        display: inline-block;
        padding: 20px 7px;
        transition: .3s all linear;

        > a{
            width: 100%;
            display: block;
        }

        &:hover{
            transition: .3s all linear;
            background: rgba($mainnav_a_hover_bg, .4);

            > a{
                color: $mainnav_a_hover;
            }
        }
    }
    @media screen and (min-width: $mainnav_collapse+1){
    .social{
        i{
            padding: 0px 14px;
        }
    }
    }

    // Drop Down
    .parent{
        margin-left: 0;
        position: relative;

        > ul{
            padding-top: 0px;
            display: none;

            @media screen and (min-width: $mainnav_collapse+1){
                background: $mainnav_bg;
                position: absolute;
                top: 100%;
                left: 0;
                width: auto;
            }

            li{
                display: block;
                padding: 10px 0px;

                @media screen and (min-width: $mainnav_collapse+1){
                    padding: 10px 7px;
                }
            }
        }

        &:hover,
        &:focus{
            cursor: pointer;

            > ul{
                display: block;
            }
        }
    }

    // Responsive Version (Off-Canvas)
    @media screen and (max-width: $mainnav_collapse){
        padding: 35px 0px 0px;
        width: 320px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        position: fixed;
        top: 0;
        left: -320px;
        transform: translate(0px, 0px);
        transition: .3s all ease;
        z-index: 108;

        .toggle_link{
            display: block;
            position: absolute;
            top: 5px;
            left: 5px;

            &:after{
                content: "";
            }
        }

        > ul{
            text-align: $mainnav_responsive_text_align;
            width: 100%;
            position: relative;
        }

        li{
            display: block;
            padding: 10px 15px;
            border-top: 1px solid lighten($mainnav_bg, 5%);

            &:first-of-type{
                border-top: $noborder;
            }

            &:hover{
                transition: .3s all linear;
                background: rgba($mainnav_a_hover_bg, .4);
            }
        }

        // Sub Items
        .parent{
            margin-left: 0;

            > ul{
                padding-top: 15px;
                display: none;

                li{
                    padding: 10px 0px;

                    &:first-of-type{
                        border-top: 1px solid lighten($mainnav_bg, 5%);
                    }
                }
            }

            &:hover,
            &:focus{
                cursor: pointer;

                > ul{
                    display: block;
                }
            }
        }
    }
}

#menu.active{
    transform: translate(320px, 0px);
    transition: .3s all ease;
}

// Toggle Nav
.toggle_nav{
    display: none;

    .toggle_link{
        display: none;
    }

    @media screen and (max-width: $mainnav_collapse){
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 104;
        background: $toggle_nav_bg;
        height: 55px;
        padding: 15px;
        box-sizing: border-box;

        .toggle_link{
            color: $toggle_button_color;
            border: $toggle_button_border;
            padding: 7px 15px;
            border-radius: 3px;
            transition: .3s all ease;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
          
            @media screen and (max-width: 240px){
                font-size: 80%;
            }

            &:hover{
                transition: .3s all ease;
                border-color: $toggle_button_hover_border_color;
                background: $toggle_button_hover_bg;
            }
        }

        .toggle_link{
            left: 5px;
            &:after{
                content: quote($mainnav_name);
            }
        }
    }
}