/**
 * Theme Name: bureau Peppr
 * Theme URI: https://bureaupeppr.nl
 * Description: Subthema voor Divi
 * Author: Bureau Peppr | Theo Huitema
 * Author URI: https://bureaupeppr.nl
 * Author Email: mail@bureaupeppr.nl
 * Template: Divi
 * Version: 1.0.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Tags: Bureau Peppr, branding, ontwerp, web, Divi
 *
 * @format
 */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    interpolate-size: allow-keywords;
	
    --primary-color: #15311a;
    --secondary-color: #9ec187;
	--tertiary-color: #f8fafc;
	--subtitle-a: #9ec187;
	--subtitel-b: #f8fafc
    --primary-font-color: #1f1f1f;
    --primary-link-color: hsl(198, 8%, 31%);
    --primary-link-color-hover: hsl(198, 8%, 21%);
}

html,
body {
    font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.1736)), 1.125rem);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
	scrollbar-gutter: stable;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-block-size: 100svb;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Make images easier to work with */
img,
picture {
    display: block;
    max-width: 100%;
}

/* Transitions */
.nav > li > a,
a,
a:hover,
.btn,
.btn:hover,
.button,
.button:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Line height reset for ordered and unordered lists */
ol,
ul {
    line-height: revert !important;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

p {
	text-wrap: pretty;
}

p:empty {
	display: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

/* DIVI /*
/* CONTENT & POSTS */
/* Breedte van de Post Content module aanpassen van 80% (standaard) naar 100% */
.et-l .et-l--post .et_builder_inner_content .et_pb_row {
    width: 100%;
}

.et_pb_column.et_pb_column_empty {
	display: flex;
}

/* HELPERS */
.secondary-color {
	color: var(--secondary-color);
}

.subtitle-green {
	color: var(--subtitle-a);
}

/* MENU */
ul#menu-hoofdmenu {
	gap: 1em;
	flex-wrap: nowrap;
}

ul#menu-hoofdmenu li a {
	padding: 0;
    padding-inline: 1em;
    padding-block: 0.75em;
	border-radius: 14px;
}

ul#menu-hoofdmenu li a:hover {
	background-color: #ffffff;
}

ul#menu-hoofdmenu li.current_page_item a,
ul#menu-hoofdmenu li a:active {
	background-color: var(--secondary-color);
	color: #ffffff;
}

ul#menu-hoofdmenu li.hide-on-desktop {
	display: none;
}

/* Mobiel menu */
@media only screen and (max-width: 980px) {
    /* Mobiel menu fixed bij scrollen */
    .et_fixed_nav #main-header {
        position: fixed !important;
        top: 0 !important;
    }

    /* Verberg de standaard menurand aan de bovenkant van het uitklapmenu */
    .et_mobile_menu {
        border-top: none !important;
		margin-top: 40px;
    }

    /* Position van het mobiele menu */
    .nav li ul {
        /* top: [aantal px/rems/em] !important; */
    }

    /* Verander de hamburger in een X wanneer er op geklikt wordt */
    .mobile_nav.opened .mobile_menu_bar::before {
        content: '\4d';
    }

    /* Prepareer het menu icoon voor rotatie wanneer er op geklikt wordt */
    .mobile_menu_bar::before {
        transition: all 0.4s ease;
        transform: rotate(0deg);
        display: block;
        font-size: 3rem;
        left: 1rem;
    }

    /* Roteer het menu icoon wanneer er op geklikt wordt */
    .mobile_nav.opened .mobile_menu_bar::before {
        transition: all 0.4s ease;
        transform: rotate(90deg);
        display: block;
    }
	
	/* Wissel knop en hamburger om van plaats */	
	.et_mobile_nav_menu {
		display: flex;
		position: absolute;
		right: 0;
		/*top: calc(60px - 4em) */;
		top: 50%;
  		transform: translateY(-50%);
		justify-content: flex-end;
	}
	
	.et_pb_button_module_wrapper:has(.header-menu-button-plan ) {
		width: 100%;
		top: 50%;
  		transform: translateY(calc(-50% - 4px));
		right: calc(0% + 75px);
	}
	
	.et_mobile_nav_menu:has(.mobile_nav.opened ) {
		width: 100%;
	}
	
	.mobile_nav .et_mobile_menu {
		opacity: 0;
	}
	
	.mobile_nav.opened .et_mobile_menu {
		opacity: 1;
	}
}

@media only screen and (max-width: 767px) {
	.et_pb_button_module_wrapper:has(.header-menu-button-plan ) {
		transform: translateY(calc(-50% - 12px));		
		right: calc(0% + 50px);		
	}
	
	.et_pb_button_module_wrapper:has(.header-menu-button-plan.iphone ) {
		transform: translateY(calc(-50% - 1px));		
		right: calc(0% + 50px);		
	}	
}

/* Bullet checklist (vervang de standaard bullets in unordered list), maar alleen bij li-elementen zonder class */
ul:has(li:not([class])) {
	--icon-space: 1.3em;
	--icon-size-number: 1.5;
	--icon-size: calc(var(--icon-size-number) * 1em);
	--icon-translate-multiplier: 0.15;
	list-style: none;
	padding: 0;
	line-height: 1.4;
}

:not(.et_pb_error_message) ul li:not([class]) {
 	padding-left: calc( var(--icon-space) * var(--icon-size-number) );
	line-height: 1.4;
}

:not(.et_pb_error_message) ul li:not([class]):before {
	content: '\52' !important; /* Check */
	color: inherit;
	font-family: 'ETmodules' !important;
	font-size: var(--icon-size) !important;
	display: inline-block;
	margin-left: calc( var(--icon-space) * -1 );
  	width: var(--icon-space);
	transform: translatey(calc(var(--icon-size) * var(--icon-translate-multiplier)));
}

.et_pb_error_message ul li:not([class]):before {
	content: '\73' !important;
	color: red !important; /* Warning */
	font-family: 'ETmodules' !important;
	font-size: var(--icon-size) !important;
	display: inline-block;
	margin-left: calc( var(--icon-space) * -1 );
  	width: var(--icon-space);
	transform: translatey(calc(var(--icon-size) * var(--icon-translate-multiplier)));
}

.et_pb_image.team-image:after {
	content: attr(title);
	position: absolute;
	width: 90%;
    bottom: 5%;
	left: 10%;
	font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.3472)), 1.25rem);
  	min-height: 0vw; /* Safari hack for clamp font-size */
	text-align: left;
	font-weight: 600;
	line-height: 1em;
    color: #ffffff;
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.45);
	
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.team-read-more {
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	
}

.team-member-container:hover .team-read-more{
	transform: translatey(-20px);
	opacity: 1;
}

.team-member-container:hover .et_pb_image.team-image:after {
	transform: translatey(-25px);
}

.routekaart-stap:after {
	content: 'Klik voor meer...';
	position: absolute;
	bottom: 0;
	color: #fff;
	font-size: smaller;
	opacity: 0;
	transform: scale(0.5);
	
	-webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
	
	
}

.routekaart-stap-group:hover .routekaart-stap:after {
	opacity: 1;
	transform: scale(0.8);
}

/* PLUGIN OVERRIDES */
/* Easy Accordion */
.faq .sp-easy-accordion >.sp-ea-single {
	border-radius: 14px;
	margin-bottom: 1em !important;
}

.faq .sp-easy-accordion >.sp-ea-single .ea-header {
	padding-bottom: 0;
}

.faq .sp-easy-accordion >.sp-ea-single .ea-header a {
	font-size: 1.5rem !important;
	padding-block: 1em;
}

.faq .sp-easy-accordion >.sp-ea-single .ea-header a i.ea-expand-icon {
	font-size: 1.5rem !important;
}

.faq .sp-easy-accordion>.sp-ea-single .ea-body{
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
}

.faq .sp-easy-accordion >.sp-ea-single>.ea-header a {
    color: #1f1f1f;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

/* Popups for Divi */
.da-close.evr-close {
	font-size: 3em !important;
	margin-top: 20px;
	margin-right: 20px;
}

/* Responsive Stijlen voor Smartphones */
@media all and (max-width: 767px) {
	.team-popup + .da-close-wrap.evr-close_wrap .da-close.evr-close {
		color: #ffffff !important;
		margin-top: 1em;
		margin-right: 1em;		
	}
	
}

/* STANDAARD BREAKPOINTS */
/* Responsive Stijlen voor desktop en groter */
@media all and (min-width: 1405px) {
}
/* Responsive Stijlen voor standaard desktop alleen */
@media all and (min-width: 1100px) and (max-width: 1405px) {
}
/* Responsive Stijlen voor Tablet en kleiner */
@media all and (max-width: 980px) {
}
/* Responsive Stijlen voor Tablets */
@media all and (min-width: 768px) and (max-width: 980px) {
}
/* Responsive Stijlen voor Smartphones */
@media all and (max-width: 767px) {
}
/* Responsive Stijlen voor Smartphones in portrait modus */
@media all and (max-width: 479px) {
}