/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

body.no-scroll 																	{ overflow:hidden; }

/* Hamburger button  */
.hamburger 																			{ width:50px; height:50px; border:none; background-color:var(--color-brand-700); border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; position:fixed; top:var(--space-5); right:var(--space-5); z-index:100; }
.hamburger .line 																{ stroke:var(--color-ui-0, black); stroke-width:4; stroke-linecap:round; transition:all 400ms cubic-bezier(.84,.06,.52,1.8); transform-box:fill-box; transform-origin:center; }
.hamburger.active .top 													{ transform:translateY(7px) rotate(45deg); }
.hamburger.active .bottom 											{ transform:translateY(-7px) rotate(-45deg); }
.hamburger.active .middle 											{ opacity:0; }

/* Navigation */
.navigation 																		{ padding:40px; width:100vw; height:100dvh; color:var(--color-ui-0); background-color:var(--color-brand-200); display:flex; gap:var(--space-6); flex-direction:column; position:fixed; top:0; left:100vw; z-index:99; transition:all 0.2s ease;
	&.show 																				{ left:0; transition:all 0.2s ease; }
}

/* Navigation Title/Logo */
.navigation__title															{
	.logo																					{ width:auto; height:60px; }
	.logo--sm 																		{ display:none; }
	.logo--md 																		{ display:flex; }
}

/* Navigation Menu */
.navigation__menu 															{ margin:0; padding:0; list-style:none; font-weight:bold; font-size:var(--text-md); color: var(--color-brand-600); display:flex; flex-direction:column; gap:var(--space-6);
	li 																						{ padding:8px 12px; display:flex; border-radius:var(--radius-md); background-color:transparent; transition:all 0.33s ease;
		&.active,
		&:hover 																		{ background-color:var(--color-brand-400); color: var(--color-brand-700); transition:all 0.33s ease; }
		&:last-child 																{ padding:0;
			&:hover 																	{ background-color:transparent; }
		}
	}
	a 																						{ text-decoration:none; display:flex; flex:1; gap:var(--space-2); align-items:center; position:relative; transition:all 0.2s ease; }
}


/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
	
}


/***********************************************
Screen - This applies from 1200px onwards
***********************************************/
@media (min-width:1000px) {
	.hamburger 																		{ display:none; }  
	
	.navigation 																	{ padding:20px 40px; max-width:inherit; height:inherit; color:var(--color-ui-900); background-color:transparent; flex-direction:row; justify-content:space-between; align-items:center; position:fixed; top:0; left:0;
		&:before 																		{ display:none; }
		&.navigation--active 												{ background-color:rgba(234,229,243,.8); }
	}

	.navigation__title														{
		.icon--logo																	{ width:40px; height:40px; }
		.logo--sm 																	{ display:flex; }
		.logo--md 																	{ display:none; }
	}

	.navigation__menu 														{ margin:0; padding:0; list-style:none; font-size:var(--text-sm); color: var(--color-brand-600); display:flex; flex-direction:row; gap:var(--space-1);
		li 																					{ padding:0 12px; justify-content:center;	}
	}
}


/***********************************************
Nav breakpoint - This applies from 1180px onwards
***********************************************/
@media (min-width:1170px)                       {
	.navigation__title														{
		.logo--sm 																	{ display:none; }
		.logo--md 																	{ display:flex; }
	}
}


/***********************************************
Desktop HD
***********************************************/
@media (min-width:1440px)                       {

}