/* @import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;700;800&family=Hanuman:wght@400;700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700&display=swap'); */

* {
	box-sizing: border-box;
	/* border: 1px solid darkmagenta !important; */
	font-family: 'Darker Grotesque', sans-serif;
}



/* Layout for Mobile view */
.wrapper-hidden-nav {
	--header-height: 4em;
}
.wrapper-visible-nav {
	--header-height: 7em;
}
/* :root {
	--vh: 1vh;
} */
nav ul a {
	font-family: 'Darker Grotesque', sans-serif;
	color: black;
	text-decoration: none;
	font-size: 1.5em;
	border-left: 3px solid;
	padding: 5px 0 5px 5px;
}
nav ul a:hover {
	color: tomato;
	text-shadow: 0 0 10px black;
}


.wrapper {
	/* margin: 0; */
	height: 100vh;
	height: calc(100 * var(--vh, 1vh));
	display: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 20px;

	display: grid;
	grid-template-columns: 100%;

	grid-template-rows:
		var(--header-height)
		calc(100 * var(--vh) - var(--header-height))
		calc(100 * var(--vh))
		calc(100 * var(--vh) - 50px)
		50px;
	grid-template-areas:
		"header"
		"about"
		"projects"
		"contact"
		"footer";
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

/* .wrapper > * {
	scroll-snap-align: start;
} */

header {
	scroll-snap-align: start;
	background-color: gray;
	grid-area: header;
	display: grid;
	grid-template-columns: 3.5em 1fr 2.5em;
	grid-template-rows: 2.5em 1fr 1fr;
	padding: 5px;
	grid-template-areas:
		"title1 title2 	navicon"
		"tag	tag	   	tag"
		"nav   	nav		nav";

}
header h1 {
	font-family: 'Darker Grotesque', sans-serif;
	font-size: 2em;
}
header h1:first-of-type {

	grid-area: title1;
	font-weight: 700;
}
header h1:last-of-type {
	grid-area: title2;
	font-weight: 500;
}

/* TODO make tagline fade out on scroll-down */
header h2 {
	font-size: 0.75em;
	grid-area: tag;
	justify-self: center;
}
header nav {
	display: block;
	grid-area: nav;
	align-content: center;
}
.visible-nav {
	display: block;
}
.hidden-nav {
	display: none;
}


header #hamburger {
	grid-area: navicon;
	font-size: 2em;
	justify-self: center;
	align-self: start;
}
header nav ul {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#about {
	scroll-snap-align: end;
	background-image: url('/img/ben_brownshirt800.jpg');
	background-size: cover;
	grid-area: about;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	/* position: relative; */
	z-index: 5;

	font-family: 'Darker Grotesque', sans-serif;
}
#about-copy {
	margin: 20px;
	padding: 20px;
	border-radius: 15px;
	max-width: 100%;
	background-color:rgba(255, 255, 255, 0.75);
	display: grid;
	grid-template-columns: 1fr 5fr;
}
#about-copy h2 {
	font-size: 3em;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
}
#about-copy div {
	border-left: 3px solid;
	padding: 5px;
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 5px;
}

/* ANGLED BORDER (actually new div behind) 
	Example markup from https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms/ 
	TODO: restore usage of this.  ISSUE: z-index is pushing all the way up, seemingly in response to making #projects a flex container*/

#projects {
	scroll-snap-align: end;
	grid-area: projects;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: 'Darker Grotesque', sans-serif;
}
#projects h2 {
	margin: 10px 0 0 10px;
	font-size: 3em;
}
#contact {

	font-family: 'Darker Grotesque', sans-serif;
	scroll-snap-align: start;
	/* background-color: darkgoldenrod; */
	grid-area: contact;

	display: grid;
	grid-template-columns: 1fr 5fr;
	grid-template-rows: 1fr 1fr 4fr;
	grid-template-areas:
		'c-soc   c-title'
		'c-soc   c-copy'
		'c-soc   c-form';

}
#contact h3 {
	grid-area: c-title;
	text-align: flex-start;
	font-size: 3em;
	padding: 20px;
}
#contact article {
	grid-area: c-copy;
	padding: 20px;
}
#contact form {
	grid-area: c-form;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 10px;
	gap: 10px;
}
#contact form * {
	width: 100%;
	font-size: 1.5em;
}
.textarea {
	height: 100%;
}
.textarea textarea {
	height: 100%;
}
#contact #social {
	grid-area: c-soc;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
#social a {
	font-size: 3em;
	color: black;
	padding:10px;
}
#social a:hover {
	color: tomato;
}

footer {

	grid-area: footer;
	background-color: gray;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 5px
}
footer nav ul {
	display: flex;
}
nav ul li {
	margin: 0 15px;
}
footer h3 {
	margin-left: 10px;
	font-weight: 700;
	font-size: 0.75em
}

/* SLIDER - 
	Container for project thumbnail cards
	Allows for horizontal scrolling
	TODO - script the scroll-aware shuffling of cards for infinite scroll */
.slider-wrapper {
	height: 100%;
	/* background-color: darkturquoise; */
	display: flex;
	position: relative;
}
.slider {
	padding: 0 20px 0 20px;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	/* align-items: flex-end; */
	/* align-items: center; */
	gap: 20px;

	/* TODO: see if I can get the slider window to underlay the scroll buttons while still scrolling */
	/* position: absolute; */

	/* Scrolling behavior */
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	/* TODO 
		default behavior for a scrolling slider
		is for the slide to page to load with the 
		first slide aligned to the left.
		Want to turn this into an infinite carousel
		Use jQuery to shift items to the beginnig or end of the list

		Implement snapping so that the view is always of a full slide
		centered with partial slides to the left and right

		Implement transitions so that the left and right partial slides are faded
		to do this, the app will need to be aware of the focus.
		Maybe it can be done w/ a semi-transparent overlay...

		scrolling behavior will need to be removed replaced with a flexwrap
		layout for larger screens
	
		implement a function to set the initial scroll position so that 2 way scrolling
		is possible


	*/
}

.slider-button {
	width: 50px;
	color: gray;
	display: flex;
	height: 60%;
	justify-content: center;
	align-items: center;
	background-color: rgba(50, 50, 50, 0.75);
	font-size: 5em;
	position: absolute;
	box-shadow: 0 0 50px 1px black;
	display: none;
}
.slider-button:hover {
	color: black;
	background-color: rgba(255, 99, 71,0.5);
}
.button-r {
	border-radius: 50px 0 0 50px;
	right: 0px;
	
}
.button-l {
	border-radius: 0 50px 50px 0;
	left: 0px;
}
.slider-button-hidden {
	display: none;
}
/* Project Card */
/* TODO implement infinite carousel behavior */
/* TODO change snapping behavior for larger formats */

.project-card {
	scroll-snap-align: center;
	flex-shrink: 0;

	/* Start with fixed width, see if we can make it repsonsive */
	width: 80vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}
.project-card .project-thumbnail {
	margin-bottom: 1em;
	height: calc(75 * var(--vh));
	width: 100%;
	background-color: rgba(255, 255, 255);
	box-shadow: 0 0 10px 1px black;
	border-radius: 30px;
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.project-card .project-thumbnail aside {
	min-width: 60%;
	max-width: 80%;
	max-height: 40%;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 15px;
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	border-radius: 15px;
	box-shadow: 0 0 50px 0px black;
	margin-bottom: 20%;
}
/* TODO: adjust text styling so that h2 and p text are similar heights when rendered at different sizes */
.project-card .project-thumbnail aside h3 {
	display: block;
	max-height: 20%;
	/* width: 20%; */
	font-size: 1em;
	justify-content: center;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
	padding-right: 10px;
}
.project-card .project-thumbnail aside p {
	padding-left: 5px;
	border-left: 3px solid;
}
.project-card .button-group {
	display: flex;
	justify-content: center;
}
.project-card .button-group form {
	border: 0px;

	display: flex;
	align-items: center;
	justify-content: center;
}
.project-card .button-group button {
	background-color: transparent;
	border: 0px;
	font-size: 1.5em;
	width: 75px;
	display: flex;
	justify-content: center;
	text-align: center;
	border-left: 3px solid black;
	border-right: 3px solid black;
}
.project-card .button-group form button:hover {
	color: tomato;
}
.project-card .button-group form:first-of-type button {
	border-right: 0;
}
/* Adjustments for Tablet view */

/* TABLET LAYOUT - 
	TODO: can @media test for touch? */
@media screen and (min-width: 768px) {
	/* TODO: adjust #about height to 1/2 screen height, adjust #projet height to half height, make cards display 2per view, display scroll buttons */
	header nav {
		display: block;
	}
	.slider {
		scroll-padding-left: 29px;
		scroll-padding-right: 29px;
		gap: 30px;
	}
	.slider-button {
		display: flex;
	}
	.project-card {
		scroll-snap-align: end;
		width: calc(50vw - 44px);
	}
	.wrapper {
		grid-template-rows:
			var(--header-height) 
			calc(50vh - var(--header-height))
			50vh 
			calc(50vh - 50px) 
			50px;
	}
	.project-card {
		height: 40vh;
	}
	#hamburger {
		display: none;
	}
	.hidden-nav {
		display: block;
	}
	.wrapper-hidden-nav {
		--header-height: 5em;
	}
	header {
		grid-template-columns: 4em 1fr 1fr;
		grid-template-rows: 1fr 1fr;

		grid-template-areas:
			'title1	title2	nav'
			'tag  	tag     nav';
	}
}
/* Desktop layout */
@media screen and (min-width: 1200px){
	.wrapper {
		margin: 0 auto;
		max-width: 1200px;
	}
	header {
		grid-template-columns: auto auto 5fr;
		grid-template-rows: 1fr 1fr;

		grid-template-areas:
			"title1  title2   nav"
			"title1  tag      nav";
	}
	header h1:first-of-type {
		grid-area: title1;
		font-size: 4em;
		font-weight: 800;
		writing-mode: vertical-rl;
		text-orientation: sideways-right;
	}
	header h1:last-of-type {
		padding-left: 10px;
		grid-area: title2;
		font-size: 3em;
		font-weight: 200;
	}
	header h2 {
		font-size: 1em;
	}


	.wrapper {
		/* grid-template-rows:
			var(--header-height) 
			calc(50vh - var(--header-height))
			50vh 
			calc(50vh - 50px) 
			50px; */
		grid-template-rows: 150px 1200px 1fr 1fr 50px;
		overflow-y: auto;
		scroll-snap-type: none;

	}

	.project-card {
		height: 600px;
		width: 400px;
	}
	.slider-button {
		display: block !important;
	}
	.slider::-webkit-scrollbar {
		display: none;
	}
	.slider {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
}