@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ================================================================
        == 1. FUNDAMENTEN (VARIABLES)                                 ==
        == ALLES WORDT VANUIT HIER GESTUURD                           ==
        ================================================================ */
        :root {
            /* ------------------------- KLEUREN ------------------------- */
            --color-primary: #1E293B;
            --color-accent: #7732ff;
            --color-accent-hover: #6228d0;
            --color-accent-secondary: #38BDF8;
            --color-background: #F1F5F9;
            --color-white: #FFFFFF;
            --color-text-heading: #1E293B;
            --color-text-body: #475569;
            --color-text-subtle: #94A3B8;
            --color-border: #E2E8F0;
            --color-border-dark: #334155;
            --color-background-special: #7732ff;
            --color-accent-light: #ede6ff;
            --color-success: #22c55e;
            --color-info: #3b82f6;
            --color-warning: #f59e0b;
            --color-error: #ef4444;

            --gradient: linear-gradient(to bottom right, #20f6ff, #7732ff);

            /* ------------------------- TYPOGRAFIE ------------------------- */
            --font-family-primary: 'Poppins', sans-serif;
            --font-size-h1: 2.25rem;
            --font-size-h2: 1.875rem;
            --font-size-h3: 1.5rem;
            --font-size-h4: 1.125rem;
            --font-size-body: 1rem;
            --font-size-sm: 0.875rem;
            --font-weight-regular: 400;
            --font-weight-medium: 500;
            --font-weight-bold: 700;
            --font-weight-black: 800;
            --line-height-heading: 1.3;
            --line-height-body: 1.7;

            /* ------------------------- RUIMTE (SPACING) ------------------------- */
            --spacing-1: 0.25rem;
            --spacing-2: 0.5rem;
            --spacing-3: 1rem;
            --spacing-4: 1.5rem;
            --spacing-5: 2rem;
            --spacing-6: 3rem;
            --spacing-7: 4rem;
            --spacing-8: 6rem;
            
            /* ------------------------- BORDER RADIUS ------------------------- */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-full: 999px;

            /* ------------------------- LAYOUT ------------------------- */
            --container-padding-mobile: var(--spacing-3);
            --container-padding-desktop: var(--spacing-3);
            --container-width: 1250px;
            --section-padding-y-mobile: var(--spacing-7);
            --section-padding-y-desktop: var(--spacing-8);
            
            /* ------------------------- COMPONENTEN ------------------------- */
            --header-height: 70px;
            --btn-padding-y: 0.75rem;
            --btn-padding-x: 1.75rem;
            --btn-font-size: var(--font-size-body);
            
            /* ------------------------- EFFECTEN ------------------------- */
            --shadow-default: 0 4px 12px rgba(148, 163, 184, 0.15);
            --shadow-hover: 0 6px 20px rgba(148, 163, 184, 0.2);
            --transition-default: all 0.2s ease-in-out;
        }

        /* ================================================================
        == 2. ALGEMENE STIJLEN & BASIS ELEMENTEN                      ==
        ================================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body {
            font-family: var(--font-family-primary);
            background-color: var(--color-white);
            color: var(--color-text-body);
            line-height: var(--line-height-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            padding-top: var(--header-height);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            /* overflow-x: hidden; THIS BREAKS position:sticky. DO NOT RE-ADD. */
        }
        
        h1, h2, h3, h4 {
            font-weight: var(--font-weight-bold);
            color: var(--color-text-heading);
            margin-bottom: var(--spacing-3);
            line-height: var(--line-height-heading);
        }
        h1 { font-size: var(--font-size-h1); }
        h2 { font-size: var(--font-size-h2); }
        h3 { font-size: var(--font-size-h3); }
        h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); }
        p { margin-bottom: var(--spacing-4); max-width: 65ch; }
        a { color: var(--color-accent); text-decoration: none; font-weight: var(--font-weight-bold); }
        a:hover { color: var(--color-accent-hover); }

        /* ================================================================
        == 3. LAYOUT & UTILITIES                                      ==
        ================================================================ */
        
        .container {
            width: 100%;
            margin: 0 auto;
            padding: 0 var(--container-padding-mobile);
        }

        main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        main > section {
            flex-grow: 1;
        }

        section {
            padding: var(--section-padding-y-mobile) 0;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .section--colored {
            background-color: var(--color-background);
        }

        .section--gradient {
            background: var(--gradient);
        }

        .section-header {
            text-align: center;
        }
        .section-header h1, .section-header h2 {
            margin-bottom: var(--spacing-2);
        }
        .section-header p {
            max-width: 65ch;
            margin-left: auto;
            margin-right: auto;
            color: var(--color-text-subtle);
            font-size: 1.1rem;
        }

        .grid {
            display: grid;
            gap: var(--spacing-5);
        }
        
        .items-center {
            align-items: center;
        }

        .img-fluid { max-width: 100%; height: auto; }
        .img-rounded { border-radius: var(--radius-lg); }
        
        .mb-1 { margin-bottom: var(--spacing-2) !important; }
        .mb-2 { margin-bottom: var(--spacing-3) !important; }
        .mb-4 { margin-bottom: var(--spacing-4) !important; }
        .mb-5 { margin-bottom: var(--spacing-5) !important; }
        .mb-6 { margin-bottom: var(--spacing-6) !important; }
        .mt-1 { margin-top: var(--spacing-2) !important; }
        .mt-2 { margin-top: var(--spacing-3) !important; }
        .mt-7 { margin-top: var(--spacing-7) !important; }
        .mb-0 { margin-bottom: 0 !important; }
        .text-center { text-align: center; }
        .text-subtle { color: var(--color-text-subtle); }
        .text-accent { color: var(--color-accent); }
        .text-sm { font-size: var(--font-size-sm); }
        .font-medium { font-weight: var(--font-weight-medium); }

        .lead {
            font-size: 1.2rem;
            font-weight: 400;
            max-width: 65ch;
            margin-left: auto;
            margin-right: auto;
        }

        .max-w-4xl { max-width: 56rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .gap-4 { gap: var(--spacing-4); }
        .gap-8 { gap: var(--spacing-7); }

        /* Achtergrondkleur Hulpprogramma's */
        .bg-primary { background-color: var(--color-primary) !important; }
        .bg-accent { background-color: var(--color-accent) !important; }
        .bg-info { background-color: var(--color-info) !important; }
        .bg-success { background-color: var(--color-success) !important; }
        .bg-warning { background-color: var(--color-warning) !important; }
        .bg-danger { background-color: var(--color-error) !important; }


        /* ================================================================
        == 4. COMPONENTEN                                             ==
        ================================================================ */

        /* --- Content Box --- */
        .content-box {
            background-color: var(--color-white);
            padding: var(--spacing-5);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
            box-shadow: none;
        }

        /* --- Knoppen --- */
        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: var(--spacing-2);
            font-family: var(--font-family-primary);
            font-weight: var(--font-weight-bold);
            border: 2px solid transparent;
            border-radius: var(--radius-full);
            transition: var(--transition-default);
            cursor: pointer;
            padding: var(--btn-padding-y) var(--btn-padding-x);
            font-size: var(--btn-font-size);
            text-decoration: none;
        }

        .btn--primary, a.btn--primary { background-color: var(--color-accent); color: var(--color-white); }
        .btn--primary:hover, a.btn--primary:hover { background-color: var(--color-accent-hover); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

        .btn--secondary, a.btn--secondary { background-color: transparent; color: var(--color-text-body); border-color: var(--color-border); }
        .btn--secondary:hover, a.btn--secondary:hover { border-color: var(--color-text-body); color: var(--color-text-heading); background-color: var(--color-background); }

        .btn--alternative:hover, a.btn--alternative:hover { background-color: color-mix(in srgb, var(--color-accent) 10%, transparent); }
        
        /* --- Kaarten --- */
        .card {
            height: 100%;
        }

        .card--secondary {
            background: var(--color-background);
            border-color: transparent;
        }

        .card--alternative {
            background: var(--color-accent-light);
            border-color: transparent;
        }

        .card__icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: transparent; /* Verwijder de standaard achtergrond */
        }

        .card__icon::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-5deg);
            width: 100%;
            height: 100%;
            border-radius: var(--radius-sm);
            z-index: 0;
            background-color: var(--icon-bg-color, var(--color-background)); /* Gebruik CSS variabele */
            transition: var(--transition-default);
        }

        .card__icon .material-symbols-outlined {
            font-size: 2rem;
            position: relative;
            z-index: 1;
        }
        .highlight-card .card__icon {
            margin-bottom: 0;
        }
        .card__icon--accent {
            --icon-bg-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
            color: var(--color-accent);
        }
        .card__icon--info {
            --icon-bg-color: color-mix(in srgb, var(--color-info) 15%, transparent);
            color: var(--color-info);
        }
        .card__icon--success {
            --icon-bg-color: color-mix(in srgb, var(--color-success) 15%, transparent);
            color: var(--color-success);
        }
        .card__icon--warning {
            --icon-bg-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
            color: var(--color-warning);
        }
        .card__icon--danger {
            --icon-bg-color: color-mix(in srgb, var(--color-error) 15%, transparent);
            color: var(--color-error);
        }

        .highlight-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-4);
            padding: var(--spacing-2);
            border-radius: var(--radius-lg);
            background-color: transparent;
            height: 100%;
            border: none !important;
            text-align: -webkit-center;
        }

        .highlight-card__content {
            flex-grow: 1;
        }
        .highlight-card__content h4 {
            margin-bottom: var(--spacing-1);
        }
        .highlight-card__content p {
            margin-bottom: 0;
            font-size: var(--font-size-body);
            color: var(--color-text-subtle);
        }

        .card--team {
            padding: var(--spacing-5) var(--spacing-4);
            border: none;
            background-color: transparent;
            box-shadow: none;
        }
        .card__avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto var(--spacing-4);
            background-size: cover;
            background-position: center;
            border: 1px solid var(--color-border);
        }

        /* --- Blog Kaarten --- */
        .blog-card {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: var(--transition-default);
            text-decoration: none;
            padding: 0; /* Override content-box padding */
        }

        .section--colored .blog-card {
            border-color: transparent;
        }

        .blog-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .blog-card__image {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .blog-card__content {
            padding: var(--spacing-4);
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .blog-card__category {
            display: inline-block;
            margin-bottom: var(--spacing-2);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-bold);
            color: var(--color-accent);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .blog-card__title {
            font-size: var(--font-size-h4);
            margin-bottom: var(--spacing-2);
            line-height: 1.4;
            /* Truncate after 2 lines */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 2.8em; /* 2 lines * 1.4 line-height */
        }

        .blog-card__title a {
            color: var(--color-text-heading);
            text-decoration: none;
            font-weight: var(--font-weight-bold);
        }
        .blog-card__title a:hover {
            color: var(--color-accent);
        }

        .blog-card__excerpt {
            font-size: var(--font-size-body);
            color: var(--color-text-body);
            margin-bottom: var(--spacing-4);
            flex-grow: 1;
            /* Truncate after 3 lines */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .blog-card__read-more {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-1);
            font-weight: var(--font-weight-bold);
            color: var(--color-accent);
            text-decoration: none;
            margin-top: auto; /* Pushes it to the bottom */
        }

        .blog-card__read-more .material-symbols-outlined {
            font-size: 1.2em;
            transition: transform 0.2s ease-in-out;
        }

        .blog-card__read-more:hover .material-symbols-outlined {
            transform: translateX(4px);
        }

        /* --- Stat Card --- */
        .stat-card {
            text-align: center;
            padding: var(--spacing-4);
        }

        .stat-card__number {
            font-size: 3rem;
            font-weight: var(--font-weight-black);
            color: var(--color-accent);
            margin-bottom: var(--spacing-2);
            line-height: 1.1;
        }

        /* Unified Paint Stroke Effect */
        .paint-stroke {
            position: relative;
            display: inline-block;
        }

        .paint-stroke span {
            position: relative;
            z-index: 1;
        }

        .paint-stroke::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-2deg);
            width: 110%; /* Default width */
            height: 80%;
            background-color: var(--color-accent-secondary);
            z-index: 0;
            border-radius: 4px;
            transform-origin: left;
            transform: translate(-50%, -50%) rotate(-2deg) scaleX(0);
        }

        /* Animation for Hero (on load) */
        .paint-stroke.animate-on-load::before {
            animation: paint-stroke-in 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
        }

        @keyframes paint-stroke-in {
            to {
                transform: translate(-50%, -50%) rotate(-2deg) scaleX(1);
            }
        }

        /* Animation for Stats (on scroll) */
        .stat-card .paint-stroke::before {
            width: 120%; /* Specific width for stats */
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .stat-card.in-view .paint-stroke::before {
            transform: translate(-50%, -50%) rotate(-2deg) scaleX(1);
        }

        #stats .stat-card__number::before {
            background-color: rgba(255,255,255,0.2);
        }

        .stat-card__description {
            font-size: var(--font-size-body);
            color: var(--color-text-subtle);
            max-width: 30ch;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
        }

        #stats .section-header h2,
        #stats .section-header p,
        #stats .stat-card__number,
        #stats .stat-card__description {
            color: var(--color-white);
        }

        .list-unstyled {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .list-unstyled li {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-2);
            margin-bottom: var(--spacing-3);
        }

        .list-unstyled .material-symbols-outlined {
            font-size: 1.5rem;
        }

        @media (min-width: 768px) {
            .stat-card__number {
                font-size: 4rem;
            }
        }

        /* ================================================================
        == 5. PAGINA-ELEMENTEN (HERO)                 ==
        ================================================================ */

        /* Specifieke hero's voor subpagina's */
        #mission-hero .lead,
        #contact-hero .lead,
        #diensten-hero .lead {
            margin-bottom: 0;
        }

        /* --- Hero Sectie (Homepage) --- */
        .hero {
            padding: var(--section-padding-y-mobile) 0;
            background-color: var(--color-white);
        }

        .hero__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-6);
            align-items: center;
        }

        .hero__content {
            text-align: center;
        }

        .hero__heading {
            font-size: var(--font-size-h1);
            font-weight: var(--font-weight-black);
            line-height: 1.2;
        }

        .hero__subheading {
            font-size: 1.1rem;
            color: var(--color-text-body);
            max-width: 55ch;
            margin: 0 auto var(--spacing-5);
        }

        .hero__actions {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }

        .hero__social-proof {
            margin-top: var(--spacing-6);
        }

        .hero__social-proof p {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-subtle);
            margin-bottom: var(--spacing-3);
        }

        .hero__logos {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-5);
            filter: grayscale(100%);
            opacity: 0.7;
        }

        .hero__logos img {
            max-height: 25px;
        }

        .hero__image-wrapper {
            display: none; /* Verberg op mobiel, toon op desktop */
        }

        .hero__image {
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        @media (min-width: 768px) {
            .hero {
                padding: var(--section-padding-y-desktop) 0;
            }
            .hero__grid {
                grid-template-columns: 0.7fr 1fr;
                gap: var(--spacing-8);
            }
            .hero__content {
                text-align: left;
            }
            .hero__heading {
                font-size: 3.5rem;
            }
            .hero__subheading {
                margin-left: 0;
                margin-right: 0;
            }
            .hero__actions {
                flex-direction: row;
            }
            .hero__social-proof {
                text-align: left;
            }
            .hero__logos {
                justify-content: flex-start;
            }
            .hero__image-wrapper {
                display: block;
            }
        }

        /* ================================================================
        == 6. HEADER & NAVIGATIE                                      ==
        ================================================================ */
        .site-header {
            background-color: var(--color-white);
            /* box-shadow: var(--shadow-default); */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: var(--header-height);
            min-height: 70px; /* Prevent collapse on load */
            border-bottom: 1px solid transparent;
            transition: border-bottom-color 0.3s ease-in-out;
        }
        .site-header.scrolled {
            border-bottom-color: var(--color-border);
        }
        .site-header > .container { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            height: 100%;
        }
        
        .site-header__brand {
            display: flex;
            align-items: center;
        }
        .site-header__logo-link {
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
            text-decoration: none;
            font-weight: var(--font-weight-black);
            font-size: 1.25rem;
            color: var(--color-primary);
        }
        .site-header__logo-link:hover {
            color: var(--color-primary);
        }
        .site-header__logo-img {
            height: 40px;
            width: 40px;
            border-radius: var(--radius-sm);
            transition: var(--transition-default);
        }

        .site-header__nav {
            display: none; 
        }

        .site-header__actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-3);
        }

        .site-header__cta-notify {
            display: none;
        }

        .site-header__cta-login {
            display: none;
        }
        
        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 28px;
            height: 28px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1000;
        }

        .mobile-menu-toggle .bar {
            display: block;
            width: 24px;
            height: 3px;
            background-color: var(--color-primary);
            border-radius: 0;
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease-out;
            transform-origin: center;
        }

        .mobile-menu-toggle.is-open .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .mobile-menu-toggle.is-open .bar:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }

        .mobile-menu-toggle.is-open .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* Mobile Mega Menu */
        .mega-menu {
            position: fixed;
            top: var(--header-height);
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--color-white);
            z-index: 998;
            transform: translateY(-110%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s;
            visibility: hidden;
            display: flex;
            flex-direction: column;
        }

        .mega-menu.is-open {
            transform: translateY(0);
            visibility: visible;
        }

        .mega-menu__content {
            padding: 2rem 0;
            overflow-y: auto;
            flex-grow: 1;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }

        .mega-menu__grid {
            display: grid;
            gap: 2rem;
        }
        
        .mega-menu__col {
            border-bottom: 1px solid var(--color-border);
            padding-bottom: 1.5rem;
        }
        .mega-menu__col:last-of-type {
            border-bottom: none;
        }

        .mega-menu__heading {
            font-size: 0.875rem;
            color: var(--color-text-subtle);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1.5rem;
        }

        .mega-menu__nav {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .mega-menu__link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--color-text-heading);
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: 500;
            padding: 0.75rem 0;
            transition: color 0.2s ease;
        }
        .mega-menu__link > div {
            display: flex;
            align-items: center;
            gap: var(--spacing-3);
        }
        .mega-menu__link .material-symbols-outlined {
            font-size: 1.5rem;
            color: var(--color-accent);
        }

        .mega-menu__accordion {
            padding: 0.75rem 0;
        }

        .mega-menu__accordion summary.mega-menu__link::after {
            content: '+';
            font-size: 1.5rem;
            font-weight: 400;
            color: var(--color-text-subtle);
            transition: transform 0.3s ease;
        }

        .mega-menu__accordion[open] > summary.mega-menu__link::after {
            transform: rotate(180deg);
            content: '−';
        }

        .mega-menu__link:hover {
            color: var(--color-accent);
        }

        .mega-menu__accordion .mega-menu__link {
            padding-top: 0;
            padding-bottom: 0;
        }

        .mega-menu__accordion summary {
            list-style: none; /* Remove default marker */
            cursor: pointer;
        }
        .mega-menu__accordion summary::-webkit-details-marker {
            display: none; /* Chrome/Safari */
        }
        
        .mega-menu__accordion-content {
            padding-left: calc(var(--spacing-4) + 1.5rem); /* Indent based on icon size and gap */
            padding-top: var(--spacing-2);
            padding-bottom: var(--spacing-2);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
        }
        .mega-menu__sub-link {
            color: var(--color-text-body);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            gap: var(--spacing-3);
        }
        .mega-menu__sub-link .material-symbols-outlined {
            font-size: 1.2rem;
            color: var(--color-accent);
        }
        .mega-menu__sub-link:hover {
            color: var(--color-accent);
        }

        .mega-menu__featured-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-radius: var(--radius-md);
            background-color: var(--color-background);
            text-decoration: none;
            color: var(--color-text-body);
            transition: background-color 0.2s ease;
            margin-bottom: 1rem;
        }

        .mega-menu__featured-item:hover {
            background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
        }

        .mega-menu__featured-item .material-symbols-outlined {
            font-size: 2rem;
            color: var(--color-accent);
        }

        .mega-menu__featured-item-content strong {
            display: block;
            font-weight: 600;
            color: var(--color-text-heading);
        }

        .mega-menu__featured-item-content p {
            font-size: 0.875rem;
            color: var(--color-text-subtle);
            margin: 0;
        }

        .mega-menu__footer {
            padding: 1rem var(--container-padding-mobile);
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--color-border);
            background-color: var(--color-white);
            z-index: 1;
            flex-shrink: 0; /* Prevent footer from shrinking */
        }

        .mega-menu__footer .container {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
        }

        .mega-menu__footer .btn {
            width: 100%;
            text-align: center;
        }

        body.mobile-menu-open {
            overflow: hidden;
        }

        @media (max-width: 991px) {
            .site-header__nav {
                display: none;
            }
            .site-header__cta-notify {
                display: none;
            }
            .mobile-menu-toggle {
                display: flex;
            }
        }

@media (min-width: 992px) {
    .language-selector {
        order: 0; /* Reset order for desktop */
    }

    .mobile-menu-toggle,
    .mega-menu {
        display: none;
    }            .site-header__nav { 
                display: flex; 
                align-items: center; 
                gap: var(--spacing-1);
            }
            .site-header__cta-notify {
                display: inline-flex;
                font-size: 13px;
            }
            .site-header__cta-login {
                display: inline-flex;
                color: var(--color-text-body); 
                font-weight: var(--font-weight-medium); 
                padding: var(--spacing-2) var(--spacing-3);
                border-radius: var(--radius-sm);
                transition: var(--transition-default);
                align-items: center;
                gap: var(--spacing-1);
                font-size: 15px;
                text-decoration: none;
            }
            .site-header__cta-login:hover {
                background-color: var(--color-background);
                color: var(--color-text-heading);
            }

            .nav-item {
                position: relative;
            }

            .nav-item > a {
                color: var(--color-text-body); 
                font-weight: var(--font-weight-medium); 
                padding: var(--spacing-2) var(--spacing-3);
                border-radius: var(--radius-sm);
                transition: var(--transition-default);
                display: flex;
                align-items: center;
                gap: var(--spacing-1);
                font-size: 15px;
            }
            .nav-item > a:hover {
                background-color: var(--color-background);
                color: var(--color-text-heading);
            }
            .nav-item > a .material-symbols-outlined {
                font-size: 1.25rem;
                transition: transform 0.2s ease-in-out;
                width: 1.25rem; /* Vaste breedte */
                height: 1.25rem; /* Vaste hoogte */
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .nav-item:hover > a .material-symbols-outlined {
                transform: rotate(180deg);
            }

            .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                background-color: var(--color-white);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-default);
                border: 1px solid var(--color-border);
                padding: var(--spacing-2);
                min-width: 220px;
                opacity: 0;
                visibility: hidden;
                transform: translateY(10px);
                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
                z-index: 1001;
            }

            .nav-item:hover > .dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            .dropdown-menu a {
                display: block;
                padding: var(--spacing-2) var(--spacing-3);
                color: var(--color-text-body);
                font-weight: var(--font-weight-medium);
                border-radius: var(--radius-sm);
                white-space: nowrap;
            }
            .dropdown-menu a:hover {
                background-color: var(--color-background);
                color: var(--color-text-heading);
            }
        }

        /* ================================================================
        == 6. FOOTER                                        ==
        ================================================================ */
        .site-footer {
            background-color: var(--color-primary);
            color: var(--color-text-subtle);
            padding: var(--section-padding-y-mobile) 0 0;
        }

        .footer__main {
            display: grid;
            gap: var(--spacing-6);
            padding-bottom: var(--spacing-6);
        }

        .footer__links-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-5);
        }

        .footer-col h4 {
            color: var(--color-white);
            margin-bottom: var(--spacing-4);
            font-size: var(--font-size-h4);
        }

        .footer-nav {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }

        .footer-nav a {
            color: var(--color-text-subtle);
            font-weight: var(--font-weight-regular);
            transition: var(--transition-default);
            text-decoration: none;
        }

        .footer-nav a:hover {
            color: var(--color-white);
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
            text-decoration: none;
            font-weight: var(--font-weight-black);
            font-size: 1.25rem;
            color: var(--color-white);
            margin-bottom: var(--spacing-3);
        }

        .footer-logo:hover {
            color: var(--color-white);
        }

        .footer-logo img {
            height: 40px;
            width: 40px;
            border-radius: var(--radius-sm);
        }

        .footer__tagline {
            font-size: var(--font-size-body);
            max-width: 25ch;
            margin-bottom: 0;
        }

        .footer-col--subscribe p {
            margin-bottom: var(--spacing-4);
        }

        .subscribe-form {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }

        .subscribe-form input {
            background-color: var(--color-border-dark);
            border: 1px solid var(--color-border-dark);
            border-radius: var(--radius-full);
            padding: var(--btn-padding-y) var(--btn-padding-x);
            color: var(--color-white);
            font-family: var(--font-family-primary);
            font-size: var(--font-size-sm);
        }

        .subscribe-form input::placeholder {
            color: var(--color-text-subtle);
        }

        .subscribe-form .btn {
            font-size: var(--font-size-sm);
        }

        .footer__bottom {
            border-top: 1px solid var(--color-border-dark);
            padding: var(--spacing-4) 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-3);
            text-align: center;
        }

        .footer__copyright {
            font-size: var(--font-size-sm);
            margin-bottom: 0;
        }

        .footer__legal-links {
            display: flex;
            gap: var(--spacing-4);
        }

        .footer__legal-links a {
            font-size: var(--font-size-sm);
            color: var(--color-text-subtle);
            text-decoration: none;
        }

        .footer__legal-links a:hover {
            color: var(--color-white);
            text-decoration: underline;
        }

        .footer__socials {
            display: flex;
            gap: var(--spacing-4);
            margin-top: var(--spacing-4);
        }

        .social-icon {
            color: var(--color-text-subtle);
            transition: var(--transition-default);
        }

        .social-icon:hover {
            color: var(--color-white);
            transform: translateY(-2px);
        }

        .social-icon svg {
            width: 24px;
            height: 24px;
        }

        .footer__bottom-right {
            display: flex;
            align-items: center;
            gap: var(--spacing-5);
        }

        .footer-language-selector {
            display: flex;
            align-items: center;
            gap: var(--spacing-4); /* Increased gap */
        }

        .footer-language-selector a {
            color: var(--color-text-subtle);
            font-weight: var(--font-weight-regular);
            text-decoration: none;
            font-size: var(--font-size-sm);
            transition: color 0.2s ease-in-out;
        }

        .footer-language-selector a:hover {
            color: var(--color-white);
        }

        .footer-language-selector a.active {
            font-weight: var(--font-weight-medium); /* Less prominent */
            color: var(--color-white);
        }

        .footer-language-selector span {
            /* This rule is no longer used after HTML update */
            display: none;
        }

        @media (max-width: 767px) {
            .footer__bottom {
                flex-direction: column-reverse;
            }
            .footer__bottom-right {
                flex-direction: column;
                gap: var(--spacing-4);
                margin-bottom: var(--spacing-4);
            }
        }

        @media (min-width: 768px) {
            .site-footer {
                 padding: var(--section-padding-y-desktop) 0 var(--spacing-6);
            }
            .footer__main {
                grid-template-columns: 1fr 1fr 1fr 2fr;
                gap: var(--spacing-7);
            }
            .footer__links-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--spacing-7);
            }
            .subscribe-form {
                flex-direction: row;
            }
            .subscribe-form input {
                flex-grow: 1;
            }
            .footer__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
        
        @media (min-width: 992px) {
            .footer__main {
                grid-template-columns: 1fr 1fr 1fr 2fr;
            }
        }
        
        /* ================================================================
        == 7. SPECIALE ELEMENTEN (voorheen contact, etc.)         ==
        ================================================================ */

        /* --- Feature Table --- */
        .feature-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-size-sm);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        .feature-table th,
        .feature-table td {
            padding: var(--spacing-3) var(--spacing-4);
            text-align: left;
            border-bottom: 1px solid var(--color-border);
        }
        .feature-table thead th {
            background-color: var(--color-background);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-heading);
            font-size: var(--font-size-body);
        }
        .feature-table tbody tr:last-child td {
            border-bottom: none;
        }
        .feature-table tbody tr:nth-child(even) {
            background-color: var(--color-background);
        }
        .feature-table td:not(:first-child) {
            text-align: center;
        }
        .feature-table .material-symbols-outlined {
            color: var(--color-accent);
            font-weight: var(--font-weight-bold);
        }
        .feature-table .feature-module td {
            font-weight: var(--font-weight-bold);
            color: var(--color-text-heading);
            padding-top: var(--spacing-4);
            background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
            border-top: 2px solid var(--color-accent-light);
        }

        /* --- Accordion --- */
        .accordion-item {
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-3);
            overflow: hidden;
        }
        .accordion-item:last-child {
            margin-bottom: 0;
        }
        .accordion-header {
            display: grid;
            grid-template-columns: 1fr repeat(3, 150px);
            align-items: center;
            padding: var(--spacing-3) var(--spacing-4);
            cursor: pointer;
            background-color: var(--color-white);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-heading);
            transition: background-color 0.2s ease;
        }
        .accordion-header:hover {
            background-color: var(--color-background);
        }
        .accordion-header > span {
            text-align: center;
        }
        .accordion-header > span:first-child {
            text-align: left;
        }
        .accordion-header .material-symbols-outlined {
            color: var(--color-accent);
            font-weight: bold;
            text-align: center;
        }
        .accordion-header::-webkit-details-marker {
            display: none;
        }
        .accordion-header::after {
            content: '+';
            font-size: 1.5rem;
            justify-self: end;
            grid-column: 5;
            color: var(--color-text-subtle);
            padding-left: var(--spacing-3);
        }
        .accordion-item[open] > .accordion-header::after {
            content: '−';
        }
        .accordion-content {
            padding: var(--spacing-4);
            background-color: var(--color-background);
        }
        .accordion-content ul {
            list-style: none;
        }
        .accordion-content li {
            display: grid;
            grid-template-columns: 1fr repeat(3, 150px);
            align-items: center;
            padding: var(--spacing-2) var(--spacing-4);
            border-bottom: 1px solid var(--color-border);
        }
        .accordion-content li:last-child {
            border-bottom: none;
        }
        .accordion-content .material-symbols-outlined {
            color: var(--color-accent);
            text-align: center;
        }

        /*--------------------------------------------------------------
        # Timeline (DEPRECATED - MOVED TO missie-visie.css)
        --------------------------------------------------------------*/

        @media (min-width: 768px) {
            :root {
                --font-size-h1: 3rem;
                --font-size-h2: 2.5rem;
            }
            .container { padding: 0 var(--container-padding-desktop); max-width: var(--container-width); }
            .section { padding: var(--section-padding-y-desktop) 0; }
            .site-footer { padding: var(--section-padding-y-desktop) 0 var(--spacing-6); }

            /* Toon de 3 pricing cards naast elkaar op desktop */
            .pricing-tabs__nav { display: none; }/* Verberg tabs op desktop */ 
            .pricing-tabs__content {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: var(--spacing-5);
            }
            .pricing-tabs__content .pricing-card {
                display: flex; /* Zorg dat alle kaarten getoond worden */
            }
            .pricing-card--featured {
                transform: scale(1.05);
            }

            /* Toon de feature accordion header row op desktop */
            .feature-accordion__header-row {
                display: grid;
            }
            .accordion-summary::after {
                display: block; /* Toon de plus/min indicator */
            }
            .accordion-content ul {
                display: none; /* Verberg de lijst in de content op desktop */
            }
            .accordion-content {
                padding: var(--spacing-3) var(--spacing-4);
            }
            .accordion-content p {
                margin-bottom: 0;
            }

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

            .site-header__nav { display: flex; align-items: center; gap: var(--spacing-1); }
            .mobile-menu-toggle { display: none; }
            .site-header__cta_login,
            .site-header__cta-notify {
                display: inline-flex;
            }
            .hero h1 { font-size: 3.5rem; }

            .footer-grid { grid-template-columns: repeat(4, 1fr); text-align: left; }
            .footer-bottom {
                display: flex;
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .site-header__logo-img {
                width: 34px;
                height: 34px;
            }
        }

        /* ================================================================
        == 8. OVERIGE COMPONENTEN (voorheen pricing)                ==
        ================================================================= */

        /* --- Newsletter CTA Form --- */
        .newsletter-form {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }

        .newsletter-form__main {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }

        .newsletter-form input[type="email"] {
            flex-grow: 1;
            border: 1px solid var(--color-border);
            background-color: var(--color-white);
            border-radius: var(--radius-full);
            padding: var(--btn-padding-y) var(--btn-padding-x);
            font-family: var(--font-family-primary);
            font-size: var(--font-size-body);
            min-height: 53px; /* Align with button height */
        }
        .newsletter-form input[type="email"]::placeholder {
            color: var(--color-text-subtle);
        }

        .newsletter-form__legal {
            text-align: center;
        }

        .custom-checkbox {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .custom-checkbox input[type="checkbox"] {
            opacity: 0;
            position: absolute;
            width: 1.25em;
            height: 1.25em;
            cursor: pointer;
        }

        .custom-checkbox label {
            display: inline-flex;
            align-items: flex-start;
            gap: var(--spacing-2);
            font-size: var(--font-size-sm);
            color: var(--color-text-subtle);
            cursor: pointer;
            font-weight: var(--font-weight-regular);
            text-align: left;
        }
        
        .custom-checkbox label span {
            color: var(--color-text-subtle);
            font-weight: var(--font-weight-regular);
        }
        
        .custom-checkbox label a {
            font-weight: var(--font-weight-regular);
            text-decoration: underline;
            color: var(--color-text-subtle);
        }
        .custom-checkbox label a:hover {
            color: var(--color-accent);
        }

        .custom-checkbox .checkbox-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-border);
            border-radius: var(--radius-sm);
            background-color: var(--color-white);
            color: var(--color-white);
            font-size: 16px;
            font-weight: var(--font-weight-bold);
            transition: var(--transition-default);
            flex-shrink: 0; /* Prevent shrinking */
        }

        .custom-checkbox .checkbox-icon::after {
            content: '✔';
            color: var(--color-white) !important;
            font-size: 14px;
            line-height: 1;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
        }

        .custom-checkbox input[type="checkbox"]:checked + label .checkbox-icon {
            background-color: var(--color-accent);
            border-color: var(--color-accent);
        }

        .custom-checkbox input[type="checkbox"]:checked + label .checkbox-icon::after {
            opacity: 1;
        }
        
        .custom-checkbox input[type="checkbox"]:focus-visible + label .checkbox-icon {
             box-shadow: 0 0 0 3px var(--color-accent-light);
        }


        @media (min-width: 768px) {
            .newsletter-form__main {
                flex-direction: row;
            }
        }

        /* ================================================================
        == 9. MEDIAQUERIES VOOR RESPONSIVE DESIGN                   ==
        ================================================================= */

/* ================================================================
== 10. ALGEMENE FORMULIER STYLING                           ==
================================================================= */
.form-card {
    width: 100%;
}

.form-card__header {
    text-align: center;
    margin-bottom: var(--spacing-5);
}

.form-card__header h2 {
    margin-bottom: var(--spacing-2);
}

.form-card__footer {
    text-align: center;
    margin-top: var(--spacing-5);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-4);
}

.form-card__footer p {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
}

.form-options .forgot-password {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.form-actions .btn {
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-4);
}

.form-group label {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-heading);
}

.form-group input,
.form-group textarea {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    font-family: var(--font-family-primary);
    width: 100%;
    transition: var(--transition-default);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* ================================================================
== 11. TESTIMONIAL CAROUSEL                                 ==
================================================================= */

.testimonial-carousel-wrapper {
    position: relative;
    /* Make the wrapper full-width to allow the carousel to bleed out of the container padding */
    margin-left: calc(-1 * var(--container-padding-mobile));
    margin-right: calc(-1 * var(--container-padding-mobile));
}

.testimonial-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: var(--spacing-3);
    
    /* This is the key: it defines the "safe area" for the scroll-snap points. */
    scroll-padding-left: var(--container-padding-mobile);
    scroll-padding-right: var(--container-padding-mobile);
}

.testimonial-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.testimonial-carousel .content-box {
    flex: 0 0 90%; /* Make cards slightly smaller than the viewport */
    scroll-snap-align: start;
}

.testimonial-carousel > *:first-child {
    /* Add the margin to the first element to create the initial space */
    margin-left: var(--container-padding-mobile);
}

.testimonial-carousel > *:last-child {
    /* This is now handled by a JS-injected spacer for better reliability */
    margin-right: 0; 
}

.testimonial-carousel .spacer {
    flex: 0 0 var(--container-padding-mobile);
    height: 1px;
}

.testimonial-card-new .author {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin-bottom: 0;
}

/* New Business Testimonial Styles */
.business-testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.business-testimonial__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.business-testimonial__logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    padding: 4px;
    border: 1px solid var(--color-border);
}

.business-testimonial__name {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
}

.business-testimonial__text {
    color: var(--color-text-body);
    font-style: italic;
    margin-bottom: 0;
    padding-left: calc(40px + var(--spacing-3)); /* Align with text above */
    position: relative;
}

.business-testimonial__text::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -0.2em;
    font-size: 3rem;
    font-weight: var(--font-weight-black);
    color: var(--color-border);
    line-height: 1;
    z-index: 0;
}

.testimonial-indicators {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--spacing-5);
}

.testimonial-indicators .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border);
}

.testimonial-indicators .dot.active {
    background-color: var(--color-accent);
}

@media (min-width: 768px) {
    .testimonial-carousel-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    .testimonial-carousel {
        display: grid;
        gap: var(--spacing-4);
        overflow-x: visible;
        padding: 0;
        margin: 0;
    }

    /* Add these new classes to control the grid columns */
    .testimonial-carousel.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .testimonial-carousel.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .testimonial-carousel.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .testimonial-carousel.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .testimonial-carousel.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

    .testimonial-carousel .content-box {
        margin-left: 0;
    }
    .testimonial-carousel .content-box:last-child {
        margin-right: 0;
    }

    .testimonial-indicators {
        display: none;
    }
}

/* ================================================================
== 12. LOGO SCROLLER                                        ==
================================================================= */
.logo-scroller {
    max-width: 100%;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.logo-scroller .scroller__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-6);
    list-style: none;
    padding: 0;
    margin: 0;
}

.logo-scroller .scroller__inner li {
    flex-shrink: 0;
}

.logo-scroller .scroller__inner img {
    height: 35px;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition-default);
}

.logo-scroller .scroller__inner img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.logo-scroller[data-animated="true"] {
    overflow: hidden;
}

.logo-scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 30s linear infinite;
}

.logo-scroller[data-speed="fast"] {
  animation-duration: 20s;
}

.logo-scroller[data-speed="slow"] {
  animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5 * var(--spacing-6)));
  }
}

/* ================================================================
== 13. MOBIEL-SPECIFIEKE OVERRIDES                          ==
================================================================= */
@media (max-width: 767px) {
    /* Verberg de paragraaf in section-headers en voeg ruimte toe, maar NIET in hero-secties, cta's etc. */
    section:not(.hero):not([id*='hero']):not(#contact-cta):not(#cta-newsletter) .section-header {
        margin-bottom: 50px;
    }
    section:not(.hero):not([id*='hero']):not(#contact-cta):not(#cta-newsletter) .section-header p {
        display: none;
    }
}

/* ================================================================
== 14. GENERIC ACCORDION COMPONENT                          ==
================================================================= */
.c-accordion__item {
    background-color: var(--color-white);
    margin-bottom: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.c-accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    list-style: none; /* Remove default marker from summary */
}
.c-accordion__header::-webkit-details-marker {
    display: none; /* Hide marker for Safari */
}

.c-accordion__header:hover {
    background-color: var(--color-background);
}

.c-accordion__header::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text-subtle);
    transition: transform 0.3s ease, content 0.3s ease;
}

.c-accordion__item[open] > .c-accordion__header {
    border-bottom: 1px solid var(--color-border);
}

.c-accordion__item[open] > .c-accordion__header::after {
    content: '−';
    transform: rotate(180deg);
}

.c-accordion__content {
    padding: var(--spacing-4);
}

.c-accordion__content p {
    margin-bottom: 0;
}

/* ================================================================
== 15. LANGUAGE SELECTOR                                    ==
================================================================= */
.language-selector {
    position: relative;
    order: -1; /* Mobile-first: default to left */
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.language-selector .current-lang {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Adjusted spacing */
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    transition: var(--transition-default);
    font-weight: var(--font-weight-medium);
}

.language-selector .current-lang:hover {
    background-color: var(--color-background);
}

.language-selector .current-lang img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.language-selector .current-lang .material-symbols-outlined {
    font-size: 1.25rem;
    transition: transform 0.2s ease-in-out;
}

.language-selector .current-lang .flag-icon {
    width: 24px;
    height: 24px;
}

.language-selector:hover .current-lang .material-symbols-outlined {
    transform: rotate(180deg);
}

.language-selector .lang-options {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-default);
    border: 1px solid var(--color-border);
    padding: var(--spacing-2);
    min-width: 180px;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.language-selector:hover .lang-options,
.language-selector .current-lang:focus + .lang-options,
.language-selector .lang-options:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.language-selector .lang-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-body);
    white-space: nowrap;
    text-decoration: none;
}

.language-selector .lang-option:hover {
    background-color: var(--color-background);
    color: var(--color-text-heading);
}

.language-selector .lang-option img {
    width: 20px;
    height: 20px;
}

.language-selector .lang-option.active {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .site-header__actions {
        gap: var(--spacing-2);
    }

    .language-selector {
        order: -1; /* Move to the left of the hamburger menu */
    }

    .language-selector .current-lang {
        padding: var(--spacing-1);
    }

    .language-selector .lang-options {
        right: auto;
        left: -150px;
    }
}