/* 
	Theme Name: Proces Verbaal Theme
	Author: Wessel Pingen, Douwe van der Werf
	Version: 0.0.6
	Requires at least: 6.7
	Requires PHP: 5.6
*/

/* CSS Variables */

:root {
	--text-primary-color: #282828;
	--surface-primary-color: #DDDDDD;
}

[data-theme="dark"] {
	--text-primary-color: #DDDDDD;
	--surface-primary-color: #282828;
}


/* Headings */


/* Logo */
@media(min-width: 1000px) {
	.home #logo {
		max-width: 500px !important;
		width: 500px !important;
	}	
}


/* CSS Styles */

* {
	box-sizing: border-box;
}

ul, li {
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
	cursor: pointer;
}

p {
	margin: 0 0 1em;
}


/* Image hover effect */
img {
	max-width: 100%;
	vertical-align: top;
	filter: grayscale(100%);
	transition: filter 0.4s;
	opacity: .75;
}

img:hover {
	filter: none;
	
}


/*  */
html {
	-webkit-text-size-adjust: 100%;
}

nav {
	list-style: none;
}

.spacer {
	flex-grow: 1;
}


body {
	margin: 0 24px;
	background: var(--surface-primary-color);
	color: var(--text-primary-color);
	font-size: 14px;
	/* font-family: 'DMSans', 'Helvetica', sans-serif; */
	font-family: 'Helvetica Neue', sans-serif;
}

body > header {
	top: var(--wp-admin--admin-bar--height);
	left: 0;
	right: 0;
	/* padding: 0 24px; */
	height: 60px;
	position: sticky;
	
	background-color: var(--surface-primary-color);
	
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	
	z-index: 2;
}

body > header > .inner {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 84px 24px 24px 24px;
	
	position: fixed;
	visibility: hidden;
	z-index: 1;
}

body > header #primary-nav-btn {
	z-index: 2;
}

body > header nav a {
	text-decoration: none;
}

body > header nav ul li {
	margin-bottom: 0.4em;
	list-style: none;
	font-size: 1.2em;
	line-height: 1;
}

body > header nav ul li.current_page_item {
	font-weight: bold;
}

body > header > .inner {
	display: flex;
	flex-flow: column nowrap;
}

body > header [aria-expanded="true"] + .inner,
body > header .inner.visible {
	background-color: var(--surface-primary-color);
	visibility: visible;
}

body > header #logo {
	width: 100%;
	max-width: 180px;
	fill: var(--text-primary-color);
	z-index: 2;
}


.colophon {
	margin-top: 2em;
}

.colophon strong {
	display: block;
}

#primary-nav-btn,
.colophon .colophon-btn {
	margin: 0;
	padding: 0;
	appearance: none;
	background: transparent;
	color: inherit;
	font-size: 1em;
	text-decoration: underline;
	border: none;
	cursor: pointer;
}

#content img {
	width: 100%;
}

@media (min-width: 1000px) {
	body {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		column-gap: 24px;
	}
	
	body > header {
		right: auto;
		padding: 24px 0;
		
		min-height: 100vh;
		grid-column: 1 / 3;
		flex-flow: column nowrap;
		align-items: flex-start;
	}
	
	body.admin-bar > header,
	body.admin-bar > main {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height)) !important;
		/*! padding-top: 0; */
	}
	
	body > header nav.desktop-hidden {
		display: none;
	}
	
	body > main {
		grid-column: 3 / 7;
		padding: 24px 0;
	}
	
	body > header #logo {
		max-width: 300px;
	}
	
	body > header > .inner {
		padding: 0;
		position: static;
		visibility: visible;
		display: block;
	}
	
	#primary-nav-btn {
		display: none;
	}
}


/* Buttons! */
.elementor-button.elementor-button-link {
	color: inherit;
	background: transparent;
	border: 1px solid;
	border-radius: 25px;
}

/* Menu (header) */
#menu-item-345::before {
  content: '\00a0';
  line-height: 1;
  display: flex;
}

/* .home #primary-nav {
	opacity: 0;
}

body:not(.home) #primary-nav {
	opacity: 1;
} */