{% include '../css/generic/_reset.css' %}



/*------------------------------------
          Mobile Nav Styles
------------------------------------*/
#navbar__menu {
	display: flex;
}
#mobile-nav__icon {
    /* Styles for the mobile nav icon */
    display: flex;
    cursor: pointer;
    transition: 0.5s;
}
#mobile-nav__btn {
    /* Styles for the mobile nav button */
    display: flex;
    justify-content: end;
    padding-bottom: 20px;
    align-items: flex-start;
}
#mobile-nav__close {
    /* Styles for the mobile nav close button */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--action-red-100);
    border: 3px solid var(--action-red-100);
    font-size: 20px;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    padding: 4px;
}

#mobile-nav__btn > img {
    /* Styles for the navbar logo image */
    max-height: 40px;
}

#mobile-nav__search {
	margin: 10px 0 20px;
}

/*------------------------------------
           Main Nav Styles
------------------------------------*/
#nav__list {
    /* Styles for the main nav list */
    line-height: 40px;
}
.nav__list--hidden {
    /* Hides mobile nav on default */
    display: none;
}
.nav__list--open {
    /* Toggles mobile nav */
    background: var(--text-alt-white);
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    padding: .75em 2.5em;
    position: fixed;
    transition: 2s;
    margin: 0;
}
#nav__divider {
    /* Styles for the nav divider */
    display: flex;
    width: 100%;
    height: 1px;
    background: var(--text-color);
    margin: 8px 0;
    box-shadow: 0px 8px 16px 0px var(--box-shadow-12);
}
.nav__item {
    /* Styles for the nav item */
    list-style: none;
}
.nav__item > a,
.resource-nav__item > a {
    /* Styles for the nav link and resource nav link */
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
}
.nav__item > a:hover,
.nav__item > a:active,
.nav__item > a:focus {
    /* Styles for the nav link on hover, active, focus */
    color: var(--action-blue);
}

/*------------------------------------
         Resource Menu Styles
------------------------------------*/
#resource-nav__list {
    /* Styles for the resource nav list */
    display: none;
    margin-left: -194px;
    margin-top: 12px;
    position: absolute;
    list-style: none;
    flex-direction: column;
    padding: 20px;
    gap: 24px;
    border: 1px solid var(--box-shadow-12);
    background: var(--text-alt-white);
    box-shadow: 0px 25px 16px 0px var(--box-shadow);
}
.resource-nav__item > a {
    /* Styles for the resource nav item */
    display: flex;
    padding: 0 24px;
    cursor: pointer;
}
.resource-nav__item > a:hover,
.resource-nav__item > a:active,
.resource-nav__item > a:focus {
    /* Styles for the resource nav item on hover, active, focus */
    background-color: var(--action-blue);
    color: var(--text-white);
}
.resource-nav__btn--clicked {
    /* Default toggle for resources menu */
    display: none;
}

/*------------------------------------
         Auth Button Styles
------------------------------------*/
.resource-nav__auth {
    /* Styles for the log-in button */
    display: flex;
    min-width: 100px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--action-red-100);
    color: var(--text-white) !important;
}

.resource-nav__auth a:hover {
	text-decoration: underline;
}

/*------------------------------------
            Media Queries
------------------------------------*/
@media only screen and (min-width: 1024px) {
    /* Media Query for larger screens */

    /* Nav Styles */
    #nav__list {
        gap: 24px;
    }

    /* Responsive Nav Styles */
    .mobile-nav__item,
    #mobile-nav__icon,
    #mobile-nav__btn {
        display: none;
    }
    #nav__list,
    #navbar {
        display: flex;
	   margin-bottom: 0px;
    }

    /* Resource Nav Styles */
    #resource-nav__list {
        gap: 8px;
        padding: 20px 0;
    }
    .resource-nav__item:hover {
        background-color: var(--action-blue);
        color: var(--text-white);
    }
    #resource-nav__btn > span {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    #resource-nav__btn > span > img {
        display: flex;
        margin: 0px 5px;
    }
    .resource-nav__btn--clicked {
        transform: rotateX(180deg);
    }
}