/**
 * Theme Name: bureau Peppr
 * Theme URI: https://bureaupeppr.nl
 * Description: Subthema voor Divi, gemaakt voor Marika Art
 * 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 {
    --primary-color: #492e8c;
    --secondary-color: #aae4e9;
    --primary-font-color: #2f3134;
    --primary-link-color: hsl(257, 51%, 36%);
    --primary-link-color-hover: hsl(257, 51%, 56%);
}

html,
body {	
   font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.6944)), 1.5rem) !important;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
    -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;
}

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

/* Set core body defaults */
body {
    min-height: 100vh;
    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;
}

/* Heading font size */
h1:not(.media-modal-content) {
    font-size: clamp(
        2rem,
        calc(2rem + ((1vw - 0.48rem) * 1.3889)),
        3rem
    ) !important;
    min-height: 0vw;
}

h2:not(.media-modal-content) {
    font-size: clamp(
        1.8rem,
        calc(1.8rem + ((1vw - 0.48rem) * 0.625)),
        2.25rem
    ) !important;
    min-height: 0vw;
}

h3:not(.media-modal-content) {
    font-size: clamp(
        1.2rem,
        calc(1.2rem + ((1vw - 0.48rem) * 0.4167)),
        1.5rem
    ) !important;
    min-height: 0vw;
}

h4:not(.media-modal-content) {
    font-size: clamp(
        1rem,
        calc(1rem + ((1vw - 0.48rem) * 0.1736)),
        1.125rem
    ) !important;
    min-height: 0vw;
    font-weight: bold;
}

h5:not(.media-modal-content) {
    font-size: clamp(
        1rem,
        calc(1rem + ((1vw - 0.48rem) * 0.1736)),
        1.125rem
    ) !important;
    min-height: 0vw;
}

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

a:not([class]):hover {
    text-decoration-skip-ink: auto;
    color: var(--primary-link-color-hover); /* currentColor */
}

footer .peppr-footer .peppr-footer-links a{
	color: #fff;
}

footer .peppr-footer .peppr-footer-links a:hover{
	color: #e2e3e5;
}

footer .peppr-footer .peppr-footer-links-copyright a{
	color: #909498;
}

footer .peppr-footer .peppr-footer-links-copyright a:hover{
	color: #e2e3e5;
}

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

/* ReCaptcha */
.grecaptcha-badge { visibility: hidden !important; }

/* MENU */
/* Desktop menu */
@media only screen and (min-width: 980px) {
	nav ul#menu-hoofdmenu {
		gap: clamp(1em, calc(1rem + ((1vw - 0.48em) * 1.3889)), 2em);
	}
}
nav ul#menu-hoofdmenu li a {
    font-size: 2.5em;
	font-weight: 700;
}

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

    /* Position van het mobiele menu */
    .nav li ul {
        /* top: [aantal px/rems/em] !important; */
    }
	
	.et_mobile_menu li a {
		font-size: 2rem;
	}

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

/* LAY OUT */
@media all and (min-width: 1280px) {
	.marika-header-afbeelding {
		width: 100%;
		min-width:fit-content;
	}
}

@media all and (min-width: 980px) {
	#marika-art-bestelformulier p.et_pb_contact_field {
		display: flex;
		align-items: center;
	}
	
	#marika-art-bestelformulier p.et_pb_contact_field label { 
		margin-bottom: 0;
	}
	
}


/* 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) {
}