/* Colored Section + Index (academia_colored_sections). */

.tt-colored-sections {
    position: relative;
}

/* Index-rail: overlay in de rechter goot. De index blijft sticky en loopt
   mee t/m de onderkant van de laatste sectie (CSS-only, geen JS nodig). */
.tt-colored-sections__rail {
    position: absolute;
    top: 0;
    /* Stop waar de bottom-padding van de laatste sectie begint (167px), niet
       op de echte onderkant van de sectie. */
    bottom: 167px;
    /* Fluïde breedte die exact meekrimpt met de `__right`-flexkolom, zodat de
       overlay uitgelijnd blijft terwijl beide kolommen kleiner worden.
       __right = flex 0 1 416 naast __left = flex 0 1 744 (gap 40); onder de
       drempel krimpen ze naar rato van hun basis (416/1160). Gecapt op 416px
       (boven de drempel geen krimp). 80px = padding (40) + gap (40). */
    width: min(416px, calc(416 / 1160 * (min(100%, 1310px) - 80px)));
    right: max(20px, calc((100% - 1310px) / 2 + 20px));
    pointer-events: none;
    z-index: 2;
}

.tt-colored-sections__rail .tt-colored-sections__index {
    position: sticky;
    /* Sticky header is 68px hoog; +20px lucht ertussen. */
    top: 88px;
    /* Beginpositie uitlijnen met de content van de eerste sectie (padding-top). */
    margin-top: 167px;
    pointer-events: auto;
}

/* Ingelogd: WP-adminbar (32px) duwt de sticky header omlaag, dus top mee opschuiven. */
.admin-bar .tt-colored-sections__rail .tt-colored-sections__index {
    top: 120px;
}

/* Extra header-curve bovenaan de band — alleen relevant op mobiel (zie media
   query hieronder); op desktop grenzen hero en eerste sectie direct en doen de
   sectie-curves het werk zelf. */
.tt-colored-sections__top-curve {
    display: none;
}

/* Onder de side-by-side breakpoint (<=991px): index bovenaan, sticky en
   inklapbaar. Daarboven (t/m 992px) blijft de index rechts en schalen beide
   kolommen mee. */
@media (max-width: 991px) {
    /* De ontbrekende "bult"-helft van de golf op de hero-grens: zelfde
       header-divider als de secties, verankerd aan de bovenkant van de band en
       gekleurd naar de eerste sectie (currentColor in de SVG). */
    .tt-colored-sections__top-curve {
        display: block;
        position: relative;
        height: 0;
    }
    /* Rail oplossen (display:contents) zodat de index een directe flow-child van
       .tt-colored-sections wordt: bovenaan in beeld én sticky over alle secties. */
    .tt-colored-sections__rail {
        display: contents;
    }

    /* De index staat in de flow bovenaan; de "band" tussen hero en eerste sectie
       is anders wit. Geef het blok de kleur van de EERSTE sectie, zodat de crème
       footer-curve van de hero er zichtbaar in dipt (nette overgang) i.p.v. een
       eenzijdige sectie-curve tegen een losse band. De secties zijn dekkend, dus
       deze kleur is alleen in de band zichtbaar. */
    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--green) {
        background-color: var(--light-green, #DCF1E0);
    }

    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--beige) {
        background-color: var(--beige, #FDEFDA);
    }

    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--pink) {
        background-color: var(--light-pink, #FBDAEC);
    }

    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--blue) {
        background-color: var(--light-blue, #DDEAF5);
    }

    /* Top-curve kleurt mee met de band (currentColor in de divider-SVG). */
    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--green) .tt-colored-sections__top-curve {
        color: var(--light-green, #DCF1E0);
    }

    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--beige) .tt-colored-sections__top-curve {
        color: var(--beige, #FDEFDA);
    }

    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--pink) .tt-colored-sections__top-curve {
        color: var(--light-pink, #FBDAEC);
    }

    .tt-colored-sections:has(.tt-colored-sections__list > .tt-colored-section:first-child.tt-colored-section--blue) .tt-colored-sections__top-curve {
        color: var(--light-blue, #DDEAF5);
    }

    /* 0,2,0 verslaat de desktop-regel `.tt-colored-sections__rail .tt-colored-sections__index`
       (0,2,0) op bronvolgorde (deze staat later in het bestand). */
    .tt-colored-sections .tt-colored-sections__index {
        position: sticky;
        top: calc(var(--header-height-mobile, 63px) + 20px);
        /* `width: calc(100% - 32px)` geeft op smalle schermen 16px lucht aan
           weerszijden (via margin auto); `max-width` capt op brede (tablet).
           border-box zodat de padding binnen die breedte valt (element heeft
           standaard content-box, waardoor het anders 40px te breed werd). */
        box-sizing: border-box;
        width: calc(100% - 32px);
        max-width: 416px;
        margin: 0 auto 40px;
        padding: 16px 20px;
        z-index: 20;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Ingelogd: op mobiel staat de admin-bar niet fixed bovenaan, dus geen +32px.
       Deze regel (0,3,0) is enkel nodig om de desktop-admin-regel (`top: 120px`)
       te verslaan; de waarde is gelijk aan de niet-ingelogde mobiele offset. */
    .admin-bar .tt-colored-sections .tt-colored-sections__index {
        top: calc(var(--header-height-mobile, 63px) + 20px);
    }

    /* Kleinere index-titel op mobiel. `.tt-colored-sections`-prefix (0,2,0)
       verslaat de basisregel (0,1,0) die verderop in het bestand staat. */
    .tt-colored-sections .tt-colored-sections__index-title {
        font-size: 20px;
        line-height: 29px;
    }

    /* Pijltje naast de index-items op de natuurlijke maat (12x21) op mobiel. */
    .tt-colored-sections .tt-colored-sections__index-link::after {
        width: 12px;
        height: 21px;
    }

    /* De lege placeholder-kolom (waar de index-rail overheen zweefde) heeft nu
       geen functie meer; verbergen zodat de content niet meer naar links wordt
       geduwd, en de content centreren. */
    .tt-colored-section__right {
        display: none;
    }

    /* `.tt-colored-sections`-voorouder (0,2,0) verslaat de basisregel
       `.tt-colored-section__inner { justify-content: space-between }` (0,1,0)
       die verderop in het bestand staat. */
    .tt-colored-sections .tt-colored-section__inner {
        justify-content: center;
    }

    /* --- Inklapbaar (JS voegt --collapsible toe; degradeert netjes zonder JS) --- */
    .tt-colored-sections__index--collapsible .tt-colored-sections__index-header {
        cursor: pointer;
        margin-bottom: 0;
        -webkit-tap-highlight-color: transparent;
    }

    /* Chevron rechts: dicht = omlaag, open = omhoog (SVG uit het design). */
    .tt-colored-sections__index--collapsible .tt-colored-sections__index-header::after {
        content: "";
        flex: 0 0 auto;
        margin-left: auto;
        width: 21px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.625 1.17188C20.8594 1.35938 20.8594 1.73438 20.625 1.96875L10.8281 11.7656C10.5938 12 10.2656 12 10.0312 11.7656L0.234375 1.96875C0 1.73438 0 1.35938 0.234375 1.17188L1.125 0.234375C1.35938 0 1.73438 0 1.92188 0.234375L10.4531 8.71875L18.9375 0.234375C19.125 0 19.5 0 19.7344 0.234375L20.625 1.17188Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform 0.3s ease;
    }

    .tt-colored-sections__index--collapsible.tt-colored-sections__index--open .tt-colored-sections__index-header::after {
        transform: rotate(180deg);
    }

    /* Dicht: onderwerpenlijst verborgen; open: zichtbaar. */
    .tt-colored-sections__index--collapsible .tt-colored-sections__index-list {
        display: none;
        margin-top: 16px;
    }

    .tt-colored-sections__index--collapsible.tt-colored-sections__index--open .tt-colored-sections__index-list {
        display: block;
    }

    /* Anker-jump niet onder de fixed header + sticky index laten belanden. */
    .tt-colored-section {
        scroll-margin-top: calc(var(--header-height-mobile, 63px) + 96px);
    }

    /* Veel minder verticale ruimte per sectie op mobiel (167px was voor desktop).
       `.tt-colored-sections`-prefix (0,2,0) verslaat de basisregel verderop. */
    /* Veel minder verticale ruimte per sectie dan desktop (167px). Alleen de
       eerste sectie (direct onder de index-band, zelfde kleur) mag zonder
       top-padding; de andere hebben ruimte nodig zodat de content niet in de
       curve-zone van de sectie-overgang begint. */
    .tt-colored-sections .tt-colored-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .tt-colored-sections .tt-colored-sections__list > .tt-colored-section:first-child {
        padding-top: 0;
    }
}

/* Index-card (overlay-rail, rechter goot van de secties). */
.tt-colored-sections__index {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    padding: 24px;
}

.tt-colored-sections__index-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.tt-colored-sections__index-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lighter-green, #DDF1E1);
}

.tt-colored-sections__index-icon-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 24px;
}

.tt-colored-sections__index-title {
    font-size: 25px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

.tt-colored-sections__index-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt-colored-sections__index-item {
    margin-bottom: 0;
}

.tt-colored-sections__index-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Groene bullet-prefix '• ' voor de linktekst. */
.tt-colored-sections__index-link::before {
    content: "\2022";
    flex: 0 0 auto;
    margin-right: 6px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--green, #1FA238);
}

/* Chevron-right (exacte SVG), rechts uitgelijnd. */
.tt-colored-sections__index-link::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='21' viewBox='0 0 12 21' fill='none'%3E%3Cpath d='M1.125 0.234375C1.35938 0 1.6875 0 1.92188 0.234375L11.7656 10.0312C11.9531 10.2656 11.9531 10.5938 11.7656 10.8281L1.92188 20.625C1.6875 20.8594 1.35938 20.8594 1.125 20.625L0.1875 19.7344C0 19.5 0 19.125 0.1875 18.9375L8.67188 10.4062L0.1875 1.92188C0 1.73438 0 1.35938 0.1875 1.125L1.125 0.234375Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hover: lichtgroene achtergrond + groene tekst (zoals de andere menu-items).
   :focus-visible i.p.v. :focus, zodat een muisklik niet "actief" blijft staan. */
.tt-colored-sections__index-link:hover,
.tt-colored-sections__index-link:focus-visible {
    background: var(--lighter-green, #DDF1E1);
    color: var(--green, #1FA238);
}

.tt-colored-section {
    position: relative;
    padding: 167px 0;
    /* anchor-jump niet onder een (sticky) header laten vallen */
    scroll-margin-top: 80px;
}

.tt-colored-section__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Linkerkolom met de content; rechterkolom voorlopig leeg (placeholder). */
.tt-colored-section__left {
    flex: 0 1 744px;
    max-width: 100%;
}

.tt-colored-section__right {
    flex: 0 1 416px;
    max-width: 416px;
    min-width: 0;
}

.tt-colored-section__image-wrap {
    margin-bottom: 32px;
}

.tt-colored-section__image {
    display: block;
    width: 744px;
    height: 200px;
    max-width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.tt-colored-section__title {
    margin: 0 0 35px;
}

.tt-colored-section__subtitle {
    font-size: 28px;
    line-height: 36px;
}

.tt-colored-section__content h3 {
    margin-top: 32px;
    margin-bottom: 22px;
}

.tt-colored-section__content p {
    margin-bottom: 28px;
}

/* Links in de content: merk-roze + bold, geen underline (zoals .entry-content a elders). */
.tt-colored-section__content a {
    color: var(--pink, #E4087E);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tt-colored-section__content a:hover {
    color: var(--dark-pink, #C20068);
}

/* Lijsten in de content krijgen het groene vinkje (zoals checkmark-usps). */
.tt-colored-section__content ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

/* Lijst direct na een paragraaf 14px dichter tegen die paragraaf. */
.tt-colored-section__content p + ul {
    margin-top: -14px;
}

.tt-colored-section__content ul li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 41px; /* 25px icoon + 16px ruimte */
    font-size: 18px;
    line-height: 27px;
    font-weight: 500;
}

.tt-colored-section__content ul li:last-child {
    margin-bottom: 0;
}

.tt-colored-section__content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    /* op het midden van de eerste regel (halve line-height van 27px) */
    top: 13.5px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M20.7334 5.23828C21.292 5.64453 21.417 6.42578 21.0107 6.98437L11.0107 20.7344C10.7959 21.0312 10.4639 21.2148 10.0967 21.2461C9.72949 21.2773 9.37402 21.1406 9.11621 20.8828L4.11621 15.8828C3.62793 15.3945 3.62793 14.6016 4.11621 14.1133C4.60449 13.625 5.39746 13.625 5.88574 14.1133L9.85059 18.0781L18.9912 5.51171C19.3975 4.95312 20.1787 4.82812 20.7373 5.23437L20.7334 5.23828Z' fill='%231FA238'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Variant "Regular bullets": roze bolletje i.p.v. groene checkmark. */
.tt-colored-section__content--bullets ul,
.tt-colored-section__content--bullets p + ul {
    margin-top: 28px;
}

.tt-colored-section__content--bullets ul li {
    /* Geen tussenruimte tussen de items (alleen line-height). */
    margin-bottom: 0;
    padding-left: 25px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
}

.tt-colored-section__content--bullets ul li::before {
    /* Klein roze rondje, gecentreerd in de 25px padding-left: (25 - 5) / 2 = 10 */
    left: 10px;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pink, #E4087E);
}

.tt-colored-section__content > *:last-child {
    margin-bottom: 0;
}

/* Top label (LucyCousins). Kleur volgt de sectie-achtergrondkleur (zie onder). */
.tt-colored-section__label {
    margin: 0 0 11px;
    font-family: 'LucyCousins', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
}

/* Achtergrondkleuren (lichte tinten als startpunt; fine-tunen later). */
.tt-colored-section--green {
    background: var(--light-green, #DCF1E0);
}

.tt-colored-section--beige {
    background: var(--beige, #FDEFDA);
}

.tt-colored-section--pink {
    background: var(--light-pink, #FBDAEC);
}

.tt-colored-section--blue {
    background: var(--light-blue, #DDEAF5);
}

/* Accentkleur (top label + H3-veld + content-h3) per sectie-achtergrondkleur. */
.tt-colored-section--green .tt-colored-section__label,
.tt-colored-section--green .tt-colored-section__subtitle,
.tt-colored-section--green .tt-colored-section__content h3 {
    color: var(--green, #1FA238);
}

.tt-colored-section--beige .tt-colored-section__label,
.tt-colored-section--beige .tt-colored-section__subtitle,
.tt-colored-section--beige .tt-colored-section__content h3 {
    color: var(--orange, #F3950B);
}

.tt-colored-section--pink .tt-colored-section__label,
.tt-colored-section--pink .tt-colored-section__subtitle,
.tt-colored-section--pink .tt-colored-section__content h3 {
    color: var(--pink, #E4087E);
}

.tt-colored-section--blue .tt-colored-section__label,
.tt-colored-section--blue .tt-colored-section__subtitle,
.tt-colored-section--blue .tt-colored-section__content h3 {
    color: var(--blue, #1A75BB);
}

/* CTA-knop onder de content (basis: .button uit general.css). */
.tt-colored-section__cta-wrap {
    margin-top: 24px;
}

/* Knopkleur volgt de sectie-accentkleur, met donkere hover. */
.tt-colored-section--green .tt-colored-section__cta {
    background-color: var(--green, #1FA238);
}

.tt-colored-section--green .tt-colored-section__cta:hover {
    background-color: var(--dark-green, #007F1B);
}

.tt-colored-section--beige .tt-colored-section__cta {
    background-color: var(--orange, #F3950B);
}

.tt-colored-section--beige .tt-colored-section__cta:hover {
    background-color: var(--dark-orange, #D57D00);
}

.tt-colored-section--pink .tt-colored-section__cta {
    background-color: var(--pink, #E4087E);
}

.tt-colored-section--pink .tt-colored-section__cta:hover {
    background-color: var(--dark-pink, #C20068);
}

.tt-colored-section--blue .tt-colored-section__cta {
    background-color: var(--blue, #1A75BB);
}

.tt-colored-section--blue .tt-colored-section__cta:hover {
    background-color: var(--dark-blue, #005FA5);
}

/* Curve-dividers (top + bottom) volgen de sectie-achtergrondkleur (currentColor). */
.tt-colored-section--green .divider_curves {
    color: var(--light-green, #DCF1E0);
}

.tt-colored-section--beige .divider_curves {
    color: var(--beige, #FDEFDA);
}

.tt-colored-section--pink .divider_curves {
    color: var(--light-pink, #FBDAEC);
}

.tt-colored-section--blue .divider_curves {
    color: var(--light-blue, #DDEAF5);
}

/* ==========================================================================
   Bottom elements: newsletter signup + menu (basis-layout; styling volgt later)
   ========================================================================== */

/* Newsletter signup */
.tt-colored-section__newsletter {
    margin-top: 51px;
    padding: 29px 42px 38px;
    background: var(--lighter-green, #DDF1E1);
    border-radius: 30px;
}

.tt-colored-section__newsletter-title {
    margin: 0 0 25px;
    color: var(--green, #1FA238);
    font-size: 28px;
    line-height: 36px;
}

.tt-colored-section__newsletter-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* row-gap (tussen rijen) 19px, column-gap (tussen velden) 27px */
    gap: 19px 27px;
}

.tt-colored-section__newsletter-input {
    padding: 12px 18px;
    border: 1px solid var(--font-color, #0A2636);
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
}

.tt-colored-section__newsletter-submit {
    grid-column: 1 / -1;
    width: 100%;
}

/* Na een succesvolle aanmelding: verberg de velden; de MC4WP-bevestiging
   blijft zichtbaar op de plek van het formulier (zie colored-sections.js). */
.tt-colored-section__newsletter-form.tt-newsletter--done .tt-colored-section__newsletter-fields {
    display: none;
}

/* Bevestigingstekst (MC4WP-alert): geen margin-bottom op de paragraaf. */
.tt-colored-section__newsletter .mc4wp-alert p {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .tt-colored-section__newsletter-fields {
        grid-template-columns: 1fr;
    }
}

/* Menu */
.tt-colored-section__menu {
    box-sizing: border-box; /* 416px is inclusief de padding */
    width: 416px;
    max-width: 100%;
    margin-top: 41px;
    padding: 24px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.25);
    transition: box-shadow 0.2s ease;
}

/* Subtiele schaduw op de hele menu-wrapper bij hover. */
.tt-colored-section__menu:hover {
    box-shadow: 0 4px 8px 0 rgba(125, 77, 5, 0.15);
}

.tt-colored-section__menu-title {
    margin: 0 0 24px;
    font-size: 25px;
    line-height: 36px;
}

.tt-colored-section__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt-colored-section__menu-item {
    margin-bottom: 24px;
}

.tt-colored-section__menu-item:last-child {
    margin-bottom: 0;
}

.tt-colored-section__menu-link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    color: var(--font-color, #0A2636);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Groene pijl rechts (verticaal gecentreerd) — zelfde icoon als de index. */
.tt-colored-section__menu-link::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='21' viewBox='0 0 12 21' fill='none'%3E%3Cpath d='M1.125 0.234375C1.35938 0 1.6875 0 1.92188 0.234375L11.7656 10.0312C11.9531 10.2656 11.9531 10.5938 11.7656 10.8281L1.92188 20.625C1.6875 20.8594 1.35938 20.8594 1.125 20.625L0.1875 19.7344C0 19.5 0 19.125 0.1875 18.9375L8.67188 10.4062L0.1875 1.92188C0 1.73438 0 1.35938 0.1875 1.125L1.125 0.234375Z' fill='%231FA238'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hover: lichtgroene achtergrond + groene tekst (zoals .tt-menu elders op de site). */
.tt-colored-section__menu-link:hover,
.tt-colored-section__menu-link:focus {
    background: var(--lighter-green, #DDF1E1);
    color: var(--green, #1FA238);
}

.tt-colored-section__menu-item-title {
    position: relative;
    padding-left: 15px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    transition: color 0.2s ease;
}

/* Groene bullet '• ' voor de titel (absoluut, zodat de titeltekst netjes uitlijnt). */
.tt-colored-section__menu-item-title::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green, #1FA238);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}

/* Subtitel krijgt dezelfde inspring, zodat de checkmark uitlijnt met de titeltekst. */
.tt-colored-section__menu-item-sub {
    padding-left: 15px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* Checkmark voor de subtitel (losse vink uit het aangeleverde SVG); via mask
   zodat hij op hover mee groen kleurt. */
.tt-colored-section__menu-item-sub::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 13px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: var(--font-color, #0A2636);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath d='M12.7812 0.577148C12.9375 0.420898 13.1875 0.420898 13.3125 0.577148L14.2188 1.45215C14.3438 1.6084 14.3438 1.8584 14.2188 1.9834L4.84375 11.3584C4.6875 11.5146 4.46875 11.5146 4.3125 11.3584L0.125 7.20215C0 7.0459 0 6.7959 0.125 6.6709L1.03125 5.76465C1.15625 5.63965 1.40625 5.63965 1.5625 5.76465L4.5625 8.7959L12.7812 0.577148Z' fill='%230A2636'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath d='M12.7812 0.577148C12.9375 0.420898 13.1875 0.420898 13.3125 0.577148L14.2188 1.45215C14.3438 1.6084 14.3438 1.8584 14.2188 1.9834L4.84375 11.3584C4.6875 11.5146 4.46875 11.5146 4.3125 11.3584L0.125 7.20215C0 7.0459 0 6.7959 0.125 6.6709L1.03125 5.76465C1.15625 5.63965 1.40625 5.63965 1.5625 5.76465L4.5625 8.7959L12.7812 0.577148Z' fill='%230A2636'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color 0.2s ease;
}

/* Op hover kleurt de vink mee groen. */
.tt-colored-section__menu-link:hover .tt-colored-section__menu-item-sub::before,
.tt-colored-section__menu-link:focus .tt-colored-section__menu-item-sub::before {
    background-color: var(--green, #1FA238);
}