/* BASE */


html{
  scroll-behavior: smooth;
}

body{
	background-color: var( --bg-base-color );
}
:root .has-creme-color{
	color: var(--color-creme);
}
:root .has-dark-beige-color{
	color: var(--color-dark-beige);
}
:root .has-white-color{
	color:  var(--color-white);
}
:root .has-merlot-color{
	color: var(--color-merlot);
}
:root .has-wine-red-color{
	color: var(--color-wine-red);
}

		/* :root .has-very-light-gray-color{
			color: var(--color-grey-lighter);
		}
		:root .has-light-gray-color{
			color: var(--color-grey-light);
		} */


:root .has-creme-background-color{
	background-color: var( --color-creme );
}
:root .has-dark-beige-background-color{
	background-color: var( --color-dark-beige );
}
:root .has-merlot-background-color{
	background-color: var( --color-merlot );
}
:root .has-wine-red-background-color{
	background-color: var( --color-wine-red );
}
		/* :root .has-very-light-gray-background-color{
			background-color: var(--color-grey-lighter);
		} 
		:root .has-light-gray-background-color{
			background-color: var(--color-grey-light);
		} */

header.site-header, footer.site-footer, header.entry-header{
	background-color: var(--color-white);
}

header.site-header{
	background-color: var(--color-creme);
}

header.site-header .custom-logo{
	max-width: 250px;
}

header.site-header, footer.site-footer{
	display: flex;
	flex-wrap: wrap;
	padding: var(--normal-space) calc( ( 100% - var(--content-width)) / 2 );
	align-items: start;
	margin: 0;
}

header.site-header > *, footer.site-footer > *{ 
	padding: var(--normal-space) 0;
	margin: 0;
}

header.site-header .pre-header-contact{
	width: 100%;
	text-align: right;
}

header.site-header .pre-header-contact{
	width: 100%;
	text-align: right;
}

header.site-header .pre-header-contact li{
	display: inline-block;
	margin: 0 var(--normal-space);
}

header.site-header .pre-header-contact li:last-child{
	margin-right: 0;
}

header.site-header .pre-header-contact .menu-button a{
		background-color: var(--secondary-color);
		color:  var(--base-light-color);
		padding:  10px 15px;
	}

.pre-header-contact .header-phone a{
	padding-left: 25px;
    background-image: url(../assets/images/phone.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 15px 15px;
}

header.site-header .site-branding{
	max-width: 25%;
}

header.site-header .main-navigation{
	max-width: 100%;
	flex: 1 1 75%;
    text-align: right;
}

header.site-header .main-navigation ul{
	justify-content: flex-end;
}

main.site-main > article{
	margin: 0px;
	
}
.invisible-text th{
	color: var(--bg-base-color);
}

.color-header th{
	color: var(--secondary-color);	
}

.page-info .page-intro p:first-child{
	margin-top: 0;
}

header.entry-header{
	padding: var(--wide-space) 0;
	background-color: var(--color-creme);
}

.entry-header > *, .entry-header .entry-title {
    max-width: var(--content-width);
    margin: 0 auto;
}

ul.menu{
	list-style: none;
}

ul.menu li a{
	text-decoration: none;
	color: var(--text-color);
	transition: color .3s;
}

ul.menu li.current-menu-item{
	font-weight: 600;

}

ul.menu li a:hover{
	color: var(--secondary-color);
}


footer.site-footer > *{
	flex: 1 1 100%;
	display: flex;
}

footer.site-footer .footer-top > *{
	flex: 0 0 100%;
}

footer.site-footer .footer-bottom > *{
	flex: 0 0 50%;
}

footer.site-footer .footer-top > *:last-child, footer.site-footer .footer-bottom > *:last-child{
	text-align: right;
}

footer.site-footer .footer-top{
	position: relative;
}

footer.site-footer .footer-menus > *{
	padding: 0 var(--normal-space);
}

footer.site-footer .footer-menus > *:first-child{
	padding-left: 0;
}

footer.site-footer .footer-menus > *:last-child{
	padding-right: 0;
}


footer.site-footer .footer-menus .cta{
	flex: 1;
	font-size: 26px;
	color: #BF9059;
}

footer.site-footer .footer-menus .footer-nav{
	flex: 0 0 25%;
}

footer.site-footer ul, footer.site-footer h3{
	margin: 0;
	padding: 0;
}

footer.site-footer ul#menu-legal-menu li{
	display: inline-block;
	padding-right: var(--normal-space);
}

footer a{
	color: #BF9059;
	transition: color .3s;	
}

footer h2, footer h3, footer h4, footer h5, footer h6{
	color: var(--text-color);
}

footer h3.catchprase{
	color: var(--secondary-color);
	font-size: 75px;
	line-height: var(--line-spacing-60);
	position: absolute;
    top: calc( -1 * var(--font-size-80));
}

footer a:hover{
	color: var(--secondary-color);
}

ul.menu li a{
	text-decoration: none;
	color: var(--text-color);
	transition: color .3s;
}

.wp-block-image figcaption{
	text-align: left;
}

/* GUTENBERG CONTAINERS */

.entry-content, .entry-header{
	max-width: 100%;
	margin: 0;
}

.entry-header h1.entry-title{
	max-width: var(--content-width);
	margin: 0 auto;
	font-family: var( --font-family-clavo );
}

.home .entry-title{
	color: var( --color-merlot );
}	

/*.entry-header .entry-title{
	padding-right: 33%;
}*/

.entry-content > *{
	width: var(--content-width-narrow);
	min-width: var(--min-content-width);
	margin: var(--double-space) auto var(--normal-space);
}

.entry-content > .wp-block-group:last-child{
	padding-bottom: calc( 2 * var(--four-space));
}

.entry-content > .alignfull, .entry-content > .alignwide{
	width: var(--content-width);
	margin: 0 auto;
}

.entry-content ul, .entry-content ol {
    margin: var(--normal-space) auto;
	padding: 0;
	list-style-position: outside;
}

.entry-content ul li, .entry-content ol li{
	margin-left: 0;
	padding-left: 0;
}

.home .entry-content > ul, .home .entry-content > ol {
    margin: var(--vertical-space) auto;
	max-width: 100%;
	min-width: var(--min-content-width);
    list-style: none;
	display: flex;
	justify-content: space-around;
	list-style-position: inside;
}

.home .entry-content > ul li, .home .entry-content > ol li{	
	padding-left: var(--wide-space);
	background-image: url('../assets/images/mark.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px 18px;
}

ul#menu-social-menu li{
	display: inline-block;
	margin-left: 15px;
}

.social-facebook a{
	padding-left: 20px;
    background-image: url(../assets/images/fb.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    max-width: 20px;
    display: inline-block;
    overflow: hidden;
}

.social-instagram a{
	padding-left: 20px;
    background-image: url(../assets/images/ig.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    max-width: 20px;
    display: inline-block;
    overflow: hidden;
}

.external-link a{
	padding-top: 15px;
    margin-top: -15px;
    background-image: url(../assets/images/external_link.svg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 15px 15px;
}

.footer-nav .external-link a{
	padding-top: 0;
	padding-right: 20px;
    margin-top: 0;
}


.wp-block-group h2, .wp-block-group h3, .wp-block-group h4{
	margin-top: var(--normal-space);
	margin-bottom: var(--normal-space);
}

.wp-block-group > .wp-block-group__inner-container > *:not(.entry-content):not(.alignfull) {
    max-width: var(--content-width-narrow);	
	min-width: var(--min-content-width);
    margin-left: auto;
	margin-right: auto;
}

.wp-block-group.has-background > .wp-block-group__inner-container > .alignfull {
    width: 100%;
    position: static;
	column-count: 1;
}

.wp-block-group.alignfull{
	width: 100%;
	padding: var(--wide-space) calc( ( 100% - var(--content-width)) / 2 );
}

.wp-block-group.extra-space{
	padding: var(--eight-space) calc( ( 100% - var(--content-width)) / 2 );
}

.wp-block-group.right-column-full{
	padding-right: 0;
}

.page-info .page-intro{
	flex: 0 0 60%;
}

.page-info .page-image{
	flex: 0 0 40%;
}

body.home .page-info .page-intro , body.home .page-info .page-image{
	flex: 0 0 50%;
}

.page-info .page-image .wp-block-column{
	position: relative;	
}

.page-info .page-image .wp-block-column > img{
	position: absolute;
	padding: var( --wide-space );
}

.wp-block-columns {
    margin-bottom: 0;
}

.wp-block-columns .wp-block-column:last-child .right-fill{
	width: calc(100% + ( 99vw - var(--content-width)) / 2 );
	padding-right: calc(( 99vw - var(--content-width)) / 2 );
}

.wp-block-column{
	padding: var( --wide-space );
    display: grid;
    justify-content: center;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(min-content, max-content);
    align-content: start;
    margin: 0;
}

.vertical-align-columns .wp-block-column{
	align-content: center;
}

/*.service-blocks .wp-block-column{
	grid-template-rows: 100px auto 100px;
}*/

.service-blocks .wp-block-column h2, .service-blocks .wp-block-column h3, .service-blocks .wp-block-column h4{
	align-self: end;
}

h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
    padding: var( --quad-space );
}

.wp-block-column > *{
	width: 100%;
}

.wp-block-column > .wp-block-image:only-child{
	align-self: center;
}

.wp-block-column:not(:first-child) {
    margin-left: 0;
}

.wp-block-column:first-child {
    padding-left: 0;
}

.wp-block-column:last-child {
    padding-right: 0;
}


.wp-block-column.right-shift{
	padding: var( --quad-space );
    background-color: white;
    height: fit-content;
    position: relative;
    left: var( --quad-space );
	top: var( --quad-space );
    z-index: 1;
    align-self: flex-end;
}

.wp-block-column.left-shift{
	padding: 0;
    height: fit-content;
    position: relative;
    top: 0;
    right: var( --quad-space );
    z-index: 0;
}

/* BUTTONS */

.wp-block-button__link{
	transition: background-color .3s, color .3s;
	padding: var(--narrow-space) var(--wide-space);
}

.wp-block-button__link, .is-style-outline > .wp-block-button__link:hover{
	background-color: var(--color-dark-beige);
	color: var(--color-creme);
	border: 2px solid var(--color-dark-beige);
}

.wp-block-button__link:hover, .is-style-outline > .wp-block-button__link{
	border: 2px solid var(--secondary-color);
	background-color: transparent;
	color: var(--base-dark-color);	
}

/* .wp-block-button__link:hover, .is-style-outline>.wp-block-button__link{
	color: var(--color-dark-beige);
	background-color: var(--color-creme);
	border: 2px solid var(--color-dark-beige);
}  																beinvloed ook niet gehoverde buttons*/


/* CONTENT SPECIFIC */

body:not(.home) .entry-header .entry-title{
	font-size: var(--font-size-30);
	line-height: var(--line-spacing-30);
}


body.home .entry-content{
	margin-top: 150px;
}

body .page-info{
	margin-bottom: -170px;
}

body.page-over .page-info{
	margin-bottom: -500px;
}

body.page-over .catchprase{
	top: -144px;
}

.single-post h1.entry-title{
	margin: 50px;
	text-shadow: 0 0 13px white, 0 0 15px white;
}
.single-post header.entry-header{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

body:not(.page-contact) .entry-content > *:first-child{
	/* padding-top: 100px; */
}


/* PAGE CONTACT */
body.page-contact .entry-header .page-info{
	display: none;
}

body.page-contact .entry-content > .wp-block-group:last-child{
	padding-bottom: var(--wide-space);
	margin-bottom: calc( 2 * var(--eight-space));
}

body.page-contact .entry-header .entry-title, body .entry-header h4{
	padding: 0;
}

body.page-contact .entry-content a{
	text-decoration: none;
}

body.page-contact .entry-content a:hover{
	text-decoration: underline;
}

body.page-contact .entry-content .wp-block-column:last-child a{
	color: var(--base-dark-color);
	text-decoration: none;
}

body.page-contact .entry-content .wp-block-column:last-child a:hover{
	text-decoration: underline;	
}

body.page-contact .entry-content .wp-block-column:last-child a img{
	margin-right: 15px;
}

body.page-contact .line-marker:after{
	content: "";
    width: 25px;
    display: block;
    border-bottom: 3px solid var(--base-light-color);
}


/* PRIJZEN */

.page-prijzen .entry-header{
	display: none;
}


.page-prijzen .wp-block-column{
	margin-top: 0px;
	padding-top: 0px;
}
.page-prijzen td{
	border:none;
}
.page-prijzen th{
	border:none;
	font-size: var( --line-spacing-30 );
}
.page-prijzen thead{
	border-bottom: none;
	border:none;
}
.page-prijzen h2.has-background{
	padding: var( --normal-space ) var( --wide-space );
}

.page-prijzen h2.has-background ~*{
	padding-left: var( --wide-space );
}

.page-prijzen {
	line-height: 30px;
}

.page-prijzen .entry-content h4 a{
	color: inherit;
	text-decoration: none;
}

.page-prijzen .price-anchor a{
	color: var(--base-dark-color);
	text-decoration: none;
}

.page-prijzen .price-anchor a:hover{
	color: var(--secondary-color);
	text-decoration: underline;
}


/*
 * BLOG PAGE
 */

.blog main#primary.site-main{
	display:grid;
	grid-template-columns: 25vw 25vw 25vw;
	grid-template-rows: repeat(auto-fit, minmax(10vw, 20vw)); 
	max-height: 500vh;
	justify-content: center;
	align-content: center;
	grid-gap: 75px;
	padding: 50px; 
	background-color: rgb(255, 253, 252);

}
.blog .post {	/* background url on template-parts/content.php */
	background-size: cover;
	background-position: center; 
  	background-repeat: no-repeat; 
	display:flex;
	justify-content: center;
	align-items: flex-end;
}
.blog header.entry-header {
	padding: 0;
	margin: 0 !important;
}

.blog header.entry-header{
	min-width: 100%;
	background-color: rgb(240, 232, 224, 0.7);
	min-height: 22%;
}

.blog .post:hover{
	text-decoration: underline;
	cursor: pointer;
}

.blog .post > header > a > h3{
	line-height: 1.5;
	font-size: 20px !important;
	padding: 10px;
	
}

.blog .post > header > a {
	color: var(--color-merlot);
	text-decoration: none;
	
}

.post p{
	margin:var( --normal-space ) auto;	
}


/* CONTACT FORM */

.contact-form_wrapper{
	padding: 0 var(--quad-space) 0 0;
}

.contact-form_wrapper .gform_required_legend{
	display: none;
}

.contact-form_wrapper .gform_title{
	display: none;
}

.contact-form_wrapper form .gfield input:not([type=file]), .contact-form_wrapper form textarea{
	border: 1px solid var(--color-dark-beige);
	border-radius: 0;
}

.contact-form_wrapper.gravity-theme form .gfield_label, .contact-form_wrapper input[type="submit"]  {
    font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
}

.contact-form_wrapper input[type="submit"]  {
    border-color: 1px solid var(--secondary-color);
	background-color: transparent;
	color: var(--secondary-color);
}

.contact-form_wrapper input[type="submit"]:hover  {
    background-color: var(--secondary-color);
	color: var(--base-light-color);
}

/* COOKIES - PRIVACY */

body.page-cookies .page-info, body.page-privacy-policy .page-info {
    display: none;
}

body.page-cookies .entry-content, body.page-privacy-policy .entry-content {
    margin-bottom: var(--eight-space);
}

/* QUOTE SLIDER */

blockquote.wp-block-quote{
    display: grid;
    justify-items: start;
    align-content: center;
    grid-auto-rows: min-content;
}

.has-quote-slider{
	min-height: 500px;
	align-content: space-evenly;
}

.has-quote-slider blockquote.wp-block-quote{
	position: absolute;
	visibility: hidden;
	padding: var(--wide-space) 0;
	transition: opacity .5s;
	grid-row: 2/2;
	grid-column: 1/1;
}

.has-quote-slider blockquote.slide-inactive{
	visibility: visible;
	position: static;	
	opacity: 0;
}

.has-quote-slider blockquote.slide-active{
	display: grid;
	visibility: visible;
	position: static;
	opacity: 1;
}


/* MEDIA QUERIES */

@media screen and (max-width: 1365px){
	:root{
		--content-width: 90%;
		--min-content-width: 90%;
	}

	.entry-header .entry-title, h1 {
		font-size: clamp(32px, 24px + 3.333vw, var(--font-size-92));
		line-height: 1.2;
	}
	
	h2 {
		font-size: clamp(28px, 22px + 3vw, var(--font-size-80));
		line-height: 1.2;
		
	}
	
	h3, footer h3.catchprase {
		font-size: clamp(22px, 18px + 2.8vw, var(--font-size-40));
		line-height: 1.2;
	}
	
	footer h3.catchprase {
		top: calc( -1 * (25px + 2.8vw))
	}
	
	h4 {
		font-size: clamp(20px, 16px + 2.5vw, var(--font-size-30));
		line-height: 1.2;
	}
	
	h5, h6{
		font-size: clamp(18px, 14px + 2vw, var(--font-size-18));
		line-height: 1.2;
	}

	/* blog post queries */
	
	
}



@media screen and (max-width: 1024px){
	:root{
		--normal-space: 8px;
	}
	header .main-navigation {
		justify-self: center;
	}

	body .page-info {
		margin-bottom: 0; 
	}
	
	body.page-over .page-info {
		margin-bottom: -250px; 
	}

	/* blog post queries */
	.blog main#primary.site-main{
	
	}

	.blog h3.entry-title {
		font-size: 18px !important;
		line-height: 1;
	}
	
	.post header.entry-header{
		height: fit-content;
	}
	
	.wp-block-columns .wp-block-column:last-child .right-fill{
		width: auto;
   		padding: var( --quad-space );
	}
	
}

@media screen and (max-width: 768px){
	:root{
		--content-width: 95%;
		--min-content-width: 95%;
	}
	
	body.page-over .page-info {
		margin-bottom: -100px; 
	}

	body.page-prijs .wp-block-column{
		width: 60%;	
	}

	.page-info .page-image{
		position: relative;
	}
	
	.wp-block-columns{
		flex-wrap: nowrap;
	}
	
	.entry-content > ul li, .entry-content > ol li {
    	margin: var(--wide-space) auto;
		width: fit-content;
		display: block;
		padding-left: 25px;
	}
	
	.entry-content > ul, .entry-content > ol {
    	text-align: center;
    	display: block;
		padding: var( --quad-space );
	}
	
	header.site-header .site-branding {
		max-width: 100%;
		width: 100%;
		text-align: left;
	}

	/* blog post queries */

	.blog main#primary.site-main{
		grid-template-columns: repeat(2, 25vh);
		grid-template-rows: repeat(auto-fill, 35vh);
	}

	.post h3.entry-title{
		font-size: 18px !important;
		line-height: 20px !important;
	}


}



@media screen and (max-width: 580px){
	:root{
		--normal-space: 8px;
	}
	
	.wp-block-columns{
		flex-wrap: wrap;
	}
	
	header.site-header{
		padding: 0;
	}
	
	header.site-header .pre-header-contact {
		padding: var(--wide-space);
	}
	
	header.site-header .site-branding {
		text-align: center;
	}
	
	header.site-header .pre-header-contact li{
		display: block;
		margin: var(--wide-space) 0;
	}
	
	header.site-header .main-navigation {
		width: 100%;
		position: fixed;
		bottom: 0;
    	z-index: 1000;
		text-align: center;
		padding: 0;
	}
	
	header.site-header .external-link a{
		background-position: right center;
	}
	
	header .main-navigation button.menu-toggle{
		background-color: var(--secondary-color);
		color: var(--base-light-color);
		font-family: inherit;
	}
	
	header .main-navigation #primary-menu li{
		padding: 10px;
		background-color: white;
		border-bottom: 1px solid var(--secondary-color);
	}
	
	header .main-navigation .menu-toggle{
		width: 100%;
		font-weight: 100;
		padding: 15px;
		font-size: 18px;
	}

	.blog main#primary.site-main{
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(auto-fill, auto);
	}
	
	.post h3.entry-title{
		font-size: 12px !important;
		line-height: 16px !important;
	}

	footer.site-footer{
		padding-bottom: 50px;
	}
	
	footer.site-footer > * {
		flex-wrap: wrap;
	}
	
	footer.site-footer .footer-menus .footer-nav {
		flex: 0 0 50%;
		padding: 0;
	}
	
	footer.site-footer .footer-menus .cta {
   		flex: 0 0 100%;
	}
	
	footer.site-footer .footer-menus .footer-nav:last-child {
		text-align: right;
	}
	
	footer.site-footer .footer-top > * {
		flex: 0 0 100%;
	}
	
	footer.site-footer .footer-bottom
	{
		align-items: flex-end;	
	}	
	
	body.home .page-info{
		margin-bottom: 0;
	}

	body.home .entry-content{
		margin-top: 0;
	}

	body .page-info{
		margin-bottom: 0;
	}
	
	.page-info .page-image{
		position: static;
	}

	body.page-over .page-info{
		margin-bottom: 0;
	}

	body .entry-content > *:first-child{
		padding-top: var( --quad-space );;
	}
	
	.service-blocks .wp-block-column {
		grid-template-rows: auto;
	}
	
	.entry-content > ul, .entry-content > ol {
		text-align: left;
	}
	
	.entry-content > ul li, .entry-content > ol li {
    	margin: var(--wide-space) 0;
		width: auto;
		display: block;
	}

}