@import url("tokens.css");
@import url("menu.css");



* {
    box-sizing: border-box;
}

#aspnetForm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}


/* typografie */
body {
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 140%;
    color: var(--cl-default);
    font-family: "Fira Sans", sans-serif;
    margin: 0;
}






h1 {
    font-size: var(--font-h1);
    font-weight: 700;
}

h2 {
    font-size: var(--font-h2);
    font-weight: 700;
}

h3 {
    font-size: var(--font-h3);
}

h1,
h2,
h3,
h4 {
    font-family: "Fira Sans", sans-serif;
    line-height: 120%;
    font-weight: 700;
    color: var(--cl-default);
}

h1,
h2,
h3,
p {
    margin-top: 0;
    margin-bottom: var(--gap-txt-sm);
}


p+h2,
p+h3 {
    margin-top: var(--gap-obj-sm);
}

h1+div {
    margin-top: var(--gap-obj-md);
}

label span,
label {
    font-size: 16px;
}


a {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--cl-accent);
    transition: 0.3s;
    background-repeat: no-repeat;
    background-size: 0 100%;

    &:hover {
        background-image: linear-gradient(to bottom, #ccdeee 0, #ccdeee 100%);
        background-size: 100% 100%;
    }
}


/* einde typografie */

/* componenten */




*:focus-visible {
    outline: currentColor solid 1px;
    outline-offset: -3px;
}

.breadcrum_container {
    max-width: 1398px;
    margin: 0 auto;
    padding: var(--pad-obj-xs) var(--pad-sec-x-md);
    width: 100%;

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}

.b_btn {
    background: var(--cl-button);
    color: var(--cl-default);
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    font-size: var(--font-button);
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 16px;


    &::after {
        content: "\f061";
        font-family: 'Font Awesome 6 Pro';
        margin-left: 16px;
        font-size: 18px;
    }

    &:hover {
        background: var(--cl-button-hover);
    }
}


.b_btn2 {
    color: var(--cl-accent);
    display: block;
    font-size: var(--font-button);
    font-weight: 600;
    cursor: pointer;
    /* border-bottom: 1px solid var(--cl-accent); */
    text-decoration: underline;
    transition: 0.3s;
    background-repeat: no-repeat;
    background-size: 0 100%;
    text-underline-offset: 6px;
    width: fit-content;
    
 
    &::after {
        content: "\f061";
        font-family: 'Font Awesome 6 Pro';
        /* margin-left: 16px; */
        font-size: 18px;
    }

    &.extern::after {
        content: "\e09f";
    }


    &:hover {
        background-image: linear-gradient(to bottom, #ccdeee 0, #ccdeee 100%);
        background-size: 100% 100%;

    }
}

.a-skiplink {
    background-color: #fff;
    border: 2px solid #999;
    display: block;
    left: -1000em;
    padding: .5em;
    position: absolute;
    z-index: 10;
    transition: none;
}
.a-skiplink:focus-visible {
    left: 1em;
    top: 126px;
    z-index: 1000;
}


/* einde componenten */

.page_homegent,
.page_home {

    .breadcrum_container,
    #newslisttitle {
        display: none;
    }

}

#links {
    .content {
        padding-top: 0;
    }

    .tileset--content--items {
        row-gap: 18px;
    }

    a {
        font-weight: 600;
        
    
    }


}


    a.link-extern::after {
        font-family: 'Font Awesome 6 Pro';
        content: "\e09f";
        font-size: 16px;
        color: var(--cl-accent);
    }




.ac-title {
    background: var(--cl-highlight);
    display: block;
    width: fit-content;
    padding: var(--pad-obj-xs);
    font-weight: 800;
    position: relative;
    margin-bottom: 24px;
    font-size: var(--font-h0);


    &::after {
        content: "";
        height: 24px;
        width: 60px;
        position: absolute;
        background-image: url(images/acolade.svg);
        background-size: cover;
        bottom: -24px;
        left: 0;
    }
}

.b_inputfield {
    width: 100%;
    padding: var(--pad-obj-xxs);
    margin-top: 4px;
    border: var(--cl-default) 0.5px solid;
    font-size: 16px;
    
}

.contactinput {
    margin-bottom: var(--gap-obj-sm);
}

input.b_btn+input.b_btn {
    margin-top: var(--gap-obj-xs);
}



#qs-container {
    max-width: 100%;
    background: var(--ice-blue);
}


/* layout */


.featured-tiles .tileset--content--items,
.news .newslist,
.page_news .newspreviews,
.report-tiles,
.links .tileset--content--items {
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    gap: var(--gap-obj-md);
}




.section.highlight {
    background: var(--section-bg);
}

.section {
    max-width: 1704px;
    margin: 0 auto;
}

#custompagecontent {
    max-width: 618px;
    margin: 0 auto;
}


.content,
#content,
.page_news.ballroom_nieuws #content {
    max-width: 1398px;
    margin: 0 auto;
    padding: var(--pad-sec-y-lg) var(--pad-sec-x-md);
    width: 100%;
}

.heading-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--pad-obj-md);
    flex-direction: column;
    gap: var(--gap-obj-sm);

    h2 {
        margin-bottom: 0;
    }


}





/* tiles */

.tileset {


    .b_cat-intro {
        display: none;
    }

}

.section.hero {
    position: relative;
    padding-top: 70px;

    &::before {
        position: absolute;
        content: "";
        background: url(images/bannerGinC_gravensteen_v3.jpg) top center no-repeat;
        background-size: cover;
        height: 280px;
        width: 100%;
        top: 0;
        right: 0;
        left: 0;
    }
}

.quick-links a,
.newslist li,
.newspreviews li {
    &:after {
        position: absolute;
        height: 32px;
        width: 32px;
        content: "";
        background: var(--cl-button) url(images/arrow.svg) center center no-repeat;
        right: 0;
        bottom: 0;
    }
}

.quick-links {

    .tileset {
        grid-template-columns: repeat(1, 1fr);
        display: grid;
        gap: var(--gap-obj-md);
    }

    h2 {
        display: none;
    }

    .tileset--content--items {
        grid-column: span 2;
        grid-template-columns: repeat(1, 1fr);
        display: grid;
        gap: var(--gap-obj-md);

        .tile {
            grid-column: span 2;

            a {
                background: var(--section-bg);
                display: block;
                padding: var(--pad-obj-md);
                font-weight: 700;
                font-size: var(--font-h3);
                color: var(--cl-default);
                height: 100%;
                position: relative;
                text-decoration: none;
                color: var(--cl-default);



                .tile-section-name {
                    margin: var(--gap-obj-xs) 0;
                    line-height: 1.2;
                }


            }
        }

        .extern a::after {
            background: var(--cl-button) url(images/ex-arrow.svg) center center no-repeat;
        }

        .tile-section-icon img {
            width: 44px;
            height: 44px;
        }
    }

}


.tile.extern a.link-extern::after {
    content: none;
}


.themes {

    h2 {
        font-size: var(--font-h3);

        span {
            display: none;
        }
    }


    .content-header {
        position: relative;



        .image-wrapper {
            position: absolute;
            right: var(--pad-sec-y-lg);
            top: var(--pad-sec-y-lg);
            z-index: 1;
            width: 268px;
            height: 268px;
            display: none;

            &::after {
                content: "";
                background: url(images/man-op-brug.jpg) center center no-repeat;
                background-size: cover;
                position: absolute;
                width: 100%;
                height: 100%;
            }
        }
    }


    .ac-title {
        font-size: var(--font-h1);
        background: var(--cl-accent);
        color: #fff;
        padding: var(--pad-obj-xxs);

        &::after {
            background-image: url(images/acolade-blauw.svg);
        }
    }



    .tileset {
        grid-column: span 2;
        background: var(--section-bg);
        padding: var(--pad-obj-md);


        .tileset--content--items {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .disabled-link a {
            cursor: not-allowed;
            opacity: 0.5;

            &:hover {
                background-image: none;
            }
        }
    }
}

.themes.dashboards .content-header .image-wrapper::after {
    background: url(images/verrekijker.jpg) center center no-repeat;
    background-size: cover;
}


/* nieuws */

.overviewheading {
    display: none;
}

.newslist,
.newspreviews {

    .postername,
    .meta__separator {
        display: none;
    }



    li {
        position: relative;


        .newslistitem__readmore {
            display: none;
        }

        .teaser,
        .nieuwstitel {
            position: absolute;
            bottom: var(--pad-obj-xxs);
            left: var(--pad-obj-xxs);
            width: 75%;
        }


        h3 {
            margin: 0;
            font-weight: 600;
            display: inline;

            font-size: var(--font-h4);
            background: #fff;
            color: var(--cl-default);
            padding: 5px;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;

            a {
                text-decoration: none;
                color: var(--cl-default);

                &:hover {
                    background-image: none;
                }

            }
        }

        .nieuwsdatum {
            display: block;
        }

        time {
            background: #fff;
            padding: 2px 5px;
            display: inline-block;
            font-size: 16px;
        }

        .newslistitem__preview,
        .datumseparator {
            display: none;
        }

        .nieuwscontrol {
            text-indent: -9999999999999999px;
            height: 0;
        }

    }

    .morelink {
        display: none;
    }

    .listitem__image img {
        display: block;
        width: 100%;
        object-fit: cover;
        height: 294px;
    }


}






.container_newsitem {
    max-width: 1704px;
    margin: 0 auto;
    background: var(--cl-highlight);
}

.ballroom_nieuws #content {
    max-width: 100%;
    padding: 0;
}






#preface_container {
    max-width: 1398px;
    margin: 0 auto;
    padding: var(--pad-sec-y-lg) var(--pad-sec-x-md);
    width: 100%;
    position: relative;



    p {
        margin-bottom: 0;
    }


    time {
        font-size: 16px;
        
    }

    #container_meta {
        margin-bottom: var(--gap-txt-xs);
    }

    .postername {
        display: none;
    }

    #ctl00_QsPH_ctl00_image {
        position: absolute;
        right: var(--pad-sec-y-lg);
        top: var(--pad-sec-y-lg);
        z-index: 1;
        width: 268px;
        height: 268px;
        display: none;


        img {
            object-fit: cover;
            width: 100%;
        }
    }
}

#article_container {
    max-width: 1398px;
    margin: 0 auto;
    padding: var(--pad-sec-y-lg) var(--pad-sec-x-md);
    width: 100%;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);

    #ctl00_QsPH_ctl00_article {
        max-width: 618px;
        margin: 0 auto;
    }
}


.featured-tiles,
.news,
.page_news {
    .tileset h2 {
        display: none;
    }


    .tile-section-image {
        margin-bottom: var(--gap-obj-sm);
    }

    .tile img {
        height: 300px;
        width: 100%;
        object-fit: cover;

    }

    .tile a {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
        color: var(--cl-default);


        &:hover {
            background-image: none;
        }

        .standalone-link {
            margin-top: auto;
        }

        .implant {
            text-transform: lowercase;

            span {
                display: none;
            }
        }
    }

    .disabled {
        opacity: 0.5;
        cursor: not-allowed;
        display: flex;
        flex-direction: column;
        height: 100%;

        .standalone-link {
            margin-top: auto;
            display: inline;
            cursor: not-allowed;

            &:hover {
                background-image: none;
            }
        }
    }
}

.newspager {
    margin-top: var(--pad-sec-y-lg);

    ul {
        gap: 0;
    }

    li {
        display: flex;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
        height: 30px;
        
        &.is-current {
            font-weight: 600;
            border: solid 1px var(--cl-default);
        }

        

        a {
            padding: 3px 10px;    
            text-decoration: none;
            color: var(--cl-default);
            font-size: 16px;
            font-weight: 600;

            &:hover {
                background-image: linear-gradient(to bottom, #ffdb5a 0, #ffdb5a 100%);
            }

        }
    }

    .newspager__item--prev span, .newspager__item--next span {
        position: relative;
    }
}    


.contactform {
    background: var(--section-bg);
    max-width: 800px;
    padding: var(--pad-obj-md);
}



@media screen and (min-width: 600px) {
    .quick-links .tileset--content--items {
        grid-column: span 4;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gap-obj-md);
    }

    .featured-tiles .tileset--content--items,
    .news .newslist,
    .page_news .newspreviews,
    .report-tiles,
    .links .tileset--content--items {
        grid-template-columns: repeat(4, 1fr);


        .tile,
        li {
            grid-column: span 2;


            .tile-section-image img {
                height: 305px;
                width: 100%;
                object-fit: cover;

            }

        }

        .listitem__image img {
            height: 402px;
        }
    }

    .heading-wrapper {
        flex-direction: row;
    }



    

}





@media screen and (min-width: 769px) {
    .quick-links .tileset--content--items {
        grid-column: span 5;

        .tile-section-icon img {
            width: 55px;
            height: 55px;
        }
    }

    .quick-links a,
    .newslist li,
    .newspreviews li {
        &:after {
            height: 40px;
            width: 40px;
        }
    }


    .ac-title {
        margin-bottom: 27px;

        &::after {
            height: 30px;
            width: 92px;
            bottom: -30px;
        }
    }

    .section.hero {
        padding-top: 170px;
        
        &::before {
            height: 451px;
        }
    }

    #preface_container {
        min-height: 372px;

        #ctl00_QsPH_ctl00_image {
            display: block;
            width: 320px;
            height: 320px;
        }

        h1,
        p {
            width: calc(100% - 384px);
        }

    }

    #article_container #ctl00_QsPH_ctl00_article {
        margin-top: var(--pad-sec-y-lg);
    }

    .themes .section {
        min-height: 478px;



        .content-header .image-wrapper {
            display: block;
            width: 363px;
            height: 363px;
        }

        .text-wrapper {
            width: calc(100% - 384px);
        }

    }

    .report-tiles {
        margin-top: var(--pad-sec-y-lg);
    }




}





@media screen and (min-width: 1025px) {

    .featured-tiles .tileset--content--items,
    .news .newslist,
    .page_news .newspreviews,
    .report-tiles,
    .links .tileset--content--items {
        grid-template-columns: repeat(6, 1fr);
    }

    .ac-title {
        margin-bottom: 35px;

        &::after {
            height: 35px;
            width: 100px;
            bottom: -35px;
        }
    }

    .quick-links .tileset {
        grid-template-columns: repeat(6, 1fr);
        grid-column: span 1;

    }

    .quick-links {
        .tileset--content--items .tile {
            grid-column: span 2;
        }
    }

    .quick-links a,
    .newslist li,
    .newspreviews li {
        &:after {
            height: 48px;
            width: 48px;
        }
    }




    .section.hero {
        padding-top: 170px;

        &::before {
            height: 549px;
        }
    }


    #preface_container {
        #ctl00_QsPH_ctl00_image {
            width: 395px;
            height: 395px;
        }

        h1,
        p {
            width: calc(100% - 450px);
        }

    }


    .themes .section {
        .content-header .image-wrapper {
            width: 509px;
            height: 509px;
        }

        .text-wrapper {
            width: calc(100% - 568px);
        }

    }

    .themes {
        .tileset {
            min-height: 403px;
        }
    }

}




@media screen and (min-width: 1245px) {
    .quick-links .tileset--content--items {
        grid-column: span 4;
    }
}