/*
Theme Name: Get Praut
Theme URI: https://getpraut.nl/
Description: Get Praut - Thema
Author: Get Praut
Author URI: https://getpraut.nl/
Version: 1.0
*/

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin:0}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:0 0 15px 15px}
.alignleft{float:left;margin:0 15px 15px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
a img.alignright{float:right;margin:0 0 15px 15px}
a img.alignnone{margin:0}
a img.alignleft{float:left;margin:0 15px 15px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption.alignnone{margin:0}
.wp-caption.alignleft{margin:0 15px 15px 0}
.wp-caption.alignright{margin:0 0 15px 15px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:100%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

/* Custom CSS
-------------------------------------------------------------- */

:root
{
	--roze: /*rgb(255 219 220)*/ rgb(255 228 228);
	--geel: rgb(255 245 200);
	--oranje: rgb(249 200 152);
	--blauw: rgb(70 155 180);
}

body
{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--roze);
}

/*HOOFD NAVIGATIE*/

nav.navbar
{
	background-color: white;
	box-shadow: 0px 0px 20px #1b1e2a14;
}

nav.navbar > div {
	justify-content: space-between;
}

/*aanpassingen logo menu*/
.navbar-brand img{
	max-width: 60px;
	width: 100%;
}

/*HEADINGS*/
h1, h2, h3
{
	font-family: 'Comic Sans MS', Helvetica;
}


/*nuttigheden*/
.header-witruimte{ padding-top: 85px; }

.scroll-margin-top-perfect{ scroll-margin-top: 126px;}

/*knoppen*/
.gp-button a, .gp-archive-item-button{
	background-color: var(--blauw);
	color: #FFF;
	transition: background-color 0.2s;
	border-radius: 100vw;
	padding: 8px 16px;
}

.gp-button a:hover, .gp-archive-item-button:hover{
	background-color: hsl(from var(--blauw) h s calc( l - 10));
}

/*afbeelding decoratie rond*/
.img-rond img{
	aspect-ratio:1/1;
	border-radius: 100%;
	object-fit: cover;
	object-position: top;
}

.img-rond.portret img{
	position: absolute;
	right: 0px;
	max-width: 200px;
	width: 100%;
	top: -125px;
	left: 50%;
	transform: translatex(-50%);
	z-index: 1;
	box-shadow: 0px 0px 0px 8px white;
}

/*kleine afbeelding met tekst blok*/
.img-txt-block{
	padding-top: 150px;
	padding-bottom: 150px;
}

.img-txt-block.container{
}

.img-txt-block div{
	position: relative;
}

.img-txt-block div:nth-child(1){
	min-height:50px;
}

.img-txt-block div:nth-child(2){
	position: relative;
	background-color: white;
	padding-top: 1em;
	padding-right: 1.6em;
	padding-left: 1.6em;
	padding-bottom: 1.6em;
	border-radius: 0px 0px 10px 10px;
}

.img-txt-block div:nth-child(2)::before{
	content: '';
	position: absolute;
	bottom: 100%;
	right: 0;
	width:100%;
	height: 110px;
	background-color: white;
	z-index:-1;
	border-radius:10px 10px 0px 0px;
}

.img-txt-block div:nth-child(2) > *{
	text-align: center;
	justify-content: center;
}

/*home banner*/
.home-banner{
	background-color: white;
	overflow: hidden;
	border-radius: 0px 0px 50px 50px;
}

.home-banner > div > div{
	gap: 0px;
}

.home-banner .tekstdeel{
	padding:2em 1.2em ;
	max-width: max-content;
	width: auto;
	height: auto;
	justify-self: center;
}

.home-banner .tekstdeel-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.home-banner .afb-deel figure{
	margin: 0px;
}

.home-banner .afb-deel img{
	width: 100%;
	height: 100%;
	max-height: 500px;
	object-fit: cover;
	object-position: top;
}

/*algemeen inhoud blok*/
.algemeen-inhoud-blok > div > div{
	background-color: white;
	border-radius: 15px;
	overflow: hidden;
}

.algemeen-inhoud-blok .main-heading-wrap{
	margin-bottom: 1.2em;
	padding-inline: 1em;
	padding-top: 1.4em;
	max-width: 90ch;
}

.algemeen-inhoud-blok .algemeen-inhoud > *{
	padding-inline: 1em;
	max-width: 90ch;
}

.algemeen-inhoud-blok .algemeen-inhoud > *:last-child{
	padding-bottom: 1.2em;
}

.algemeen-inhoud-blok .algemeen-inhoud > ul {
	padding-left:calc(2ch + 1em);
}

/*volbreedte algemene blok*/
.algemeen-inhoud-blok.__volbreedte .main-heading-wrap{ 
	max-width: 100%;
}

.algemeen-inhoud-blok.__volbreedte .algemeen-inhoud > *{ max-width: 100%;}

.algemeen-inhoud-blok.__volbreedte{
	padding-inline: 1em;
	padding-bottom: 1em;
}

/* Logo van alle pagina's */
.logo
{
	width: 25px !important;
	height: 25px !important;
}

/* Berichten op de pagina's */
.wp-post-image
{
	display: block;
	margin: auto;
	transition: all 1s;
}

.wp-post-image:hover { transform: scale(0.9);}

/* Titel van de berichten */
.wp-block-latest-posts__post-title { margin-left: 10px;}

a { text-decoration: none;}

/*FOOTER*/
footer{
	background-color: white;
	padding-top: 2em;
	margin-top: auto;
}

footer .bedrijf {
	font-size: 1.2em;
	font-weight: 700;
	font-family: 'Comic Sans MS', Helvetica;
}

.gp-logo { width: 150px;}

.low-footer > div
{
	display: flex;
	align-items: center;
}

.high-footer .fa-brands { font-size: 40pt;}

.high-footer .socials
{
	display: flex;
	gap: 20px;
}

.fa-square-instagram { color: #ff04bc;}

.fa-square-instagram:hover { color: hsl(from #ff04bc h s calc(l - 10));}

.fa-square-whatsapp { color: #25d366;}

.fa-square-whatsapp:hover { color: hsl(from #25d366 h s calc(l - 10));}

/*contactformulieren*/
.wpcf7-form-control
{
}

.wpcf7 input{ 
	border-style: solid;
	border-width: 1px;
	border-radius: 100vw;
	padding: 4px 12px;
	width: 100%;
	max-width: 400px;
}
	
.wpcf7 .wpcf7-form label{ 
	width: 100%;
	max-width: 400px;
}

.wpcf7 textarea{ 
	border-radius: 15px 15px 2px 15px;
	width: 100%;
	max-width: 400px;
}

.wpcf7 .wpcf7-submit{
	border: unset;
	padding: 8px 12px;
	background-color: var(--blauw);
	color: white;
}

.wpcf7 .wpcf7-submit:hover{
	background-color: hsl(from var(--blauw) h s calc( l - 10));
}

/*ninja forms*/
.nf-form-cont {
	
}

.ninja-forms-repeat-wrap{
	border: 2px solid #e1e1e1;
	border-radius: 10px;
	padding: 1em;
}

.ninja-forms-repeat-wrap fieldset{ 
	position: relative;
	padding-bottom: 1.6em;
}

.ninja-forms-repeat-wrap fieldset::after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background-color: #e1e1e1;
}

.ninja-forms-repeat-wrap fieldset:last-child::after{
	content: unset;
}

.ninja-forms-repeat-wrap .nf-add-fieldset{
	border: unset;
	padding: 8px 16px;
	background-color: var(--blauw);
	color: white;
	border-radius: 100vw;
}

.ninja-forms-repeat-wrap .nf-add-fieldset:hover{ background-color: hsl(from var(--blauw) h s calc( l - 10));}

.nf-remove-fieldset.nf-remove-fieldset{
	color: white;
	border-color: #eb3131;
	background-color: #eb3131;
	border-radius: 8px 8px 8px 25px / 8px 8px 8px 25px;
	padding: .1em .4em .4em;
	line-height: 30px;
}

.nf-remove-fieldset.nf-remove-fieldset:hover{
	background-color: red;
	border-color: red;
}

.nf-field-element input, .nf-field-element select{
	border-style: solid;
	border-width: 1px;
	border-radius: 100vw;
	padding: 4px 12px;
	width: 100%;
	max-width: 750px;
}

.nf-field-element textarea{
	border-radius: 10px 10px 3px 10px;
	padding: 4px 12px;
}

.nf-field-element input[type="submit"]{
	border: unset;
	padding: 8px 16px;
	background-color: #2aa52a;
	color: white;
	border-radius: 100vw;
}

.nf-field-element input[type="submit"]:hover{
	background-color: green;
}

/*categorie selectie voor op homepage*/
.categorie-rij
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 4em auto;
}

.categorie-rij-item
{
	flex: 0 0 100%;
}

.categorie-rij-item img
{
	aspect-ratio: 1/1;
	object-fit: cover;
}

.categorie-rij-item a
{
	display: block;
	text-align: center;
	font-family: 'Comic Sans MS', Helvetica;
	color: black;
}

.categorie-rij-item > div{ transition: transform ease-out 0.3s;}


.categorie-rij-item > div
{
	margin-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 3px;
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
}

/*archive layout*/
.archive-sidebar{ padding-top: 2.5em;}

/*archive sidebar*/

.archive-sidebar .filter{
	background-color: #FFF;
	padding: 16px 12px ;
	border-radius: 20px;
}

.wpc-filter-title.wpc-filter-title{ 
	position: relative;
	margin-bottom: 16px;
}

.wpc-filter-title::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	border-bottom: 1px solid #e1e1e1;
	width: 100%;
}

/*filter*/
.wpc-search-field{ 
	border-radius: 100vw;
	border-color: #767676!important;
}

/*archive cards*/
.gp-cards {
	display: flex;
	flex-direction: column;
	margin-top: 40px;
	margin-bottom: 60px;
	padding: 0px 15px;
	gap: 30px;
}

.gp-card {
	overflow: hidden;
	width: 100%;
	background-color: white;
	border-radius: 15px;
	margin-left: auto;
	margin-right: auto;
	
}

.gp-card .gp-card-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.gp-card .gp-card-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px 20px;
}

.gp-card .gp-card-content .gp-archive-item-button{
}

.gp-card .gp-card-content h4 {
	color: #272727;
	font-family: 'Comic Sans MS', Helvetica;
}

.gp-card .gp-card-content .prijskaartje{
	margin-bottom: 20px;
}

/*achief pager*/
ul.pager{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	list-style-type: none;
}

ul.pager li a{
	font-size: 1.1em;
	color: #212529;
	background-color: #FFF;
	padding: 4px 8px;
	border-radius: 4px;
}

ul.pager li a:hover{
	background-color: var(--blauw);
	color: #FFF;
}

ul.pager li .active{
	background-color: hsl(from var(--blauw) h s calc( l - 10));
	font-size: 1.1em;
	color: #FFF;
	padding: 4px 8px;
	border-radius: 4px;
}

/*basic masonary gallerij*/
.gp-gallerij.gp-gallerij{
	--gap: 20px;
	
	display: block;
	column-count: 1;
	column-gap: var(--gap)!important;
}

.gp-gallerij > figure.wp-block-image{
	overflow: hidden;
	border-radius: 15px;
	margin-bottom: var(--gap)!important;
}

.gp-gallerij > figure.wp-block-image::before{
	-webkit-backdrop-filter: unset!important;
	backdrop-filter: unset!important;
}

.wp-block-gallery.gp-gallerij.has-nested-images figure.wp-block-image figcaption{
	background-image: linear-gradient(0deg, hsl(0deg 0% 0% / 44%) 70%, #00000000);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}

/*masonary blocks*/
.masonary-blocks > div{ 
	--gap: 20px;
	
	display: block;
	column-count: 1;
	column-gap: var(--gap)!important;
}

.masonary-blocks-item{
	overflow: hidden;
	border-radius: 15px;
	margin-bottom: var(--gap)!important;
	background-color: white;
}

.masonary-blocks-item figure:first-child{
	padding: 0px;
}

.masonary-blocks-item figure:first-child img{
	width: 100%;
	height: auto;
}

.masonary-blocks-item > div > *{
	padding-left: 15px;
	padding-right: 15px;
}

/*uitklap venster*/
details > *:nth-child(2){
	padding-top: 2em;
}

details summary{
	width: fit-content;
	padding: 8px 16px 8px 20px;
	border-radius: 100vw;
	color: white;
	background-color: var(--blauw);
}

/*block voor uitgelichte categorieen*/
.uitgelicht-container > div{
	background-color: #FFF;
	border-radius: 20px;
	padding-left: 0px;
	overflow: hidden;
	
}

.uitgelicht-container .wp-block-media-text>.wp-block-media-text__content{
	padding-top: 16px;
	padding-bottom: 20px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px)
{
	.categorie-rij-item
	{
		flex: 1 1 50%;
	}
	
	.categorie-rij-item > div{ margin: 10px; }
	
	.categorie-rij-item img
	{
		aspect-ratio: 2 / 3;
		object-fit: cover;
		border-radius: 0px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{
	
}

/* wordpress column breakpoint (tablets, 781px and up) */
@media (min-width: 781px)
{
	/*afbeelding decoratie rond*/

	.img-rond.portret img{
		right: 0px;
		max-width: 400px;
		width: 100%;
		top: 50%;
		left: unset;
		transform: translatey(-50%) translatex(0px);
	}

	/*kleine afbeelding met tekst blok*/
	.img-txt-block{
		padding-top: 150px;
		padding-bottom: 150px;
	}

	.img-txt-block.container{
		max-width: max-content;
	}


	.img-txt-block div:nth-child(1){
		max-width:400px;
	}

	.img-txt-block div:nth-child(2){
		position: relative;
		max-width: 120ch;
		border-radius: 0px 10px 10px 0px;
	}
	
	.img-txt-block div:nth-child(2)::before{
		content: '';
		position: absolute;
		top: 0;
		right: 100%;
		width: 200px;
		height: 100%;
		z-index: -1;
		border-radius: 0px;
	}
	
	.img-txt-block div:nth-child(2) > *{
		text-align: left;
		justify-content: left;
	}
	
	/*uitgelichte categorie block*/
	.uitgelicht-container{
		padding-left: 22px;
		padding-right: 22px;
	}
	
	.uitgelicht-container .wp-block-media-text.is-image-fill-element>.wp-block-media-text__media{
		min-height: 360px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px)
{
	/*HOOFD NAVIGATIE*/
	
	nav.navbar > div {
		justify-content: space-around;
	}
	
	nav.navbar .offcanvas.offcanvas.offcanvas{
		width: fit-content;
		flex-grow: 0;
	}
	
	/*aanpassingen logo menu*/
	.navbar-brand img{
		max-width: 100px;
		width: 100%;
	}
	
	/*nuttigheden*/
	.header-witruimte{ padding-top: 125px; }
	
	/*categrorie selectie voor op homepage*/
	.categorie-rij-item
	{
		flex: 0 1 25%;
	}
	
	.categorie-rij-item img
	{
		aspect-ratio: 2 / 3;
		object-fit: cover;
	}
	
	.categorie-rij-item > div:hover
	{
		-ms-transform: scale(1.1); /* IE 9 */
		-webkit-transform: scale(1.1); /* Safari 3-8 */
		transform: scale(1.1);
		box-shadow: 0px 0px 10px -5px #1b1e2a;
	}
	
	/*gallerijen*/
	.gp-gallerij.gp-gallerij{
		column-count: 2;
	}
	
	/*masonary blocks*/
	.masonary-blocks > div{ 
		--gap: 20px;
	
		display: block;
		column-count: 2;
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
	.gp-gallerij.gp-gallerij{
		column-count: 3;
	}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px)
{
	/*homepage banner*/
	.home-banner .tekstdeel{
		max-width: 80ch;
	}
	
	.home-banner h1{
		font-size: 3em;
	}
}