@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
	@include box-sizing(border-box);
}

body {
	font: {
		size: 100%;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-1;
}

a {
	color: $color-3;
	text-decoration: none;
}

img {
	max-width: 100%;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */

.cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
	width: 90%;
	max-width: $L; // breakpoints inside partials > _layout.scss
	margin: 0 auto;

	&::after { /* clearfix */
		content: '';
		display: table;
		clear: both;
	}
}

/* -------------------------------- 

Main components 

-------------------------------- */

header {
	position: relative;
	height: 200px;
	background: $color-4;
	text-align: center;
	margin-bottom: 1em;
	padding-top: 3em;

	#cd-logo {
		margin-bottom: 3em;
	}

	h1 {
		@include font-size(20px);
	}

	@include MQ(M) {
		margin-bottom: 4em;
	}

	@include MQ(L) {
		height: 400px;
		padding-top: 11em;

		#cd-logo {
			position: absolute;
			top: 40px;
			left: 5%;
		}

		h1 {
			@include font-size(40px);
			font-weight: 300;
		}
	}
}

#cd-nav { 
	ul {
		/* mobile first */
		position: fixed;
		width: 90%;
		max-width: 400px;
		right: 5%;
		bottom: 20px;
		@include border-radius;
		box-shadow: 0 0 10px rgba($color-3, .4);
		background: $color-4;
		visibility: hidden;

		/* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
		overflow: hidden;

		z-index: 1;

		/* Force Hardware Acceleration in WebKit */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

		@include transform(scale(0));
		@include transform-origin(100% 100%);
		-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
		-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
		transition: transform 0.3s, visibility 0s 0.3s;

		li {
			/* Force Hardware Acceleration in WebKit */
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}

		&.is-visible {
			visibility: visible;
			@include transform(scale(1));
			-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
			-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
			transition: transform 0.3s, visibility 0s 0s;

			li:nth-child(1) { /* list items animation */
				@include animation(cd-slide-in .2s);
			}

			li:nth-child(2) {
				@include animation(cd-slide-in .3s);
			}

			li:nth-child(3) {
				@include animation(cd-slide-in .4s);
			}

			li:nth-child(4) {
				@include animation(cd-slide-in .5s);
			}

			li:nth-child(5) {
				@include animation(cd-slide-in .6s);
			}
		}
	}

	li a {
		display: block;
		padding: 1.6em;
		border-bottom: 1px solid $color-5;
	}

	li:last-child a {
		border-bottom: none;
	}

	@include MQ(L) {
		ul {
			/* the navigation moves to the top */
			position: absolute;
			width: auto;
			max-width: none;
			bottom: auto;
			top: 36px;
			background: transparent;
			visibility: visible;
			box-shadow: none;
			@include transform(scale(1));
			@include transition(all 0s);
		}

		li {
			display: inline-block;
		}

		li a {
			opacity: 1;
			padding: .4em;
			margin-left: 1.6em;
			border-bottom: none;

			&:hover {
				color: $color-2;
			}
		}

		&.is-fixed ul {
			/* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
			position: fixed;
			width: 90%;
			max-width: 400px;
			bottom: 20px;
			top: auto;
			background: $color-4;
			visibility: hidden;
			box-shadow: 0 0 10px rgba($color-3, .4);
			@include transform(scale(0));
			
			li {
				display: block;
			}

			li a {
				padding: 1.6em;
				margin-left: 0;
				border-bottom: 1px solid $color-5;
			}
		}

		ul.has-transitions {
			/* this class is used to bring back transitions when the navigation moves at the bottom right */
			-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
			-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
			transition: transform 0.3s, visibility 0s 0.3s;
		}

		ul.is-visible {
			/* this class is used to bring back the navigation animation - as on touch devices */
			visibility: visible;
			@include transform(scale(1));

			-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
			-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
			transition: transform 0.3s, visibility 0s 0s;
		}

		ul.is-hidden {
			/* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
			@include transform(scale(0));
			-webkit-transition: -webkit-transform 0.3s;
			-moz-transition: -moz-transform 0.3s;
			transition: transform 0.3s;
		}
	}
}

.cd-nav-trigger {
	position: fixed;
	bottom: 20px;
	right: 5%;
	width: 44px;
	height: 44px;
	background: $color-4;
	@include border-radius;
	box-shadow: 0 0 10px rgba($color-3, .4);

	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;

	z-index: 2;

	span {
		/* the span element is used to create the menu icon */
		position: absolute;
		display: block;
		width: 20px;
		height: 2px;
		background: $color-3;
		top: 50%;
		margin-top: -1px;
		left: 50%;
		margin-left: -10px;
		-webkit-transition: background 0.3s;
		-moz-transition: background 0.3s;
		transition: background 0.3s;

		&::before, &::after {
			content: '';
			position: absolute;
			left: 0;
			background: inherit;
			width: 100%;
			height: 100%;

			/* Force Hardware Acceleration in WebKit */
			@include transform(translateZ(0));
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;

			-webkit-transition: -webkit-transform 0.3s, background 0s;
			-moz-transition: -moz-transform 0.3s, background 0s;
			transition: transform 0.3s, background 0s;
		}

		&::before {
			top: -6px;
			@include transform(rotate(0));
		}

		&::after {
			bottom: -6px;
			@include transform(rotate(0));
		}
	}

	&.menu-is-open {
		box-shadow: none;
	}

	&.menu-is-open span {
		background: rgba($color-3, 0);

		&::before, &::after {
			background: rgba($color-3, 1);
		}

		&::before {
			top: 0;
			@include transform(rotate(135deg));
		}

		&::after {
			bottom: 0;
			@include transform(rotate(225deg));
		}
	}

	@include MQ(L) {
		/* the the menu triger is hidden by default on desktop devices */
		visibility: hidden;
		@include transform(scale(0));
		-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
		-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
		transition: transform 0.3s, visibility 0s 0.3s;

		.is-fixed & {
			visibility: visible;
			@include transition(all 0s);
			@include transform(scale(1));
			@include animation(cd-bounce-in .3s linear);
		}
	}
}

#cd-gallery-items {
	li {
		margin-bottom: 1.5em;
		box-shadow: 0 1px 2px rgba(#000, .2);
		@include border-radius;

		img {
			width: 100%;
			display: block;
			@include border-radius;
		}
	}

	@include MQ(M) {
		li {
			@include column(.48); // see how this mixin works inside partials > _layout.scss
			margin-bottom: 2em;
			margin-right: 4%;

			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

	@include MQ(L) {
		li {
			@include column(.31);
			margin-bottom: 2.5em;
			margin-right: 3.5%;

			&:nth-child(2n) {
				margin-right: 3.5%;
			}

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}

@include keyframes(cd-slide-in) {
	0% {
		@include transform(translateX(100px));
	}

	100% {
		@include transform(translateY(0));
	}
}

@include keyframes(cd-bounce-in) {
	0% {
		@include transform(scale(0));
	}

	60% {
		@include transform(scale(1.2));
	}

	100% {
		@include transform(scale(1));
	}
}


