body {
    letter-spacing: 0.25px;
}

/* Pageheader menu overrides*/
.page-header__menu__link[aria-current="page"] .page-header__menu__text {
    font-weight: var(--root-font-weight--bold);
}

/* Pageheader bottom border */
.page-header:after {
    background: var(--root-color-border-light);
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 2;
}

/* Rounded corners , but not the buttons */
.notification,
.follow-up__default,
.follow-up-location__default,
.follow-up-contact__default,
.collapsible.collapsible--open,
.accordion__button,
.top-tasks-tile,
.opening-times {
    border-radius: 0.75rem;
}

.collapsible--open .accordion__button {
    border-radius: 0.75rem 0.75rem 0 0;
}
.collapsible--open .accordion__panel {
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Contact button in opening-times panel */
.opening-times .button {
    --background-color: var(--root-color--primary);
    --border-radius: var(--root-border-radius);

    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);

    --color: var(--root-color--white);
    --font-family: inherit;
    --font-size: var(--root-font-size); /* Reset, use REM */
    --font-style: normal;
    --font-weight: var(--root-font-weight--semi-bold);
    --line-height: inherit;
}

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

/* toptask background shadow */
.top-tasks-header:after {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.1)),to(transparent));
    background: linear-gradient(180deg,rgba(0,0,0,.1) 0,transparent);
    background-blend-mode: multiply;
    content: "";
    position: absolute;
    bottom: -25px;
    height: 25px;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1;
}

/* Content frame */
[data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]) {
    background-color: var(--root-color-background--primary);
}

[data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]):not([data-document-type="56"]):not([data-document-type="64"]):not([data-document-type="66"]):not([data-document-type="1"].layout-1) .main-column {
    background-color: var(--root-color--white);
    margin-top: 3rem;
    margin-bottom: 6rem;
    position: relative;
}

/* Using a pseudo element here, because adding the outline to .main-column itself will fail in FF */
[data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]):not([data-document-type="56"]):not([data-document-type="64"]):not([data-document-type="66"]):not([data-document-type="1"].layout-1) .main-column::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 3rem solid var(--root-color--white);
    pointer-events: none;
}

/*  No breadcrumb border if content frame */
[data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]):not([data-document-type="56"]):not([data-document-type="64"]):not([data-document-type="66"]) .main-top__columns {
    --width-border: 0;
}

/* No frame when wide layout is set */
.document-type-1.layout-1 .main-column {
    background-color: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    outline: none !important;
    overflow: visible;
}

/* Icon color for shre links in te footer */
.footer__link .link:active .icon,
.footer__link .link:focus .icon,
.footer__link .link:hover .icon {
    --color-icon: var(--root-color--primary);
}

/* Icon color for links in the footer */
.footer-contact-links__container .footer__link .link:active .icon,
.footer-contact-links__container .footer__link .link:focus .icon,
.footer-contact-links__container .footer__link .link:hover .icon {
    --color-icon: var(--root-color--white-dark);
}

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

/* Openinghours exception styling header */
.opening-hours__specifications dd:first-of-type {
    --color: var(--root-heading-4-color);
    --font-family: var(--root-heading-4-family);
    --font-size: var(--root-heading-4-size);
    --font-style: var(--root-heading-4-style);
    --font-weight: var(--root-heading-4-weight);
    --line-height: var(--root-heading-4-line-height);
}

/* Openinghours exception styling exception description */
.opening-hours__specifications .opening-hours__term {
    margin: 0;
}

/* Openinghours exception styling exception date */
.opening-hours__specifications .opening-hours__description {
    margin: 0 0 1rem;
}

/* Waste management */
.waste-management-collection-schedule-list__address,
.waste-management-collection-schedule-list__downloads {
    border-radius: 0.75rem;
    padding: 2rem;
}

.waste-management-collection-schedule-list__address {
    background-color: #e9f6fd;
}

.waste-management-collection-schedule-list__downloads {
    border-color: var(--root-color-border);
    border-style: solid;
    border-width: 0.125rem;
    margin-top: 2rem;
}

.waste-management-collection-schedule-list__downloads .waste-management-collection-schedule-list__subheader {
    --color: var(--root-color-text);
    --font-size: var(--root-heading-3-size);
    --font-style: var(--root-heading-3-style);
    --font-weight: var(--root-heading-3-weight);
    --line-height: var(--root-heading-3-line-height);
}

.waste-management-collection-schedule-list__downloads .waste-management-collection-schedule-list__subheader {
    margin-top: 0;
}