/* ///////////////////////////////////////
==================== DESKTOP STYLING ====================
/////////////////////////////////////// */



/* ====================
///////////////////////////////////////
Header Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */

header{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 100vw;
    height: var(--site-header-height);

    background-color: var(--site-background);
    border-bottom: 1px solid var(--site-border-on-white-clr);

    position: fixed;
    top: 0px;

    z-index: 999;
}


.auburn_winds_header_wrapper{
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;

    position: relative;

    padding: var(--default-wrapper-padding);

    width: 100%;
    max-width: var(--default-wrapper-max-width);

    height: 100%;
}



/* ====================
///////////////////////////////////////
Logo and Logo Container Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */

.auburn-winds-header-logo-container{
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    max-width: 120px;
    height: 100%;
}

.auburn_winds_logo_img{
    display: flex;
    max-width: 120px;

    cursor: pointer;
}

/* If NO logo - Display text with following styling */
#auburn_winds_logo_text{
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    line-height: 23px;

    font-size: 24px;
    color: var(--site-menu-items-clr-drk);
}



/* ====================
///////////////////////////////////////
Navigation Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */
.auburn-winds-header-navigation-and-other-container{
    display: flex;

    width: auto;
    height: 100%;

    position: relative;

    justify-content: center;
    align-items: center;
}

.auburn_winds_header_navigation{
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 100%;
}

.auburn_winds_header_navigation_items{
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 100%;

    justify-content: center;
    align-items: center;
}

/* List Item of Nav */
.auburn_winds_header_navigation_item{
    display: flex;

    width: auto;
    height: 100%;

    padding: 0px 5px 0px 5px;

    font-family: 'Lexend';
    font-weight: 400;
}

/* Link (a) of List Item (Li/.auburn_winds_header_navigation_item) of Nav */
.auburn_winds_header_navigation_item > a{
    display: flex;

    width: 100%;
    height: 100%;

    justify-content: center;
    align-items: center;

    padding: 0px 20px 0px 20px;

    text-decoration: none;    
    color: var(--site-menu-items-clr-drk);
}


.auburn_winds_header_navigation_item:hover{
    text-decoration: underline;
    color: var(--site-orange-clr);
}


/* Current page / Active navigation item style */
.auburn-winds-header-nav-current-menu-item{
    animation: topToBottomSmall 0.2s ease-in;

    text-decoration: underline;
    color: var(--site-orange-clr);
}


/* Displays list item as relative if it has child elements */
.menu-item-has-children{
    position: relative;
}



/* ====================
///////////////////////////////////////
SubMenu Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */
.sub-menu{
    display: none;
    flex-direction: column;

    position: absolute;

    left: 0px;
    top: var(--site-header-height);

    width: auto;
    height: auto;

    background-color: var(--site-foreground);
    border-top: 2px solid var(--site-orange-clr);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);

    z-index: 9998;
}

.sub-menu li{
    display: flex;

    width: 100%;
    height: 50px;

    border-bottom: 1px solid var(--site-border-on-white-clr);

    position: relative;

    padding: 0px 20px 0px 20px;
}

.sub-menu li a{
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    justify-content: center;
    align-items: flex-end;

    padding: 0px;
    color: var(--site-menu-items-clr-drk);
}

/* Active Submenu - Display !important */
.auburn-winds-header-sub-menu-active{
    display: flex !important;

    animation: topToBottomSmall 0.2s ease;
}


.sub-menu li:hover{
    transition: ease-in 0.1s;
    background-color: var(--site-foreground-hover);
}



/* ====================
///////////////////////////////////////
Header -> Other (search button and container) Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */
.auburn-winds-header-search-icon-container{
    display: flex;
    flex-direction: row;

    width: 40px;
    height: 100%;

    justify-content: center;
    align-items: center;

    cursor: pointer;

    position: relative;
}

.aunurn-winds-search-icon{
    max-width: 20px;
    height: 20px;

    filter: invert(100%);
}



/* ====================
///////////////////////////////////////
Search Dropdown Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */
.auburn-winds-search-dropdown{
    display: none;
    flex-direction: row;

    width: 400px;
    height: 50px;

    top: var(--site-header-height);
    right: 0px;

    position: absolute;

    background-color: var(--site-foreground);
    border-top: 2px solid var(--site-orange-clr);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);

    padding: 5px 10px 5px 10px;
}

.auburn-winds-search-dropdown-active{
    display: flex;

    animation: topToBottomSmall 0.2s ease;
}


.auburn-winds-search-form{
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 100%;

    justify-content: space-between;
    align-items: center;
}


.auburn-winds-search-form-input{
    width: 80%;
    height: 100%;

    background-color: var(--site-foreground);
    border: none;

    color: var(--site-text-clr-drk);

    font-family: 'Lexend';
    font-weight: 200;
    font-size: 15px;
}

.auburn-winds-search-form-input:focus{
    outline: none !important;
}


.auburn-winds-search-form-submit{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 15%;
    height: 100%;

    background-color: var(--site-foreground);
    text-decoration: underline;

    color: var(--site-text-clr-drk);
    border: 1px solid var(--site-border-on-white-clr-strong);

    font-family: 'Lexend';
    font-weight: 200;
    font-size: 15px;

    cursor: pointer;
}

.auburn-winds-search-form-submit:hover{
    background-color: var(--site-foreground-hover);

    transition: 0.2s ease;
}


/* ====================
///////////////////////////////////////
Hamburger Menu Button Styling ///////////////////////////////////////
///////////////////////////////////////
==================== */
.auburn-winds-header-hamburger-btn-container{
    display: none;
    flex-direction: column;

    width: 30px;
    height: 100%;

    position: relative;

    justify-content: center;
    align-items: center;

    cursor: pointer;
    
    padding: 0px 5px 0px 5px;
    margin: 0px 2.5px 0px 2.5px;
}

.ham-bar{
    display: flex;

    width: 100%;
    height: 2px;

    background-color: var(--site-icons-clr-drk);

    margin: 2.5px 0px 2.5px 0px;
}


.ham-1-active{
    transform: rotate(160deg);
    background-color: var(--site-orange-clr);

    animation: hamBarActiveState 0.8s ease;
}


.ham-2-active{
    display: none;
}


.ham-3-active{
    transform: rotate(160deg);

    animation: hamBarActiveState 0.8s ease;
}






/* ///////////////////////////////////////
==================== MOBILE STYLING ====================
/////////////////////////////////////// */

@media (max-width: 1050px) {
    /* >>>>>>>>>> Logo & Container Styling <<<<<<<<<<  */
    #auburn_winds_logo_text{
        font-size: 18px;
    }


    /* >>>>>>>>>> Navigation Styling <<<<<<<<<<  */
    .auburn-winds-header-navigation-and-other-container{
        position: static;
    }


    .auburn_winds_header_navigation{
        display: none;

        position: absolute;

        top: var(--site-header-height);
        right: 0px;
    
        width: 100vw;
        height: auto;

        background-color: var(--site-foreground-dropdown-mob);

        animation: slideInFromRight 0.3s ease;
    }

    .auburn_winds_header_navigation-active{
        display: flex;
    }


    .auburn_winds_header_navigation_items{
        flex-direction: column;
    
        width: 100%;
        height: auto;
    
        justify-content: center;
        align-items: center;
    }

    /* List Item of Nav */
    .auburn_winds_header_navigation_item{
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        padding: 0px;

        font-size: 17px;

        border-bottom: var(--site-border-on-white-clr) 1px solid;
    }

    .auburn_winds_header_navigation_item:hover{
        background-color: var(--site-foreground-dropdown-hover-mob);
    }


    /* Link (a) of List Item (Li/.auburn_winds_header_navigation_item) of Nav */
    .auburn_winds_header_navigation_item > a{
        display: flex;
        padding: 0px;

        width: 100%;
        height: 60px;
    }

    /* Displays list item as relative if it has child elements */
    .menu-item-has-children{
        position: relative;

        display: flex;
        flex-direction: column;
    }


    /* >>>>>>>>>> SubMenu Styling <<<<<<<<<<  */
    .sub-menu{
        display: none;
        flex-direction: column;
    
        position: static;
    
        width: 100%;
        height: auto;
    
        background-color: var(--site-foreground-dropdown-sub-mob);
        border-top: 2px solid var(--site-orange-clr);
    
        animation: topToBottomSmall 0.1s ease;
    }


    .sub-menu li{
        display: flex;
    
        width: 100%;
        height: auto;
    
        position: relative;
    
        padding: 0px 0px 0px 0px;
    }


    .sub-menu li:hover{
        background-color: var(--site-foreground-dropdown-hover-sub-mob);
    }


    .sub-menu li a{
        display: flex;
        flex-direction: column;
    
        width: 100%;
        height: 60px;
    
        justify-content: center;
        align-items: center;
    
        padding: 0px;
    }



    /* >>>>>>>>>> Hamburger Styling <<<<<<<<<<  */
    .auburn-winds-header-hamburger-btn-container{
        display: flex;
    }



    /* >>>>>>>>>> Searchbar Styling <<<<<<<<<<  */
    .auburn-winds-search-dropdown{
        width: 100%;
        height: 60px;
    
        top: var(--site-header-height);
        right: 0px;
    
        position: absolute;
    
        background-color: var(--site-foreground);
        border-bottom: 1px solid var(--site-foreground-hover);

        padding: 5px 10px 5px 10px;
        
        animation: topToBottomSmall 0.2s ease;
    }
}







/* ///////////////////////////////////////
==================== LAPTOP STYLING ====================
/////////////////////////////////////// */
@media (min-width: 1050px) and (max-width: 1500px) {

}