/**
 * Klaas Puul — Header & Navigation (Clean Build)
 * Zero legacy artifacts. All structural + visual in one file.
 * Fonts: "sofia-pro", "acumin-pro" (Adobe Typekit)
 * Primary: #0D1C38
 */

/* ============================================================================
   1. VARIABLES
   ============================================================================ */
:root {
    --header-height: 80px;
    --header-bg: #ffffff;
    --transition: all 0.3s ease;
}

/* ============================================================================
   2. ACCESSIBILITY
   ============================================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999999;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    text-decoration: none;
}
.skip-link:focus { left: 6px; top: 7px; }

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

/* ============================================================================
   3. TOP HEADER (optional bar)
   ============================================================================ */
.header-top {
    background: #f5f5f5;
    font-size: 14px;
    padding: 6px 0;
    height: 48px;
    transition: transform 0.3s ease;
    z-index: 1000;
}
.header-top.position-absolute {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
}
.header-top.position-fixed {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
}
.header-top.is-hidden,
.header-top.position-fixed.is-hidden { transform: translateY(-100%); }

.header-top .th-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 16px;
}
.th-zone--left, .th-zone--center, .th-zone--right {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.th-zone--left   { justify-self: start; }
.th-zone--center { justify-self: center; }
.th-zone--right  { justify-self: end; }

.th-btns { display: flex; gap: 0; flex-wrap: wrap; }
.th-btn {
    padding: 8px 12px; text-decoration: none;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 0.875rem; font-weight: 700; line-height: 150%;
}
.th-btn--primary { background: var(--color-primary, #0D1C38); color: #fff; }
.th-btn--secondary {
    background: transparent;
    border: 2px solid var(--color-primary, #0D1C38);
    color: var(--color-primary, #0D1C38);
}
.th-btn:hover { background: rgba(0, 0, 0, 0.05); }

.th-socials { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.th-socials__item {
    display: block; width: 24px; height: 24px;
    background-color: var(--color-primary, #0D1C38);
    border-radius: 8px; transition: 0.1s ease-in-out;
}
.th-socials__item:hover { opacity: 0.75; }
.th-socials__item a {
    display: flex; width: 100%; height: 100%;
    justify-content: center; align-items: center;
}
.th-socials__icon { width: 16px; }

.th-search form {
    display: flex; align-items: center;
    border: 1px solid #ddd; background: #fff;
}
.th-search input[type="search"] { border: none; padding: 6px 10px; font-size: 14px; flex: 1; }
.th-search input[type="search"]:focus { outline: none; }
.th-search input[type="submit"], .th-search button {
    border: none; background: var(--color-primary, #0D1C38);
    color: #fff; padding: 6px 10px; cursor: pointer;
}
.th-contact { text-decoration: none; color: var(--color-primary, #0D1C38); }

/* Top header body offsets */
body.has-top-header:not(.has-fixed-top-header) .site-header { top: 48px; }
body.has-fixed-top-header .site-header { top: 40px; }
body.has-top-header .site { padding-top: 208px; }
body.has-fixed-top-header .site-header.is-hidden {
    transform: translateY(calc(-100% - 40px));
}

@media (max-width: 1023px) { .header-top.desktop-only { display: none; } }
@media (min-width: 1280px) {
    .header-top.mobile-only { display: none; }
    .header-top.position-absolute { display: flex; align-items: center; }
    .th-socials__item { width: 32px; height: 32px; }
    .th-socials__icon { width: 20px; }
}

/* ============================================================================
   4. MAIN HEADER
   ============================================================================ */
.site-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.site-header {
    height: var(--header-height);
    background: var(--header-bg);
    z-index: 1000;
    transition: var(--transition);
}

/* Desktop auto-hide on scroll down, reveal on scroll up */
@media (min-width: 1025px) {
    .site-header-wrapper {
        transition: top 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .site-header-wrapper.header--hidden {
        top: calc(var(--header-height, 80px) * -1 - 48px);
        pointer-events: none;
    }
    .site-header {
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}
.site { padding-top: var(--header-height); }

.site-header .inner {
    height: 100%;
    max-width: 116rem;
    margin: 0 auto;
    padding: 0 16px;
    display: flex; align-items: center; justify-content: center;
}

.site-header .header-container {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 100%;
}

.site-header-wrapper.is-scrolled .site-header { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }

/* ============================================================================
   5. TRANSPARENT / GLASSMORPHISM HEADER (Homepage)
   ============================================================================ */
body.kp-transparent-header .site-header {
    background: transparent; box-shadow: none;
    height: auto;
}
body.kp-transparent-header .site { padding-top: 0; }

body.kp-transparent-header .site-header .inner {
    max-width: 100%;
    padding: 16px;
}
/* Transparent header: shelf closer to header-container (compensate for inner padding-bottom) */
body.kp-transparent-header .mega-panels-shelf,
body.kp-transparent-header .qs-search-overlay {
    top: calc(100% - 16px);
}

body.kp-transparent-header .site-header .header-container {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    padding: 24px 32px;
    max-width: 1824px;
    margin: 0 auto;
    transition: background 0.3s ease;
}

/* White elements on transparent header */
body.kp-transparent-header .site-logo svg path,
body.kp-transparent-header .site-logo svg rect,
body.kp-transparent-header .site-logo svg polygon,
body.kp-transparent-header .site-logo svg circle,
body.kp-transparent-header .site-logo__svg path,
body.kp-transparent-header .site-logo__svg rect,
body.kp-transparent-header .site-logo__svg polygon,
body.kp-transparent-header .site-logo__svg circle { fill: #ffffff; }
body.kp-transparent-header .site-logo__img { filter: brightness(0) invert(1); }
body.kp-transparent-header .nav-menu > li > a { color: #ffffff; }
body.kp-transparent-header .nav-menu > li:not(.menu-item-has-children) > a:hover { color: rgba(255, 255, 255, 0.75); }
body.kp-transparent-header .nav-menu > li.menu-item-has-children > a:hover { color: #0D1C38 !important; background: rgba(255, 255, 255, 0.60); }
body.kp-transparent-header .nav-menu > li.menu-item-has-children.is-hovering > a { color: #0D1C38 !important; background: rgba(255, 255, 255, 0.60); }
body.kp-transparent-header .nav-menu > li.menu-item-has-children.mega-active > a { color: #ffffff !important; background: #2C3C5B; }
body.kp-transparent-header .nav-menu > li.menu-item-has-children > a:hover::after,
body.kp-transparent-header .nav-menu > li.menu-item-has-children.is-hovering > a::after { filter: none; }
body.kp-transparent-header .nav-menu > li.menu-item-has-children.mega-active > a::after { filter: brightness(0) invert(1); }

body.kp-transparent-header .cta-btn { background: #ffffff; color: var(--color-primary, #0D1C38); }
body.kp-transparent-header .cta-btn:hover { background: rgba(255, 255, 255, 0.85); }
body.kp-transparent-header .cta-btn--secondary {
    background: transparent; border-color: #ffffff; color: #ffffff;
}
body.kp-transparent-header .cta-btn--secondary:hover { background: rgba(255, 255, 255, 0.1); }

body.kp-transparent-header .mobile-menu-toggle .mobile-menu-toggle__text,
body.kp-transparent-header .mobile-menu-toggle .mobile-menu-toggle__icon { color: #ffffff; }

/* Scrolled: solid dark blue container (keeps glassmorphism shape) */
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header {
    background: transparent; box-shadow: none;
}
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .header-container {
    background: var(--color-primary, #0D1C38);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background 0.3s ease;
}
/* When hovering a menu item at top of page (not scrolled), keep glassmorphism — NOT on solid header pages */
body.kp-transparent-header:not(.mobile-menu-open):not(.kp-solid-header) .site-header-wrapper:not(.is-scrolled) .site-header .header-container {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important;
}
/* Mobile menu open: solid dark header */
body.mobile-menu-open .site-header .header-container {
    background: var(--color-primary, #0D1C38) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* Scrolled: logo + text stay white */
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li > a { color: #ffffff; }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li.menu-item-has-children > a:hover { color: #0D1C38 !important; background: rgba(255, 255, 255, 0.60); }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li.menu-item-has-children.is-hovering > a { color: #0D1C38 !important; background: rgba(255, 255, 255, 0.60); }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li.menu-item-has-children.mega-active > a { color: #ffffff !important; background: #2C3C5B; }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li.menu-item-has-children.mega-active > a::after { filter: brightness(0) invert(1); }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo svg path,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo svg rect,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo svg polygon,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo svg circle,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo__svg path,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo__svg rect,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo__svg polygon,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo__svg circle { fill: #ffffff; }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .site-logo__img { filter: brightness(0) invert(1); }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .cta-btn { background: #ffffff; color: var(--color-primary, #0D1C38); }
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .mobile-menu-toggle .mobile-menu-toggle__text,
body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .mobile-menu-toggle .mobile-menu-toggle__icon { color: #ffffff; }

/* ============================================================================
   6. LOGO
   ============================================================================ */
.site-logo {
    display: flex; align-items: center;
    text-decoration: none; color: var(--color-primary, #0D1C38);
    font-size: 24px; font-weight: bold; z-index: 10;
    max-width: 276px; height: 39px;
}
.site-logo svg,
.site-logo__svg { display: block; height: 100%; width: auto; }
.site-logo img,
.site-logo__img { max-width: 276px; height: auto; display: block; }

/* ============================================================================
   7. DESKTOP NAVIGATION
   ============================================================================ */
.desktop-navigation { display: none; }

.cta-btn {
    display: inline-flex; align-items: center;
    padding: 12px 16px;
    background: var(--color-primary, #0D1C38);
    text-decoration: none; color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 1rem; font-weight: 400; line-height: 150%;
    min-height: 48px; transition: var(--transition);
}
.cta-btn:hover { opacity: 0.85; }

.cta-btn--secondary {
    background: transparent;
    color: var(--color-primary, #0D1C38);
    border: 1px solid var(--color-primary, #0D1C38);
}
.cta-btn--secondary:hover { background: rgba(13, 28, 56, 0.05); }

.header-cta-buttons.desktop-only { display: none; }

@media (min-width: 1280px) {
    .desktop-navigation { display: block; flex: 1; margin: 0; }

    .nav-menu {
        display: flex; list-style: none; margin: 0; padding: 0;
        align-items: center; gap: clamp(12px, 1.5vw, 32px); justify-content: flex-end;
    }
    .nav-menu > li { position: relative; }
    .nav-menu > li > a {
        font-family: var(--font-main, "acumin-pro", sans-serif);
        font-size: clamp(13px, 0.9vw, 16px); line-height: 150%; font-weight: 400;
        color: var(--color-primary, #0D1C38);
        text-decoration: none; display: inline-block; padding: 10px 0;
        transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .nav-menu > li > a:hover { opacity: 1; }

    /* Parent items with children: dropdown chevron */
    .nav-menu > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 13px;
        height: 13px;
        margin-left: 8px;
        vertical-align: middle;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6' fill='none'%3E%3Cpath d='M13.0898 5.72181e-07C11.7506 0.0189698 10.2331 0.682896 9.00195 1.91211C7.77084 3.14132 7.10881 4.66077 7.08984 6L13.0898 5.72181e-07Z' fill='currentColor'/%3E%3Cpath d='M6.00001 6C5.98104 4.66077 5.31711 3.14322 4.0879 1.91211C2.85868 0.681 1.33924 0.0189697-2.14568e-07 3.09913e-07L6.00001 6Z' fill='currentColor'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    /* Hover state for parent items with children — light bg + rotate chevron */
    .nav-menu > li.menu-item-has-children > a:hover {
        background: rgba(255, 255, 255, 0.60);
        color: #0D1C38 !important;
    }
    .nav-menu > li.menu-item-has-children > a:hover::after,
    .nav-menu > li.menu-item-has-children.is-hovering > a::after {
        transform: rotate(180deg);
    }

    /* Active state — mega menu panel is open */
    .nav-menu > li.menu-item-has-children.mega-active > a {
        background: #2C3C5B;
        color: #ffffff !important;
    }

    /* Transparent header white chevrons */
    body.kp-transparent-header .nav-menu > li.menu-item-has-children > a::after {
        filter: brightness(0) invert(1);
    }
    body.kp-transparent-header .nav-menu > li.menu-item-has-children > a:hover::after,
    body.kp-transparent-header .nav-menu > li.menu-item-has-children.is-hovering > a::after {
        filter: none;
    }
    body.kp-transparent-header .nav-menu > li.menu-item-has-children.mega-active > a::after {
        filter: brightness(0) invert(1);
    }

    /* Dropdown */
    .nav-menu > li:not(.has-mega) > .sub-menu {
        position: absolute; top: 100%; left: 10px; min-width: fit-content;
        margin: 0; padding: 10px 0; list-style: none;
        background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: all 0.3s ease;
    }
    .nav-menu > li:not(.has-mega):hover > .sub-menu,
    .nav-menu > li:not(.has-mega):focus-within > .sub-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .nav-menu > li:not(.has-mega) > .sub-menu a {
        display: block; padding: 10px 20px;
        color: var(--color-primary, #0D1C38); text-decoration: none;
        font-family: var(--font-main, "acumin-pro", sans-serif); font-size: 16px;
    }
    .nav-menu > li:not(.has-mega) > .sub-menu a:hover { background: #f5f5f5; }

    /* Third level */
    .nav-menu > li:not(.has-mega) > .sub-menu .sub-menu {
        position: absolute; top: 0; left: 100%; min-width: 220px;
        background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        opacity: 0; visibility: hidden; transition: all 0.3s ease;
    }
    .nav-menu > li:not(.has-mega) > .sub-menu li:hover > .sub-menu {
        opacity: 1; visibility: visible;
    }

    .header-cta-buttons.desktop-only { display: flex; gap: 8px; align-items: center; margin-left: 16px; }
    .mobile-menu-toggle { display: none; }

    /* Language selector in desktop nav */
    .nav-menu > li.lang-selector {
    
    }
    .nav-menu > li.lang-selector > a {
        display: flex;
        gap: 4px;
        align-items: center;
    }
    /* Hide TranslatePress flag image and show short code instead of full name */
    .nav-menu > li.lang-selector .trp-flag-image {
        display: none !important;
    }
    .nav-menu > li.lang-selector .trp-menu-ls-label { display: flex; align-items: center; gap: 4px; }
    .nav-menu > li.lang-selector .trp-ls-language-name { display: flex; align-items: center; }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="Dutch"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="Dutch"] .trp-ls-language-name::after { content: 'NL'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="English"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="English"] .trp-ls-language-name::after { content: 'EN'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="German"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="German"] .trp-ls-language-name::after { content: 'DE'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="French"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .trp-menu-ls-label[title="French"] .trp-ls-language-name::after { content: 'FR'; font-size: clamp(13px, 0.9vw, 16px); }
    /* Submenu: same treatment */
    .nav-menu > li.lang-selector .sub-menu .trp-flag-image { display: none !important; }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="Dutch"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="Dutch"] .trp-ls-language-name::after { content: 'NL'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="English"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="English"] .trp-ls-language-name::after { content: 'EN'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="German"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="German"] .trp-ls-language-name::after { content: 'DE'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="French"] .trp-ls-language-name { font-size: 0; }
    .nav-menu > li.lang-selector .sub-menu .trp-menu-ls-label[title="French"] .trp-ls-language-name::after { content: 'FR'; font-size: clamp(13px, 0.9vw, 16px); }
    .nav-menu > li.lang-selector > a::before {
        content: '';
        display: flex;
        width: 16px;
        height: 16px;
        /* De geoptimaliseerde SVG data-uri */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M13.193 10.72C13.8794 9.60177 14.2418 8.31498 14.24 7.00294V7.00269C14.2418 5.69063 13.8793 4.40383 13.193 3.28562L13.1891 3.27951C12.5523 2.24165 11.66 1.38443 10.5975 0.789753C9.53494 0.195077 8.33766 -0.117183 7.12002 -0.117187C5.90239 -0.117192 4.7051 0.195057 3.64256 0.789725C2.58001 1.38439 1.68772 2.24161 1.05094 3.27946L1.04698 3.28564C0.362319 4.40463 5.08198e-06 5.69096 0 7.00279C-5.08187e-06 8.31461 0.362299 9.60096 1.04695 10.7199L1.05098 10.7262C1.68776 11.764 2.58005 12.6213 3.64259 13.2159C4.70512 13.8106 5.9024 14.1228 7.12003 14.1228C8.33765 14.1228 9.53492 13.8105 10.5975 13.2159C11.66 12.6212 12.5523 11.764 13.189 10.7262L13.193 10.72ZM8.0301 12.9025C7.89442 13.0334 7.73826 13.1413 7.56779 13.2218C7.42787 13.2883 7.27491 13.3228 7.12 13.3228C6.96508 13.3228 6.81212 13.2883 6.6722 13.2218C6.3478 13.0561 6.0701 12.8118 5.8645 12.5111C5.44461 11.9043 5.13343 11.2291 4.94488 10.5158C5.66919 10.4712 6.39423 10.4485 7.12 10.4476C7.84547 10.4476 8.57055 10.4704 9.29523 10.5158C9.19087 10.8826 9.06051 11.2414 8.90515 11.5897C8.70057 12.0795 8.40347 12.5252 8.0301 12.9025ZM0.81392 7.40281H3.68576C3.70446 8.20416 3.79132 9.00246 3.9454 9.78908C3.16035 9.85816 2.37731 9.95304 1.59627 10.0737C1.13891 9.25318 0.871553 8.34044 0.81392 7.40281ZM1.59626 3.93189C2.37699 4.05288 3.16031 4.14778 3.94622 4.2166C3.79184 5.00317 3.70479 5.80146 3.68602 6.60281H0.81392C0.871549 5.66518 1.1389 4.75244 1.59626 3.93189ZM6.20989 1.10308C6.34556 0.972161 6.50172 0.864307 6.6722 0.783778C6.81212 0.717296 6.96508 0.682802 7.12 0.682802C7.27491 0.682802 7.42787 0.717296 7.56779 0.783778C7.89219 0.949479 8.16989 1.19385 8.37549 1.49455C8.79538 2.10131 9.10655 2.77647 9.2951 3.48985C8.57079 3.53442 7.84576 3.55713 7.12 3.55797C6.39453 3.55796 5.66945 3.53525 4.94476 3.48984C5.04912 3.12305 5.17948 2.76416 5.33484 2.4159C5.53942 1.92611 5.83653 1.48036 6.20989 1.10308ZM13.4261 6.60281H10.5542C10.5355 5.80146 10.4487 5.00315 10.2946 4.21653C11.0797 4.14745 11.8627 4.05257 12.6437 3.93189C13.1011 4.75244 13.3684 5.66518 13.4261 6.60281ZM4.75001 9.72688C4.59356 8.96151 4.5052 8.18378 4.48597 7.40281H9.75411C9.73505 8.18377 9.64685 8.96151 9.49055 9.72691C8.70123 9.67511 7.91105 9.64869 7.12 9.64766C6.32952 9.64765 5.53953 9.67406 4.75001 9.72688ZM9.48998 4.27872C9.64642 5.04411 9.73478 5.82184 9.75401 6.60281H4.48588C4.50494 5.82184 4.59313 5.0441 4.74944 4.27869C5.53876 4.33048 6.32894 4.3569 7.12 4.35796C7.91048 4.35796 8.70047 4.33154 9.48998 4.27872ZM10.554 7.40281H13.4261C13.3684 8.34044 13.1011 9.25318 12.6437 10.0737C11.863 9.95272 11.0797 9.85782 10.2938 9.78901C10.4482 9.00245 10.5352 8.20416 10.554 7.40281ZM12.1641 3.19558C11.4815 3.29406 10.7968 3.37204 10.1101 3.4295C9.98667 2.96999 9.8275 2.52084 9.63402 2.08617C9.45738 1.68616 9.23512 1.3079 8.97165 0.958919C10.2449 1.34941 11.3622 2.13222 12.1641 3.19558ZM2.65106 2.53388C3.38145 1.8028 4.28002 1.26204 5.26801 0.959014C5.25302 0.978428 5.2376 0.996982 5.22282 1.0168C4.715 1.74783 4.3451 2.56555 4.13136 3.42962C3.44462 3.37146 2.75948 3.29344 2.07593 3.19558C2.25222 2.96207 2.44439 2.74098 2.65106 2.53388ZM2.07593 10.81C2.75853 10.7115 3.44319 10.6336 4.12989 10.5761C4.25331 11.0356 4.41249 11.4848 4.60597 11.9195C4.78261 12.3195 5.00488 12.6977 5.26834 13.0467C3.99508 12.6562 2.87776 11.8734 2.07593 10.81ZM11.5889 11.4717C10.8585 12.2028 9.95997 12.7436 8.97198 13.0466C8.98697 13.0272 9.00238 13.0086 9.01717 12.9888C9.52499 12.2578 9.8949 11.4401 10.1086 10.576C10.7954 10.6342 11.4805 10.7122 12.1641 10.81C11.9878 11.0435 11.7956 11.2646 11.5889 11.4717' fill='currentColor'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
        vertical-align: middle;
        align-items: center;
    }
    .nav-menu > li.lang-selector > a::after {
        CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
        content: '';
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6' fill='none'%3E%3Cpath d='M13.0898 5.72181e-07C11.7506 0.0189698 10.2331 0.682896 9.00195 1.91211C7.77084 3.14132 7.10881 4.66077 7.08984 6L13.0898 5.72181e-07Z' fill='currentColor'/%3E%3Cpath d='M6.00001 6C5.98104 4.66077 5.31711 3.14322 4.0879 1.91211C2.85868 0.681 1.33924 0.0189697-2.14568e-07 3.09913e-07L6.00001 6Z' fill='currentColor'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        flex-shrink: 0;
        display: flex;
        background-position: center center;
    }

    /* Transparent header: white icons */
    body.kp-transparent-header .nav-menu > li.lang-selector > a::before {
        filter: brightness(0) invert(1);
    }
    body.kp-transparent-header .nav-menu > li.lang-selector > a::after {
        filter: brightness(0) invert(1);
    }
    /* Hover: handled by global rule at bottom with !important */
    /* Scrolled state: keep white icons (solid dark bg) */
    body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li.lang-selector > a::before {
        filter: brightness(0) invert(1);
    }
    body.kp-transparent-header .site-header-wrapper.is-scrolled .site-header .nav-menu > li.lang-selector > a::after {
        filter: brightness(0) invert(1);
    }
    /* Hover: handled by global rule at bottom with !important */
}

/* ============================================================================
   8. MEGA MENU — Shelf approach
   ============================================================================ */
/* Shelf sits inside <header> which is position:sticky.
   top:100% = directly below the header bar.
   height:0 + overflow:visible = no layout impact. */
/* Shelf: positioned below header with 8px gap */
.mega-panels-shelf {
    position: absolute;
    top: calc(100% + 8px);
    left: 24px;
    right: 24px;
    z-index: 999;
    pointer-events: none;
    overflow: hidden;
    height: 0;
}
body.mega-menu-open .mega-panels-shelf {
    pointer-events: auto;
}

/* Invisible hover bridge — catches mouse in the 8px gap */
.mega-panels-shelf::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: auto;
}

.mega-menu__panel {
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    max-width: 1824px;
    margin: 0 auto;
    pointer-events: auto;
    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
}
.mega-menu__panel.is-open { visibility: visible; position: relative; }

.mega-menu__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 998;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.mega-menu__backdrop.is-active {
    pointer-events: auto;
}
.mega-menu__backdrop.is-active {
    background: rgba(0, 0, 0, 0.3); pointer-events: auto; visibility: visible;
}

/* Figma: panel-inner is the main flex container inside the white panel */
.mega-menu__panel-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32px;
}

/* Left: navigation columns */
.mega-menu__columns {
    flex: 0 0 auto;
    width: 390px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Multi-column layout (e.g. Producten with 4 columns) */
.mega-menu__columns > .mega-menu {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega-menu__columns > .mega-menu[data-mega-cols="4"] {
    width: auto;
}
.mega-menu__columns > .mega-menu[data-mega-cols="4"] ~ .mega-menu__footer { display: none; }

/* Main title above columns (e.g. "Producten", "Over Klaas Puul") */
.mega-menu__main-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-decoration: none;
    display: block;
}
a.mega-menu__main-title:hover {
    opacity: 0.7;
}

/* Column header */
.mega-menu__panel .mega-col {
    min-width: 0;
}
.mega-menu__panel .mega-col__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.mega-menu__panel .mega-col__icon { width: 24px; height: 24px; object-fit: contain; }
.mega-menu__panel .mega-col__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.mega-menu__panel a.mega-col__title { text-decoration: none; display: inline-block; }
.mega-menu__panel a.mega-col__title:hover { opacity: 0.7; }
.mega-menu__panel .mega-col__desc { font-size: 14px; color: #666; margin-top: 4px; }

/* Sub-menu items with KP chevron */
.mega-menu__panel .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega-menu__panel .sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 8px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.mega-menu__panel .sub-menu > li > a::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='18' viewBox='0 0 8 18' fill='none'%3E%3Cpath d='M0 0C0.025 1.786.91 3.809 2.55 5.45 4.188 7.092 6.214 7.975 8 8L0 0Z' fill='%230D1C38'/%3E%3Cpath d='M8 9.452C6.214 9.477 4.191 10.362 2.55 12.001.908 13.64.025 15.666 0 17.452L8 9.452Z' fill='%230D1C38'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
.mega-menu__panel .sub-menu > li > a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Footer link */
.mega-menu__footer { display: flex; flex-direction: column; gap: 24px; }
.mega-menu__footer-divider { border: none; border-top: 1px solid rgba(13, 28, 56, 0.25); margin: 0; }
.mega-menu__footer-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; font-weight: 500;
    color: var(--color-primary, #0D1C38); text-decoration: none;
}
.mega-menu__footer-link svg { width: 24px; height: 24px; transition: transform 0.2s ease; }
.mega-menu__footer-link:hover svg { transform: translateX(4px); }

/* Right: highlight cards */
.mega-menu__highlights {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    align-self: flex-start;
    overflow: hidden;
}
.mega-highlight {
    width: clamp(200px, 15vw, 320px);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 0.5px solid #909090;
    background: #fff;
}
.mega-highlight__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    border-bottom: 0.5px solid #909090;
}
/* Fallback for background-image style cards */
.mega-highlight[style*="background-image"] {
    min-height: 318px;
}
.mega-highlight__content {
    margin-top: auto;
}
.mega-highlight__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(12px, 1vw, 20px) clamp(12px, 1.2vw, 24px);
    background: #fff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: clamp(13px, 0.9vw, 16px);
    font-weight: 400;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    text-decoration: none;
    word-break: break-word;
}
.mega-highlight__btn-icon { width: 8px; height: 18px; flex-shrink: 0; transition: transform 0.3s ease; }
.mega-highlight:hover .mega-highlight__btn-icon { transform: translateX(4px); }

/* Multi-column mega (Producten): wider left, 2x2 grid layout */
.mega-menu__columns:has(> .mega-menu[data-mega-cols="3"]),
.mega-menu__columns:has(> .mega-menu[data-mega-cols="4"]) {
    width: clamp(600px, 55vw, 976px);
    flex: none;
}

/* Producten 4-col: display as 2x2 grid */
.mega-menu__columns > .mega-menu[data-mega-cols="4"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 40px;
}

/* Subtitels in multi-col: 18px instead of 24px, less margin */
.mega-menu__columns > .mega-menu[data-mega-cols="4"] .mega-col__title {
    font-size: 18px;
}
.mega-menu__columns > .mega-menu[data-mega-cols="4"] .mega-col__header {
    margin-bottom: 8px;
}

/* Each column fixed width in multi-col */
.mega-menu__columns > .mega-menu[data-mega-cols="4"] .mega-col {
    min-width: 0;
}

/* Sub-items: no gap between them */
.mega-menu__columns > .mega-menu[data-mega-cols="4"] .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mega-menu__columns > .mega-menu[data-mega-cols="3"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
}

@media (min-width: 1280px) {
    .nav-menu > li.has-mega { position: unset; }
    .nav-menu > li.has-mega .mega-menu .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; background: transparent; margin: 0; padding: 0;
    }
    a.mega-col__title {
        font-weight: 700; margin: 0 0 6px 0; display: inline-block;
        color: var(--color-primary, #0D1C38); text-decoration: none;
    }
    a.mega-col__title:hover { opacity: 0.7; }
}

/* ============================================================================
   9. MOBILE MENU TOGGLE
   ============================================================================ */
body button.mobile-menu-toggle,
body .mobile-menu-toggle {
    width: auto; height: auto; padding: 0;
    background: none; border: none; cursor: pointer;
    display: flex; gap: 8px; align-items: center;
    position: relative; z-index: 1100;
    color: var(--color-primary, #0D1C38);
}
body button.mobile-menu-toggle::before,
body .mobile-menu-toggle::before { content: none; display: none; }

body .mobile-menu-toggle .mobile-menu-toggle__text { display: none; }

/* Mobile header controls wrapper — lang toggle + hamburger with 16px gap */
.mobile-header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
@media (min-width: 1280px) { .mobile-header-controls { display: none; } }

/* Mobile language toggle — LEFT of hamburger (Figma: globe 16px + "NL" text, gap 4px) */
.mobile-lang-toggle {
    position: relative;
    z-index: 1100;
}
.mobile-lang-toggle__btn {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 8px 0;
    color: var(--color-primary, #0D1C38); text-decoration: none;
    height: 24px;
}
.mobile-lang-toggle__globe { width: 16px; height: 16px; flex-shrink: 0; color: inherit; }
.mobile-lang-toggle__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; font-weight: 400; color: inherit;
}
.mobile-lang-toggle__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: unset;
    z-index: 1200;
}
.mobile-lang-toggle.is-open .mobile-lang-toggle__dropdown { display: block; }
.mobile-lang-toggle__dropdown li a {
    display: block;
    padding: 6px 16px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-decoration: none;
}
.mobile-lang-toggle__dropdown li a:hover { background: #EBF1F8; }
body.kp-transparent-header .mobile-lang-toggle__btn { color: #ffffff; }
body.kp-transparent-header .site-header-wrapper.is-scrolled .mobile-lang-toggle__btn { color: #ffffff; }
@media (min-width: 1280px) { .mobile-lang-toggle { display: none; } }
body .mobile-menu-toggle .mobile-menu-toggle__icon {
    width: 24px; height: 24px; flex-shrink: 0;
    color: var(--color-primary, #0D1C38);
}
/* Hide language selector from expanded mobile menu (moved to header) */
.mobile-menu__footer .mobile-menu__lang-selector { display: none; }
body .mobile-menu-toggle.is-active .mobile-menu-toggle__icon--open { display: none !important; }
body .mobile-menu-toggle.is-active .mobile-menu-toggle__icon--close { display: block !important; }
body .mobile-menu-toggle .hamburger, .hamburger { display: none; }

@media (min-width: 1280px) {
    body button.mobile-menu-toggle, body .mobile-menu-toggle { display: none; }
    body .mobile-menu { display: none !important; }
}

/* ============================================================================
   10. MOBILE MENU
   ============================================================================ */
body .mobile-menu {
    position: fixed; inset: 0; z-index: 1050;
    pointer-events: none; visibility: hidden;
    background: var(--color-primary, #0D1C38);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
body .mobile-menu.is-active {
    pointer-events: auto; visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

body .mobile-menu .mobile-menu-overlay {
    position: absolute; inset: 0;
    background: var(--color-primary, #0D1C38); opacity: 0;
    transition: opacity 0.15s ease 0.2s; /* delay fade-out until content slides away */
}
body .mobile-menu.is-active .mobile-menu-overlay { opacity: 1; transition-delay: 0s; }

body .mobile-menu .mobile-menu__header {
    position: absolute; top: var(--top-header-offset, 0px); left: 0; right: 0;
    background: var(--color-primary, #0D1C38); display: flex; align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 20;
    /* Geen eigen opacity-fade — de moeder-.mobile-menu regelt al de fade-in.
       Een tweede opacity-animatie gaf een flash waarbij het logo kort verdween. */
}

/* Inner bar that mirrors .header-container glassmorphism */
body .mobile-menu .mobile-menu__header-inner {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: calc(100% - 0px);
    background: var(--color-primary, #0D1C38);
    padding: 0;
    box-sizing: border-box;
}
body .mobile-menu .mobile-menu__header {
    min-height: 72px;
}
body .mobile-menu .mobile-menu__logo {
    display: flex; align-items: center; max-width: 173px; height: 24px;
    text-decoration: none; flex-shrink: 0;
}
body .mobile-menu .mobile-menu__logo svg,
body .mobile-menu .mobile-menu__logo-svg { display: block; height: 100%; width: auto; }
body .mobile-menu .mobile-menu__logo-img { display: block; max-width: 173px; height: auto; }

body .mobile-menu .mobile-menu__close {
    display: flex; gap: 8px; align-items: center;
    padding: 0; background: none; border: none; cursor: pointer;
    color: #ffffff;
}
body .mobile-menu .mobile-menu__close-text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; color: #ffffff;
}
body .mobile-menu .mobile-menu__close-icon { width: 24px; height: 24px; color: #ffffff; }

body .mobile-menu .mobile-nav-menu > li.lang-selector {
    display: none;
}

body .mobile-menu .mobile-menu-content {
    position: absolute; top: 0; right: 0;
    width: 100%; max-width: 100vw; height: 100%;
    background: var(--color-primary, #0D1C38); display: flex; flex-direction: column;
    padding-top: calc(88px + var(--top-header-offset, 0px));
    transform: translateX(100%); transition: transform 0.3s ease;
    overflow: hidden;
}
body .mobile-menu.is-active .mobile-menu-content { transform: translateX(0); }

body .mobile-menu .mobile-menu__cta-links {
    padding: 24px 16px 0; display: flex; justify-content: space-between; flex-shrink: 0;
}
body .mobile-menu .mobile-menu__cta-link {
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; font-weight: 700; text-decoration: underline;
}

body .mobile-menu .mobile-menu__items {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    position: relative; padding-top: 24px;
    -webkit-overflow-scrolling: touch;
}

body .mobile-menu .mobile-nav-menu {
    list-style: none; margin: 0; padding: 0 16px;
    display: flex; flex-direction: column;
}
body .mobile-menu .mobile-nav-menu > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 12px 18px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%;
    color: #ffffff; text-decoration: none; background: none;
}
body .mobile-menu .mobile-nav-menu > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
body .mobile-menu .mobile-nav-menu > li + li::before { display: none; }

/* KP chevron arrow for menu items with children */
body .mobile-menu .mobile-nav-menu > li.menu-item-has-children > a::after {
    content: ''; width: 8px; height: 18px; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='18' viewBox='0 0 8 18' fill='none'%3E%3Cpath d='M0 0C.025 1.786.91 3.809 2.55 5.45 4.188 7.092 6.214 7.975 8 8L0 0Z' fill='%23ffffff'/%3E%3Cpath d='M8 9.452C6.214 9.477 4.191 10.362 2.55 12.001.908 13.64.025 15.666 0 17.452L8 9.452Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
}

body .mobile-menu .mobile-nav-menu .submenu-toggle { display: none; }
body .mobile-menu .mobile-nav-menu .sub-menu { display: none; }
body .mobile-menu .mobile-cta-buttons { display: none; }

/* ============================================================================
   11. MOBILE SUBMENU PANELS — Drill-down
   ============================================================================ */
body .mobile-submenu-panel {
    position: absolute; inset: 0; background: #0D1C38;
    transform: translateX(100%); transition: transform 0.3s ease;
    z-index: 10; display: flex; flex-direction: column;
    overflow: hidden; padding-top: 24px;
}
body .mobile-submenu-panel.is-active { transform: translateX(0); }
body .mobile-submenu-panel__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px; }

body .mobile-submenu-panel__back {
    display: flex; gap: 8px; align-items: center;
    padding: 14px 18px 12px 18px; cursor: pointer;
    background: none; border: none; width: 100%; text-align: left;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; font-weight: 600;
    color: #ffffff; margin: 0 16px;
}
body .mobile-submenu-panel__back svg { width: 8px; height: 18px; transform: rotate(180deg); color: #ffffff; }

body .mobile-submenu-panel__back + .mobile-submenu-panel__divider {
    border: none; border-top: 1px solid rgba(255, 255, 255, 0.25); margin: 0 16px;
}

body .mobile-submenu-panel__list { list-style: none; margin: 0; padding: 0; }
body .mobile-submenu-panel__list > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 12px 18px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%;
    color: #ffffff; text-decoration: none;
}
/* KP chevron on all submenu panel items */
body .mobile-submenu-panel__list > li > a::after {
    content: ''; width: 8px; height: 18px; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='18' viewBox='0 0 8 18' fill='none'%3E%3Cpath d='M0 0C.025 1.786.91 3.809 2.55 5.45 4.188 7.092 6.214 7.975 8 8L0 0Z' fill='%23ffffff'/%3E%3Cpath d='M8 9.452C6.214 9.477 4.191 10.362 2.55 12.001.908 13.64.025 15.666 0 17.452L8 9.452Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
}
body .mobile-submenu-panel__list > li + li { border-top: 1px solid rgba(255, 255, 255, 0.25); }
/* Parent link as first item in panel — bold styling */
body .mobile-submenu-panel__parent-link > a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body .mobile-submenu-panel__footer { padding: 14px 18px 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
body .mobile-submenu-panel__footer a {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; font-weight: 600;
    color: #ffffff; text-decoration: underline;
}

/* Mobile search input */
body .mobile-menu .mobile-menu__search {
    padding: 24px 16px;
    flex-shrink: 0;
}
body .mobile-menu .mobile-menu__search-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(to left, rgba(235, 241, 248, 0.5), rgba(235, 241, 248, 0.5)), #ffffff;
    border: 1px solid rgba(13, 28, 56, 0.25);
    padding: 12px;
    cursor: pointer;
}
body .mobile-menu .mobile-menu__search-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
body .mobile-menu .mobile-menu__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #000;
    cursor: pointer;
}
body .mobile-menu .mobile-menu__search-input::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

/* Mobile language selector */
body .mobile-menu .mobile-menu__footer {
    flex-shrink: 0; padding: 24px 0px;
    margin-top: auto;
}
body .mobile-menu .mobile-menu__lang-selector {
    display: none !important; align-items: center; gap: 8px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent; text-decoration: none; cursor: pointer;
    color: #ffffff;
    margin: 0;
    position: relative;
}
body .mobile-menu .mobile-menu__lang-selector:active { background: rgba(255, 255, 255, 0.05); }
body .mobile-menu .mobile-menu__lang-globe {
    flex-shrink: 0; width: 16px; height: 16px; color: #ffffff;
}
body .mobile-menu .mobile-menu__lang-text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; color: #ffffff; flex: 1;
}
body .mobile-menu .mobile-menu__lang-chevron {
    flex-shrink: 0; width: 6px; height: 14px; color: #ffffff;
    transition: transform 0.2s ease;
}
body .mobile-menu .mobile-menu__lang-selector.is-open .mobile-menu__lang-chevron {
    transform: rotate(90deg);
}

/* Language dropdown */
body .mobile-menu .mobile-menu__lang-dropdown {
    display: none;
    position: absolute; bottom: 100%; left: 0; right: 0;
    list-style: none; margin: 0; padding: 0;
    background: var(--color-primary, #0D1C38);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
body .mobile-menu .mobile-menu__lang-selector.is-open .mobile-menu__lang-dropdown {
    display: block;
}
body .mobile-menu .mobile-menu__lang-dropdown li a {
    display: block; padding: 12px 16px;
    color: #ffffff; text-decoration: none;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%;
}
body .mobile-menu .mobile-menu__lang-dropdown li a:hover,
body .mobile-menu .mobile-menu__lang-dropdown li a:active {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   12. RESPONSIVE BREAKPOINTS
   ============================================================================ */
@media (max-width: 1279px) {
    .desktop-navigation { display: none !important; }
    .header-cta-buttons.desktop-only { display: none !important; }
    .mega-panels-shelf { display: none !important; }
    .site-header { height: 64px; }
    :root { --header-height: 64px; }

    body.kp-transparent-header .site-header .inner {
        margin: 16px auto; padding: 0;
    }
    body.kp-transparent-header .site-header .header-container {
        max-width: calc(100% - 32px); padding: 16px;
    }
}

@media (max-width: 1024px) {
    body.kp-transparent-header .site-header .inner {
        margin: 16px auto; padding: 0;
    }
    body.kp-transparent-header .site-header .header-container {
        max-width: calc(100% - 32px); padding: 16px;
    }
}

/* Body state — scroll-lock wordt in JS geregeld via position:fixed.
   overflow:hidden veroorzaakte op mobile een kleine verticale "body
   schiet naar boven" shift op het moment van aanzetten. */

@media (min-width: 1025px) {
/* Lang selector hover: globe always dark blue (also when submenu is hovered)
   Reageert op :hover én op .is-hovering (JS class) zodat tekst en icons
   tegelijk terugvallen wanneer JS de class verwijdert. */
.nav-menu > li.lang-selector > a:hover::before,
.nav-menu > li.lang-selector:hover > a::before,
.nav-menu > li.lang-selector.is-hovering > a::before,
.nav-menu > li.lang-selector.is-hovering > a:hover::before {
    filter: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M13.193 10.8372C13.8794 9.71895 14.2418 8.43217 14.24 7.12013V7.11987C14.2418 5.80782 13.8793 4.52102 13.193 3.4028L13.1891 3.3967C12.5523 2.35884 11.66 1.50162 10.5975 0.906941C9.53494 0.312264 8.33766 4.97566e-06 7.12002 0C5.90239-4.97554e-06 4.7051 0.312245 3.64256 0.906912C2.58001 1.50158 1.68772 2.3588 1.05094 3.39665L1.04698 3.40283C0.362319 4.52181 5.08198e-06 5.80815 0 7.11998C-5.08187e-06 8.4318 0.362299 9.71814 1.04695 10.8371L1.05098 10.8434C1.68776 11.8812 2.58005 12.7384 3.64259 13.3331C4.70512 13.9278 5.9024 14.24 7.12003 14.24C8.33765 14.24 9.53492 13.9277 10.5975 13.3331C11.66 12.7384 12.5523 11.8812 13.189 10.8433L13.193 10.8372ZM8.0301 13.0197C7.89442 13.1506 7.73826 13.2585 7.56779 13.339C7.42787 13.4055 7.27491 13.44 7.12 13.44C6.96508 13.44 6.81212 13.4055 6.6722 13.339C6.3478 13.1733 6.0701 12.9289 5.8645 12.6282C5.44461 12.0215 5.13343 11.3463 4.94488 10.6329C5.66919 10.5884 6.39423 10.5657 7.12 10.5648C7.84547 10.5648 8.57055 10.5875 9.29523 10.6329C9.19087 10.9997 9.06051 11.3586 8.90515 11.7069C8.70057 12.1967 8.40347 12.6424 8.0301 13.0197ZM0.81392 7.52H3.68576C3.70446 8.32135 3.79132 9.11965 3.9454 9.90627C3.16035 9.97535 2.37731 10.0702 1.59627 10.1909C1.13891 9.37036 0.871553 8.45763 0.81392 7.52ZM1.59626 4.04908C2.37699 4.17007 3.16031 4.26497 3.94622 4.33379C3.79184 5.12035 3.70479 5.91865 3.68602 6.72H0.81392C0.871549 5.78237 1.1389 4.86963 1.59626 4.04908ZM6.20989 1.22026C6.34556 1.08935 6.50172 0.981494 6.6722 0.900966C6.81212 0.834483 6.96508 0.79999 7.12 0.79999C7.27491 0.79999 7.42787 0.834483 7.56779 0.900966C7.89219 1.06667 8.16989 1.31104 8.37549 1.61174C8.79538 2.2185 9.10655 2.89366 9.2951 3.60704C8.57079 3.65161 7.84576 3.67432 7.12 3.67516C6.39453 3.67515 5.66945 3.65244 4.94476 3.60703C5.04912 3.24024 5.17948 2.88135 5.33484 2.53309C5.53942 2.04329 5.83653 1.59755 6.20989 1.22026ZM13.4261 6.72H10.5542C10.5355 5.91865 10.4487 5.12034 10.2946 4.33372C11.0797 4.26464 11.8627 4.16976 12.6437 4.04908C13.1011 4.86963 13.3684 5.78237 13.4261 6.72ZM4.75001 9.84407C4.59356 9.07869 4.5052 8.30097 4.48597 7.52H9.75411C9.73505 8.30096 9.64685 9.0787 9.49055 9.8441C8.70123 9.7923 7.91105 9.76588 7.12 9.76484C6.32952 9.76483 5.53953 9.79124 4.75001 9.84407ZM9.48998 4.39591C9.64642 5.16129 9.73478 5.93903 9.75401 6.72H4.48588C4.50494 5.93903 4.59313 5.16128 4.74944 4.39588C5.53876 4.44766 6.32894 4.47409 7.12 4.47515C7.91048 4.47515 8.70047 4.44873 9.48998 4.39591ZM10.554 7.52H13.4261C13.3684 8.45763 13.1011 9.37037 12.6437 10.1909C11.863 10.0699 11.0797 9.97501 10.2938 9.9062C10.4482 9.11964 10.5352 8.32135 10.554 7.52ZM12.1641 3.31276C11.4815 3.41125 10.7968 3.48922 10.1101 3.54668C9.98667 3.08718 9.8275 2.63803 9.63402 2.20335C9.45738 1.80335 9.23512 1.42509 8.97165 1.07611C10.2449 1.46659 11.3622 2.24941 12.1641 3.31276ZM2.65106 2.65106C3.38145 1.91998 4.28002 1.37923 5.26801 1.0762C5.25302 1.09562 5.2376 1.11417 5.22282 1.13398C4.715 1.86502 4.3451 2.68274 4.13136 3.54681C3.44462 3.48864 2.75948 3.41063 2.07593 3.31276C2.25222 3.07925 2.44439 2.85816 2.65106 2.65106ZM2.07593 10.9272C2.75853 10.8287 3.44319 10.7508 4.12989 10.6933C4.25331 11.1528 4.41249 11.602 4.60597 12.0366C4.78261 12.4366 5.00488 12.8149 5.26834 13.1639C3.99508 12.7734 2.87776 11.9906 2.07593 10.9272ZM11.5889 11.5889C10.8585 12.32 9.95997 12.8608 8.97198 13.1638C8.98697 13.1444 9.00238 13.1258 9.01717 13.106C9.52499 12.375 9.8949 11.5573 10.1086 10.6932C10.7954 10.7513 11.4805 10.8294 12.1641 10.9272C11.9878 11.1607 11.7956 11.3818 11.5889 11.5889Z' fill='%230D1C38'/%3E%3C/svg%3E") !important;
}

.nav-menu > li.lang-selector > a:hover::after,
.nav-menu > li.lang-selector:hover > a::after,
.nav-menu > li.lang-selector.is-hovering > a::after,
.nav-menu > li.lang-selector.is-hovering > a:hover::after {
    filter: none !important;
}
}