/*
Theme Name: Fine & More Studio
Author: CJSINNBECK
Version: 1.0
Text Domain: fineandmorestudio
*/


/* ========== RESET 1 ============================================= */

*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

ul[role=list], ol[role=list] {
	list-style: none;
}

html:focus-within {
	scroll-behavior: smooth;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

img, picture, svg, video, canvas {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
}

input, button, textarea, select {
	font: inherit;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
  	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition: none;
	}
}

body, html {
  height: 100%;
  scroll-behavior: smooth;
}

/* ========== RESET 2 ============================================= */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  _text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* ========== CJS ============================================= */


/*
.cormorant-garamond-light {
	font-family: "Cormorant Garamond", serif;
	font-weight: 300;
	font-style: normal;
}

.cormorant-garamond-regular {
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-style: normal;
}

.cormorant-garamond-bold {
	font-family: "Cormorant Garamond", serif;
	font-weight: 700;
	font-style: normal;
}
*/

.open-sans-regular {
	font-family: "Open Sans", serif;
	font-optical-sizing: auto;
	font-weight: 300; /* 300 - 800 */
	font-style: normal;
	font-variation-settings: "wdth" 97; /* 75 - 100 */
}

.open-sans-bolder {
	font-family: "Open Sans", serif;
	font-optical-sizing: auto;
	font-weight: 800; /* 300 - 800 */
	font-style: normal;
	font-variation-settings: "wdth" 100; /* 75 - 100 */
}

.arial {
	font-family: Arial, Helvetica, sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "wdth" 100; /* 75 - 100 */
}

@font-face {
    font-family: 'AlrightSansThin';
    src: url('css/alrightsans-thin-v3-webfont.eot');
    src: url('css/alrightsans-thin-v3-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/alrightsans-thin-v3-webfont.woff') format('woff'),
         url('css/alrightsans-thin-v3-webfont.ttf') format('truetype'),
         url('css/alrightsans-thin-v3-webfont.svg#AlrightSansThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AlrightSansExtraThinRegular';
    src: url('css/alrightsans-extrathin-v3-webfont.eot');
    src: url('css/alrightsans-extrathin-v3-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/alrightsans-extrathin-v3-webfont.woff') format('woff'),
         url('css/alrightsans-extrathin-v3-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'AlrightSansRegular';
    src: url('css/AlrightSans-Regular-v3.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.alright-sans-thin {
	font-family: AlrightSansThin, Arial, Helvetica, sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "wdth" 100; /* 75 - 100 */
}


:root {
  --ratio: 1.5; /* 1.618 */
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --measure: 65ch;
}

body, html {
	height: 100%;
	background-color: #fff;
}

#outer {
	display: flex;
	flex-direction: column;

	_background-color: #f5f5f5;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 100vh;

	&.scaling {
		padding-block-start: var(--s4);
	}

	&.not-scaling {
		padding-block-start: 0;
	}

	.is-page & {
		background-attachment: fixed;
    background-image: var(--bgurl);
	}
}

header, main {
	padding-inline: var(--s1);
}

ul.navmenu-boxy {
	display: none;
}

header {	
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	height: var(--s4);
	transition: background-color 1s ease;
	position: sticky;
	top:0;
	z-index: 1000;

	#animated-logo {
		display: grid;
		grid-template-columns: 10rem auto;
		height: 40px;
		gap: calc(var(--s0) * 0.75);
		position: static;
		z-index: 1000;
		align-items: center;

		img {
			z-index: 1;
			position: relative;
		}
	}
	
	&.sticky {
		transition: background-color .3s ease;
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: var(--s4);
		_background-color: rgba(255,255,255,0.98);
		background: -webkit-linear-gradient(rgba(255,255,255,1) 20%, rgba(255,255,255, 0.95));
		color:#000;		
	}

	& > .hamburger {
		z-index: 1;
	}

	nav {
		display: none;
		z-index: 1;
		position: fixed;
		flex-direction: column;
		justify-content: center;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.98);
		font-size: var(--s2);

		/*img#hovermenulogo {
			width: 50vw;
			margin: var(--s2) auto;
		}*/

		a {
			color: rgba(50, 50, 50, 1);
			text-decoration: none;
			&:hover {
				color: rgba(0, 0, 0, 0.5);
			}
		}

		ul {
			display: flex;
			flex-direction: column;			
			gap:var(--s1);
			align-items: center;
			list-style-type: none;

			li {
				text-align: center;
				&.current-menu-item > a {
					color:#080;
				}
			}

			li > ul {
				font-size: var(--s1);
				text-align: center;
				gap: 4px;
			}
		}
	}

	& > a > img#logo {
		_display: block;
		_width: 50vw;
		_max-width: 20rem;
		_z-index: 1;
		_position: fixed;
	}
}

.menu-shown header nav {
	display: flex;
}

main {
	flex: 1;

	&.no-margin {
		padding-inline: 0;

		&:not(.project) {
		.stack {
			background: linear-gradient(135deg, rgba(255,255,255,0.9) 98.5%, transparent 1.5%);
			padding-bottom: 50px;			
			_width: 100%;
		}
		}
	}

	p {
		font-size: 14px;
	}

	h1 {
		text-transform: uppercase;
		font-family: AlrightSansThin;
		letter-spacing: 0.5px;
		font-size: var(--s1);
		margin-block-end: var(--s0);
		line-height: 1.3;
	}

	h2 {
		font-family: AlrightSansThin;
		text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-top: 8px !important;	
    line-height: 1.4;		
		margin-block-end: var(--s0);
	}

	h3 {
		font-family: AlrightSansThin;
		text-transform: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-top: 8px !important;	
    line-height: 1.4;		
		margin-block-end: var(--s0);
	}

	.is-page & > div {
		position: relative;
		background-color: rgba(255, 255, 255, 0.8); 
		padding-block: var(--s2); 
		padding-inline: var(--s1); 
		margin-block-start: var(--s-1);
		margin-inline: var(--s-1);
	}

	& > .images-wrapper {
		display: flex; 
		flex-wrap: wrap;
		gap: 0px;

		& > .image {
			height: auto; 
			flex: 1 1 100%; 
			position: relative;

			.project-intro {
				background-color: rgba(255, 255, 255, 0.9	);
				padding-block: var(--s2);				
				padding-inline: var(--s1);
				color:#333;

				h1 {
					margin-block-end: var(--s1);
					font-size: var(--s1);
					text-transform: uppercase;
					line-height: 1.7rem;
					letter-spacing: -0.5px;
				}

				h2 {
					font-size: var(--s0);
					font-weight: 500;
					letter-spacing: -0.5px;
				}

				h1:has(+h2) {
					margin-block-end: var(--s-2);
				}

				h1 + h2 {
					_margin-block-end: var(--s2);
				}

				h3 {
					_text-transform: uppercase;
			    font-size: 14px;
			    letter-spacing: 0.5px;
			    margin-top: 8px;					
				}

				& > .project-content-wrap {
					max-width: var(--measure);

					& > .long-desc {
						display: none;
						&.show {
							display: block;
						}
					}

					& > .read-more {
						margin-block: var(--s0);
					}
	
					& > .wp-content-wrap {
						line-height: calc(var(--s1)) !important;
						font-size: var(--s0);
						b, strong {
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.stack > * + * {
	margin-block-start: var(--s0);
}

footer {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding-inline: var(--s1);
	padding-block: var(--s1);
	background-color: #f5f5f5;
	justify-content: space-between;
	font-size: 12px;
	font-family: AlrightSansRegular;
	color:#444;		
	letter-spacing: 0.5px;
	margin-block-start: var(--s2);

	div {
		margin-block-end: var(--s0);
		flex: 1;
		&.small-text {
			font-size: var(--s-1);
		}
	}

}

.items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));	
	gap: calc(var(--s1) / 2);
	margin-block-end: var(--s2);
	

	& > div.item {
		cursor: pointer;
		_border-radius: 2px;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		font-size: var(--s0);

		a {
				display: block;
				height: 20rem;
				background-color: rgba(255, 255, 255, 0.9);
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
		}

		& > span {
			text-transform: uppercase;
			display: flex;
			flex-direction: column;
			gap: 0;
			background-color: rgba(255,255,255,0.9);
			padding-block: var(--s-2);
			padding-inline: 0; /*var(--s-1);*/
			_transform: translateY(100%);
			_transition: transform .25s;
			& > span:last-child {
				font-size: 14px;
				text-transform: none;
			}
		}

		&:hover {
			opacity: 0.8;
			span {
				_transform: translateY(0);
			}
		}
	}	
}

@media screen and (min-width: 1024px) {
	nav {
		display: none !important;
	}

	.items {
		max-width: 85%;
	}

	.invert {
		filter: invert(100%);
	}

	#outer {
		display: flex;
		flex-direction: column;

		&.scaling {
			padding-block-start: var(--s5);
		}
	}

	.hamburger {
		display: none;
	} 

	header, main {
		padding-inline: var(--s2);
	}

	header {
		color: var(--menucol); /* set menu color here -- CJS */

		.is-page &.sticky {
			height: var(--s5);
		}

		#animated-logo {
			position: fixed;
			grid-template-columns: 14rem auto;
		}

	}

	ul.navmenu-boxy {
		position: fixed; 
		display: block;
		top: var(--s1); 
		left: var(--s1);
		min-width: 15rem;
		background: linear-gradient(135deg, rgba(255,255,255,0.9) 97%, transparent 1.5%);

		&.menu-black {
			background: linear-gradient(135deg, rgba(30,30,30,0.9) 97%, transparent 1.5%);
			color:#ffffff;
		}

		z-index: 1;
		list-style-type: none;
		padding-inline: calc(var(--s0) + var(--s0));
		padding-block: var(--s0);

		li {
			text-transform: uppercase;
			letter-spacing: 0.5px;
			font-family: AlrightSansRegular;
			font-size: 15px;
			margin-block-end: -3px;
			color: #444;
			
			a:hover{
				color: #666;
			}
			
			&.current-menu-item, &.current_page_parent { /* &:hover */
				& > a {
					color: #888;
					text-decoration: none;
				}	
							
				ul {
					display: flex;
					flex-direction: row;
					gap: var(--s0);

					li {
						margin-block-end: 0px;
						margin-block-start: -3px;

						&:after {
							content: "/";
							color: #777;
							padding-inline-start: var(--s-1);
						}
					}

					li:last-child:after {
						content: "";
						padding-inline-start: 0;
					}
				}
			}
		}

		ul {
			display: none;
			list-style-type: none;
			margin-inline-start: var(--s0);
		} 

		a {
			text-decoration: none;
		}

		&.info {
			left: calc(var(--s3) + var(--s3) - 10px) !important;
			top: calc(var(--s1) - 10px) !important;
			padding: 0;
			background: none;
		}

		&.info.menu-left {
			left: calc(var(--s1) - 8px) !important;
		}


	}

	main {
		flex: 1;

		.is-page & > div {
			margin-block-start: 0;
			margin-block-end: var(--s3);
			margin-inline: var(--s2);
			padding-inline: var(--s1); 
			padding-block: calc(var(--s1) - 4px); 
			width: 65ch;
		}

		& > .images-wrapper {
			display: flex; 
			flex-wrap: wrap;
			gap: 0px;

			& > .image {
				height: auto; 
				flex: 1 1 100%; 
				position: relative;
				img {
					display: block;
					width: 100%;
				}

				 .project-intro {
					/*
					display: flex;
					padding-inline: var(--s3);
					padding-block: var(--s3);
					background-size: 100%;
					background-position: right;
					background-repeat: no-repeat;
					*/
					position: absolute;
					width: 100%;
					padding-inline: var(--s3);
					padding-block: var(--s3);
					margin-block-start: var(--s0);
					background-color: transparent !important;
					color: var(--textcol);
					
					h1 {
						margin-block-end: var(0);
						font-weight: 800;
						font-size:20px;
						letter-spacing: 0.5px;
						text-transform: uppercase;
					}

					h2 {
						margin-block-end: 0;
						margin-block-start: 0;
						font-size: var(--s1);
						font-size:16px;
						text-transform: uppercase;
					}

					h1:has(+h2) {
						margin-block-end: 4px;
					}

					& > .project-content-wrap {
						margin: 0;
						margin-block-start: var(--s2);

						& > .short-desc {
							display: block;
						}

						& > .long-desc {
							display: block;
						}

						& > .read-more {
							display: none;
						}

						& > .wp-content-wrap {
							line-height: calc(var(--s1)) !important;
							height: 0 !important;
							p {
								max-width: 65ch;
							}
						}
					}

				}
			}
		}		
	}

	footer {
		height: auto;
		display: flex;
		flex-direction: row;
		gap:3rem;
		margin-block-start: 0;
		_padding-inline: calc(var(--s2) + var(--s1));
		padding-inline: calc(var(--s2) + 2px);
		padding-block: var(--s1);
		_background: rgba(255, 255, 255, 0.9);
		background-color: #f5f5f5;
		justify-content: space-between;

		& > div {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			max-width: 50%;
		}

		div {
			&.small-text {
				flex:1; 
				max-width: 20rem;
				font-size: var(--s-1);
			}
		}
	}

	header {
		height: var(--s5);
		gap: var(--s1);

		& > a {
			_flex-basis: 20rem; /* Removed to make anim work */
		}

		#animated-logo {
			top: 20px;
		}


		nav {
			display: none;

			/*img#hovermenulogo {
				display: none;
			}

			position: static;
			flex-basis: 1;
			flex-grow: 1;
			flex-shrink: 1;
			font-size: var(--s1);
			justify-content: start;
			background-color: transparent;
			margin: 0;

			ul {
				display: flex;
				flex-direction: row;			
				gap:var(--s5);
				align-items: center;

				li ul {				
					display: none;	
					position: absolute;
					left: calc(0px + var(--s3));
					font-size: 90%;
					color:#666;
					gap: 2rem;
				}

				li.current_page_item ul {
					display: flex;
				}
			}*/
		}
	}
}

@media screen and (max-width: 1300px) {
	.project-content-wrap {
		max-width: 100% !important;
	}
}


@media (pointer: coarse) {
  /* Some code based on the supported pointer value */
  span {
  	transform: translateY(0);
  }
}

.bold {
	font-weight: 600;
}

.fadeout {
	opacity: 1
}