/**
 * 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: #004786;
    --secondary-color: #eeeeee;
    --primary-font-color: #004786;
    --primary-link-color: hsl(198, 8%, 31%);
    --primary-link-color-hover: hsl(198, 8%, 21%);
	
	--ev-event-filter-buttons-wrapper-padding: 0;
    --default-border-radius: 10px;
	
	--ev-event-filter-button-font-color: var(--primary-color);
	--ev-event-filter-button-active-font-color: var(--primary-color);
	--ev-event-filter-button-active-font-color-hover:var(--primary-color);
	
	--ev-event-filter-button-padding-block: 0.5em;
	--ev-event-filter-button-padding-inline: 0 1.5em;		
	--ev-event-filter-button-border-radius:none;
	
	--ev-event-filter-button-box-shadow: none;
	--ev-event-filter-button-active-box-shadow: none;
	--ev-event-filter-button-hover-background-color: transparent;	
	--ev-event-filter-button-active-background-color: transparent;	
}

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

/* Heading font size */
/* This includes a Divi hack to prevent styling of the wireframe page builder */
h1:not(
	.media-modal-content h1,
	.et-vb-page-bar h1,
	.et-vb-sidebar h1,
	.et-vb-modal h1,
	.media-modal-content h1,
	.et-vb-page-bar,
	.et-vb-sidebar,
	.et-vb-modal h1
) {}

h2:not(
	.media-modal-content h2,
	.et-vb-page-bar h2,
	.et-vb-sidebar h2,
	.et-vb-modal h2,
	.media-modal-content h2,
	.et-vb-page-bar h2,
	.et-vb-sidebar h2,
	.et-vb-modal h2
) {}

h3:not(
	.media-modal-content h3,
	.et-vb-page-bar h3,
	.et-vb-sidebar h3,
	.et-vb-modal h3,
	.media-modal-content h3,
	.et-vb-page-bar h3,
	.et-vb-sidebar h3,
	.et-vb-modal h3
) {}

h4:not(
	.media-modal-content h4,
	.et-vb-page-bar h4,
	.et-vb-sidebar h4,
	.et-vb-modal h4,
	.media-modal-content h4,
	.et-vb-page-bar h4,
	.et-vb-sidebar h4,
	.et-vb-modal h4
) {}

h5:not(
	.media-modal-content h5,
	.et-vb-page-bar h5,
	.et-vb-sidebar h5,
	.et-vb-modal h5,
	.media-modal-content h5,
	.et-vb-page-bar h5,
	.et-vb-sidebar h5,
	.et-vb-modal h5
) {}

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

/* Try to animate the html details tag when opening or closing */
@supports selector(::details-content) {
	/* don't add margin/padding to this, add it to the actual
	stuff inside the details content */

	details::details-content {
		block-size: 0;
		
		@media (prefers-reduced-motion: no-preference) {
			transition: block-size: 300ms, content-visibility 300ms;
			transition-behavior: allow-discrete;			
		}
	}

	details:open::details-content {
		block-size: auto;
	}	
}

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

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

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

.main-hp-text-container {
 	container-type: inline-size;
	container-name: text-block-homepage;
}

/* If the container is larger than 700px */
@container text-block-homepage (width < 565px) {
  .main-hp-texts-block p {
    font-size: 3cqw;
	 line-height:2;
  }
}

/* Responsive Stijlen voor Smartphones in portrait modus */
@media all and (max-width: 768px) {	
	.main-hp-texts-block p {
		font-size: revert;
		line-height: revert;
	}
}

.grid-title-block {
	aspect-ratio: 1 / 1;
}

.pa-blog-image-1-1 .entry-featured-image-url {
  padding-top: 100%;
  display: block;
}
.pa-blog-image-1-1 .entry-featured-image-url img {
  position: absolute;
  height: 100% !important;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

.project-blog {
	
}

.project-blog article h2.entry-title {
	display: none;
}

.pa-blog-image-1-1 article h2.entry-title {
	display: none;
}


.ev-event-item[hidden] {
    display: none !important;
}

.ev-filter-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--ev-event-filter-buttons-wrapper-column-gap, 0.5em);
    row-gap: var(--ev-event-filter-buttons-wrapper-row-gap, 0.5em);
    border: var(--ev-event-filter-button-wrapper-border, 0);
    padding: var(--ev-event-filter-buttons-wrapper-padding, 0.5em);
}

.ev-filter-button-wrapper .ev-filter-btn {
    cursor: pointer;
    background: var(--ev-event-filter-button-background-color, transparent);
    border: var(--ev-event-filter-button-border, 0);
    border-radius: var(--ev-event-filter-button-border-radius, 0.25rem);
    padding-inline: var(--ev-event-filter-button-padding-inline, 1rem);
    padding-block: var(--ev-event-filter-button-padding-block, 0.25rem);
    box-shadow: var(
        --ev-event-filter-button-box-shadow,
        0 0 0.3rem rgb(0 0 0 / 0.2)
    );

    text-transform: var(--ev-event-filter-button-text-style, normal);
    color: var(--ev-event-filter-button-font-color, #000000);
    font-weight: var(--ev-event-filter-button-font-weight, normal);
    font-size: var(--ev-event-filter-button-font-size, normal);
}

.ev-filter-button-wrapper .ev-filter-btn:hover {
    background-color: var(
        --ev-event-filter-button-hover-background-color,
        #cccccc
    );
    color: var(--ev-event-filter-button-hover-font-color, #000000);
}

.ev-filter-button-wrapper .ev-filter-btn:focus,
.ev-filter-button-wrapper .ev-filter-btn:active,
.ev-filter-button-wrapper .ev-filter-btn.active {
    pointer-events: none;
    background: var(--ev-event-filter-button-active-background-color,transparent);
    box-shadow: var(
        --ev-event-filter-button-active-box-shadow,
        0 0 0.5rem rgb(0 0 0 / 0.2)
    );
    color: var(--ev-event-filter-button-active-font-color, #ffffff);
	font-weight: 800;
}

.ev-filter-button-wrapper .ev-filter-btn.active:hover,
.ev-filter-button-wrapper .ev-filter-btn.active:focus {
    background-color: var(
        --ev-event-filter-button-hover-background-color,
        #000000
    );
	font-weight: 700;

}

/* Flex-items do not respond to the html attribute 'hidden', so we have to do it ourselves.*/
.ev-event-item-container.ev-event-grid-container .ev-event-item[hidden] {
    display: none !important;
}

/* Lightbox for project images */
.lity-image img {
    max-width: 95% !important; 
}

.lity.lity-opened {
	z-index: 99999; /* Zorgt dta de lightbox ook over het menu geplaatst wordt */
}


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