@import url('https://openstad-cdn.nl/css/addon.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html .openstad,
html [data-apos-level] {
    --nlds-header-compact-height: 0;
    --nlds-main-menu-item-color: var(--brummen_blauw);
    --settingsBreadcrumbsBackgroundColor: transparent;
    --settingsBreadcrumbsPadding: 1rem 0;
    --nlds-default-background-color: #EDEFEC;
    --settingsBreadcrumbsCurrentFontWeight: 400;
    --nlds-section-border-radius: 8px;
    -webkit-font-smoothing: antialiased;
}

@media screen and (min-width: 768px) {
    html [data-apos-level] .row {
        --bs-gutter-x: 3rem;
    }
}

html .openstad .osc.counter-container:not(.--link) {
    background-color: white;
    color: black;
    border-radius: 4px;
}

.openstad .osc.counter-container .amount>span {
    border: 1px solid #0000002a;
}

[data-apos-level] .utrecht-heading-1 {
    padding: 0.125rem 0 0.75rem;
}

[data-apos-level] .utrecht-heading-2 {
    padding: 0.125rem 0 0.5rem;
}

#logo-image {
    max-height: 80px;
}

.breadcrumbs .breadcrumbs-container {
    padding: 0;
}

header.--compact {
    box-shadow: 0px 8px 12px 0px #0000000D;
}

.openstad .map-container.osc-map {
    aspect-ratio: unset;
}

.section.--solid.groen{
    background-color: #c9d12e;
    border-radius: 0;
    padding-block: 4rem;

    .utrecht-heading-1,
    .utrecht-heading-2,
    .utrecht-heading-3,
    .utrecht-heading-4,
    .utrecht-paragraph {
        color: #333;
    }

    .openstad .osc-agenda-item{
        background-color: #FFF;
        box-shadow: var(--box-shadow, 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16));
    }
    
}

.section.--solid.wit{
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: var(--box-shadow, 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16));
    padding-block: 4rem;

    .utrecht-heading-1,
    .utrecht-heading-2,
    .utrecht-heading-3,
    .utrecht-heading-4,
    .utrecht-paragraph {
        color: #333;
    }


}

.section.--solid.blauw{
    background-color: #064a8a;
    border-radius: 0;
    padding-block: 4rem;


    .utrecht-heading-1,
    .utrecht-heading-2,
    .utrecht-heading-3,
    .utrecht-heading-4,
    .utrecht-paragraph,
    .utrecht-link:any-link {
        color: white;
    }


    .icon-section .icon-section-content a.utrecht-link:any-link{
        color: #054A89;

        &:hover{
            text-decoration: none;
        }
    }

     .utrecht-link:any-link:active, .utrecht-link--html-span:focus, .utrecht-link--html-a:any-link:focus {
    background-color: unset;
 }

 .utrecht-link:any-link:hover{
    text-decoration: underline;
 }

    .icon-section-content .utrecht-paragraph, .utrecht-heading-3{
        color: #333;
    }
}



.openstad .osc-agenda-item h4 {
    color: var(--brummen_blauw);
    font-size: 20px;
}

.openstad .osc-choiceguide-container h4 {
    color: #000;
}

.openstad .question-type-text .utrecht-form-field__input textarea,
.openstad .question-type-text .utrecht-form-field__input input,
html .openstad .utrecht-form-field.utrecht-form-field--text:has(.utrecht-textbox[required]) .utrecht-textbox--html-input:invalid,
.openstad .question-type-text input[type=text],
.openstad .utrecht-textbox {
    border-radius: 2px;
    border-color: rgba(205, 219, 231, 1.00);
}

.utrecht-button-link.utrecht-button-link--html-a.utrecht-button-link--secondary-action.osc.counter-container.--link {
    background-color: var(--brummen_blauw);
}

.openstad .documentMap--container .map-container button.info-trigger {
    left: unset;
    right: 10px;
}

.openstad .documentMap--container .map-container button.info-trigger .sr-only {
    position: absolute;
}

/* .openstad .osc-carousel.width-100{
    display: none;
} */

.openstad .resourceOverviewWithMap-container .resource-card--link {
    padding-top: 1rem;
    padding-inline-start: 32px;
    padding-inline-end: 32px;
}

[data-apos-level] .denkmee .osc-carousel {
    display: none;
}

.openstad .resource-card--link {
    box-shadow: 0px 2px 8px 0px #0000001F;
    background-color: white;
    border-radius: 4px;
    height: max-content;
    transition: 0.2s;
}

.openstad .resource-card--link>div:nth-last-child(N+2) {
    padding: 0 1.5rem;
}

.openstad .resource-card--link .utrecht-heading-4 {
    margin: 0.5rem 0 0;
}

.openstad .resource-card--link:hover .osc-carousel .carousel-items:after {
    opacity: 0;
}

/* .openstad .resource-card--link .osc-carousel .carousel-items:after {
    background-image: url("data:image/svg+xml,%3Csvg width='304' height='39' viewBox='0 0 304 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M228.008 0C200.743 0 174.949 6.36937 152.016 17.6973H151.985C129.042 29.0251 103.258 35.3945 75.993 35.3945C48.7284 35.3945 22.9445 29.0251 0.000905908 17.6973L0 39H303.999L304 17.6973C281.056 6.36937 255.272 0 228.008 0Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 100%;
    height: 40px;
    content: '';
    display: block;
    opacity: 1;
    transition: 0.2s;
    position: absolute;
    bottom: 0;
    background-repeat: repeat no-repeat;
    background-size: contain;
}

.openstad .resource-card--link .osc-carousel .carousel-items .image-container:after {
    content: '';
    width: 100%;
    height: 40px;
    display: block;
    position: absolute;
    bottom: 0;
    background-repeat: repeat no-repeat;
    background-size: contain;
    transition: 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg width='304' height='39' viewBox='0 0 304 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M228.008 0C200.743 0 174.949 6.36937 152.016 17.6973H151.985C129.042 29.0251 103.258 35.3945 75.993 35.3945C48.7284 35.3945 22.9445 29.0251 0.000905908 17.6973L0 39H303.999L304 17.6973C281.056 6.36937 255.272 0 228.008 0Z' fill='%23F6F9FA'/%3E%3C/svg%3E%0A");

} */


[data-apos-level] .denkmee .resource-card--link {
    padding: 1.5rem 0;
    background-color: white;
    box-shadow: 0px 2px 8px 0px #0000001F;
    border-radius: 4px;
    height: max-content;
    transition: 0.2s;
}

.openstad .resource-card--link:hover {
    background-color: #F6F9FA;
    box-shadow: 0px 2px 8px 0px #0000;
}

.openstad .osc .resource-card--link .icon {
    font-weight: 400;
}

.icons.section .icon-section {
    background-color: transparent;
}

.icons.section .icon-section .icon-section-card img {
    width: 80px;
    height: 80px;
    padding: 12px;
    background-color: var(--nlds-default-background-color);
    border-radius: 100%;
}

.icons.section .icon-section .icon-section-content {
    padding: 0;
}

.icons.section .icon-section-card {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background-color: white;
    box-shadow: 0px 2px 8px 0px #0000001F;
    border-radius: 4px;
}

.icon-section .icon-section-content h3 {
    font-size: 18px;
    word-break: break-word;
}


.wave.icons {
    .icon-section .icon-section-card img {
    width: 100%;
    padding: unset;
    background-color: unset;
    border-radius: 4px;

    height: unset;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 166'%3E%3Cpath fill='black' d='M228.008 130.865c-27.265 0-53.059 6.322-75.993 17.567h-.03C129.041 159.677 103.257 166 75.992 166S22.944 159.677 0 148.432V8a8 8 0 0 1 8-8h288a8 8 0 0 1 8 8v140.432c-22.944-11.245-48.728-17.567-75.992-17.567'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 166'%3E%3Cpath fill='black' d='M228.008 130.865c-27.265 0-53.059 6.322-75.993 17.567h-.03C129.041 159.677 103.257 166 75.992 166S22.944 159.677 0 148.432V8a8 8 0 0 1 8-8h288a8 8 0 0 1 8 8v140.432c-22.944-11.245-48.728-17.567-75.992-17.567'/%3E%3C/svg%3E");

    -webkit-mask-size: cover;
    mask-size: cover;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    object-fit: cover;
    }

    .icon-section .icon-section-content {
    padding: 1.25rem;
}

    .icon-section-card {
        padding: 0;
    }


}



footer {
    background-image: url('https://openstad-cdn.nl/assets/brummen/background-circle.png');
    background-position: right -170px bottom -360px;
    background-size: 509px;
    background-repeat: no-repeat;
}

[data-apos-refreshable],
.bp-wrapper,
main {
    background: #F9FBFA;
}

#footer-container {
    background: transparent;
}

#footer-container footer {
    padding: 2.5rem 0;
}

.section.--solid {
    padding: 2rem;
}

.osc,
.osc * {
    font-family: inherit;
}

[data-apos-level] .col-sm-6 .image-component.--normal.--cover {
    border-radius: 8px;
}

.section.--solid.support {
    background-color: #E4EDF2;
}

.section.--solid.secondary {
    background-color: #CAD12C;
}

.section.--solid.primary {
    background-color: #054A89;

        .utrecht-link:any-link{
        text-decoration-color: white;
    }

}

.section.--solid.primary [data-openstad-rte] *,
.section.--solid.primary [data-openstad-title] * {
    color: white;
}

.news-card figure img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 166'%3E%3Cpath fill='black' d='M228.008 130.865c-27.265 0-53.059 6.322-75.993 17.567h-.03C129.041 159.677 103.257 166 75.992 166S22.944 159.677 0 148.432V8a8 8 0 0 1 8-8h288a8 8 0 0 1 8 8v140.432c-22.944-11.245-48.728-17.567-75.992-17.567'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 166'%3E%3Cpath fill='black' d='M228.008 130.865c-27.265 0-53.059 6.322-75.993 17.567h-.03C129.041 159.677 103.257 166 75.992 166S22.944 159.677 0 148.432V8a8 8 0 0 1 8-8h288a8 8 0 0 1 8 8v140.432c-22.944-11.245-48.728-17.567-75.992-17.567'/%3E%3C/svg%3E");

    -webkit-mask-size: cover;
    mask-size: cover;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.news-card{
    border: unset;
    background-color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16);
    transition: 0.1s;
}

.news-card:hover{
    background-color: #f5f8fa;
    box-shadow: unset;
}

.news-card .card-content{
        .utrecht-heading-1, .utrecht-heading-2, .utrecht-heading-3, .utrecht-heading-4, .utrecht-paragraph{
            color: #333!important;
        }
}

.news-card:hover h3.utrecht-heading-4{
    text-decoration: underline;
}

.openstad .osc-agenda-item{
    box-shadow: var(--box-shadow, 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16));
    border-radius: 4px;
}

.button-align div:has(> .utrecht-button-group.utrecht-button-group--row){
    margin-block-start: 0;
}

.button-align .utrecht-button-group.utrecht-button-group--row{
    justify-content: end;
}

html:has(.end) #footer-container footer{
    margin-block-start: 0;
}

.apos-area:has(.sticky-nav){
    height: 100%;
}

.sticky-nav{
    position: sticky;
  top: 4rem; /* afstand vanaf boven */
  z-index: 10;
}

.sticky-nav .apos-area > div{
    margin-block-start: 0;
}

@media screen and (max-width: 576px) {
    .sticky-nav .utrecht-button-group--column{
        margin-bottom: 2rem;
        justify-content: center;
        .utrecht-button-link--primary-action{
            width: 100%;
            max-width: 100%;
        }
}
    .section.--negative.first{
        margin-block-start: 2rem;
        border-radius: 0;
        box-shadow: unset;
    }

    .groen:has(.wit){
        padding-inline: 10px;

        .wit{
            padding-inline:1rem;
        }
    }

    .section.--solid.groen,
    .section.--solid.wit, 
    .section.--solid.blauw{
    padding-block: 2rem;
   }
}

*{
    scroll-margin-top: 50px; 
}

.related-posts.section{
    margin-block-start: 0;
}

@container related-posts-container (max-width: 450px) {
    .related-posts .static-grid .news-card figure {
        display: block;
    }
}


.banner.big .utrecht-button.utrecht-button--primary-action{
    font-size: 0;
}

.banner.big .utrecht-button.utrecht-button--primary-action:after{
    content: "Plaats reactie"; 
    font-size: 16px;
}

.utrecht-paragraph.comment-reaction-text{
    hyphens: auto;
}

.carousel-container.static-grid .static-list:not(:has(li)) {
    display: flex;
}

.carousel-container.static-grid .static-list:not(:has(li))::before {
    content: "Er zijn nog geen nieuwsberichten";
    display: block;
}

.utrecht-accordion__button[aria-expanded]:after{
    display: none;
}


.breadcrumbs .breadcrumb-nav [aria-current] {
    display: inline-block;
    text-transform: lowercase;
}

.breadcrumbs .breadcrumb-nav [aria-current]::first-letter {
    text-transform: uppercase;
}

.utrecht-link--html-span:focus, .utrecht-link--html-a:any-link:focus{
    background-color: unset;
}

.groen .openstad  .form-container{
    border: unset;
    border-radius: 8px;
}

.openstad .osc .osc-choiceguide-container .question-type-range input[type=range].a-to-b-range::-webkit-slider-thumb{
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Ccircle id='svg_1' stroke-width='2' stroke='%23054b89' fill='%23054b89' r='11' cy='12' cx='11.93554'/%3E%3Cpath stroke='null' id='svg_2' fill='white' d='m9.3966,6.53503l-5.46488,5.46493l5.46488,5.46488l1.24515,-1.24518l-4.21982,-4.2197l4.21982,-4.21982l-1.24515,-1.24511zm5.20679,10.9299l5.46488,-5.46488l-5.46488,-5.46488l-1.24518,1.24511l4.21979,4.21978l-4.21979,4.21979l1.24518,1.2451z'/%3E%3C/g%3E%3C/svg%3E");
}

.openstad .a-b-slider-container .range-bar-container .slider_line-container--bar{
    background-color: #c9d12e;
}

.openstad .utrecht-accordion__button:before{
    display: none;
}


.groen .openstad .form-container {
    background-color: transparent;
}

.groen .openstad .form-container>.question{
    background-color: #fff;
    border-radius: 8px;
}

.groen .openstad .osc .osc-choiceguide-container .question+.question{
    margin-top: 2rem;
}

.groen .openstad .osc .osc-choiceguide-container .question+.button-group.--flex {
    margin-top: 2rem;
    background-color: transparent;
}


.groen .openstad .expand-trigger{
    border-radius: 8px 8px 0 0;
}

.groen .openstad .expand-trigger[aria-expanded="false"] {
    border-radius: 8px;
}

.groen .openstad .expand-trigger h4{
    font-size: 0;

    &::before{
        content: "Verberg voorkeuren";
        font-size: 16px;
    }
}

.groen .openstad .expand-trigger[aria-expanded="false"] h4{
    border-radius: 8px;
    font-size: 0;

    &::before{
        content: "Bekijk je voorkeuren";
        font-size: 16px;
    }
}

.groen .osc-choices .osc-choice:last-child, .groen .openstad ul.osc-choices{
    border-radius: 0 0 8px 8px;
}

.groen .a-b-info .utrecht-emphasis.utrecht-emphasis--strong{
	font-weight: 500;
}

.groen .openstad .form-container figure img{
    max-height: 20rem;
    width: 100%;
    object-fit: cover;
}

.groen .openstad .button-group:first-child{
    margin-inline-start: 2rem;
    margin-block-end: 2rem;
}

.groen .question-type-checkbox .info-image-container{
    margin-block-end: 2rem;
}