@import url('./reset.css');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');









:root {
	--primary-font: "Source Sans 3", sans-serif;
	--heading-font: "Source Sans 3", sans-serif;
	--base-font-weight: 400;
	--bold-font-weight: 800;
	--heading-font-weight: 400;
	--max-content-width: 1200px;
	--max-text-width: 800px;
	--wp--preset--font-size--x-large: clamp( 1.8rem , 0.8rem + 4vw , 3rem);
	--wp--preset--font-size--large: clamp( 1.4rem , 0.6rem + 4vw , 2rem);
	--wp--preset--font-size--medium: clamp( 1.0rem , 0.4rem + 4vw , 1.6rem);
	--wp--preset--font-size--small: clamp( 0.6rem , 0.2rem + 4vw , .8rem);
	--test-border: 5px solid red;
	--fluid-h1: clamp( 2.0rem , 4vw , 4rem);
	--fluid-h2: clamp( 1.8rem , 4vw , 3rem);
	--fluid-h3: clamp( 1.4rem , 4vw , 2rem);
	--fluid-h4: clamp( 1.0rem , 4vw , 1.6rem);
	--fluid-h5: clamp( 1.0rem , 4vw , 1.4rem);
	--fluid-h6: clamp( 1.0rem , 4vw , 1.2rem);
	--fluid-p: clamp( 1.0rem , 4vw , 1.2rem);
	--base-box-shadow: .25em .25em .25em rgba(0,0,0,.25)
}








/*
	*************************************
	Basic HTML
	*************************************
*/
#basic_html {}
html {
	scroll-behavior: smooth;
}
html body, button, input, select, textarea {
	font-family: var(--primary-font);
	font-weight: var(--base-font-weight);
	text-transform: none;
	font-size: 18px;
	line-height: 1.5;
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--heading-font);
		font-weight: var(--heading-font-weight);
		line-height: 1;
		text-wrap: balance;
		margin: .5em 0;
		letter-spacing: -.015em;
	}
	h5, h6 {
		font-family: var(--primary-font);
		font-weight: var(--bold-font-weight);
	}
	p { font-size: var(--fluid-p); }
	h1 { font-size: var(--fluid-h1); }
	h2 { font-size: var(--fluid-h2); }
	h3 { font-size: var(--fluid-h3); }
	h4 { font-size: var(--fluid-h4); }
	h5 { font-size: var(--fluid-h5); }
	h6 { font-size: var(--fluid-h6); }
}









/*
	*************************************
	Site Structure
	*************************************
*/
#site_structure {}
body {
	#masthead {
		display: none !important;
		.inside-header {
			.site-logo {
			}
			.site-branding {
				.main-title {
					a:hover {
					}
				}
				.site-description {
				}
			}
			.main-navigation {
				.inside-navigation {
					#primary-menu {
						& > ul.menu {
							li.menu-item {
								a {
								}
							}
						}
					}
				}
			}
		}
	}
	#page {
		#content {
			#primary {
				#main {
					margin: 0;
					.inside-article {
						& > .entry-content {
							
						}
					}
					& > .page {
					}
					& > .post {
					}
					& > .comments-area {
					}
				}
			}
		}
		#left-sidebar {
			--sidebar-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.25);
			box-shadow: var(--sidebar-shadow);
			-moz-box-shadow: var(--sidebar-shadow);
			-webkit-box-shadow: var(--sidebar-shadow);
			min-height: 100vh;
			.inside-left-sidebar {
				.widget {
					padding: 20px;
					.wp-block-list {
						font-size: .8em;
						li:first-child {
							border-top: 1px solid var(--accent-hover);
							text-transform: uppercase;
							padding-top: 20px;
						}
						a {
							text-decoration: none;
						}
					}
				}
			}
		}
	}
	.site-footer {
		display: none !important;
		.copyright {
			.site-name, .site-description {}
		}
	}
}




body.archive {
	.page-header {
		display: none;
	}
}






/*
	*************************************
	Alignment
	*************************************
*/
#alignment {}
html body.no-sidebar .entry-content .alignfull,
html body.no-sidebar .entry-content .alignwide {
	--alignment-padding: 0rem;
	@media( min-width: calc( 1200px ) ){
		--alignment-padding: calc( ( 100vw - 1200px ) / 3 );
	}
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
	width: auto;
	&.alignwide {
		margin-left: calc( 0px - var(--alignment-padding) );
		width: calc( 100% + ( var(--alignment-padding) * 2 ) );
		max-width: calc(100% + ( var(--alignment-padding) * 2 ) );
	}
}









/*
	*************************************
	Primary Navigation
	*************************************
*/
#menu-primary {
	a {
		text-transform: uppercase;
		display: block;
		&:hover {
			background: var(--accent-hover);
		}
	}
	.home-link a {
		font-size: clamp( 2em, 6vw, 3em );
		font-weight: 200;
		line-height: .9;
		padding: 30px 20px;
		&:hover {
			background: transparent;
		}
	}
}







/*
	*************************************
	WP Block Group & Wp Block Cover - CONSTRAIN INNER CONTENT
	*************************************
*/
html body {
	.wp-block-group.alignfull,
	.wp-block-cover.alignfull {
		padding: 0;
		& > .wp-block-group__inner-container,
		& > .wp-block-cover__inner-container {
			max-width: var(--max-content-width);
			padding: 20px 40px;
			border: var(--testing-border);
		}
		&:not([style]) {
			min-height: auto;	
		}
	}
}







/*
	*************************************
	WP Block Columns 
	*************************************
*/
.wp-block-columns {}
html body {
	.wp-block-columns {
		.wp-block-column {
		}
	}
}













/*
 	********************************************
	Blog Styles 
	********************************************
*/
body.archive {
	#main {
		article {
			padding: 1em;
			margin: 0;
			.inside-article {
				display: grid;
				grid-template-rows: auto 1fr;
				gap: 2em;
				grid-template-areas: 
				"image title"
				"image description";
				.entry-header {
					grid-area: title;
					margin: 0;
					.entry-title {
						margin: 0;
						text-transform: uppercase;
						font-weight: 900;
						font-size: clamp( 1em, 4vw, 1.25em);
						border: 1px solid var(--accent);
						border-width: 1px 0;
						padding: .33em;
					}
				}
				.post-image {
					grid-area: image;
					margin: 0;
				}
				.entry-summary {
					grid-area: description;
					margin: 0;
					.read-more {
						font-size: 0px;
						&::before {
					    	display: inline-block;
							text-rendering: auto;
							-webkit-font-smoothing: antialiased;
							font: var(--fa-font-solid);
							content: '\f0a9';
							font-size: 20px;
						}
					}
				}
			}
		}
	}
}
body.post-type-archive-event {
	#main {
		padding-top: 100px;
		.section-title {
			margin: 3em 3em 1em 3em;
			padding: .33em;
			text-transform: uppercase;
			font-weight: 900;
			font-size: clamp( 1em, 4vw, 1.25em);
			border: 1px solid var(--accent);
			border-width: 1px 0;
		}
		article {
			.inside-article {
				padding: 0 4em;
				margin: 0;
				gap: 0;
				grid-template-areas: 
				"title"
				"description";
				.post-image { display: none; }
				.entry-header .entry-title {
					border: 0;
					padding: 0;
				}
				.entry-summary {
					.event-meta {
						list-style: none;
						padding: 0;
						margin: 0;
					}
				}
			}
			&.past {
			}
			&.current {
			}
			&.future {
			}
		}
	}
}
body.single-public_art,
body.single-body_of_work {
	#main {
		article {
			#artist-statement {
				padding: 10px 0;
				margin: 0 0 2em 0;
				text-transform: uppercase;
				font-weight: 900;
				font-size: clamp( 1em, 4vw, 1.25em);
				border: 1px solid var(--accent);
				border-width: 1px 0;
			}
			.inside-article {
				display: grid;
				grid-template-areas: 
				"title"
				"gallery"
				"content";
				.featured-image {
					display: none;
				}
				.entry-header {
					grid-area: title;
					.entry-title {
						text-transform: uppercase;
						font-size: 2em;
						margin-bottom: 1em;
					}
				}
				.entry-content {
					grid-area: content;
				}
				.image-gallery-wrapper {
					grid-area: gallery;
				}
			}
		}
	}
}
.artist-statement-link {
	text-decoration: none;
	display: block;
	font-weight: 800;
	text-transform: uppercase;
}

.image-gallery-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
	margin: 2em 0;
	img {
		cursor: zoom-in;
	}
	figure {
		position: relative;
		cursor: pointer;
		transition: all 300ms;
		overflow: hidden;
		figcaption {
			transition: all 300ms;
			position: absolute;
			bottom: -100px;
			left: 0;
			width: 100%;
			background: rgba(0,0,0,.5);
			color: #fff;
			font-weight: 900;
			display: block;
			padding: .5em;
			font-size: .9em;
		}
		&:hover {
			transform: scale(1.02);
			figcaption {
				bottom: 0;
			}
		}
	}
}
.modal-gallery {
	display: none;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: rgba(0,0,0,.8);
	&.open {
		display: block;
	}
	& > div {
		background: #fff;
		position: relative;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		text-align: center;
		img {
			display: block;
			margin: 0 auto;
			height: auto;
			width: auto;
			max-height: 90%;
		}
		.close, .prev, .next, .caption {
			position: absolute;
			top: 0;
			right: 0;
			background: #777;
			color: #fff;
			z-index: 99999;
			display: block;
			padding: 0;
			text-decoration: none;
			--button-size: 50px;
			font-weight: bold;
			font-size: calc( var(--button-size) / 2 );
			line-height: var(--button-size);
			height: var(--button-size);
			width: var(--button-size);
		}
		.caption { left: 0; right: unset; bottom: unset; top: 0; width: auto; padding: 0 1em; }
		.prev { left: 0; right: unset; bottom: 0; top: unset; }
		.next { left: unset; right: 0; bottom: 0; top: unset; }
	}
}


.wp-block-group h3 {
	padding: 10px 0;
	text-transform: uppercase;
	font-weight: 900;
	font-size: clamp( 1em, 4vw, 1.25em);
	border: 1px solid var(--accent);
	border-width: 1px 0;
}
.wp-block-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}