/*
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
-------------------------------------------------------------- */

/*abril fatface*/
@font-face {
	font-family: Abril-Fatface;
	src: url("fonts/AbrilFatface-Regular.woff2")
	format("woff2");
}

@font-face {
	font-family: MailmanRegular;
	src: url("fonts/MailmanRegular.otf")
	format("opentype");
}

@font-face {
	font-family: Nachelle;
	src: url("fonts/Nachelle.ttf")
	format("truetype");
}

@font-face {
	font-family: PlaywriteHR;
	src: url("fonts/PlaywriteHR.ttf")
	format("truetype");
}

@font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../fonts/fontawesome/webfonts/fa-solid-900.woff2");
}

:root{
	
/*kleuren*/
	--black-100: hsl(0deg 0% 2% / 1);
	--white-100: hsl(0deg 0% 100% / 1);
	--gold-100: hsl(39deg 53% 54% / 1);
	--gold-700: hsl(39deg 53% 30% / 1);
	
	--purple-100: #2c2d3b;
	
/*tekst*/
	/*font-kleuren zwart / wit*/
	--font-clr-white-100: hsl(0deg 0% 100% / 1);
	--font-clr-white-90: hsl(0deg 0% 100% / 0.9);
	--font-clr-white-80: hsl(0deg 0% 100% / 0.8);
	--font-clr-white-70: hsl(0deg 0% 100% / 0.7);
	--font-clr-white-60: hsl(0deg 0% 100% / 0.6);
	--font-clr-white-50: hsl(0deg 0% 100% / 0.5);
	--font-clr-white-40: hsl(0deg 0% 100% / 0.4);
	--font-clr-white-30: hsl(0deg 0% 100% / 0.3);
	--font-clr-white-20: hsl(0deg 0% 100% / 0.2);
	
	--font-clr-black-100: hsl(0deg 0% 0% / 1);
	--font-clr-black-90: hsl(0deg 0% 0% / 0.9);
	--font-clr-black-80: hsl(0deg 0% 0% / 0.8);
	--font-clr-black-70: hsl(0deg 0% 0% / 0.7);
	--font-clr-black-60: hsl(0deg 0% 0% / 0.6);
	--font-clr-black-50: hsl(0deg 0% 0% / 0.5);
	--font-clr-black-40: hsl(0deg 0% 0% / 0.4);
	--font-clr-black-30: hsl(0deg 0% 0% / 0.3);
	--font-clr-black-20: hsl(0deg 0% 0% / 0.2);
	
	/*font-families*/
	--abril: "Abril-Fatface", serif;
	--cronos: "cronos-pro", sans-serif;
	--mailman: "MailmanRegular", serif;
	--nachelle: "Nachelle", serif;
	
	/*font grotes*/
	font-size:16px;
	
	--font-size-ultraxl: 10em;
	--font-size-xxxxxxxxl: 8em;
	--font-size-xxxxxxxl: 7em;
	--font-size-xxxxxxl: 6em;
	--font-size-xxxxxl: 5em;
	--font-size-xxxxl: 4em;
	--font-size-xxxl: 3em;
	--font-size-xxl: 2.5em;
	--font-size-xl: 2em;
	--font-size-lg: 1.5em;
	--font-size-md: 1em;
	--font-size-sm: 0.8em;
	
	/*spacing*/
	--spacing-xxxl: 6.778rem;
	--spacing-xxl: 4.236rem;
	--spacing-xl: 2.618rem;
	--spacing-lg: 1.618rem;
	--spacing-md: 1rem;
	--spacing-sm: 0.618rem;
	--spacing-xs: 0.382rem;
}

/*BODY*/
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	background-color: var(--black-100);
}

/*HEADER*/
nav.navbar {
	--nav-bg-clr: var(--black-100);
	--nav-txt-clr: var(--font-clr-white-100);
	--nav-item-deco-clr: var(--gold-100);
	
	background-color: hsl(from  var(--nav-bg-clr) h s l / 0%);
	padding: var(--spacing-md);
	transition: background-color 0.3s;
	z-index: 10;
}

nav.navbar:before{
	content: '';
	position:absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, var(--nav-bg-clr) 0%, hsl(from  var(--nav-bg-clr) h s l / 0%) 80% );
	z-index: -1;
}

nav.navbar .navbar-brand img { width: 150px;}

nav.navbar .menu-buttons {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
}

nav.navbar > div { max-width: 2000px;}

.home nav.navbar .navbar-brand img{ visibility: hidden;}

.home nav.navbar.scroll-h .navbar-brand img{ visibility: visible;}

nav.navbar.scroll-h { background-color: var(--nav-bg-clr);}

/*offcanvas*/
nav.navbar .offcanvas { background-color: var(--black-100);}

nav.navbar .offcanvas-header .offcanvas-title {
	font-family: var(--abril);
	color: var(--gold-100);
	text-transform: uppercase;
}

nav.navbar .offcanvas-body {
	display: flex;
	flex-flow: column wrap;
	gap:40px;
}

nav.navbar .navbar-toggler{ border:0px;}

nav.navbar .navbar-toggle-icoontje {
	display: flex;
	flex-flow: column wrap;
	gap: 8px;
	width:25px;
}

nav.navbar .navbar-toggle-icoontje > div {
	height: 2px;
	width: 100%;
	background-color: var(--white-100);
}

nav.navbar .btn-close{ 
	filter: invert(100%);
	font-size: var(--font-size-lg);
	opacity: 1;
}

/*menbu items*/
nav.navbar .navbar-nav .nav-link {
	position: relative;
	color: var(--nav-txt-clr);
	font-size: var(--font-size-sm);
	text-shadow: 1px 1px 1px var(--black-100);
	padding: 0px;
	margin: var(--spacing-xs) 0px ;
}

nav.navbar .navbar-nav .nav-link:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 0px;
	background-color: var(--nav-item-deco-clr);
	transition: width 0.4s;
}

nav.navbar .navbar-nav .nav-link:hover:before { width: 100%;}

/*FOOTER*/
footer{
	--footer-bg-clr: var(--black-100);
	--footer-txt-clr: var(--white-100);
	--footer-font-size: var(--font-size-sm);
	
	font-size: 1rem;
	background: var(--footer-bg-clr);
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 2000px;
	width: 100%;
	padding: var(--spacing-xxl) var(--spacing-md) 0px;
	position: relative;

}

footer > div{
	max-width:1400px;
	margin-left: auto;
	margin-right: auto;
}

footer ul{
	list-style-type: none;
	padding-left: 0px;
}

footer ul li{ line-height: 2em;}

footer h2{
	font-size: var(--font-size-lg);
	color: var(--footer-txt-clr);
}

footer p, footer li, footer span{
	font-size: var(--font-size-md);
	color: var(--footer-txt-clr);
}

footer a{
	font-size: var(--font-size-md);
	color: var(--footer-txt-clr);
	text-decoration: none;
}

footer a:hover{ text-decoration: underline;}

footer .footer-contents {
	position: relative;
	z-index: 2;
}

footer .footer-copyright {
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-md);
	margin-left: 0px;
	margin-right: 0px;
}

footer .brand-socials{
	display: grid;
}

footer .brand-socials .brand-image {
	display: flex;
	justify-self: center;
	width: 250px;
	padding-bottom: var(--spacing-md);
}

footer .brand-socials .socials{
	display: flex;
	justify-content: center;
	gap: 16px;
}

footer .brand-socials .socials i{ font-size: var(--font-size-xl);}

footer .gp-mention{
	display: flex;
	flex-direction: column;
	align-items: start;
}

footer .gp-mention img{ width: 125px;}

footer .footer-img{
	position: relative;
	width: 400px;
	height: 400px;
	z-index: 0;
	object-fit: cover;
	object-position: 100%;
}

footer .footer-img-wrap{ 
	position: absolute;
	bottom: 0;
	right: 0;
	height: fit-content;
	display: none;
}

footer .footer-img-wrap:after {
	content: '';
	top: 0px;
	left: 0px;
	position: absolute;
	height: 100%;
	width: 100%;
	/*background: radial-gradient( transparent 50%, var(--footer-bg-clr) 80%);*/
	box-shadow: inset 40px 25px 40px 5px var(--footer-bg-clr);
	z-index: 1;
}

/*TEKST*/
h1, h2, h3, h4, h5 { font-family: var(--cronos);}

h1 {
	font-size: var(--font-size-xxxxl);
	padding: var(--spacing-lg) 0px;
}

h2 {font-size: var(--font-size-xxxl)}

h3 {font-size: var(--font-size-xxl);}

h4 {font-size: var(--font-size-xl);}

h5 {font-size: var(--font-size-lg);}

h2, h3{
	position: relative;
	width: fit-content;
}

h2:after, h3:after{
	content:'';
	position: absolute;
	height: 1px;
	width: 100%;
	background-color: var(--gold-100);
	bottom: -1px;
	left: 0;
}

p, li, a{ font-size: 1.4rem;}

ul li::marker {color: var(--gold-100);}

ul.list-vinkje{
	list-style: url("/wp-content/uploads/2025/05/list-vinkje-klein-v1.3.png");
}

ul.list-vinkje ul{
	list-style: url("/wp-content/uploads/2025/05/list-vinkje-klein-sublist.png");
}

ul.cocktail-marker{
	list-style: url("/wp-content/uploads/2025/05/cocktail-marker-v1-0-1.png");
}

ul.cocktail-marker ul{
	list-style: url("/wp-content/uploads/2025/05/cocktail-marker-empty.png");
}

.--mailman-font{ font-family: var(--mailman);}
.--nachelle-font{ font-family: var(--nachelle);}
.--abril-font{ font-family: var(--abril);}

.--text-align-center{ text-align: center;}

/*KNOPPEN*/
.custom-button, .wpcf7-submit{
	--btn-bg-clr: var(--_btn-bg-clr, var(--white-100));
	--btn-bg-h-clr: var(--_btn-bg-h-clr, var(--white-100));
	--btn-txt-clr: var(--_btn-txt-clr, var(--black-100));
	--btn-txt-h-clr: var(--_btn-txt-h-clr, var(--black-100));
}

.custom-button.--gold, .wpcf7-submit{
	--_btn-bg-clr: var(--gold-100);
	--_btn-bg-h-clr: var(--gold-100);
	--_btn-txt-clr: var(--black-100);
	--_btn-txt-h-clr: var(--black-100);
}

.custom-button a, .wpcf7-submit.wpcf7-submit.wpcf7-submit{
	background-color: var(--btn-bg-clr)!important;
	padding: var(--spacing-sm) var(--spacing-md);
	font-family: var(--cronos);
	color: var(--btn-txt-clr);
	text-decoration: none;
	letter-spacing: 0.5px;
	border-radius: 100vw;
}

.custom-button a:hover, .wpcf7-submit:hover {
	background-color: var(--btn-bg-h-clr);
	color: var(--btn-txt-h-clr)!important;
}

/*banner*/
.banner.banner.banner {
	position: relative;
	background-color: var(--black-100);
	height: calc(100vh - 20px);
	min-height: 600px;
	max-height: 600px;
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
}

.banner:before{
	content: '';
	position: absolute;
	width: 65%;
	height: 100%;
	right: 0;
	background: linear-gradient(to right, var(--black-100) 0px, transparent 40%);
	z-index: 2;
}

.banner.banner.banner > img{
	width: 65%;
	left: unset;
	right: 0;
}

.banner > div{
	position: relative;
	z-index:3;
}



.banner h1{
	font-family: var(--nachelle);
	font-size: var(--font-size-xxl);
	color: var(--white-100);
	text-align: center;
	text-shadow: 0px 1px var(--black-100);
	z-index: 1;
	position: relative;
}

.banner .banner-sub-txt {
	position:relative;
	top: -30px;
	font-size: var(--font-size-lg);
	text-shadow: 1px 1px var(--black-100);
	text-align: center;
	color: var(--white-100);
	z-index:0;
}

.banner .banner-sub-txt span{ text-align: center;}

.banner .custom-button{ text-shadow: none;}

.banner .custom-button a { font-size: 1.35em;}

.banner span.--mailman-font{ font-size: var(--font-size-lg);}

/*.banner span.--nachelle-font{ font-size: var(--font-size-xxxxxxxxl);}*/

.banner .banner-wrap{ width: fit-content;}

.banner .banner-logo{
	position: relative;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 175px;
	filter: drop-shadow(1px 1px var(--black-100));
}

/*small banner*/
.small-banner.small-banner.small-banner{
	padding-left: 0px;
	padding-right: 0px;
}

.small-banner h1{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
	text-shadow: 1px 1px var(--black-100);
}

/**/
.content-block-img {
	--bg-clr: var( --_bg-clr, var(--black-100));
	--bg-content-clr: var( --_bg-content-clr, var(--black-100));
	--heading-clr: var( --_heading-clr, var(--white-100));
	--txt-clr: var( --_txt-clr, var(--white-100));
	--txt-link-clr: var( --_txt-clr, var(--white-100));
	--txt-link-h-clr: var( --_txt-clr, var(--white-100));

	display: grid;
	background-color: var(--bg-clr);
}

.content-block-img .column-wrap {
	background-color: var(--bg-content-clr);
	margin-top: var(--spacing-xxl);
	margin-bottom: var(--spacing-xxl);
}

.content-block-img .column-wrap > div {
	padding: var(--spacing-lg) 0px var(--spacing-xl) var(--spacing-xl);
}

.content-block-img .column-wrap > div.img-side { padding:0px;}

.content-block-img .column-wrap > div.img-side.--img-cover figure { height: 100%;}

.content-block-img .column-wrap > div.img-side.--img-cover figure img{ 
	height: 100%;
	object-fit: cover;
}

.content-block-img p, .content-block-img li, .content-block-img span { color: var(--txt-clr);}

.content-block-img h1, .content-block-img h2, .content-block-img h3, 
.content-block-img h4,  .content-block-img h5{
	color: var(--white-100);
}

/*basic content block*/

.basic-content-block{
	--bg-clr: var( --_bg-clr, var(--black-100));
	--bg-content-clr: var( --_bg-content-clr, var(--black-100));
	--heading-clr: var( --_heading-clr, var(--white-100));
	--txt-clr: var( --_txt-clr, var(--white-100));
	--txt-link-clr: var( --_txt-clr, var(--white-100));
	--txt-link-h-clr: var( --_txt-clr, var(--white-100));

	display: flex;
	background-color: var(--bg-clr);
}

.basic-content-block.basic-content-block.basic-content-block > div{
	background-color: var(--bg-content-clr);
	width: 100%;
	max-width: 1400px;
	padding: var(--spacing-lg) var(--spacing-md);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	margin-left: auto;
	margin-right: auto;
}

.basic-content-block p, .basic-content-block li, .basic-content-block span, .basic-content-block summary {
	color: var(--txt-clr);
}

.basic-content-block h1, .basic-content-block h2, .basic-content-block h3, 
.basic-content-block h4,  .basic-content-block h5{
	color: var(--white-100);
}

.--alt-title div {
	position: relative;
	top: 0px;
}

.basic-content-block .--alt-title .--mailman-font { font-size: var(--font-size-lg);}

.basic-content-block .--alt-title {
	font-size: var(--font-size-xxxl);
	color: var(--white-100);
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-lg);
}

.basic-content-block .--alt-title:after{ bottom: 0px;}

.basic-content-block details.wp-block-details summary {
	font-family: var(--cronos);
	font-size: clamp(1.2em, 3.5vw, 1.5em);
	color: var(--black-100);
	padding: var(--spacing-xs) var(--spacing-lg);
	background-color: var(--gold-100);
	border-radius: 100vw;
}

.basic-content-block details.wp-block-details summary::marker{ color: var(--black-100);}

.basic-content-block details.wp-block-details > *:nth-child(2) { padding-top: var(--spacing-xl);}

/*basic content block alternative styling*/
.basic-content-block.--full-black{
	--_bg-clr: var(--black-100);
	--_bg-content-clr: var(--black-100);
	--_txt-clr: var(--white-100);
	--_txt-link-clr: var(--white-100);
	--_txt-link-h-clr: var(--white-100));
}

.basic-content-block.basic-content-block.basic-content-block.__sm-block > div{ max-width: 100ch;}

.basic-content-block.mb-0 > div{ margin-bottom: 0px!important;}

/*highlighted block*/
.highlighted-block{
	width: fit-content;
	padding: var(--spacing-md) var(--spacing-lg);
	background-color: var(--purple-100);
}

.highlighted-block .psuedo-heading{
	font-family: var(--cronos);
	font-size: var(--font-size-xl);
}

.highlighted-block ul{ padding-left: 1.5rem;}

.highlighted-block ul li{ padding-left: 1ch;}

.highlighted-block ul li.email-icon::marker{
	font-family: 'Font Awesome 6 Free';
	content: '\40';
}

.highlighted-block ul li.tel-icon::marker{
	font-family: 'Font Awesome 6 Free';
	content: '\f095';
}

.highlighted-block a{
	color: var(--white-100);
	text-decoration: none;
}

/*forms*/
.wpcf7-form .input-row > p{
    display: grid;
    grid-template-columns: 1fr;
	gap: 0.5em;
}

.wpcf7-form .input-row > p > br{ display: none;}

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select {
	background-color: var(--purple-100);
	border: 1px solid var(--gold-700);
	color: var(--white-100);
}

.wpcf7-form label, .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select {
	width: 100%;
	border-radius: 0px;
	padding: 4px 8px;
}

.wpcf7-form.wpcf7-form select { padding: 5px 8px;}

.wpcf7-form input:focus-visible, .wpcf7-form textarea:focus-visible, .wpcf7-form select:focus-visible {
	border-radius: 0px!important;
}

.wpcf7-form .wpcf7-not-valid-tip{ color: red;}

.wpcf7-response-output{ color: var(--white-100);}

/*recaptcha badge*/
.grecaptcha-badge { visibility: hidden; }

/*404 pagina*/
.wrap-404{ 
	padding-top: 120px;
	color: var(--white-100);
}

@media (min-width: 576px){
	/*FOOTER*/
	footer .gp-mention{ 
		flex-direction: row;
		align-items: center;
	}
	
	/*banner*/
	.banner h1{ font-size: var(--font-size-xxl);}

	.banner .banner-sub-txt {
		top: -30px;
		font-size: var(--font-size-lg);
	}
	
	.banner .banner-logo{ width: 200px;}
	
	/*basic content block*/
	.basic-content-block.basic-content-block.basic-content-block > div{ 
		padding: var(--spacing-lg) var(--spacing-lg);
		margin-top: var(--spacing-xl);
		margin-bottom: var(--spacing-xl);
	}
	
	/*small banner*/
	.small-banner h1{
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}
	
	/*forms*/
	.wpcf7-form .input-row > p{ grid-template-columns: 1fr 1fr;}
}

@media (min-width: 768px){
	h1 {
		font-size: var(--font-size-xxxxxl);
		padding: var(--spacing-lg) 0px;
	}

	h2 {font-size: var(--font-size-xxxxl)}

	h3 {font-size: var(--font-size-xxxl);}

	h4 {font-size: var(--font-size-xxl);}

	h5 {font-size: var(--font-size-xl);}

	p, li, a{ font-size: 1.4rem;}
	
	/*banner*/
	.banner.banner.banner {max-height: unset;}
	
	.banner .banner-logo{
		position: relative;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		width: 300px;
	}
	
	/*basic content block*/
	.basic-content-block.basic-content-block.basic-content-block > div{ 
		padding: var(--spacing-lg) var(--spacing-xl);
		margin-top: var(--spacing-xxl);
		margin-bottom: var(--spacing-xxl);
	}
	
}

@media (min-width: 992px){
	/*HEADER*/
	nav.navbar.navbar-expand-lg .offcanvas{ flex-grow: 0;}
	
	nav.navbar .offcanvas-body{ flex-flow: row wrap;}
	
	nav.navbar .navbar-nav .nav-link {
		color: var(--nav-txt-clr);
		padding: var(--spacing-xs) 0px;
		margin:  0px var(--spacing-md);
	}
	
	nav.navbar .navbar-nav .nav-link:before{ transition: width 0.2s; }
	
	/*FOOTER*/
	footer{ padding: var(--spacing-xxl) var(--spacing-xl) 0px;}
	
	footer .footer-img-wrap{ display: block;}
	
	/*TEKST*/
	h1 {
		font-size: var(--font-size-xxxxxl);
		padding: var(--spacing-lg) 0px;
	}

	h2 {font-size: var(--font-size-xxxxxl)}

	h3 {font-size: var(--font-size-xxxxl);}

	h4 {font-size: var(--font-size-xxl);}

	h5 {font-size: var(--font-size-xxl);}

	p, li, a{ font-size: 1.4rem;}
	
	/*HEADER*/
	.banner h1{
		font-family: var(--nachelle);
		font-size: var(--font-size-xxxl);
	}

	.banner .banner-sub-txt {
		top: -30px;
		font-size: var(--font-size-xl);
	}
	
	.banner .banner-wrap{ margin-left: 10%;}

	.banner span.--mailman-font{ font-size: var(--font-size-lg);}
	
	/*small banner*/
	.small-banner h1{
		padding-left: var(--spacing-xl);
		padding-right: var(--spacing-xl);
	}
	
	/*basic content blok*/
	.basic-content-block .--alt-title {
		font-size: var(--font-size-xxxxl);
		color: var(--white-100);
		position: relative;
	}
	
	.basic-content-block .--alt-title:after{ bottom: 20px;}
	
	.--alt-title div {
		position: relative;
		top: -25px;
	}
	
	.basic-content-block.alt-gap > div > div{ gap: var(--spacing-xxxl);}
}