@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

body {
    font-family: "Work sans", sans-serif;
    font-size: 17px !important;
}

.vh-100 {
    min-height: 100vh !important;
    height: 100% !important;
}

.nunito {
    font-family: "Nunito", sans-serif;
}

.form-label {
    font-size: 17px !important;
}

.work-sans, .btn {
    font-family: "Work Sans", sans-serif;
}

.bricolage {
    font-family: "Bricolage Grotesque", sans-serif !important;
}

.inter {
    font-family: "Inter", sans-serif;
}

.lead {
    font-size: 17px !important;
    font-weight: normal !important;
}

.invoice {
    color: #0068ff;
}

.invoice:hover {
    color: #1b3583;
}

/* Sticky footer layout */
.layout-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.layout-main { flex: 1 0 auto; }      /* neemt resterende hoogte in */
.layout-footer { flex: 0 0 auto; }     /* niet nodig als je footer al onderaan staat */

/* Sidebar mag niet groter worden dan de viewport en kan intern scrollen */
#sidebarMenu .position-sticky { max-height: 100vh; }

/* (optioneel) net wat prettiger gedrag op mobiel als de sidebar openklapt */
@media (max-width: 767.98px) {
  #sidebarMenu { box-shadow: 0 0.25rem 1rem rgba(0,0,0,.08); }
}

.progress {
    height: 10px !important;
}

/* Alternatief: subtielere active achtergrond i.p.v. fel primair */
.toc .list-group-item.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary-border-subtle);
}

.collapse-toggle .bi { transition: transform .2s ease; }
.collapse.show ~ .list-group,
.collapse[aria-expanded="true"] ~ .list-group { /* compatibility noop */ }

.card-header .collapse-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.container-fluid {
    background-color: rgb(248,249,250)!important;
}

.btn-shadow {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.link-dark:hover {
    background-color: #f7f8fa;
}

:root {
    --blue-1: #DEF5F8;
    --blue-2: #A8D9E6;
    --blue-3: #55AAC3;
    --blue-4: #1B7B98;
    --blue-5: #0F3E4D;
    --blue-6: #0367A6;
    --blue-neon: #21CBFF;
    --green-1: #E1F8DE;
    --green-2: #ABE3AA;
    --green-3: #5EBA83;
    --green-4: #327B50;
    --green-5: #1E4637;
    --green-neon: #5EFF83;
    --yellow-1: #FEF1C2;
    --yellow-2: #FCE288;
    --yellow-3: #F6D051;
    --yellow-neon: #EFFF32;
    --purple-1: #F3EAF7;
    --purple-2: #DFCDEA;
    --purple-3: #B38DC8;
    --purple-4: #7E4B9B;
    --purple-5: #412850;
    --pink-1: #FFE8EB;
    --pink-2: #FFC9D4;
    --pink-3: #E48199;
    --pink-4: #BA4561;
    --pink-5: #4B1937;
    --pink-neon: #FF2995;
    --orange-1: #FEEDE2;
    --orange-2: #FFCBB8;
    --orange-3: #FF9070;
    --orange-4: #EF6339;
    --orange-neon: #FF5F15;
}

/* Blue */
.color-blue-1 { color: var(--blue-1); }
.bg-color-blue-1 { background-color: var(--blue-1); }

.color-blue-2 { color: var(--blue-2); }
.bg-color-blue-2 { background-color: var(--blue-2); }

.color-blue-3 { color: var(--blue-3); }
.bg-color-blue-3 { background-color: var(--blue-3); }

.color-blue-4 { color: var(--blue-4); }
.bg-color-blue-4 { background-color: var(--blue-4); }

.color-blue-5 { color: var(--blue-5); }
.bg-color-blue-5 { background-color: var(--blue-5); }

.color-blue-6 { color: var(--blue-6); }
.bg-color-blue-6 { background-color: var(--blue-6); }

.color-blue-neon { color: var(--blue-neon); }
.bg-color-blue-neon { background-color: var(--blue-neon); }

.btn-blue {
    background-color: #e7f1ff;
    color: var(--bs-primary);
}

.btn-blue:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* Green */
.color-green-1 { color: var(--green-1); }
.bg-color-green-1 { background-color: var(--green-1); }

.color-green-2 { color: var(--green-2); }
.bg-color-green-2 { background-color: var(--green-2); }

.color-green-3 { color: var(--green-3); }
.bg-color-green-3 { background-color: var(--green-3); }

.color-green-4 { color: var(--green-4); }
.bg-color-green-4 { background-color: var(--green-4); }

.color-green-5 { color: var(--green-5); }
.bg-color-green-5 { background-color: var(--green-5); }

.color-green-neon { color: var(--green-neon); }
.bg-color-green-neon { background-color: var(--green-neon); }

/* Yellow */
.color-yellow-1 { color: var(--yellow-1); }
.bg-color-yellow-1 { background-color: var(--yellow-1); }

.color-yellow-2 { color: var(--yellow-2); }
.bg-color-yellow-2 { background-color: var(--yellow-2); }

.color-yellow-3 { color: var(--yellow-3); }
.bg-color-yellow-3 { background-color: var(--yellow-3); }

.color-yellow-neon { color: var(--yellow-neon); }
.bg-color-yellow-neon { background-color: var(--yellow-neon); }

/* Purple */
.color-purple-1 { color: var(--purple-1); }
.bg-color-purple-1 { background-color: var(--purple-1); }

.color-purple-2 { color: var(--purple-2); }
.bg-color-purple-2 { background-color: var(--purple-2); }

.color-purple-3 { color: var(--purple-3); }
.bg-color-purple-3 { background-color: var(--purple-3); }

.color-purple-4 { color: var(--purple-4); }
.bg-color-purple-4 { background-color: var(--purple-4); }

.color-purple-5 { color: var(--purple-5); }
.bg-color-purple-5 { background-color: var(--purple-5); }

/* Pink */
.color-pink-1 { color: var(--pink-1); }
.bg-color-pink-1 { background-color: var(--pink-1); }

.color-pink-2 { color: var(--pink-2); }
.bg-color-pink-2 { background-color: var(--pink-2); }

.color-pink-3 { color: var(--pink-3); }
.bg-color-pink-3 { background-color: var(--pink-3); }

.color-pink-4 { color: var(--pink-4); }
.bg-color-pink-4 { background-color: var(--pink-4); }

.color-pink-5 { color: var(--pink-5); }
.bg-color-pink-5 { background-color: var(--pink-5); }

.color-pink-neon { color: var(--pink-neon); }
.bg-color-pink-neon { background-color: var(--pink-neon); }

/* Orange */
.color-orange-1 { color: var(--orange-1); }
.bg-color-orange-1 { background-color: var(--orange-1); }

.color-orange-2 { color: var(--orange-2); }
.bg-color-orange-2 { background-color: var(--orange-2); }

.color-orange-3 { color: var(--orange-3); }
.bg-color-orange-3 { background-color: var(--orange-3); }

.color-orange-4 { color: var(--orange-4); }
.bg-color-orange-4 { background-color: var(--orange-4); }

.color-orange-neon { color: var(--orange-neon); }
.bg-color-orange-neon { background-color: var(--orange-neon); }

.lesson-content strong, .lesson-content h5 {
    font-weight: 600 !important;
}

.lesson-content p, .lesson-content ul, .lesson-content table {
    font-size: 17px;
}

/*@media only screen and (max-width: 1200px) {*/
/*    .lesson-content p, .lesson-content ul, .lesson-content table {*/
/*        font-size: 14px;*/
/*    }*/
/*}*/