/* Page background color */
@media (min-width: 62rem) {
    [data-document-type]:not([data-document-type="50"]):not([data-document-type="51"]) {
        background-color: #f4f4f4;
    }

    [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: 3.5rem;
        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;
    }
}

/* Readspeaker button */
.readspeaker__button.button.button--small {
    --font-weight: var(--root-font-weight--semi-bold);
}

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

/* CTA Button */
.button--cta {
    --background-color: var(--root-color--primary);
    --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);
}

.button--cta:hover,
.button--cta:focus,
.button--cta:active {
    --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);
}

/* Cards */
.card:not(.card--color):not(.card--button):not(.card--image-none) {
    border-bottom: 2px solid var(--root-color--primary);
}

@media (min-width: 62rem) {
    .card--button,
    .card--button.card--color-primary,
    .card--button.card--color-secondary,
    .card--button.card--color-support {
        box-shadow: unset;
        --color-background: transparent;
    }

    .card--button .card__footer,
    .card--button .card__body {
        box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.16);
        transform: translate(2rem, -2rem);
    }

    .card--button:not(.card--color) .card__footer,
    .card--button:not(.card--color) .card__body {
        background-color: var(--root-color--white);
    }

    .card--button.card--color-primary .card__footer,
    .card--button.card--color-primary .card__body {
        background-color: var(--root-color--primary);
    }

    .card--button.card--color-secondary .card__footer,
    .card--button.card--color-secondary .card__body {
        background-color: var(--root-color--secondary);
    }

    .card--button.card--color-support .card__footer,
    .card--button.card--color-support .card__body {
        background-color: var(--root-color--support);
    }
}

/* CE Highlight menu */
.highlightmenu .card:not(.card--color) .card__title {
    --color: var(--root-color-text);
}

/* CE follow-up */
.follow-up {
    border-bottom-color: #919191;
    -webkit-box-shadow: 6px 6px 0 0 hsla(0,0%,57%,.25);
    box-shadow: 6px 6px 0 0 hsla(0,0%,57%,.25);
}

/* Opening times */
.opening-times .button {
    --background-color: var(--root-color--white);
    --border-top-color: #aab5d6;
    --border-right-color: #aab5d6;
    --border-bottom-color: #aab5d6;
    --border-left-color: #aab5d6;
    --color: var(--root-color--primary);
}

.opening-times .button:hover,
.opening-times .button:focus,
.opening-times .button:active {
    --background-color: var(--root-color--primary);
    --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);
}