/*------------------------------------------------------------*/
/* -----------------
 * Header styles ==>
----------------- */

#site-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1ch;
    padding: var(--page-padding);
    margin-bottom: unset;
	margin-top:0.5rem;
    border: unset;
}

nav div ul {
    list-style-type: none;
}

.nav-logo,
.user_info {
    width: 20%;
}

.nav-container {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;

    .nav-menu {
        max-height: max-content !important;
		a{
			font-weight:bold;
		}
    }

    a {
        color: var(--main-accent-color);
        text-decoration: unset;
    }
    a:hover {
        color: var(--primary-hover-color);
        text-decoration: underline;
        transition: 300ms;
    }
}

.user_info {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1ch;
	margin-bottom: 1em;
}

.hamburger {
    display: none;
    background: 0 0;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--primary-hover-color);
    transition: 0.3s;
}

.header-login-icon{
	a{
		font-size: 1.2rem;
   		color: var(--main-accent-color);
	}
}

#menu-header_menu {
    padding: unset;
    margin: unset;
}

#menu-header-menu a {
    all: unset;
    cursor: pointer;
    color: whitesmoke;
    opacity: 0.8;
    transition: 300ms;
}

#menu-header-menu a:hover {
    color: yellow;
    opacity: 1;
}

.nav-list {
    display: flex;
    list-style: none;
	align-items: center;
    gap: 5ch;
	margin: unset;
}
.nav-list li {
    display: inline-block;
}

.custom-logo {
    max-width: 10rem;
    height: auto;
}

/* -----------------
 * Header styles <==
----------------- */
/*------------------------------------------------------------*/
/* -----------------
 * Footer styles ==>
-----------------*/
#site-footer {
    display: inline-block;
    width: 100%;
    background: var(--grey-bg-color);
    padding: var(--page-padding);
    margin-top: 5rem;
	padding-top: 5rem;
	a{
		text-decoration:unset;
		color: var(--text-color);
	}
	span{
		font-size: var(--base-size);
	}
}

#copyright{
	padding-bottom: 1ch;
  	margin: 2rem 0;
  	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
	flex-wrap: wrap;
}

.footer_menu{
	margin: unset;
	padding: unset;
	
}

.ft-flex {
    display: flex;
    align-content:center;
	align-items: center;
	gap:1rem;
}

.ft-single-div{
	display: flex;
	flex-direction: column;
	gap:0.5rem;
	margin-bottom: 1rem;
	h3{
		margin-bottom: 5rem;
	}
}

.ft-single-div-right{
	justify-content: end;
	text-align:end;
}

/* -----------------
 * Footer styles <==
-----------------*/
/*------------------------------------------------------------*/
/* Media queries */
@media (max-width: 768px) {
    .custom-logo {
        max-width: 5rem;
    }

    .hamburger {
        display: flex;
        border: unset;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px;
    }

    .nav-menu.active {
        display: flex;
        background: #ffffff;
        border-radius: 0px 0 16px 16px;
        box-shadow: #00000020 0 2rem 2rem 0;
		div{
			text-align:center;
		}
    }
	.nav-logo{
		display:flex;
		align-content:center;
	}

    .nav-logo,
    .user_info {
        width: 100%;
    }

    .nav-list {
        display: flex;
        flex-direction: column;
		margin: unset;
    }
	
	.header-login-icon{
		a{
			font-size: 1.2rem;
    		color: var(--main-accent-color);
		}
	}
	
	.user_info {
		margin-bottom: unset;
	}
	
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
	
	.ft-single-div h3{
		margin-bottom: 1rem;
		margin-top: 2rem;
	}
	
	.ft-single-div-right{
		justify-content: start;
    	text-align: start;
	}
}