/*
Theme URI: https://vanackerdesign.com
Theme Name: Van Acker Design
Author: Van Acker Design LLC
Author URI: https://vanackerdesign.com
Description: Custom Theme for Van Acker Design
Version: 1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: 
Text Domain: VanAckerDesign
*/
/*----------------------------------------
  CSS Variables
----------------------------------------*/ :root {
	/* Colors */
	--color-text: #25282a;
	--color-bg: #ffffff;
	--color-accent: #b8b8ba;
	/* Fonts */
	--font-body: 'canada-type-gibson', sans-serif;
	--font-heading: 'neue-haas-grotesk-display', sans-serif;
	/* Breakpoints */
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
	--bp-2xl: 1536px;
	/* Spacing */
	--space-xs: 0.5rem;
	--space-xxs: 0.35rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
}
/*----------------------------------------
  Global Styles
----------------------------------------*/
html {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: normal;
	color: var(--color-text);
	height: 100%;
	scroll-behavior: smooth;
	font-size: 16px;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0 auto;
	font-size: 1rem; /* 16px base */
	line-height: 1.5;
	background-color: var(--color-bg);
}
/*----------------------------------------
  Typography — Fluid
----------------------------------------*/
h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.2;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	margin-bottom: var(--space-md);
}
h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.3;
	font-size: clamp(2rem, 4vw, 2.5rem);
	margin-bottom: var(--space-md);
}
h3 {
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.4;
	font-size: clamp(1.5rem, 3vw, 1.75rem);
	margin-bottom: var(--space-sm);
}
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.4;
	font-size: clamp(1.5rem, 3vw, 1.75rem);
	margin-bottom: var(--space-sm);
}
h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.4;
	font-size: clamp(1rem, 2vw, 1.25rem);
	margin-bottom: var(--space-sm);
}
p, li, ul {
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: var(--space-sm);
	color: var(--color-text);
}
strong {
	font-weight: 800;
}
a {
	text-decoration: none;
	color: var(--color-text);
	transition: color 0.3s ease;
}
a:hover, a:focus {
	color: var(--color-accent);
}
/*----------------------------------------
  Header & Logo
----------------------------------------*/
#vad-header {
	display: block;
	background-color: var(--color-text);
	width: 100%;
	position: relative;
	z-index: 999;
}
.custom-logo {
	display: inline-block;
	width: auto;
	height: 60px;
	margin: var(--space-sm) 0;
}
#center {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 20px;
}
/*----------------------------------------
  Navigation
----------------------------------------*/
#site-navigation {
	display: inline-block;
	position: absolute;
	right: 0;
	background-color: #25282a;
	padding: 0;
	margin: 15px 0;
}
.main-navigation {}
.main-navigation li {
	width: 100vw;
}
.main-navigation ul {
	list-style: none;
	padding: 0;
	height: 100vh;
	transition: .4s;
}
.main-navigation a {
	text-decoration: none;
	color: #ffffff;
	display: inline-block;
	width: 100%;
	padding: 10px 0 0 20px;
	transition: .3s ease;
	text-transform: uppercase;
	text-align: center;
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-style: normal;
	font-weight: 700 !important;
}
.main-navigation a:hover, .main-navigation a:focus {
	color: #b8b8ba;
	transition: .3s ease;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
	display: none;
}
.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
	display: inline-block;
	width: auto;
	border: none;
	background: none;
	cursor: pointer;
	margin: 0 auto;
	float: right;
	transition: .3s ease;
}
.bars {
	display: inline-block;
	cursor: pointer;
	padding: 0;
}
.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #ffffff;
	margin: 6px 0;
	transition: .3s ease;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
	opacity: 0;
}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}
/*----------------------------------------
  Forms
----------------------------------------*/
input, textarea, button {
	width: 100%;
	padding: 0.9375rem;
	border: 1px solid lightgray;
	margin-bottom: var(--space-md);
	font-family: var(--font-body);
}
button {
	background-color: lightgray;
	border: none;
	cursor: pointer;
}
/*----------------------------
  Content Wrapper
----------------------------*/
#content-wrapper, #content-wrapper-front {
	padding: 0;
}
#content {
	min-height: calc(100vh - 200px);
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 10px;
}
#content li {
	padding: 0;
	margin: 7.5px auto;
}
/*----full width----*/
#content .alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	width: 100vw;
	padding: 0;
}
/*----------------------------
  Projects Grid
----------------------------*/

/*------------------*/
#top_post {
	display: inline-block;
	width: 100%;
	padding-top: var(--space-lg);
}
#top_post h2 {
	display: inline-block;
}
.category {
	color: #b8b8ba;
	text-transform: uppercase;
	font-size: 1.25rem;
}
.category a {
	color: #b8b8ba;
	text-decoration: none;
	margin-right: 8px;
	font-weight: 400;
}
.category a:hover {
	color: #25282a;
}
.category li {
	display: inline;
}
.projects {
	display: grid;
	grid-template-columns: auto 0px auto 0px;
	gap: var(--space-xxs);
	width: calc(100% + var(--space-xxs));
}
.project {
	padding: var(--space-xxs) 0;
	overflow: hidden;
	position: relative;
	color: #ffffff;
	-webkit-transition: .35s;
	-moz-transition: .35s;
	transition: .35s;
	aspect-ratio: 1 / 1;
}
.project img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(100%);
	-webkit-transition: .35s;
	-moz-transition: .35s;
	transition: .35s;
}
.project:hover img {
	filter: brightness(40%);
	-webkit-transition: .35s;
	-moz-transition: .35s;
	transition: .35s;
}

.standout, .standout p {
	visibility: hidden;
	text-align: left;
	width: auto;
	color: #b8b8ba;
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 700;
	font-style: normal;
	padding: 0;
	line-height: 1.25;
}
.bloop {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	text-transform: uppercase;
	font-weight: 600;
	font-family: var(--font-heading);
	text-align: center;
	width: 70%;
	transition: 0.35s;
	line-height: 1.25;
}
.bloop p {
	color: #ffffff;
	font-size: 1rem;
	font-family: var(--font-body);
}
.project:hover .bloop {
	opacity: 1;
	-webkit-transition: .35s;
	-moz-transition: .35s;
	transition: .35s;
}
.postnav {
	padding: var(--space-sm);
	margin: 20px auto;
	width: 100%;
	max-width: 1400px;
	text-align: center;
}
.postnav a {
	padding: 0 var(--space-sm);
}
.next, .previous {
	display: inline-block;
	width: 50%;
	padding: 0 var(--space-sm);
}
.next {
	float: right;
}
.previous {
	text-align: right;
}
.alignwide {
	padding: 0px;
	margin: var(--space-sm) 0 0;
}
.wp-block-image {
	padding: 0px;
	margin: var(--space-sm) 0;
}
/*----------------------------------------
  Footer
----------------------------------------*/
#footer {
	width: 100%;
	margin: var(--space-md) 0 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--color-accent);
}
#footer ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#footer li {
	display: inline;
	margin: 0 var(--space-xs);
}
#footer a {
	color: var(--color-accent);
	text-decoration: none;
}
#footer a:hover {
	color: var(--color-text);
}
@media (min-width: 500px) {
	.projects {
		grid-template-columns: auto 0px auto 0px;
	}
}
@media only screen and (max-width: 1500px) {
	.wp-block-image {
		width: 100% !important;
	}
	.wp-block-media-text {
		padding: 0px;
	}
}
@media (min-width: 1024px) {
	h1 {
		font-size: clamp(2.5rem, 5vw, 5em);
	}
	h2 {
		font-size: clamp(2rem, 4vw, 3.15em);
	}
	h3 {
		font-size: clamp(1.5rem, 3vw, 2em);
	}
	h4, h5, h6 {
		font-size: clamp(1.25rem, 2.5vw, 1.75em);
	}
	/*----Navigation Menu----*/
	#site-navigation {
		margin: 20px auto;
		float: right;
		position: relative;
		background: none;
	}
	.main-navigation {
		height: 18px;
	}
	.main-navigation li {
		width: auto;
		display: inline-block;
	}
	.main-navigation ul {
		height: auto;
	}
	.main-navigation a:hover, .main-navigation a:focus {
		background: none;
		;
	}
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
		display: inline-block;
	}
	.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
		display: none;
	}
	.standout {
		font-size: clamp(1.5rem, 3vw, 2em);
		max-width: 33%;
		display: inline-block;
		float: right;
		visibility: visible;
	}
	.projects {
		grid-template-columns: auto 0px auto 0px auto 0px auto 0px;
	}
}
/*----------------------------------------
  Animations
----------------------------------------*/
@keyframes fadein {
	from {
		filter: opacity(.5);
	}
	to {
		filter: opacity(1);
	}
}
@-moz-keyframes fadein { /* Firefox */
	from {
		filter: opacity(.5);
	}
	to {
		filter: opacity(1);
	}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
	from {
		filter: opacity(.5);
	}
	to {
		filter: opacity(1);
	}
}
@-o-keyframes fadein { /* Opera */
	from {
		filter: opacity(.5);
	}
	to {
		filter: opacity(1);
	}
}