/* STYLESHEET FOR MKLEEPEREGON.COM */
/* LAST UPDATED 7/29/25 */

/* ||THINGS TO DO SOMEDAY: */
	/* - Consider different fonts - def want sans serif for body, not fully happy with Didot for headings */
	/* - Figure out if I can make titles fit more neatly in boxes below images; shrink instead of wrap?*/
	/* - Add a class for recent/featured projects..something that's full width and maybe includes multiple images? for homepage.*/


/* IMPORT FONTS */
	@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
	@import url("https://use.typekit.net/ofc0cbr.css"); /*verdana, calibri -- fonts chosen on adobe fonts. will probably break if i ever cancel adobe creative cloud tbh...*/



/* || GENERAL STYLES */
	
	/* COLOR PALLET */
	/* shades of true gray:
		#eaeaea
		#b0b0b0
		#858585
		#595959
		#2e2e2e */

	:root{
		--light-est:#FAF4EF; /* <- kinda creamy; formerly #eaeaea*/ 
		--light:#b0b0b0;
		--mid:#858585;
		--dark:#595959; /* SLIGHTLY LIGHTER -- formerly dark2*/
		--dark-est:#2e2e2e; /*ALMOST BLACK - formerly dark1*/
		
		--font-heading: Didot;
		--font-body: Verdana, sans-serif;
	}

	html {
		height: 100%;
		font-size: 16px;
		scroll-behavior: smooth;
	}

	body {
		height: 100%;
		margin: 0;
		
		font-family: var(--font-body);
		/*font-weight: 150;*/

		background-color: var(--light-est);
		/*color: var(--light-est); */

	/* scroll-behavior: smooth; */

	}

	* {
		box-sizing: border-box;
	}


	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-heading);
		font-weight: 300;
	}


	/*h1, h2, h3 {
		text-transform: uppercase;
	}*/

	h1 { font-size     : 3.00rem ; }   /*                                         */
	h2 { font-size     : 2.00rem ; }   /*                                         */
	h3 { font-size     : 1.25rem ; }   /*                                         */
	h4 { font-size     : 1.0rem ; }   /*                                         */
	p  { font-size     : 1rem ; }  

	}

	/* img {
		max-width: 100%;
	} */

	/* <weight>: Use a value from 100 to 700 */
	/* <uniquifier>: Use a unique and descriptive class name */

	/* .josefin-sans-menu {
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-weight: 100;
		font-style: normal;

	} */


	

/* || SITEWIDE || VISUAL STRUCTURE */

	
/* || SITE HEADER, HOME HEADER */
 	/*this site header is just a duplicate of the one below, but for reasons i don't understand they both need to exits??*/
 	/*this one is required to make home-header work*/
 	/*the one below is what seems to show up on all pages other than /index */
 	/*idk lol but i'm just gonna go with it */
 	#site-header { 
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		justify-content: center;
		align-items: center;

		width: 100%;
		min-height: 200px;
		padding: 2rem;
		margin: 0 0 1rem 0;

	 	background-image: url("media/scan-06.jpg");
		background-position: center;
	}

	#home-header { 
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		justify-content: center;
		align-items: center;

		width: 100%;
		/* height: 100%; */
		min-height: 500px;
		padding: 2rem;
		margin: 0 0 1rem 0;

		/* background-color: var(--dark); */
		background-image: url("media/scan-06.jpg");
		background-position: center;
	}


	#site-header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		justify-content: center;
		align-items: center;

		width: 100%;
		min-height: 200px;
		padding: 2rem;
		margin: 0 0 1rem 0;

		/* background-color: var(--dark); */
	 	background-image: url("media/scan-06.jpg");
		background-position: center;
	}
	

	#site-header-title {
		flex: 66%;
		margin-left:.5rem;
		flex-grow:2;
		color: var(--light-est);
		/*text-align: center;*/
	}

	#site-header-title a {
		color: var(--light-est);
		text-decoration: none;
	}

/* || FOOTER */
	.footer-container {
		position: static;
		display: flex;
		align-items: center;

		width:100%;
		height: 80px;
		/*padding: .5rem 5rem .5rem 5rem;*/
		margin: 2rem 0 0 0;

		background-color: var(--dark-est);
		
	}

	.footer-content {
		max-width: 1060px;
		flex: 100;
		align-items: center;
		padding: 1rem 1.5rem 0 1.5rem;
		margin: auto;
		text-align: right;
	}

	.footer-content p {
		color: var(--light-est);
		font-weight: 200;
		vertical-align: middle;
		
	}



/* || MENU */
	
	#menu {
		padding: 0;
		margin: .5rem;
	}

	#menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: visible; 
		text-align: center;
		
		flex: 33%;
		fex-grow: 1;

	}

	#menu li {
		display: inline-block;

		/*margin-left: 0.5rem;*/
		margin: .75rem 1.00rem;                                    
		                                
		font-family: var(--font-heading);
		text-transform: uppercase;
		font-weight: 100;
		font-size : 1rem;

		color: var(--light-est);
		/*padding: 14px, 25px, 0px, 25px*/
		/*text-align: center;*/
	}

	#menu li > a {
		color: var(--light-est);
		padding: rem;		                                   
		text-decoration: none;   
		text-align: center;
		padding: .75em;                                       
	}


	#menu li > a:hover {
		color: var(--light-est);
		background-color: var(--dark);

		transition:all 100ms ease-in-out;
       -webkit-transition:all 100ms ease-in-out;
       -moz-transition:all 100ms ease-in-out;
       -o-transition:all 100ms ease-in-out;
       -ms-transition:all 100ms ease-in-out;75
	}




/* || dropdown "work" menu */
	/* The container for dropdown menu content - needed to position the content*/
	.dropdown {
		position: relative;
		display: inline-block;
	}

	/* dropdown content - hidden by default */
	.dropdown-content {
		display: none; /* hides content by default */
		position: absolute;
		/*padding: 12px 16px;*/
		background-color: var(--dark);
		width:200px;
		z-index: 1;
		overflow:visible;
		text-transform: none;
	}

	.dropdown-content a {
		display: block; /* stacks them on top of each other instead of side by side??*/
		text-direction: none;
		padding: .75em;
		color:var(--light-est);
		text-decoration:none;

		transition:all 100ms ease-in-out;
       -webkit-transition:all 100ms ease-in-out;
       -moz-transition:all 100ms ease-in-out;
       -o-transition:all 100ms ease-in-out;
       -ms-transition:all 100ms ease-in-out;
	}

	/* Show the dropdown menu on hover -- is this like "if dropdown hover, then dropdown-content..." ?*/
	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown-content a:hover {
		color: var(--dark-est);
		background-color:var(--light);

		transition:all 200ms ease-in-out;
       -webkit-transition:all 200ms ease-in-out;
       -moz-transition:all 200ms ease-in-out;
       -o-transition:all 200ms ease-in-out;
       -ms-transition:all 200ms ease-in-out;
	}

/* || BUTTONS */
/* || FIRST - how all buttons should look/behave */

	.button {
		background-color: var(--dark);
		cursor: pointer;
		font-family: var(--font-heading);
		/*font-size: 1.2rem;*/
		text-transform: uppercase;
		border-radius: 4px;
	}

	.button a {
		color: var(--light-est);
		text-decoration: none;
	}


	.button:hover {
		background-color: var(--mid);
		color: var(--dark-est);

		transition:all 200ms ease-in-out;
       -webkit-transition:all 200ms ease-in-out;
       -moz-transition:all 200ms ease-in-out;
       -o-transition:all 200ms ease-in-out;
       -ms-transition:all 200ms ease-in-out;
	}

	.button a:hover {
		color: var(--dark-est);

		transition:all 200ms ease-in-out;
       -webkit-transition:all 200ms ease-in-out;
       -moz-transition:all 200ms ease-in-out;
       -o-transition:all 200ms ease-in-out;
       -ms-transition:all 200ms ease-in-out;
	}

/* || specific buttons */
	.button-top {
		/* display: none; */
		position: fixed;
		bottom: 20px;
		right: 30px;
		padding: .5em;
		z-index: 99;	
	}

/* || project link buttons (on images)*/
/*	.button-project {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
  		-ms-transform: translate(-50%, -50%);
	} */



/* || PAGEBOXES */
	.pagebox {		/* default pagebox */
		width: 80%;
		margin: auto;
		padding: 0;
		/* background-color: var(--dark-est); */
		/* color: var(--light-est); */
	}

	.brickbox { /* PAGEBOX DESIGNED FOR BRICK GALLERY BUT ACTUALLY BEING USED EVERYWHERE?? */ 
		/*width: 75%;*/
		max-width: 1060px;
		/*height: 100%;*/
		margin: auto;
		padding: 1rem;
		/*background-color: lightpink;*/
	 }


/* || FLEX GALLERY */
	/* the container for all gallery items */
		.flex-gallery {
			display: flex;
			flex-direction:row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			align-content: stretch;
			/* height: 100%;*/
			position: relative;
			overflow: hidden;
		}

	/* section/project heading within flex gallery */
		.flex-heading {
			margin: .5rem auto 0 0;
			padding: 1.5rem 0 0 0;
			width: 100%;
			height: 100%;
			flex: 100%;
			text-align: left;
		}

	/* gallery items of different widths */
		.flex-gallery-30, .flex-gallery-50, .flex-gallery-100 {
			/*padding: .5rem; */
			margin: .5rem;
			display: flex;
			width: 100%;
			height: 100%;
			/*background-color: var(--dark);*/
			/* position: relative; */
		}

		.flex-gallery-30 {		/* gallery item that will take up about 1/3 of full-width page */
			flex: 30%;
		}

		.flex-gallery-50 {		/* gallery item that will take up about 1/2 of full-widht page */
			flex: 47%;
		}

		.flex-gallery-66 {
			flex: 66%;
		}

		.flex-gallery-100 {		/* gallery item that always takes up full width of page */
			display: flex;
			flex: 100%;
		}

		.flex-gallery-30:hover, .flex-gallery-50:hover, .flex-gallery-100:hover, .flex-gallery-66:hover {
			background-color: var(--mid);
			transition:all 300ms ease-in-out;
           -webkit-transition:all 300ms ease-in-out;
           -moz-transition:all 300ms ease-in-out;
           -o-transition:all 300ms ease-in-out;
           -ms-transition:all 300ms ease-in-out;
		}

		.flex-gallery-iframe-container {
			display: flex;
			height: 100%;
			width: 100%;
			/* min-height: 199px;
			max-height: 661px;
			min-width: 299px;
			min-height:992px; */
		}

		.flex-gallery-iframe {
			flex: 100%;
			flex-grow: 1;
		}
	
	/* images in galleries */
	.flex-gallery img {
		width: 100%;
		height: 100%;
	}


	.flex-gallery video {
		width: 100%;
		height: 100%;
	}

	.flex-gallery iframe {
		width: 100%;
		aspect-ratio: 16/9;
	}


	/* links within galleries - mostly for work overview page */
/*		.flex-gallery a{
			padding:0;
			margin:0;
			text-decoration: none;
			color: var(--dark-est);
		}

		.flex-gallery a:hover {
			color: var(--light-est);
			text-decoration: none;
		} */

/* info about individual works - display on hover if i can! */

/* || CAPTIONS ON HOVER */	
		.image-container {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
		} 

		.image-container img {
			position: relative;
		} 

		.image-caption {
			width: 100%;
			/* height: 100%; */
			position: absolute;
			bottom: 0;
			left: 0;
			background:var(--dark-est);
			text-align: center;
			justify-content: center;
			align-items: center;

			opacity: 0; /* sets default opacity to 0, then we set it to 1 on hover */

			transition:all 300ms ease-in-out;
	           -webkit-transition:all 300ms ease-in-out;
	           -moz-transition:all 300ms ease-in-out;
	           -o-transition:all 300ms ease-in-out;
	           -ms-transition:all 300ms ease-in-out;
		}

		/*use image-container to contain video files too! And also iFrame!*/
		.video-caption {
			width: 100%;
			/*position: absolute;
		  	bottom: 40px;
		 	left: 0;*/
			background: var(--dark-est);
			text-align: center;
			justify-content: center;
			align-items: center;

			opacity: .85;

			/* transition:all 300ms ease-in-out;
           -webkit-transition:all 300ms ease-in-out;
           -moz-transition:all 300ms ease-in-out;
           -o-transition:all 300ms ease-in-out;
           -ms-transition:all 300ms ease-in-out;

           */
		}

		.image-caption p, .video-caption p {
		  color: var(--light);
			text-align: center;
			font-weight: 500;
			
			padding-left: 1.5em;
			padding-right: 1.5em;
		}

		.image-caption a, .video-caption p {
			/* padding:0;
			margin:0; */
			text-decoration: none;
			color: var(--light-est);
		}

		.image-caption a:hover {
			color: var(--light-est);
			/*text-decoration: none;*/
		}

		.image-container:hover .image-caption {
			opacity: .85;
		}

/*		.image-container:hover .video-caption {
			opacity: .85;
		} */
	


		/* iframe in galleries */
		/* .flex-gallery iframe {
				flex-grow: 1;
				width: 400px; 
				height: 100%; 
				frameborder: 0;
			}


	/* statements underneath gallery blocks */

		.flex-gallery-statement { /*container for paragraphs/text within flex galleries*/
			padding: 1.5em; 
			/* margin: 0; */
			margin: 0;
			flex: 100%;
			width: 100%;
			/*height: 100%;*/
			background-color: var(--light-est); /*same color as background for now*/
			align-text: left;
			font-size: 1em;
		}

		.flex-gallery-statement p {
			color: var(--dark-est);
			font-weight: 100;
			font-size: 1.2rem;	
			text-align: justify;

			width: 100%;


		}

		

/* || MEDIA QUERIES */

	@media only screen and (max-width: 800px) {
		.siteheader-title {flex: 100%;}
		#home-menu {flex: 100%;}
	}

	@media only screen and (max-width: 1000px) {
		.flex-gallery-30 {
			flex: 47%;
		}

		/*.brickbox {
			width: 90%;
		}*/
	}

	@media only screen and (max-width: 500px) {
		.flex-gallery-30 {
			flex: 100%;
		}
	}

	/* AN ATTEMPT to make it so captions display on mobile all the time. idk if this will work or not tho!!*/
	/* @media (hover: none) { 
		.video-caption {
			opacity: 1;
		}

		.image-caption {
			opacity: 1;
		}
	} */