/* Algemeen */
:root{
    --flex-main-color: #313131;
    --flex-accent-color: #c1ce02;
}

.flex-row{
    /* door "collapsing margins" valt 
    de margin over die van de volgende en 
    vorige rijen heen :) */
    margin-block: 150px;
}

.flex-row:not(.text_media){
    padding-left: 20px; padding-right: 20px;
}
.flex-row:not(.text_media) .content-wrapper{
    max-width: 1280px; margin: 0 auto;
}

/* Tekst & Media */
.text_media .content-wrapper,
.nummers_media .content-wrapper{
    display: flex; gap: 50px;
    align-items: center;
}

.text_media .content-wrapper.flipped,
.nummers_media .content-wrapper.flipped{
    flex-direction: row-reverse;
}

.text_media .content-wrapper .content{
    padding-block: 150px;
    display: flex; flex-direction: column; gap: 20px;
}

/* CTA Banner */
.cta_banner .content-wrapper{
    background-color: var(--flex-main-color);
}
.cta_banner .cta-wrapper{
    padding: 50px 100px;
    display: flex; justify-content: space-between;
    align-items: center;
}
.cta_banner .cta-wrapper h3{
    margin-bottom: 0;
}
.cta_banner .cta-wrapper .image{
    display: block;
    width: 100px; height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Gecentreerde Tekst */
.gecentreerde_tekst .content-wrapper{
    max-width: 800px; margin-inline: auto;
    text-align: center;
}

/* Carousel */
.carousel .swiper {
    width: 100%;
    /* height: 300px; */
}
.swiper-slide{
    background-color: var(--flex-main-color);
}
.swiper-scrollbar.swiper-scrollbar-horizontal,
.swiper-scrollbar{
    position: relative; margin-top: 20px; left: 0; right: 0; width: 100%;
    background-color: #272727;
}
.swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag{
    background-color: var(--flex-accent-color);
}


/* Dialog */
dialog{
    border-radius: 10px; overflow: visible;
    border: none;
}
dialog *{
    color: #000;
}
dialog::backdrop{
    background-color: #000; opacity: .6;
}
dialog .close-btn{
    cursor: pointer;
    position: absolute; right: -50px; top: -50px;
}


/* FAQ */

/* Technische functionaliteit */
.faq-item .faq-inner{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease-in-out;
}
.faq-item .faq-inner .content{
    overflow: hidden;
}
.faq-item.is-open .faq-inner{
    grid-template-rows: 1fr;
}

/* Styling */
.faq-item{
    margin-block: 30px;
}
.faq-item h4{
    font-size: 24px; font-weight: 600;

    cursor: pointer;
    padding-bottom: 20px;
    display: flex; flex-direction: row;
    justify-content: space-between; align-items: center;

    border-bottom: 1px solid currentColor;
}
.faq-item h4 svg{
    fill: currentColor;
}
.faq-item h4 svg,
.faq-item h4 svg rect:nth-child(1){
    transition: rotate 300ms ease-in-out;
    transform-origin: center;
}
.faq-item.is-open h4 svg{
    rotate: 90deg;
}
.faq-item.is-open h4 svg rect:nth-child(1){
    rotate: 90deg;
}


/* Formulier */
.formulier .content-wrapper{
    background-color: var(--flex-main-color);
    padding: 50px;
}

.formulier .content-wrapper.type-norm{
    max-width: 800px; margin-inline: auto;
    padding: 100px;
}
.formulier .content-wrapper.type-ext{
    display: flex; gap: 50px;
}
.formulier .content-wrapper.type-ext > div{
    flex: 1;
}


/* CTA Groep */
.cta_group .content-wrapper{
    background-color: var(--flex-main-color);
    padding: 50px;
}
.cta_group .content-wrapper h2{
    text-align: center;
}
.cta_group .content-wrapper .cta-wrapper{
    margin-top: 50px;

    display: flex; flex-direction: row;
    justify-content: center; align-items: center;
    gap: 20px;
}


/* (content/post) Grid */
.flex-contentgrid{
    display: grid;
}
.flex-contentgrid > .post .image{
    background-color: var(--flex-main-color);
    aspect-ratio: 3/2;
}

@media only screen and (max-width: 992px){
    .flex-contentgrid{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .text_media{
        padding-left: 20px; padding-right: 20px;
    }
    .text_media .content-wrapper .content{
        padding-block: 50px;
    }

    dialog .close-btn{
        top: -50px; right: 0;
    }
}
@media only screen and (max-width: 767px){
    .flex-contentgrid{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    dialog{
        width: 100%;
    }

}