/*
Theme Name: Bakker&Verkuijl
Theme URI: https://www.bakkerverkuijl.nl
Author: Opolo Webdesign
Author URI: https://www.opolo.nl/bakker-verkuijl/
Description: Theme created for Bakker&Verkuijl
Version: 2.0.0
*/

@import url('//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css');
@import 'css/style-colors.css';
@import 'css/style-inline.css';

@font-face {
	font-family: 'Aleo';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/c4mh1nF8G8_swAj50xVs.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Aleo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/c4mv1nF8G8_swA3J0Q.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/UcCm3FwrK3iLTcvnUwQT9g.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
	outline:none !important; box-shadow:none !important; touch-action:pan-x pan-y !important;
	i { width:auto !important; }
}

html { margin:0 !important; }

body {
	font-family:"Inter", sans-serif;
	font-optical-sizing:auto;
	font-style:normal;
	margin:0;
	height:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
body.admin-bar {
	padding-top:var(--wp-admin--admin-bar--height);
	.sticky-top { top:var(--wp-admin--admin-bar--height); }
}

main { flex:1; }

h1,h2,h3,h4,h5,h6 {
	font-family:"Aleo", serif;
	font-optical-sizing:auto;
	font-style:normal;
	line-height:1.3;
}
h6 { font-weight:900; }

a:not(.btn) {
	text-decoration:none; color:inherit;
	&:hover { text-decoration:underline; }
}

img.img-fluid, #map-canvas { aspect-ratio:60/9; width:100%; object-fit:cover; }
img.thumbnail {
	aspect-ratio:16/9; width:100%; object-fit:cover; border:1px solid var(--bv-green);
	&:hover { border:1px solid var(--bv-red); }
}

.mainmenu {
	a.nav-link { font-weight:bold; }
	a.active { text-decoration:underline; }
	/*.nav-item.dropdown:hover ul.dropdown-menu { display:block; }*/
	.dropdown-item.active, .dropdown-item:focus { background-color:var(--bv-green); text-decoration:none; }
	.navbar-nav .nav-link.dropdown-toggle::after { vertical-align:-6px; margin:0 0 0 10px; content:"\f107"; font:var(--fa-font-solid); border:none; }

	@media (max-width:991px) {
		.dropdown-menu {
			.dropdown-toggle::after { vertical-align:0; margin:0 0 0 10px; content:"\f107"; font:var(--fa-font-solid); border:none; }
			border:0; margin-top:.125rem;
			.submenu a { padding-left:calc(var(--bs-dropdown-item-padding-x)*2); margin-top:.125rem; }
		}
	}

	@media (min-width:992px) {
		.dropdown-menu li { position:relative; }
		.dropdown-menu .submenu { display:none; position:absolute; left:100%; top:-9px; }
		.dropdown-menu .submenu-left { right:100%; left:auto; }
		.dropdown-menu > li:hover > .submenu { display:block; }
		.dropdown-menu .dropdown-toggle::after { vertical-align:0; margin:0 0 0 10px; content:"\f105"; font:var(--fa-font-solid); border:none; }
	}
}

.logo { max-width:90%; }
.navbar-toggler { border:none; }

.usps {
	.fa-check {
		color:var(--bv-green);
		&:hover { color:var(--bv-red); }
	}
	a {
		text-decoration:underline; text-decoration-color:var(--bv-green);
		&:hover { text-decoration-color:var(--bv-red); }
	}
}

.content {
	a:not(.btn) {
		text-decoration:underline; color:var(--bv-green);
		&:hover { text-decoration-color:var(--bv-red); }
	}

	blockquote { border-left:3px solid var(--bv-green); padding-left:1rem; font-style:italic; }
	ul { padding-left:0; }
	ul li { list-style:none; }
	ul li::before { content:"\f00c"; font:var(--fa-font-solid); font-weight:900; margin-right:8px; color:var(--bv-green); }
	.has-text-align-center { width:100%; text-align:center; }
	.mark, mark { padding:0; }
	.wp-caption-text, .wp-element-caption { color:inherit !important; max-width:60% !important; margin:1rem auto 2rem auto; text-align:center; font-style:italic; }
	.wp-block-image.size-full img { width:100%; height:auto; }

	iframe[src*="youtube"] { width:100%; height:100%; }
	*:has(> iframe[src*="youtube"]) { aspect-ratio:16/9; width:100%; object-fit:cover; }
}

/* accordion */
.accordion-button:not(.collapsed) { color:var(--bs-dark); background-color:var(--bv-green); }
.accordion-body a {
	text-decoration:underline; color:var(--bv-green);
	&:hover { text-decoration-color:var(--bv-red); }
}

/* formidable */
.frm_forms {
	.frm_screen_reader, .frm_primary_label, .frm_required { display:none; }
	.frm_error_style { color:var(--bs-danger); }
	.frm_error { font-size:13px; color:var(--bs-danger); }

	.form-field {
		&:has(textarea):not(:has(.frm_error)) { max-height:5lh; }
		input:is([type="text"], [type="tel"], [type="email"]) {
			background:none; border:none; border-bottom:1px solid var(--bs-dark); color:inherit; width:100%; padding:0.375rem 0;
			&::placeholder { color:var(--placeholder-color); }
		}
		textarea {
			background:none; resize:none; field-sizing:content; min-height:5lh; background:none; border:none; border-bottom:1px solid var(--bs-dark); color:inherit; padding:0.375rem 0; width:100%;
			&::placeholder { color:var(--placeholder-color); }
		}
		button { margin-top:0.5rem; }
	}

	.vertical_radio {
		color:var(--placeholder-color); padding-top:0.25rem;
		.frm_primary_label { display:block; margin-bottom:0.25rem; }
		.frm_radio:last-child { padding-bottom:0.375rem; border-bottom:1px solid var(--bs-dark); }

		label {
			display:flex; align-items:center; gap:1rem; margin-bottom:0.25rem;
			input[type="radio"] {
				appearance:none; -webkit-appearance:none; width:1.25rem; height:1.25rem; margin:0; flex-shrink:0; border:1px solid var(--placeholder-color); border-radius:50%; background:transparent;
				&:checked { border-color:var(--placeholder-color); background:radial-gradient(circle, var(--placeholder-color) 0 5px, transparent 6px); }
			}
		}
	}
}

/* activecampaign */
._inline-form {
	._html-code, ._form-label, ._form-branding { display:none; }
	._form-title { font-size:inherit; line-height:inherit; font-family:inherit; font-weight:inherit; }
	input:is([type="text"], [type="tel"], [type="email"]) { background:none; border:none; border-bottom:1px solid var(--bs-light); color:inherit; width:100%; padding:0.375rem 0; }
	button {
		margin-top:0.5rem; border:none; background:var(--bs-light); color:var(--bs-dark); border-radius:var(--bs-border-radius); padding:0.4375rem 0.8125rem; text-transform:uppercase;
		&:hover { background:var(--bs-border-color); }
	}
	._error-inner { color:var(--bs-danger); font-size:13px; }
}

/* carousel */
.carousel-control-next, .carousel-control-prev { width:5%; }
.fa-angle-left, .fa-angle-right { font-size:60px; }

.bg-dark {
	ul {
		padding:0;
		li { list-style:none; }
	}
	img.footer { -webkit-filter:invert(100%); filter:invert(100%); }
}

@media (max-width: 1399px) {
	img.img-fluid, #map-canvas { aspect-ratio:30/9; }
}

@media (max-width: 767px) {
	.sticky-top { margin-top:-64px; }
	.fa-bars { font-size:36px; }
	img.img-fluid, #map-canvas { aspect-ratio:20/9; }
	.col-md-3 { border:none; }
}

@media (min-width: 992px) {
	.ps-lg-5 { border-left:1px solid var(--bs-light); }
}