
/* Background color wide overview pages */
[data-document-type="1"].layout-1,
[data-document-type="55"],
[data-document-type="56"],
[data-document-type="64"],
[data-document-type="66"],
[data-document-type="77"] {
    background-color: var(--root-color-background--grey);
}

/* Top Button "Mijn Wijk bij Duurstede" */
.page-header__button-menu .button {
    --border-top-width: var(--root-border-width);
    --border-right-width: var(--root-border-width);
    --border-bottom-width: var(--root-border-width);
    --border-left-width: var(--root-border-width);
    --height: calc(3rem - (2 * var(--root-border-width)));
}

.page-header__button-menu .button.button-support {
    --border-top-color: transparent;
    --border-right-color: transparent;
    --border-bottom-color: transparent;
    --border-left-color: transparent;
}

.page-header__button-menu .button .button__body {
    padding-left: 3.5rem;
    position: relative;
}

.page-header__button-menu .button .button__body::before {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='100%25' height='100%25' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M7.5,0C3.36,0 0,3.36 0,7.5C0,11.64 3.36,15 7.5,15C11.64,15 15,11.64 15,7.5C15,3.36 11.64,0 7.5,0ZM7.5,2.25C8.745,2.25 9.75,3.255 9.75,4.5C9.75,5.745 8.745,6.75 7.5,6.75C6.255,6.75 5.25,5.745 5.25,4.5C5.25,3.255 6.255,2.25 7.5,2.25ZM7.5,12.9C5.625,12.9 3.968,11.94 3,10.485C3.023,8.993 6,8.175 7.5,8.175C8.993,8.175 11.977,8.993 12,10.485C11.033,11.94 9.375,12.9 7.5,12.9Z' style='fill:%23333;fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
    content: "";
    position: absolute;
    left: 1rem;
    height: 1.5rem;
    width: 1.5rem;
}

@media (max-width: 29.999rem) {
    .page-header__button-menu .button.button-support .button__body,
    .page-header__toggle-search__text {
        --font-size: 0.813em;
    }
}

@media (max-width: 61.999rem) {
    .page-header__button-menu .button.button-support .button__body,
    .page-header__toggle-search__text {
        --font-size: 0.875em;
    }

    .page-header__button-menu .button {
        --font-weight: var(--root-font-weight--bold);
    }

    .page-header__button-menu .button.button-support {
        --color: var(--root-color--white);
    }

    .page-header__button-menu .button .button__body {
        padding-right: 0;
        padding-left: 2.5rem;
        --background-color: transparent;
    }

    .page-header__button-menu .button .button__body::before {
        background-image: url("data:image/svg+xml,%0A%3Csvg width='100%25' height='100%25' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M7.5,0C3.36,0 0,3.36 0,7.5C0,11.64 3.36,15 7.5,15C11.64,15 15,11.64 15,7.5C15,3.36 11.64,0 7.5,0ZM7.5,2.25C8.745,2.25 9.75,3.255 9.75,4.5C9.75,5.745 8.745,6.75 7.5,6.75C6.255,6.75 5.25,5.745 5.25,4.5C5.25,3.255 6.255,2.25 7.5,2.25ZM7.5,12.9C5.625,12.9 3.968,11.94 3,10.485C3.023,8.993 6,8.175 7.5,8.175C8.993,8.175 11.977,8.993 12,10.485C11.033,11.94 9.375,12.9 7.5,12.9Z' style='fill:%23fff;fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
        left: 0;
    }

    .page-header__button-menu .icon {
        display: none;
    }
}

/* Logo */
@media (max-width: 29.999rem) {
    .page-header__logo {
        background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%2C2L2%2C16L6.191%2C16L6.191%2C30L13.325%2C30L13.325%2C21.618L18.705%2C21.618L18.705%2C30L25.809%2C30L25.809%2C16L30%2C16L16%2C2Z%22%20style%3D%22fill%3A%23fff%3Bfill-rule%3Anonzero%3B%22%20%2F%3E%20%3C%2Fsvg%3E");
        background-size: 1.5rem;
        background-position: left;
        background-repeat: no-repeat;
        width: 2rem !important;
    }

    .page-header__logo picture {
        display: none;
    }
}

@media (max-width: 47.999rem) {
    .page-header__logo {
        width: 20%;
    }
}

@media (max-width: 61.999rem) {
    .page-header__logo {
        margin-left: 0;
    }
}

/* Facets filter */
@media (min-width: 62rem) {
    .facets-filter .collapsible__button,
    .facets-filter .collapsible__panel {
        --color-background: transparent;
    }
}

/* CE Spotlight */
.spotlight.spotlight--layout-0.section--color::before,
.spotlight.spotlight--layout-5.section--color::before {
    content: "";
    position: absolute;
    display: initial;
    bottom: 0;
    left: 50%;
    right: 50%;
    top: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 762 345' xmlns='http://www.w3.org/2000/svg' fill='%23000' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M762 345c-220.821-18.408-388.762-54.07-503.823-106.985C143.116 185.1 57.098 105.909.123.443V345H762z'/%3E%3C/svg%3E");
    background-position: 0 100%;
    background-repeat: no-repeat;
    margin-left: -50vw;
    margin-right: -50vw;
    opacity: 0.1;
}

.spotlight.spotlight--layout-5.section--color::before {
    transform: scaleX(-1);
}

/* Style openingstime block button as secondary */
.opening-times .button-primary {
    --background-color: var(--root-color--secondary);
    --border-top-color: var(--root-color--secondary);
    --border-right-color: var(--root-color--secondary);
    --border-bottom-color: var(--root-color--secondary);
    --border-left-color: var(--root-color--secondary);
    --color: var(--root-color--white);
}

.opening-times .button-primary:hover,
.opening-times .button-primary:active {
    --border-top-color: var(--root-color--secondary-dark);
    --border-right-color: var(--root-color--secondary-dark);
    --border-bottom-color: var(--root-color--secondary-dark);
    --border-left-color: var(--root-color--secondary-dark);
    --background-color: var(--root-color--secondary-dark);
}

/* Top image mask */
@media (min-width: 30rem) {
    .top-tasks-background,
    .page-image__visual {
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201201%20477%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1201%2C279.376L1201%2C0L0%2C0L0%2C395.716C206.065%2C464.261%20416.741%2C486.229%20632.027%2C461.622C847.314%2C437.013%201036.97%2C376.265%201201%2C279.376Z%22%2F%3E%0A%3C%2Fsvg%3E");
        mask: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201201%20477%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1201%2C279.376L1201%2C0L0%2C0L0%2C395.716C206.065%2C464.261%20416.741%2C486.229%20632.027%2C461.622C847.314%2C437.013%201036.97%2C376.265%201201%2C279.376Z%22%2F%3E%0A%3C%2Fsvg%3E");
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-position: bottom right;
        mask-position: bottom right;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}
