/*
Theme Name: Zonneveld
Author: Jaap
Author URI: https://startlers.com
Description: 
Template: jld
Version: 1.0.0
License:
License URI: LICENSE
Text Domain: stl
Tags: 
*/


/*--------------------------------------------------------------
# Debug
--------------------------------------------------------------*/
/* div, a, h1, h2, h3, h4 {  */
    /* -webkit-box-shadow:inset 0px 0px 0px 1px #f00; */
    /* -moz-box-shadow:inset 0px 0px 0px 1px #f00; */
    /* box-shadow:inset 0px 0px 0px 1px #f00; */
/* } */

/*--------------------------------------------------------------
# Theme colors
--------------------------------------------------------------*/
/* background */
body {
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fffefd+0,c8cace+100 */
	background: #fffefd; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #fffefd 0%, #c8cace 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  #fffefd 0%,#c8cace 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  #fffefd 0%,#c8cace 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffefd', endColorstr='#c8cace',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

/* text */
body, button, input, select, textarea { color: #1c1414; }

/* link */
a, a.wp-block-button__link { color: #3c4566; }

/* link hover */
a:hover, a.wp-block-button__link:hover { color: black; }

/* link active */
a:active, a.wp-block-button__link:hover { color: black; }

/* horizontal separators */
hr { border-bottom-color: #fff !important; background-color: #aaa; }

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
    font-family: 'Nunito';
    src: url('fonts/nunitosans-light-webfont.woff2') format('woff2'),
         url('fonts/nunitosans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Light.woff2') format('woff2'),
         url('fonts/Quicksand-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bookman';
    src: url('fonts/bookman_old_style-webfont.woff2') format('woff2'),
         url('fonts/bookman_old_style-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
html {
	/* overflow-x: clip; */
}
body {
	min-width: 320px;
	position: relative;
}
body.admin-bar .header-area { margin-top: 0; }

.main-page { max-width: none; }
.main-content-area {
	padding: 66px 0 0 0;
}
.inner { margin: 0; }
#content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#sidebar-wrapper { 
  flex: 1 1 38.2%;
  padding: 0 20px 2em 20px;
}
#primary {
  flex: 1 1 61.8%;
  padding: 0 20px 2em 20px;
}
body.home .entry-title { display: none; }


/*--------------------------------------------------------------
# General styles
--------------------------------------------------------------*/
body, button, input, select, textarea {
	font-family: 'Nunito', sans-serif;
	font-size: 1em;
	font-weight: 100;
	line-height: 1.2em;
}
.title,h1,h2,h3,h4,h5,h6 {
	font-family: 'Bookman', serif;
	font-variation-settings: 'wght' 500;
	margin: .8em 0 .3em;
    line-height: .9em;
}
h1 { font-size: 3.0em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2.0em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.0em; }
h6 { font-size: 1.0em; }

.entry-header h1 {
	line-height: 1.1em;
	/* font-size: 85%; */
}
.entry-title h1 { display: inline-block; }
p {
    margin-top: .8em;
    margin-bottom: .8em;
}
#sidebar-wrapper hr, #primary hr {
	margin: 2.2em 0;
	border-top: none;
}
.no-results {
	margin-top: 20%;
	margin-left: 5px;
}
.entry-footer {display: none;}

.alignLeft {
	text-align: left;
	padding: 0 10%;
}

.wp-block-image {
    margin: 1.4em 0;
}
.wp-block-column>.wp-block-image:first-child,
.wp-block-column>h1:first-child, 
.wp-block-column>h2:first-child, 
.wp-block-column>h3:first-child, 
.wp-block-column>h4:first-child, 
.wp-block-column>h5:first-child, 
.wp-block-column>h6:first-child { 
	margin-top: 0; 
}

/*--------------------------------------------------------------
# Menus, Links, Lists
--------------------------------------------------------------*/
*:focus {
    outline:none;
}
.entry-content ol,
.entry-content ul {
	list-style: disc;
	margin: 0;
}
#admin-left a, #admin-right a {
	font-size: 1.2em;	line-height: 1em;
	display: block; width: 100%;
}
.main-navigation ul {
    list-style-type: none;
    margin: 0px -10px 0 0;
    padding: 0px;
}
.main-navigation {
	flex: 1;
}
input.search-submit { display: none; }
.edit-link a {
	padding: 4px 8px; 
	display: block;
}
.menu {
	display: flex;
	justify-content: right;
	margin: 0 -10px;
	padding: 0;
	line-height: 1.6em;
}

.menu-item a {
	white-space: nowrap;
	text-transform: uppercase;
	padding: 10px;
	line-height: 38px;
	font-size: 1.1em;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.headerwrapper {
	display: flex;
	flex-direction: row;
	padding: 10px 20px;
	justify-content: space-between;
}
#site-title {
	margin-right: 1em;
}
#site-description {
	flex: 0 1;
	margin-right: 1em;
	line-height: .95em;
	display: none;
}
#site-menubox {
}
#site-navigation {
	flex: 1 0;
}
#site-title a {
	font-family: 'Bookman', serif;
	color: transparent;
	display: block;
	width: 30px;
	height: 30px;

	background-image: url(visuals/az.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#menu-button { display: none; }
#menu-button a {
	display: block;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-image: url(visuals/menu.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#mobile-header {
	position: fixed;
	top: 0;
	right: 70px;
	background: #f0f3f2;
	margin-left: 70px;
}
#mobile-header .headerwrapper { display: none; }
#mobile-header .headerwrapper.show { display: block; }
#mobile-menubox .menu,
#mobile-navigation .menu { flex-wrap: wrap; }


/*--------------------------------------------------------------
# Left side styles
--------------------------------------------------------------*/
#sidebar-wrapper {
	text-align: right;
}
#block-11 figure {
	max-width: 300px;
	margin-left: auto;
	margin-bottom: 2em;	
}
#sidebar-wrapper .menu {
	flex-wrap: wrap;
}
#block-27 .menu {
	display: block;
	line-height: 1.9em;
}
#block-27 .menu a {
	font-family: 'Nunito', sans-serif;
	font-variation-settings: 'wght' 500;
	text-transform: none;
	font-size: 2em; 
}
#block-27 .menu-item:first-child {
	display: none;
}

.wp-block-column { min-width: 100px; }

/* resetting some annoying wp column behaviour */
@media (min-width:600px) and (max-width:781px) {
 .wp-block-column:not(:only-child) {
  flex-basis: unset !important;
  flex-grow: unset !important;
 }
 .wp-block-column:nth-child(2n) {
  margin-left:0 !important;
 }
}


/*--------------------------------------------------------------
# Listing styles (display posts plugin)
--------------------------------------------------------------*/
.listing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2em;
}
.listing-item  {

}
.listing-item .image img {	
	-webkit-box-shadow: 5px -10px 20px 4px rgba(0,0,0,0.15);
	box-shadow: 5px -10px 20px 4px rgba(0,0,0,0.15);
}
.listing-item .title {
	display: block;
	/* font-family: 'Bookman', serif; */
	/* font-variation-settings: 'wght' 500; */
	font-size: 1.2em;
}





/* .listing-item.one-half, */
/* .listing-item.one-third, */
/* .listing-item.one-fourth, */
/* .listing-item.one-fifth, */
/* .listing-item.one-sixth {  */
	/* display: block; float: left; */
	/* padding: 0 20px; */
/* } */
/* .listing-item.first { */
	/* clear: both; */
	/* margin-left: -20px; */
/* } */
/* .listing-item.one-half { width: 50%; } */
/* .listing-item.one-third { width: 33.3%; } */
/* .listing-item.one-fourth { width: 25%; } */
/* .listing-item.one-fifth { width: 20%; } */
/* .listing-item.one-sixth { width: 16.6%; } */

/* .listing-item.one-half.second, */
/* .listing-item.one-third.third, */
/* .listing-item.one-fourth.fourth, */
/* .listing-item.one-fifth.fifth, */
/* .listing-item.one-sixth.sixth { margin-right: -20px; } */

.listing .prijsinfo { background: white; }
.listing.hideprice .prijsinfo { display: none; }


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-area {
    padding: 0 50px 50px;
}
footer {
	/* margin: 0; */
}


/*--------------------------------------------------------------
# Responsives
--------------------------------------------------------------*/
@media only screen and (max-width: 1230px) {
	#sidebar-wrapper {
		padding-right: 10px;
	}
	#primary {
		padding-left: 10px;
	}
	#site-description { display: block; margin-right: auto; }
	#site-menubox,
	#site-navigation { display: none; }
	#menu-button { display: block; }
}

@media only screen and (max-width: 850px) {
	#block-27 .menu a { 1.5em; }
	h1 { font-size: 2.5em; }
	h2 { font-size: 2.0em; }
	h3 { font-size: 1.5em; }
	h4 { font-size: 1.0em; }
	h5 { font-size: 1.0em; }
	h6 { font-size: 1.0em; }
}

@media only screen and (max-width: 720px) {
	#content {
	  display: block;
	}
	.headerwrapper,
	#sidebar-wrapper,
	#primary {
		padding-left: 10px;
		padding-right: 10px;
	}

	#sidebar-wrapper .hide { display: none; }

}