/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

/* ============================================================
 * Header location — white overlay strip behind the centred bar
 *   so the page content underneath doesn't show on the sides.
 * ============================================================ */
.elementor-location-header:before {
    width: 100%;
    background: #fff !important;
    content: "";
    height: 100px;
    position: absolute;
    z-index: 99;
}

@media (max-width: 768px) {
    .elementor-location-header:before {
        height: 50px;
    }
}

/* ============================================================
 * Header template (post 519) — centred bar
 * ============================================================ */
.elementor-element.elementor-element-ef5b43d {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
 * Header hamburger dropdown (post 519, widget 12be3f0)
 *   - Positioned right under the toggle, sized to its content
 *   - Dark-blue background, white right-aligned text
 *   - On mobile: fixed narrow width so the link wraps
 * ============================================================ */
.elementor-element.elementor-element-12be3f0 {
    .elementor-nav-menu--dropdown {
        left: auto !important;
        right: 0 !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        background-color: #202C60 !important;

        ul.elementor-nav-menu { width: auto !important; }

        a.elementor-item {
            color: #FFFFFF !important;
            background-color: transparent !important;
            text-align: right !important;
            justify-content: flex-end !important;
            white-space: nowrap !important;
        }
    }

    @media (max-width: 767px) {
        .elementor-nav-menu--dropdown {
            width: 170px !important;
            max-width: 170px !important;

            a.elementor-item { white-space: normal !important; }
        }
    }
}

/* ============================================================
 * Image-carousel shared styles (homepage post 10)
 *   - Dots positioned tight under the active slide
 *   - Outlined inactive dots, filled active dot
 *   - Faded non-active slide
 * ============================================================ */

/* Carousel 1 (148fd5c) — chart slides, flat frame (grafieken-1 ratio) + contain */
.elementor-element.elementor-element-148fd5c {
    .swiper-slide-inner {
        aspect-ratio: 1024 / 891;
        width: 100%;
        margin: 0;
    }

    .swiper-slide-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .swiper-pagination {
        margin: 0;
        text-align: center;
        padding: 0;
        line-height: 0;
    }

    .swiper { padding-bottom: 30px !important; margin-bottom: 0 !important; }

    .swiper-pagination-bullet {
        background: transparent;
        border: 1px solid #202C5C;
        opacity: 1;
        box-sizing: border-box;
    }
    .swiper-pagination-bullet-active { background: #202C5C; }
}

/* Carousel 2 (14a4f31) — square 1:1 country/beach slides */
.elementor-element.elementor-element-14a4f31 {
    .swiper-slide-image {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .swiper-pagination {
        margin: 0;
        text-align: center;
        padding: 0;
        line-height: 0;
    }

    .swiper { padding-bottom: 30px !important; margin-bottom: 0 !important; }

    .swiper-pagination-bullet {
        background: transparent;
        border: 1px solid #202C5C;
        opacity: 1;
        box-sizing: border-box;
    }
    .swiper-pagination-bullet-active { background: #202C5C; }
}

/* ============================================================
 * FAQ accordion (4b881eb) — om en om lichtblauwe header
 * ============================================================ */
.elementor-element.elementor-element-4b881eb {
    .e-n-accordion-item:nth-child(odd) > summary.e-n-accordion-item-title {
        background-color: #93B8E2;
    }
}