.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}


/* =========================== Scroll To Top =========================== */

.scroll--wcreate {
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    transition: 0.8s ease-in-out;
}

.scrollToTop {
    position: fixed;
	right: 2%;
	bottom: 5%;
    display: none;
    transition: 0.5s ease;
    z-index: 5;
}

a.scrollToTop svg {
    width: 50px;
    transition: 0.8s ease-in-out;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}

.pijl{
    fill: var(--color-white);
}

.scroll--wcreate:hover .pijl{
	fill: var(--color-primary) !important;
	transition: 0.8s ease;
}

a.scrollToTop:hover .scroll--wcreate{
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
	transition: 0.8s ease;
}

/* =========================== Algemeen =========================== */

body {
  font-size: var(--font-size);
  margin: 0;
  font-family: "Geologica", sans-serif;
  overflow-x: hidden;
  font-weight:300;
}

.m--i--r{position: relative;}

.h--100p {height: 100%;}

.w--container {
  display: block;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);
}

.w--container.medium {
  display: block;
  width: 100%;
  max-width: calc(var(--container-width) * 0.85);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);  
}

.w--container.small {
  display: block;
  width: 100%;
  max-width: calc(var(--container-width) * 0.7);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);  
}

.pl--container {
    padding-left: calc(0% + var(--spacing-x));
}

/* =========================== Typografie =========================== */


p{font-size: var(--font-size)}
.f--md{font-size: var(--font-size-h4)}
.f--l{font-size: var(--font-size-h3)}
.f--xl{font-size: var(--font-size-h2)}
.f--xxl{font-size: var(--font-size-h1)}

.font--thin { font-weight: 100; }
.font--light { font-weight: 300; }
.font--normal { font-weight: 400; }
.font--medium { font-weight: 500; }
.font--semibold { font-weight: 600; }
.font--bold { font-weight: 700; }
.font--black { font-weight: 900; }

.text--primary { color: var(--color-primary); }
.text--secondary { color: var(--color-secondary); }
.text--white { color: var(--color-white); }
.text--black { color: var(--color-black); }

/* =========================== Achtergrondkleuren =========================== */
.bg--primary { background-color: var(--color-primary); }
.bg--secondary { background-color: var(--color-secondary); }
.bg--white { background-color: var(--color-white); }
.bg--black { background-color: var(--color-black); }
.bg--gray-100 { background-color: var(--color-gray-100); }
.bg--gray-200 { background-color: var(--color-gray-200); }
.bg--gray-500 { background-color: var(--color-gray-500); }

/* =========================== Padding & Margin =========================== */

.p--0{padding: 0%;}
.p--1{padding:1%;}
.px--1, .pl--1{padding-left:1%;}    
.px--1, .pr--1{padding-right:1%;}
.py--1, .pt--1{padding-top:1%;}
.py--1, .pb--1{padding-bottom:1%;}
.p--2{padding:2%;}
.px--2, .pl--2{padding-left:2%;}    
.px--2, .pr--2{padding-right:2%;}
.py--2, .pt--2{padding-top:2%;}
.py--2, .pb--2{padding-bottom:2%;}
.p--5{padding:5%;}
.px--5, .pl--5{padding-left:5%;}
.px--5, .pr--5{padding-right:5%;}
.py--5, .pt--5{padding-top:5%;}
.py--5, .pb--5{padding-bottom: 5%;}
.p--10{padding:10%;}
.px--10, .pl--10{padding-left:10%;}
.px--10, .pr--10{padding-right:10%;}
.py--10, .pt--10{padding-top:10%;}
.py--10, .pb--10{padding-bottom: 10%;}
.p--15{padding:15%;}
.px--15, .pl--15{padding-left:15%;}
.px--15, .pr--15{padding-right:15%;}
.py--15, .pt--15{padding-top:15%;}
.py--15, .pb--15{padding-bottom: 15%;}
.p--20{padding:20%;}
.px--20, .pl--20{padding-left:20%;}
.px--20, .pr--20{padding-right:20%;}
.py--20, .pt--20{padding-top:20%;}
.py--20, .pb--20{padding-bottom: 20%;}


.m--auto{margin: auto;}
.m--0{margin:0%;}
.mx--0, .ml--0{margin-left:0%;}
.mx--0, .mr--0{margin-right:0%;}
.my--0, .mt--0{margin-top:0%;}
.my--0, .mb--0{margin-bottom:0%;}
.m--2{margin:2%;}
.mx--2, .ml--2{margin-left:2%;}
.mx--2, .mr--2{margin-right:2%;}
.my--2, .mt--2{margin-top:2%;}
.my--2, .mb--2{margin-bottom:2%;}
.m--5{margin:5%;}
.mx--5, .ml--5{margin-left:5%;}
.mx--5, .mr--5{margin-right:5%;}
.my--5, .mt--5{margin-top:5%;}
.my--5, .mb--5{margin-bottom: 5%;}
.m--10{margin:10%;}
.mx--10, .ml--10{margin-left:10%;}
.mx--10, .mr--10{margin-right:10%;}
.my--10, .mt--10{margin-top:10%;}
.my--10, .mb--10{margin-bottom: 10%;}

.-mt--10{margin-top:-10%}
.-ml--35{margin-left:-35%}
.-ml--45{margin-left:-45%}
.-ml--10{margin-left:-10%}
.-ml--15{margin-left:-15%}



/* =========================== Randen & Schaduwen =========================== */
.rounded--sm { border-radius: 0.125rem; } /* 2px */
.rounded--md { border-radius: 0.375rem; } /* 6px */
.rounded--lg { border-radius: 0.5rem; } /* 8px */
.rounded--xl { border-radius: 0.75rem; } /* 12px */
.rounded--2xl { border-radius: 1rem; } /* 16px */

.shadow--sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow--md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow--lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow--xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); }

/* =========================== Flexbox & Grid =========================== */

.f--r{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.f--r--fs{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.a--i {display: flex; align-items: center;}
.a--str {align-items: stretch;}
.a--s {align-items: flex-start;}
.a--e {align-items: flex-end;}

.j--c {justify-content: center;}
.j--s {justify-content: flex-start;}
.j--e {justify-content: flex-end;}
.j--b{justify-content: space-between;}


.f--c {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Specifiek gedrag voor 2 kolommen */
.f--r:has(.f--c:nth-child(2)) .f--c {
    flex: 1 1 calc(50% - 10px); 
    max-width: calc(50% - 10px);
}

/* Specifiek gedrag voor 3 kolommen */
.f--r:has(.f--c:nth-child(3)) .f--c {
    flex: 1 1 calc(33.33% - 10px); 
    max-width: calc(33.33% - 10px);
}

/* Specifiek gedrag voor 4 kolommen */
.f--r:has(.f--c:nth-child(4)) .f--c {
    flex: 1 1 calc(25% - 10px); 
    max-width: calc(25% - 10px);
}

/* Specifiek gedrag voor 5 kolommen */
.f--r:has(.f--c:nth-child(5)) .f--c {
    flex: 1 1 calc(20% - 10px); 
    max-width: calc(20% - 10px);
}


.f--c--1{flex: 0.1;}
.f--c--2{flex: 0.2;}
.f--c--3{flex: 0.3;}
.f--c--4{flex: 0.4;}
.f--c--6{flex: 0.6;}
.f--c--7{flex: 0.7;}
.f--c--8{flex: 0.8;}
.f--c--9{flex: 0.9;}

.grid { display: grid; }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-4 { gap: 1rem; }

/* =========================== Breadcrumbs =========================== */
.breadcrumbs {
    padding: 1rem 0;
    font-size: 0.9rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: inline;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--animate);
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item.active {
    color: var(--colorBlack);
}

.breadcrumb-separator {
    display: inline;
    margin: 0 0.5rem;
    color: var(--color-gray-500);
}

/* Yoast breadcrumbs styling */
.yoast-breadcrumbs {
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* =========================== Images =========================== */

img{width: 100%;}

.fit-cover{
    width: 100%;
    object-fit: cover;
}

.auto--size{
    height:100%;
    object-fit:cover;
}

/* =========================== Display Utilities =========================== */
.d--none { display: none; }
.d--block { display: block; }
.d--inline-block { display: inline-block; }
.d--flex { display: flex; }
.d--inline-flex { display: inline-flex; }
.d--grid { display: grid; }

/* =========================== Position Utilities =========================== */
.position--static { position: static; }
.position--relative { position: relative; }
.position--absolute { position: absolute; }
.position--fixed { position: fixed; }
.position--sticky { position: sticky; }

/* =========================== Width & Height Utilities =========================== */
.w--25 { width: 25%; }
.w--50 { width: 50%; }
.w--75 { width: 75%; }
.w--100 { width: 100%; }
.w--auto { width: auto; }

.h--25 { height: 25%; }
.h--50 { height: 50%; }
.h--75 { height: 75%; }
.h--100 { height: 100%; }
.h--auto { height: auto; }

.mw--100 { max-width: 100%; }
.mh--100 { max-height: 100%; }

/* =========================== Overflow Utilities =========================== */
.overflow--auto { overflow: auto; }
.overflow--hidden { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--scroll { overflow: scroll; }
.overflow-x--hidden { overflow-x: hidden; }
.overflow-y--hidden { overflow-y: hidden; }

/* =========================== Z-index Utilities =========================== */
.z--0 { z-index: 0; }
.z--10 { z-index: 10; }
.z--20 { z-index: 20; }
.z--30 { z-index: 30; }
.z--40 { z-index: 40; }
.z--50 { z-index: 50; }
.z--100 { z-index: 100; }
.z--999 { z-index: 999; }
.z--9999 { z-index: 9999; }

/* =========================== Opacity Utilities =========================== */
.opacity--0 { opacity: 0; }
.opacity--25 { opacity: 0.25; }
.opacity--50 { opacity: 0.5; }
.opacity--75 { opacity: 0.75; }
.opacity--100 { opacity: 1; }

/* =========================== Cursor Utilities =========================== */
.cursor--pointer { cursor: pointer; }
.cursor--default { cursor: default; }
.cursor--not-allowed { cursor: not-allowed; }
.cursor--grab { cursor: grab; }
.cursor--grabbing { cursor: grabbing; }


/* =========================== Line Height Utilities =========================== */
.lh--1 { line-height: 1; }
.lh--sm { line-height: 1.25; }
.lh--base { line-height: 1.5; }
.lh--lg { line-height: 2; }

/* =========================== Border Utilities =========================== */
.border { border: 1px solid var(--color-gray-200); }
.border--0 { border: 0; }
.border--top { border-top: 1px solid var(--color-gray-200); }
.border--top-0 { border-top: 0; }
.border--bottom { border-bottom: 1px solid var(--color-gray-200); }
.border--bottom-0 { border-bottom: 0; }
.border--left { border-left: 1px solid var(--color-gray-200); }
.border--left-0 { border-left: 0; }
.border--right { border-right: 1px solid var(--color-gray-200); }
.border--right-0 { border-right: 0; }

.border--primary { border-color: var(--color-primary); }
.border--secondary { border-color: var(--color-secundary); }
.border--white { border-color: var(--color-white); }
.border--black { border-color: var(--colorBlack); }

/* =========================== Transition & Animation Helpers =========================== */
.transition--all {
    transition: all var(--animate);
}

.transition--colors {
    transition: color var(--animate), background-color var(--animate), border-color var(--animate);
}

.transition--transform {
    transition: transform var(--animate);
}

.transition--opacity {
    transition: opacity var(--animate);
}

.transition--fast {
    transition-duration: var(--animate-fast);
}

.transition--slow {
    transition-duration: var(--animate-slow);
}

.hover--scale:hover {
    transform: scale(1.05);
    transition: transform var(--animate);
}

.hover--opacity:hover {
    opacity: 0.8;
    transition: opacity var(--animate);
}

.hover--shadow:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: box-shadow var(--animate);
}

.hover--lift:hover {
    transform: translateY(-5px);
    transition: transform var(--animate);
}

/* =========================== Buttons =========================== */

a{
    color:var(--colorBlack);
    text-decoration: none;
}

a:hover, a:focus-visible {
    color: var(--color-link-hover);
    transition: color var(--animate);
}

:is(.bg--primary, .bg--secondary) a {
    color: var(--color-white);
}

:is(.bg--primary, .bg--secondary) a:hover,
:is(.bg--primary, .bg--secondary) a:focus-visible {
    color: var(--color-white);
    transition: color var(--animate);
}


.btn--primary {
    color: var(--color-white);
    text-transform: uppercase;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 8px 56px;
    border-radius: 40px;
    font-size: var(--font-size);
    font-weight: 300;
    transition: 0.5s ease;
    display: inline-block;
    cursor: pointer;
    text-align:center;
}

.btn--primary:hover {
    color: #FFF;
    text-transform: uppercase;
    border: 1px solid #535353;
    background:#535353;
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}

.btn--secondary {
    color: var(--color-white);
    text-transform: uppercase;
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    padding: 8px 56px;
    border-radius: 40px;
    font-size: var(--font-size);
    font-weight: 300;
    transition: 0.5s ease;
    display: inline-block;
    cursor: pointer;
    text-align:center;
}

.btn--secondary:hover {
    color: var(--color-white) !important;
    text-transform: uppercase;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}


/* =========================== Responsive Breakpoints =========================== */
/* Breakpoints:
   xs: 0-575px (mobile)
   sm: 576px-767px (small tablets)
   md: 768px-991px (tablets)
   lg: 992px-1199px (small desktops)
   xl: 1200px-1439px (desktops)
   xxl: 1440px+ (large desktops)

   Gebruik zelf wat je nodig acht (de 811px vinden wij al heel goed)
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .d--sm-none { display: none; }
    .d--sm-block { display: block; }
    .d--sm-flex { display: flex; }
    .d--sm-inline-block { display: inline-block; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .d--md-none { display: none; }
    .d--md-block { display: block; }
    .d--md-flex { display: flex; }
    .d--md-inline-block { display: inline-block; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .d--lg-none { display: none; }
    .d--lg-block { display: block; }
    .d--lg-flex { display: flex; }
    .d--lg-inline-block { display: inline-block; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .d--xl-none { display: none; }
    .d--xl-block { display: block; }
    .d--xl-flex { display: flex; }
    .d--xl-inline-block { display: inline-block; }
}

/* Extra extra large devices (1440px and up) */
@media (min-width: 1440px) {
    .d--xxl-none { display: none; }
    .d--xxl-block { display: block; }
    .d--xxl-flex { display: flex; }
    .d--xxl-inline-block { display: inline-block; }
}

@media only screen and (max-width: 811px) {


	body {
        font-size: 1rem;
    }

    .w--m--container{
        display: block;
        max-width: var(--container-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-x);
        padding-right: var(--spacing-x);
    }

    .d--m--0{
        display: none;
    }



	/* FONT SIZE*/
	
	p{font-size: 1rem;}
	.f--md{font-size:1.05rem;}
	.f--l{font-size:1.1rem;}
	.f--xl{font-size:1.3rem;}
	.f--xxl{font-size:1.6rem;}	

    /* MOBILE WIDTH */

    .w--m--100{
        width: 100%;
    }

    .w--m--50{
        width: 50%;
    }

    /* MOBILE FLEX */

    .f--c {
		flex: auto;
		width: 100%;
	}

    .f--r:has(.f--c:nth-child(n)) .f--c {
        flex: 1 1 100%; 
        max-width: 100%;
    }

    .f--c--1, .f--c--2, .f--c--3, .f--c--4, .f--c--5, .f--c--6, .f--c--7, .f--c--8, .f--c--9 {
		flex: auto;
		width: 100%;
	}

    .column--reverse{
        flex-direction: column-reverse;
    }

    /* MOBILE PADDING */

    .p--m--0{
        padding: 0px;
    }

    .p--m--5{
        padding: 5%;
    }

    .px--m--5, .pl--m--5{
        padding-left:5%;
    }
    
    .px--m--5, .pr--m--5{
        padding-right:5%;
    }
    
    .py--m--5, .pt--m--5{
        padding-top:5%;
    }
    
    .py--m--5, .pb--m--5{
        padding-bottom: 5%;
    }

    .py--m--10, .pb--m--10{
        padding-bottom: 10%;
    }    

    .py--m--10, .pt--m--10{
        padding-top: 10%;
    }  

    /* MOBILE margin */
	
    .m--m--0{
        margin: 0px;
    }

    .m--m--5{
        margin: 5%;
    }    
	
	  /* KNOPPEN */

    .knop--zwart {
        font-size: 0.9rem;
    }
    
    .knop--zwart:hover {
        font-size: 0.9rem;
    }
	
	.btn--container {
		margin-top: 1rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.btn--container a{
		margin-top: 1rem;
	}	
    
    
    .btn--primary, .btn--primary-inverse, .btn--secundary {
        font-size: 0.9rem;
    }

    .btn--primary:hover, .btn--primary-inverse:hover, .btn--secundary:hover {
        font-size: 0.9rem;
    }

    .btn--primary, .btn--secondary{
        padding:16px 32px;
    }

}