@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
@import url("menu.js");

/* sets the scrolling to smooth when scrolling to anchor links on the same page. */
html {
	scroll-behavior: smooth;
}

/* sets the default background colour of the whole site. */
body {
	background-color: var(--cream);
}

/* //////////////////// Header ///////////////// */
/* sets the background colour of the header. */
header {
	background-color: white;
}

/* applies flex box to the header, setting the padding and vertically and horizontally centering the elements. */
header div {
	display: flex;
	padding: 1em 0em;
	align-items: center;
	justify-content: space-between;
}

/* ----------Style the navigation----------- */

/* Applies flex to the nav items (links excluding logo) and centers them */
nav {
	display: flex;
	justify-content: center;
}

/* adds padding to the nav links to space them out from each other. */
nav a {
	padding: 0em 3em;
	justify-content: center;
}

/* The dropdown container */
.dropdown {
	overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
	background-color: inherit;
	/* keeps what is applied to the link already */
	font-family: inherit;
	/* keeps what is applied to the link already */
	margin: 0;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	/* hides the dropdown content until hover state applies */
	position: absolute;
	/* positions it above the nav bar */
	top: 4em;
	/* places space between the top of the page and top of the dropdown content. */
	background-color: var(--green);
	/* adds a background fill to the dropdown content */
	min-width: 160px;
	/* restricts how narrow the container can become. */
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	/* adds a drop shadow to the dropdown box when expanded. */
	z-index: 2;
	/* ensures the dropdown content to always be stacked above any other content. */
}

/* Links inside the dropdown */
/* styles the links in the dropdown menu including color, padding around each link, text decoration, the display method and how to align the text. */
.dropdown-content a {
	color: white;
	padding: 0.5em 1em;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Add an underline to dropdown links on hover. */
.dropdown-content a:hover {
	text-decoration: underline;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* //////////// Sections and pages //////////// */

/* //////////// Homepage //////////// */

/* centre the hero elements and place them side by side. */
.hero {
	display: inline-flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.hero .headshot {
	border-radius: 50%;
}

.hero .flex-item.one-third,
.bio .flex-item.one-third {
	position: relative;
	z-index: 1;
}

.hero .flex-item.padding-wrap.two-thirds,
.bio .flex-item.padding-wrap.two-thirds {
	position: relative;
	z-index: 1;
}

.bio img {
	border-radius: 50%;
}

.project-description img {
	border-radius: 50%;
}

/* changes the font color of the H2 to the variable green created in variables.css */
.bio h2 {
	color: var(--green);
}

.bio .flex-item.one-half {
	position: relative;
	overflow: hidden;
}

/* positions the h2 in the my-work section in the center and places some padding below. */
.my-work h2 {
	text-align: center;
	padding: 2em 0em 1em 0em;
	background-color: white;
}

/* targets the card link and applies the position property to it to allow the overlay and text to be applied over top. */
.card-link {
	position: relative;
	text-align: center;
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

/* sets the rules for the overlay including the position, size, opacity, hover transition and colour. */
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: 0.5s ease;
	background-color: var(--greenopacity);
}

.overlay h4 {
	color: white;
}

/* changes the opacity of the overlay on the card-link when hovering. */
.card-link:hover .overlay {
	opacity: 1;
}

.card-link:hover img {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

/* /////////// Project Page /////////// */

/* adds padding above and below the project description */
.project-description .row {
	padding: 2em 0em;
}

/* add a white background to project images */
.project-images {
	background-color: white;
}

/* hides the h2 which isn't needed for sighted users but allows it to be read by screenreaders. */
.project-images h2 {
	display: none;
}

.project-images .row.full-width {
	padding: 2em 8em;
}

/* add a white background to project process section */
.project-process {
	background-color: white;
}

/* targets the h2 used as the project title and changes the font colour and positions it above the image. */
.project-title {
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	opacity: 1;
}

/* changes the h2 to green. */
.project-description h2 {
	color: var(--green);
}

/* changes the font size of the project category and adds some padding below it to allow for proper spacing. */
.project-description .project-category {
	font-size: small;
	padding-bottom: 1em;
}

/* creates space below the project process section */
.project-process {
	padding-top: 4em;
	padding-bottom: 4em;
}

/* centre-aligns the process description and adds some padding above.*/
.process-description {
	text-align: center;
	padding: 0em 2em 2em 2em;
}

/* changes the process-description font colour to brand green. */
.process-description h2 {
	color: var(--green);
	padding-bottom: 1em;
}

/* creates a small amount of padding above and below each process row (image and description). */
.project-process .row {
	padding: 1em 0em;
}

.expressions-title {
	background-color: white;
	padding: 4em 0em 4em 0em;
	text-align: center;
	color: var(--green);
}

.wrapper {
	background-color: white;
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 5vh;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: none;
	background-color: var(--greenopacity);
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	width: 100%;
	max-width: 1400px;
}

.modal-content img {
	display: block;
	margin: auto;
	max-height: 90vh;
	width: auto;
	max-width: 100%;
}

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
	display: none;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: var(--green);
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 2px 2px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 2px 0 0 2px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	color: white;
	background-color: var(--greenopacity);
}

.project-process .row {
	justify-content: center;
	align-items: center;
}

.project-process .reverse-row {
	justify-content: center;
	align-items: center;
}

/* uses flexbox to style the project navigation arrows on each project page. */
.project-nav {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 3em 2em 3em 2em;
	gap: 4em;
}

/* sets the styling for the project navigation links. */
.project-nav a {
	text-decoration: none;
	display: flex;
	flex-direction: row;
}

/* sets the sizing for the icons used in the project navigation. */
.material-symbols-outlined {
	font-size: large;
}

/* /////////// Contact Section /////////// */

/* sets the styling rules for the contact section including the background, padding and flexbox rules. */
.contact-section {
	background-color: var(--green);
	padding: 2em;
	display: flex;
	flex-direction: column;
}

/* styles the prefer to email line */
.contact-section h3 {
	color: white;
	text-align: center;
	padding: 0.25em;
}

/* styles the link to the email */
.contact-section .zach-link {
	color: white;
}

/* styles the link hover state for the email */
.contact-section .zach-link:hover {
	color: black;
}

.contact-section .contact-links {
	padding: 2em;
}

/* styles the contact form's title changing the colour of the h3, centre-aligning the text and adding some padding below. */
.contact-form h3 {
	color: white;
	text-align: center;
	padding: 0em 0em 0.5em 0em;
}

.contact-section a {
	font-size: 1.5em;
	padding: 0.25em;
}

/* //////////////////// Footer ///////////////// */

/* sets the background colour for the footer */
footer {
	background-color: white;
	color: black;
}

/* styles the back to top arrow with padding around it and a background with a border radius to create a circle */
.up-arrow {
	padding: 1em 1.25em;
	background-color: var(--green);
	color: white;
	border: 2px solid;
	border-color: white;
	border-radius: 50%;
}

/* styles the up arrow button when hovering */
.up-arrow:hover {
	padding: 1em 1.25em;
	border: 2px solid;
	border-color: var(--green);
	background-color: white;
	color: var(--green);
	border-radius: 50%;
}

/* applies flexbox to the div tags found in the footer and centers them and evenly spaces the logo and nav bar. */
footer div {
	display: flex;
	padding: 2em 0em 0em 0em;
	align-items: center;
	justify-content: space-between;
}

/* centres the copyright note and places some padding below it. */
.copyright {
	justify-content: center;
	padding: 0em 0em 2em 0em;
}

/* //////////////----Responsive layout - Media queries--------//////////// */

/* //////////// Media queries //////////// */

/* Sets the rules for any windows that are below 768px. */
@media (max-width: 768px) {
	/* changes the hero to a column view, stacking the image and copy. */

	/* hides the regular header */
	header {
		display: none;
	}

	/* Styles the mobile menu */
	.topnav {
		overflow: hidden;
		background-color: white;
		position: relative;
	}

	/* styles the hamburger menu */
	.topnav .icon {
		color: black;
		font-size: 1.5em;
	}

	/* adjusts the size of the logo for the mobile menu */
	.topnav .logo {
		max-width: 55%;
	}

	/* Hides the links inside the navigation menu (except for logo and hamburger menu) */
	.topnav #myLinks {
		display: none;
		padding: 2em;
	}

	/* Styles navigation menu links */
	.topnav a {
		color: var(--green);
		padding: 1em;
		text-decoration: none;
		display: block;
		text-align: center;
	}

	/* Styles the hamburger menu and positions it over any other elements */
	.topnav a.icon {
		background: white;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}

	/* Styles the menu links when they're clicked. */
	.topnav a:active {
		color: var(--green);
		text-decoration: underline;
	}

	/* /////////// Homepage /////////// */

	/* changes the hero flex direction to column for mobile so the headshot and short bio stack. */
	.hero {
		flex-direction: column;
		padding-bottom: 2em;
	}

	/* adjusts the padding around the headshot. */
	.hero .headshot {
		max-width: 100%;
		padding: 2em 2em 0em 2em;
	}

	/* changes the bio on the about page to a column layout and adjusts the padding around the section. */
	.bio {
		flex-direction: column;
		padding: 3em 1em;
	}

	/* changes the padding around the bio h1 */
	.bio h1 {
		padding: 0.5em 0em 0em 0em;
	}

	/* adjusts the padding and image size for the headshot in the bio section of the about page. */
	.bio .headshot {
		max-width: 100%;
		padding: 1em 1em 0em 1em;
	}

	/* adds padding above the "my work" title in mobile. */
	.my-work h2 {
		padding-top: 1em;
	}

	.process-description p {
		text-align: left;
	}

	/* /////////// Contact Section /////////// */
	/* changes the flex direction and padding rules around the contact form section */
	.contact-form {
		display: flex;
		flex-direction: column;
		padding: 3em 0.5em;
		max-width: 100%;
		gap: 1em;
	}

	/* changes the padding around the project description */
	.project-description .row {
		padding: 4em 1em;
	}

	.masonry-grid {
		column-count: 1;
		column-gap: 25px;
	}

	.masonry-item {
		display: block;
		margin-bottom: 25px;
		break-inside: avoid;
	}

	.masonry-item img {
		width: 100%;
		display: block;
		transition: 0.3s ease;
	}

	.masonry-item:hover {
		transform: scale(1.03);
		transition: 0.3s ease;
		cursor: pointer;
	}

	/* targets the footer  */
	footer .inner-wrapper {
		display: flex;
		flex-direction: row;
	}

	/* hides the regular footer nav in mobile */
	footer nav {
		display: none;
	}

	/* changes the size of the logo for mobile */
	footer .logo {
		max-width: 55%;
		padding-left: 1em;
	}

	/* changes the font size of the copyright */
	.copyright {
		font-size: small;
	}
}

@media (min-width: 769px) {
	/* anything you want to kick in at small tablet and above can go here */

	/* hides the mobile menu */
	.topnav {
		display: none;
	}

	/* /////////// Homepage /////////// */

	/* changes the padding around the bio section on the about page. */

	.hero {
		padding-top: 2em;
		padding-bottom: 2em;
	}

	.bio {
		padding: 3em 0em;
	}

	/* changes the padding around the bio headshot and positions it at the flex-start (left align). */
	.bio .headshot {
		padding: 2em 1em 0em 1em;
		align-items: flex-start;
	}

	/* /////////// Contact Section /////////// */

	/* changes the padding around the contact form for slightly larger screens. */
	.contact-form {
		display: flex;
		flex-direction: column;
		padding: 4em 2em;
		gap: 1em;
	}

	/* /////////// Project Page /////////// */
	/* changes the padding around the project description. */
	.project-description {
		padding: 4em;
	}

	.masonry-grid {
		column-count: 2;
		column-gap: 25px;
	}

	.masonry-item {
		display: block;
		margin-bottom: 25px;
		break-inside: avoid;
	}

	.masonry-item img {
		width: 100%;
		display: block;
		transition: 0.3s ease;
	}

	.masonry-item:hover {
		transform: scale(1.03);
		transition: 0.3s ease;
		cursor: pointer;
	}
}

@media (max-width: 1079px) {
	.background-logo-1,
	.background-logo-2 {
		display: none;
	}
}

@media (min-width: 1080px) {
	/* anything you want to kick in at large tablet and above can go here */

	/* /////////// Homepage /////////// */

	/* changes the padding around the hero and changes the flex direction from column to row to position the headshot and the bio next to each other. */
	.hero {
		padding: 6em 8em;
		flex-direction: row;
	}

	.background-logo-1 {
		width: 30vw;
		height: 30vw;
		position: absolute;
		z-index: -1;
		left: -7vw;
		bottom: -11vw;
	}

	.background-logo-2 {
		width: 30vw;
		height: 30vw;
		position: absolute;
		z-index: -1;
		right: -10vw;
		top: -15vw;
	}

	.process-description p {
		padding: 0em 4em;
	}

	/* /////////// Contact Section /////////// */

	/* adjusts the padding around the contact form. */
	.contact-form {
		display: flex;
		flex-direction: column;
		padding: 4em 6em;
		gap: 1em;
	}
}

@media (min-width: 1440px) {
	/* anything you want to kick in at desktop and above can go here */

	.process-description {
		padding: 0em 8em;
	}

	/* /////////// Contact Section /////////// */

	/* adjusts the padding around the contact form. */
	.contact-form {
		display: flex;
		flex-direction: column;
		padding: 4em 10em;
		gap: 1em;
	}
}