@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

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

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

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: darken($color-2, 10%);
}

svg {
	max-width: 100%;
}

a {
	text-decoration: none;
}

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

Main Components 

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

.cd-nav-trigger {
	/* hamburger icon */
	position: fixed;
	z-index: 3;
	top: 12px;
	right: 5%;
	height: 44px;
	width: 44px;
	
	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;

	@include transition(transform 0.2s);

	span {
		/* icon created in CSS */
		position: absolute;
		@include center; // mixin inside partials > _mixins.scss
		width: 32px;
		height: 3px;
		background-color: darken($color-2, 40%);

		&::before, &:after {
			/* upper and lower lines of the menu icon */
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%; 
			background-color: inherit;

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

			@include transition(transform 0.2s, width 0.2s);
		}

		&::before {
			@include transform-origin(right top);
			@include transform(translateY(-10px));
		}

		&::after {
			@include transform-origin(right bottom);
			@include transform(translateY(10px));
		}

	}

	.no-touch &:hover {
		/* rotate trigger on hover */
		@include transform(rotate(180deg));

		span::after, 
		span::before {
			/* animate arrow --> from hamburger to arrow */
			width: 50%;
		}

		span::before {
			@include transform(translateX(1px) translateY(1px) rotate(45deg));
		}

		span::after {
			@include transform(translateX(1px) translateY(-1px) rotate(-45deg));
		}
	}  

	@include MQ(L) {
		top: 38px;
	}
}

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

xnavigation 

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

.cd-nav-container {
	position: fixed;
	z-index: 4;
	top: 0;
	right: 0;
	width: 80%;
	height: 100%;
	overflow-y: auto;
	background-color: $color-7;

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

	@include transform(translateX(100%));
	@include transition(transform $animation-duration 0s, box-shadow 0s $animation-duration); // see partials > _variables.scss

	&.is-visible {
		@include transform(translateX(0));
		-webkit-overflow-scrolling: touch;
		box-shadow: -4px 0 30px rgba(#000, .2);
		@include transition(transform $animation-duration 0s, box-shadow 0s 0s);
	}

	header {
		padding: 1.5em 0 0 6.25%;
		height: 68px;
		position: relative;
	}

	h3 {
		font: {
			size: 1.6rem;
			weight: bold;
			family: $secondary-font;
		}
		text-transform: uppercase;
		color: $color-2;
	}

	@include MQ(M) {
		width: 70%;
		
		header {
			height: 116px;
			padding-top: 3em;
		}
	}
}

.cd-close-nav {
	/* 'X' close icon */
	position: absolute;
	height: 44px;
	width: 44px;
	/* set the right position value so that it overlaps the .cd-nav-trigger*/
	right: 6.25%;
	@include center(y);
	
	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;

	@include transition(opacity .2s);

	&::after, 
	&::before {
		/* lines of 'X' icon */
		content: '';
		position: absolute;
		height: 3px;
		width: 32px;
		left: 50%;
    	top: 50%;
		background-color: $color-2;	
		@include backface-visibility(hidden);
	}

	&::after {
		@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
	}

	&::before {
		@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
	}

	.no-touch &:hover {
		opacity: .8;
	}

	@include MQ(M) {
		right: 7.14%;
	}
}

.cd-nav {
	@include clearfix;
	background-color: darken($color-7, 5%);

	li {
		@include column(.5);
		/* 68px is the navigation header height  and the menu items will be allocated in 3 rows */
		height: calc((100vh - 68px)/3);
		min-height: 120px;
		border: 1px solid $color-7;
		border-top: none;
		border-left: none;

		&:nth-of-type(2n) {
			border-right-width: 0;
		}
	}

	a {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
		@include transition(background-color .2s);

		.no-touch &:hover svg {
			@include animation(cd-shock .3s);
		}
	}

	.no-touch & li a:hover, 
	li.cd-selected a {
		span * {
			/* on hover or if selected - change text and icon color*/
			stroke: $color-7;
		}

		em {
			/* on hover or if selected - change text and icon color*/
			color: $color-7;
		}
	}

	.no-touch & li:first-of-type a:hover,
	li.cd-selected:first-of-type a {
		/* on hover or if selected - change background color*/
		background-color: $color-1;
	}

	.no-touch & li:nth-of-type(2) a:hover,
	li.cd-selected:nth-of-type(2) a {
		/* on hover or if selected - change background color*/
		background-color: $color-2;
	}

	.no-touch & li:nth-of-type(3) a:hover,
	li.cd-selected:nth-of-type(3) a {
		/* on hover or if selected - change background color*/
		background-color: $color-3;
	}

	.no-touch & li:nth-of-type(4) a:hover,
	li.cd-selected:nth-of-type(4) a {
		/* on hover or if selected - change background color*/
		background-color: $color-4;
	}

	.no-touch & li:nth-of-type(5) a:hover,
	li.cd-selected:nth-of-type(5) a {
		/* on hover or if selected - change background color*/
		background-color: $color-5;
	}

	.no-touch & li:nth-of-type(6) a:hover,
	li.cd-selected:nth-of-type(6) a {
		/* on hover or if selected - change background color*/
		background-color: $color-6;
	}

	span, em {
		position: absolute;
	}

	span {
		top: calc(50% - 48px);
		left: 50%;
		@include transform(translateX(-50%));
		height: 48px;
		width: 48px;
		
		* {
			@include transition(stroke .2s);
		}
	}

	em {
		width: 100%;
		left: 0;
		top: calc(50% + 15px);
		color: $color-2;
		@include transition(color .2s);
		@include backface-visibility(hidden);
	}


	@include MQ(M) {
		
		li {
			/* 116px is the navigation header height and the menu items will be allocated in 3 rows */
			height: calc((100vh - 116px)/3);
			min-height: 200px;
		}

		span {
			height: 64px;
			width: 64px;
			top: calc(50% - 56px);
		}

		em {
			font-size: 2.2rem;
			font-weight: 300;
			top: calc(50% + 21px);
		}
	}

	@include MQ(L) {
		
		li {
			@include column(.3333);
			/* 116px is the navigation header height  and the menu items will be allocated in 2 rows */
			height: calc((100vh - 116px)/2);
			min-height: 250px;

			&:nth-of-type(2n) {
				border-right-width: 1px;
			}
			
			&:nth-of-type(3n) {
				border-right-width: 0;
			}
		}

		em {
			font-size: 2.5rem;
		}
	}
}

@include keyframes(cd-shock) {
	0% {
    	@include transform(rotate(0));
  	}

  	30% {
    	@include transform(rotate(10deg));
  	}

  	60% {
   		@include transform(rotate(-10deg));
  	}

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

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

xshadow layer 

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

.cd-overlay {
	/* shadow layer visible when navigation is open */
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	background-color: rgba(#000, .35);
	visibility: hidden;
	opacity: 0;
	@include backface-visibility(hidden);
	@include transition(opacity $animation-duration 0s, visibility 0s $animation-duration);
	
	&.is-visible {
		opacity: 1;
		visibility: visible;
		@include transition(opacity $animation-duration 0s, visibility 0s 0s);
	}
}

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

xcontent 

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

main {
	position: relative;
	height: 100vh;
	overflow-x: hidden;
	@include transition(transform $animation-duration);
	box-shadow: 0 0 30px darken($color-2, 20%);

	&.scale-down {
		@include transform(scale(.9));
	}
}

.cd-section {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	@include transform(translateX(100%));
	@include transition(transform 0s $animation-duration);

	&.cd-selected {
		position: relative;
		z-index: 2;
		@include transform(translateX(0));
		@include transition(transform $animation-duration 0s);
		-webkit-overflow-scrolling: touch;
	}

	header {
		height: 100vh;
		background: $color-1;
		position: relative;
	}

	&.projects header {
		background-color: $color-2;
	}

	&.about header {
		background-color: $color-3;
	}

	&.services header {
		background-color: $color-4;
	}

	&.careers header {
		background-color: $color-5;
	}

	&.contact header {
		background-color: $color-6;
	}

	@include MQ(M) {
		/* not 100vh to fix a small bug --> border visible otherwise */
		header: 102vh;
	}
}

.cd-title {
	position: relative;
	top: 48%;
	@include transform(translateY(-50%));
	color: $color-7;
	text-align: center;

	> * {
		text-shadow: 0 1px 2px rgba(#000, .05);
		@include font-smoothing;
	}

	h2 {
		font-size: 2.8rem;
		margin-bottom: .8em;
	}

	a {
		display: inline-block;
		padding: 1.2em 1.6em;
		border-radius: 50em;
		border: 2px solid rgba($color-7, .5);

		font-weight: 700;
		color: $color-7;
		font-family: $secondary-font;

		.no-touch &:hover {
			border-color: $color-7;
		}
	}

	span {
		vertical-align: middle;
		display: inline-block;
	}

	@include MQ(M) {

		h2 {
			font-size: 5rem;
			font-weight: 300;
			margin-bottom: .6em;
		}
	}
}

.cd-content {
	background-color: $color-7;
	padding: 4em 0;

	p {
		width: 90%;
		max-width: 800px;
		margin: 2em auto;
		line-height: 2;
		color: lighten($color-2, 10%);
	}
}

.no-js main, .no-js .cd-section {
	height: auto;
	overflow: visible;
}

.no-js .cd-section {
	position: static;
	@include transform(translateX(0));
}

.no-js .cd-nav-container {
	width: 100%;
	position: static;
	@include transform(translateX(0));
	height: auto;
	overflow: visible;
}

.no-js .cd-close-nav {
	display: none;
}

.no-js .cd-nav li {
	@include column(0.5);

	@include MQ(M) {
		@include column(0.333);

		&:nth-of-type(2n) a {
			border-right-width: 1px;
		}
	}

	@include MQ(L) {
		@include column(0.1666);

		&:nth-of-type(3n) a {
			border-right-width: 1px solid $color-3;
		}
	}
}