:root {
    --section_padding: 100px 0;
}

.p_image_desktop {
    margin: 0;

}

.container-fullwidth {
    .container_inner {
        width: 100%;
    }
}

.pbuilder_cards_wrapper {
    .row_cards {
        .card_col {
            flex: 0 0 calc(100% / var(--cols) - 20px);
        }
    }
}

.heading1_150 {
	h1 {
		width: 150%;
		position: relative;
		z-index: 1;
	}
}

.headings_margin_15 {
	h2, h3, h4, h5, h6 {
		margin: 0 0 15px;
	}
}

ul.icon_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    &.icon_type_fill {
        li {
            background: #fff;
            margin: 0 0 5px;
            padding: 15px 25px;
            a {
                display: block;
                width: 100%;
            }
        }
        li:has(a) {
            padding: 0;
            a {
                padding: 15px 25px;
            }
        }
    }
    &.icon_type_large {
        display: flex;
        li {
            flex: 1;
            margin: 0 5px;
            background: #fff;
            text-align: center;
            padding: 35px;
            &:has(a) {
                padding: 0;
            }
            a {
                display: block;
                padding: 35px;
            }
            .tab-icon,
            .tab-title,
            .tab-content {
                display: block;
                width: 100%;
                margin: 0;
            }
            .tab-icon {
                font-size: var(--heading2_size);
                margin-bottom: 15px;
            }
            .tab-title {
                font-size: var(--heading4_size);
                line-height: var(--heading4_line_height);
            }
            .tab-content {
                margin-top: 10px;
            }
        }
    }
    li {
        padding: 0;
        margin: 0;
        &:before {
            display: none;
        }
        .tab-icon {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            width: 25px;
        }
        .tab-title {
            display: inline-block;
            vertical-align: middle;
        }
        .tab-content {
            display: block;
            margin-left: 40px;
            color: var(--body_font_color);
        }
    }
}

.section.admin_only { display: none; }
body.logged-in {
    .section.admin_only {
        display: block;
    }
}

.pbuilder-row {
    .pbuilder-content-column {
        &.type_headerimg {
            position: relative;
        }
        .col_inner {
            width: 100%;
            &.height_100 {
                height: 100%;
            }
            &.height_100 {
                height: 100%;
            }
			pre {
				font-family: var(--bodyFont);
				margin: 0 0 20px;
				width: fit-content;
				font-size: 1.9rem;
				font-weight: 400;
                position: relative;
                z-index: 0;
                &:before {
                    content: '';
                    position: absolute;
                    z-index: -1;
                    bottom: 0;
                    left: -5px;
                    right: -5px;
                    height: 15px;
                    pointer-events: none;
                    background: #fbfbfb;
                }
			}
            p {

            }
            .img {
                width: 100%;
                background-size: cover!important;
                &.image_desktop_fullheight {
                    height: 100%;
                }
            }
        }
        &.img_portrait {
            img {
                width: 100%;
                height: auto;
                aspect-ratio: 3 / 4;
                object-fit: cover;
            }
        }
    }
}

.tabset {
    position: relative;
}

.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw; /* Verberg de radio buttons */
}

/* Verberg standaard alle tabbladen */
.tab-panels .tab-panel {
    display: none;
}

/* Toon de inhoud van het geselecteerde tabblad */
.tabset > input:checked + label ~ .tab-panels .tab-panel {
    display: none;
}

.tabset > input:checked + label ~ .tab-panels .tab-panel:first-of-type {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 15px 25px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
}

.tabset > label::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: #8d8d8d;
}

.tabset > input:focus-visible + label {
    outline: 2px solid rgba(0,102,204,1);
    border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: #06c;
}

.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 30px 0;
    border-top: 1px solid #ccc;
}




.section {
    position: relative;
    z-index: 0;
    &.height_100vh {
        height: 100vh;
        .pbuilder-content-column {
            height: 100vh;
        }
    }
    .container {
        &.type_header_100vh {
            height: 100vh;
            position: absolute;
            top: 0;
            left: 50%;
            right: auto;
            margin: 0 auto;
            width: 100%;
            transform: translateX(-50%);
        }
    }
    .overlapping {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        z-index: -1;
        pointer-events: none;
        &.top {
            top: 0;
            bottom: inherit;
        }
        &.bottom {
            top: inherit;
            bottom: 0;
        }
        &.height_10 {
            height: 10%;
        }
        &.height_20 {
            height: 20%;
        }
        &.height_30 {
            height: 30%;
        }
        &.height_40 {
            height: 40%;
        }
        &.height_50 {
            height: 50%;
        }
    }
    .header_image {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        .img_wrap {
            height: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 0!important;
            .overlay {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                pointer-events: none;
                z-index: -1;
            }
        }
        .img {
            position: absolute;
            z-index: -1;
            pointer-events: none;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-size: cover!important;
            background-repeat: no-repeat!important;
            width: 100%;
        }
    }
    .container_inner {
        position: relative;
        z-index: 1;
    }
}

.swiper {
    .swiper-wrapper.img_contain {
        .swiper-slide {
            background-size: contain!important;
        }
    }
    .swiper-slide {
        background-size: cover!important;
        background-position: center center!important;
        background-repeat: no-repeat!important;
    }
    .swiper-button-next,
    .swiper-button-prev {
        color: #000;
        background: #fff;
        width: 55px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        border-radius: 50em;
        top: 50%;
        margin: 0;
        transform: translateY(-50%);
        &:after {
            font-size: 2.2rem;
        }
    }
    .swiper-pagination {
        position: relative;
        top: 0!important;
        bottom: 0!important;
        margin: 30px 0 0 0;
        .swiper-pagination-bullet {
            &.swiper-pagination-bullet-active {
                background: #000;
            }
        }
    }
}