/*

	Title: Fullscreen Menu with jQuery and Flexbox
	Author: Steven Roberts

	Code from last months tutorial - Beautiful responsive layouts with Flexbox

	We're using this as a base. Scroll down to see the new code!

*/

/* Import Sanatize to reset browser defaults - Short URL(http://srt.lt/Q6P0nY) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css');

/* Import Roboto and Roboto-slab from Google Fonts - Short URL (http://srt.lt/b4tY7) */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:300');

/* Import Font Awesome - Short URL (http://srt.lt/p2b4) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

*,
*::before,
*::after {
	box-sizing: border-box; /* Put padding on the inside of elements */
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px; /* Our base font-size */
	line-height: 1.75; /* Line height assumes an almost rem value but is dynamic to the font-size */
	font-weight: 300; /* Use the included weight */
	color: #332F21; /* Don't use black it's too harsh */

	display: flex; /* Set body to be a flex container */
	align-items: center; /* Vertically centre content in the viewport */
	justify-content: center; /* Horizontally centre content in the viewport */

	min-height: 100vh; /* Force vertical centering since the content won't always be taller than the viewport */
	padding: 2rem; /* Using rem values as they don't cascade like em units and are not fixed units like pixels */

	background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url('https://source.unsplash.com/random'); /* Multiple Background images, semi-transparent gradient used as a fallback for Edge */
	background-position: center center;
	background-size: cover;
}

@supports(background-blend-mode: multiply) { /* Use a blend mode on the background in browser that support it */

	body {
		background-image: linear-gradient(#4A4A4A, #212121), url('https://source.unsplash.com/random'); /* Multiple background images, Gradient overlay and the Image */
		background-blend-mode: multiply; /* Blending the Gradient with the Background Image (can't use black to blend) */
	}

}

h1 {
	font-family: 'Roboto Slab', serif; /* Use google font included as headline font */
	font-weight: 700; /* We've only included 700 */
	font-size: 2.25rem; /* 36px based on 16px base font size */
	line-height: 1.3333; /* Based on 36px font size and a 48px line-height */
}

.card {
	display: flex; /* Sets entrire card element to be a flex container */
	flex-direction: column; /* Forces elements to align along the vertical axis */

	max-width: 62rem; /* Base-spacing-unit multiplied 35 */
	min-height: 75vh; /* Always at least 75% of the viewport */

	background-color: white; /* Set background colour of our content card */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle drop shadow */
}

	.card__image-container {
		max-height: 15rem; /* Stop the image getting too big */

		background-image: url('https://source.unsplash.com/random');
		background-size: cover; /* Force the background image to cover the container */
		background-position: center center; /* Position the image in the middle */
	}

	.card__image {
		opacity: 0; /* Hide the image in the page, we need the DOM to render it so we have two elements with content in the card */
		pointer-events: none; /* Allows for the image to be clicked through */
	}

	.card__contents {
		display: flex; /* Make element a flex container */
		flex-direction: column; /* Align elements along the vertical axis */

		padding: 2rem;
	}

	.card__header,
	.card__footer {
		flex: 0 0 auto; /* Don't grow, don't shrink, automatic size (basis) */
	}

	.card__footer {
		margin-top: 2rem; /* Create a bit of space between the content and the footer */
		text-align: right; /* Align the contents of the footer to the right */
	}

	.card__body {
		flex: 1 1 auto; /* Same as flex:1; */
	}

	/* The flex properties of the card header, footer and body allows the footer to always be at the bottom of the container */

	.card__title {
		margin-top: 0; /* Remove margin as there are no elements above it */
	}

@media only screen and (min-width: 53rem) { /* Base-spacing-unit * 30 */

	.card {
		flex-direction: row; /* Align items along the horizontal axis */
		min-height: 60vh;
	}

		.card__image-container {
			flex: 0 1 45%; /* Don't grow, do shrink, 45% width (basis) */
			max-height: inherit; /* Reset the max-height set for mobile */
		}

		.card__contents {
			flex: 1 1 55%; /* Grow, Shrink, 55% width */
			padding: 3rem; /* Increase padding now we have more space to play with */
		}

}



/* Social icons based on: codepen.io/matchboxhero/pen/onzkC */

[class^="icon--"] {
    font-family: 'FontAwesome'; /* Apply icon font */
    font-style: normal; /* Removes the default italics */
}

[class^="social-button"] {
   	display: inline-flex; /* Display elements inline but turn them into a flex-container */
	align-items: center; /* Centrally align the children vertically */
	justify-content: center; /* Centrally align the children horizontally */

   	height: 3rem; /* Create square */
    width: 3rem; /* Create square */

   	font-size: 1.4rem; /* Increase the default font size */
    color: white; /* Make icon white */
    border-radius: 50%; /* Create circle */

    text-decoration: none; /* Remove default underline */

    transition: background-color 150ms ease-in-out; /* Transition background colour on hover */

    margin-right: 0.1rem;
}

.icon--twitter::before {
    content: '\f099'; /* Unicode value for the twitter icon in our chosen icon font */
}

.icon--facebook::before {
    content: '\f09a'; /* Unicode value for the facebook icon in our chosen icon font */
}

.icon--pintrest::before {
    content: '\f231'; /* Unicode value for the pintrest icon in our chosen icon font */
}

.social-button--twitter {
    background-color: #32b9e7; /* Twitter colour */
}

.social-button--twitter:hover {
    background-color: #2a9dc4; /* Twitter hover colour */
}

.social-button--facebook {
    background-color: #4b70ab; /* Facebook colour */
}

.social-button--facebook:hover {
    background-color: #3f5f91; /* Facebook hover colour */
}

.social-button--pintrest {
    background-color: #d63533; /* Pintrest colour */
}

.social-button--pintrest:hover {
    background-color: #b52d2b; /* Pintrest hover colour */
}










/*

	Start New Code For Menu

*/

/* Menu Button */

.menu-button {
	display: flex; /* Display flex to center the menu icon in the button */
	justify-content: center; /* Align horizontally */
	align-items: center; /* Align vertically */

	width: 4rem; /* Button width */
	height: 4rem; /* Button height */
	border-radius: 50%; /* Make the button a circle */
	background-color: rgba(255,255,255,0.4); /* Make the background white and semi-transparent */
	cursor: pointer;

	transition: background-color 500ms ease-in-out; /* Add transition for the background-color */
}

.card__image-container .menu-button {
	margin: 1.5rem;
}

.menu-button:hover,
.menu-button:focus,
.menu-button:active {
    background-color: rgba(0,0,0,0.8); /* On hover, transition the background-color and transparency */
}

.menu-icon {
	position: relative; /* Give the menu-icon position relative so we can absolutely position children */
    width: 2rem; /* Icon width */
	height: 1.5rem; /* Icon height */
}

.menu-icon span {
    position: absolute; /* Absolutely position all children of the menu-icon */
    height: 0.125rem; /* Height of each line in our menu button */
    width: 100%; /* With of each line */
    background-color: #332F21; /* Background colour of each line */
    transition: background-color 500ms ease-in-out; /* Transition added for the background colour */
}

.menu-icon span:nth-child(1) {
    top: 0.0625rem; /* Position the first line roughly 1px from the top */
}

.menu-icon span:nth-child(2) {
    top: 0.625rem; /* Position the second line roughly 10px from the top, one on top of the other */
}

.menu-icon span:nth-child(3) {
    top: 1.25rem; /* Position the fourth line roughly 20px from the top */
}

.menu-button:hover span,
.menu-button:focus span,
.menu-button:active span {
    background: white; /* On hover, make the background-color of the menu icon white */
}

/* Turn the Menu icon into a close icon  */

.menu-icon.is-active span:nth-child(1) {
    opacity: 0; /* Hide the first line */
}

.menu-icon.is-active span:nth-child(2) {
    transform: rotate(45deg); /* Rotate the second line 45 degrees */
}

.menu-icon.is-active span:nth-child(3) {
	top: 0.625rem; /* Position the third line over the second line */
    transform: rotate(-45deg); /* Rotate the third line -45 degrees */
}

/* Fullscreen Menu */

.fullscreen-menu-container {
	position: fixed; /* Fix the menu to the viewport */
	top: 12.5rem; /* Add the top value to allow the element to animate up over */
	left: 0; /* Position to the left of the viewport */
	z-index: 5; /* Add z-index to make sure the element is always above everything else */
	width: 100vw; /* Cover the whole width of the viewport */
	height: 100vh; /* Cover the whole height of the viewport */
	overflow: scroll; /* Allow scrolling when the content is larger than the viewport */

	background-color: rgba(255,255,255,0.95); /* Semi-transparent white background for the menu-overlay */

	opacity: 0; /* Apply 0 transparency to hide the overlay on load */
	pointer-events: none; /* Stop the elements in the menu-container from being clicked */

	transition: top 500ms ease-in, opacity 300ms ease-in; /* Transition the top and opacity */
}

.fullscreen-menu-container.is-open {
	opacity: 1; /* Transition opacity from 0 to 1 */
	top: 0; /* Transition to the top of the viewport */
	pointer-events: auto; /* Re-add pointer events to elements can be clicked again */
}

.fullscreen-menu-container .menu-button {
	position: absolute; /* Position the button absolutely to the image-cotainer */
	top: 1.5rem; /* Position button from the top */
	right: 1.5rem; /* Position button from the left */
}

.fullscreen-menu {
	text-align: center; /* Apply text-align center to all children */
	max-width: 62rem; /* Maximum width of the content */
	padding: 6rem 2rem 4rem; /* Add padding to the content, large at the top to allow for the close button */
	width: 100%; /* Where it can, stretch to the max-width otherwise, the full viewport */
}

	.fullscreen-menu__image-container {
		width: 5rem; /* Make square */
		height: 5rem; /* Make square */
		border-radius: 50%; /* Turn the square into a circle */
		background-image: url('https://source.unsplash.com/random'); /* Apply the image as the background */
		background-size: cover; /* Force the background image to cover the container */
		background-position: center center; /* Position the image in the middle */
		margin: 0 auto 1.5rem;
	}

	.fullscreen-menu__title {
		max-width: 30rem; /* Apply a different max-width to the title to achieve a more optimal reading lenght */
		margin: 0 auto; /* Position in the horizontal center and remove top and bottom margins */
	}

	.fullscreen-menu__nav {
		margin: 3rem 0; /* Apply top and bottom margin of the navigation */
	}

	.fullscreen-menu__nav ul {
		list-style: none; /* Remove the dots from list items */
		margin: 0; /* Remove defualt margin */
		padding: 0; /* Remove default padding */
	}

	.fullscreen-menu__nav a {
		display: block; /* Span the whole width */
		font-size: 1.4rem; /* Increase the default font size */
		padding: 1rem; /* Add padding to the button to increase the click/tap area */
		color: #A2A2A2; /* Apply light grey colour */
		text-decoration: none; /* Remove default underline */
		transition: color 300ms ease-in; /* Add transition for the colour on hover */
	}

	.fullscreen-menu__nav a:hover,
	.fullscreen-menu__nav a:focus,
	.fullscreen-menu__nav a:active {
		color: #332F21; /* Darken the text colour on hover */
	}

.fullscreen-menu [class^="social-button"] {
	margin: 0 0.5rem; /* Add a larger margin between the social buttons in the menu overlay */
	height: 3.75rem; /* Increase the size of the social buttons */
    width: 3.75rem; /* Increase the size of the social buttons */
    font-size: 1.5rem; /* Increase the size of the social icon inside the button */
}

@media only screen and (min-width: 46rem) { /* When the viewport is large enough */

	.fullscreen-menu-container {
		display: flex; /* Add display flex to the container */
		justify-content: center; /* Align menu contents to the center horizontally */
		align-items: center; /* Align menu contents to the center vertically */
	}

	.fullscreen-menu {
		padding: 0;
	}

	.fullscreen-menu__nav {
		margin: 4rem 0; /* Increase the margin between the navigation and other elements in the menu */
	}

		.fullscreen-menu__nav ul {
			display: flex; /* Turn the unordered list into a flex-container */
			justify-content: space-between; /* Share the available space between the list items */
		}

}