body {
    background-color: var(--anresis-color-primary-light-background);
}

.frame {
    &.frame-layout-40 {
        > .frame-content {
            background-color: var(--anresis-color-primary-background);
            border-radius: var(--asp-border-radius);
            padding: var(--anresis-spacing-6);

            > header {
                h2, h3, h4 {
                    color: var(--anresis-color-white-text);
                }
            }

            .ce-bodytext {
                h2, h3, h4, p, ul, ol {
                    color: var(--anresis-color-white-text);
                }
            }
        }
    }
}

.image-embed-item {
    border-radius: var(--asp-border-radius);
}

.frame {
    padding-block-start: var(--anresis-spacing-9);
    padding-block-end: var(--anresis-spacing-9);
}

.logos {
    > .logo-container {
        justify-content: center !important;
        gap: var(--anresis-spacing-9) var(--anresis-spacing-9) !important;

        .logo {
            width: auto !important;
    
            > img {
                height: 50px;
                width: auto;
                max-width: 190px;
                object-position: center;
            }
        }
    }
}

.footer-copyright {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: var(--anresis-spacing-6);
}

.meta-footer {
    background-color: var(--anresis-color-white-background) !important;
    .meta-footer-content {
        padding-block: var(--anresis-spacing-6) !important;
    }
}

.footer-menu {
    .footer-menu-item {
        > a {
            text-transform: none !important;
            color: var(--anresis-color-black) !important;
            font: var(--anresis-font-text) !important;
        }
    }
}

.accordion {
    background-color: var(--anresis-color-white-background);
}

.accordion-icon {
    width: 50px !important;
    height: 50px !important;
    background-color: var(--anresis-color-primary-background) !important;
}

.accordion-content {
    padding: var(--anresis-spacing-4) var(--anresis-spacing-6);
}

.accordion-trigger {
    justify-content: flex-start !important;
}

.accordion-title {
    margin-inline-end: auto !important;
    width: 100% !important;
    font-weight: var(--anresis-font-weight-semi-bold) !important;
    font-size: 1.25rem !important;
}

.accordion-container {
    gap: var(--anresis-spacing-2) !important;
}

.accordion-trigger-icon {
    width: auto !important;
}

.accordion-trigger-icon > img {
    width: 20px !important;
    height: 20px !important;
}

header > h2,
.ce-bodytext h2 {
    color: var(--anresis-color-primary-text);
    font-weight: var(--anresis-font-weight-bold);
}

.frame-layout-1001 {
    header > h2,
    .ce-bodytext h2 {
        color: var(--asp-color-orange);
    }
}

.frame-layout-2000 {
    .card-icon {
        > img {
            filter: var(--asp-color-blue-filter) !important;
        }
    }
}

.frame-layout-2001 {
    .card-icon {
        > img {
            filter: var(--asp-color-orange-filter) !important;
        }
    }
}

a {
    color: var(--anresis-color-link);

    &:hover {
        color: var(--anresis-color-link);
    }


}

.ce-bodytext {
    a {
        &[href]:not(:where(
            .button,
            /* exclude hash only links */
            [href^="#"],
            /* exclude javascript only links */
            [href^="javascript:" i],  
            /* exclude relative but not double slash only links */
            [href^="/"]:not([href^="//"]),
            /* domains to exclude */
            [href*="//antimicrobialstewardship.ddev.site"],
            [href*="//antimicrobialstewardship.ch"],
            [href*="//asp.anresis.ifik.unibe.ch"]
        )) {
            display: inline;

            &::after {
                background-image: url(../Images/Icons/arrow-up-right.svg);
                content: "";
                display: inline-block;
                width: 1em;
                height: 1em;
                margin-inline-start: var(--anresis-spacing-2);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                filter: var(--anresis-color-link-filter);
                vertical-align: middle;
            }

        }
    }
}

.overview-card .overview-card-imag {
    block-size: 130px !important;
}

.overview-card .overview-card-image > img {
    inline-size: 80px !important;
    block-size: 80px !important;
}

.page-header {
    background: var(--anresis-color-primary) !important;
    background-image: none !important;

    .page-header-content {
        .page-header-icon {
            img {
                filter: var(--anresis-color-white-filter) !important;
            }
        }
    }
}

.site-asp .slider {
    grid-column: wide-content !important;
    border-radius: var(--asp-border-radius);

    .slide-dots {
        display: none !important;
    }

    .slide-content {
        z-index: 10;
        background: none !important;
        .slide-title {
            margin: 0;
            color: var(--anresis-color-white-text);
            font: var(--anresis-font-h1);
            margin-block-end: var(--anresis-spacing-4);
        }

        .slide-text {
            margin-block-start: var(--anresis-spacing-6);
        }

        .page-description > * {
            color: var(--anresis-color-white-text);
        }

        .button {
            background-color: var(--anresis-color-white-background) !important;
            color: var(--anresis-color-primary-text) !important;
        }

        @media (max-width: 1299px) {
            padding-inline: 10% !important;
            width: 65% !important;
        }

        @media (max-width: 1023px) {
            padding-inline: 15% !important;
            width: 95% !important;
        }

        @media (max-width: 767px) {
            padding: var(--anresis-spacing-6) !important;
        }
    }


    &:has(.slide-content) .slide-image-container {
        &::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
            border-end-start-radius: var(--asp-border-radius);
            border-end-end-radius: var(--asp-border-radius);
        }
        
        &::before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            mask: linear-gradient(to right,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0) 100%);
            backdrop-filter: blur(5px);
            border-end-start-radius: var(--asp-border-radius);
            border-end-end-radius: var(--asp-border-radius);
        }
    }
}

main > .frame-type-foresite_anresisslider {
    > .frame-content {
        grid-column: content !important;
    }
}

main > .frame-type-foresite_anresisslider:first-child {
    .slider {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }
}

h3 {
    font: var(--anresis-font-weight-regular) 1.75rem/1.2 var(--anresis-font-serif);
}

:root {
    /**
     * Layout
     **/
    --anresis-wide-content-width: 1440px;
    --anresis-content-width: 1200px;
    
    /* Margin of the layout */
    --anresis-layout-content-margin: var(--anresis-spacing-4);

    /**
     * Colors
     **/
    --anresis-color-black: #000;
    --anresis-color-text: #333;
    --anresis-color-text-filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(45%) hue-rotate(159deg) brightness(96%) contrast(75%);

    --anresis-color-primary: #1f3c7e;
    --anresis-color-primary-filter: brightness(0) saturate(100%) invert(19%) sepia(29%) saturate(3583%) hue-rotate(205deg) brightness(94%) contrast(93%);
   
    --anresis-color-primary-light: #f4f6fa;
    --anresis-color-link: #2C52A7;
    --anresis-color-link-filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(1321%) hue-rotate(206deg) brightness(81%) contrast(86%);

    --anresis-color-secondary: #e85c0b;
    --anresis-color-secondary-filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1656%) hue-rotate(358deg) brightness(93%) contrast(95%);
   
    

    /* 75% lighter */
    --anresis-color-button: #acd9ff;

    /* 70% lighter */
    --anresis-color-button-hover: #9bd1ff;

    /**
     * Border Radius
     **/
    --asp-border-radius: 24px;
    --asp-border-radius-small: 12px;

    /**
     * Grid
     **/
    --anresis-grid-gap: var(--anresis-spacing-3);
    --anresis-grid-gap-large: var(--anresis-spacing-12);

    /**
     * Frames
     **/
    --anresis-frame-spacing: var(--anresis-spacing-9);

    /**
     * Buttons
     **/
    /* Border Radius */
    --anresis-button-border-radius: var(--asp-border-radius-small);

    --asp-color-blue: #1f3c7e;
    --asp-color-blue-filter: brightness(0) saturate(100%) invert(19%) sepia(29%) saturate(3583%) hue-rotate(205deg) brightness(94%) contrast(93%);
    --asp-color-orange: #e85c0b;
    --asp-color-orange-filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1656%) hue-rotate(358deg) brightness(93%) contrast(95%);

    /* Primary Style */
    --anresis-button-primary-background-color: var(--anresis-color-primary-background);
    --anresis-button-primary-color: var(--anresis-color-white-text);
    --anresis-button-primary-border-color: var(--anresis-color-primary);
    --anresis-button-primary-hover-background-color: var(--anresis-color-white-background);
    --anresis-button-primary-hover-color: var(--anresis-color-primary-text);
    --anresis-button-primary-hover-border-color: var(--anresis-color-primary);

    /* Outline Style */
    --anresis-button-outline-background-color: transparent;
    --anresis-button-outline-color: inherit;
    --anresis-button-outline-border-color: transparent;
    --anresis-button-outline-hover-background-color: var(--anresis-color-white-background);
    --anresis-button-outline-hover-color: var(--anresis-color-primary-text);
    --anresis-button-outline-hover-border-color: var(--anresis-color-white);
    
    /* Icon Style */
    --anresis-button-icon-background-color: var(--anresis-color-white-background);
    --anresis-button-icon-color: var(--anresis-color-primary-text);
    --anresis-button-icon-border-color: var(--anresis-color-white);
    --anresis-button-icon-hover-background-color: var(--anresis-color-white-background);
    --anresis-button-icon-hover-color: var(--anresis-color-primary-text);
    --anresis-button-icon-hover-border-color: var(--anresis-color-white);


.button--arrow {
    &::before {
        filter: var(--anresis-color-primary-filter) !important;
    }
}

.button--download {
    &::before {
        display: none !important;
    }
    &::after {
        background-image: url(../Images/Icons/download.svg);
        filter: var(--anresis-color-primary-filter);
    }
}

    
    /**
     * Fonts
     **/
    --anresis-font-sans: "Source Sans 3", system-ui, sans-serif;
    --anresis-font-serif: "Source Sans 3", system-ui, serif;

    /* Typography */
    --anresis-font-h1: var(--anresis-font-weight-regular) 2.75rem/1.2 var(--anresis-font-serif);
    --anresis-font-h2: var(--anresis-font-weight-regular) 2.5rem/1.2 var(--anresis-font-serif);
    --anresis-font-h3: var(--anresis-font-weight-regular) 1.25rem/1.2 var(--anresis-font-serif);
    --anresis-font-h4: var(--anresis-font-weight-semi-bold) 1rem/1.2 var(--anresis-font-serif);
    --anresis-font-h4-sans: var(--anresis-font-weight-semi-bold) 1rem/1.2 var(--anresis-font-sans);
    --anresis-font-text: var(--anresis-font-weight-regular) 1rem/1.7 var(--anresis-font-sans);
    --anresis-font-text-small: var(--anresis-font-weight-regular) 0.875rem/1.6 var(--anresis-font-sans);

    /* Menu */
    --anresis-font-main-menu-item: var(--anresis-font-text);
    --anresis-font-main-menu-item-transform: none;

    /* Logos */
    --anresis-font-logos-title: var(--anresis-font-h2);
    
    /* Accordion */
    --anresis-accordion-radius: var(--asp-border-radius);
    --anresis-font-accordion-title: var(--anresis-font-h4-sans);
    --anresis-accordion-trigger-padding: var(--anresis-spacing-4) var(--anresis-spacing-6);
    --anresis-accordion-trigger-background-color: transparent;
    --anresis-accordion-trigger-active-background-color: transparent;

    --overview-card-radius: var(--asp-border-radius);
    --overview-card-image-background-color: var(--anresis-color-white-background);
    --overview-card-image-hover-background-color: var(--anresis-color-white-background);
    --overview-card-icon-filter: var(--anresis-color-secondary-filter);

    --anresis-main-menu-item-color: var(--asp-color-blue);
    --anresis-main-menu-item-hover-color: var(--asp-color-blue);
    --anresis-main-menu-sub-item-color: var(--asp-color-blue);
    --anresis-main-menu-sub-item-filter: var(--asp-color-blue-filter);
    --anresis-main-menu-sub-sub-item-color: var(--asp-color-blue);
    --anresis-main-menu-sub-sub-item-filter: var(--asp-color-blue-filter);
}


.news-container {
    border-radius: var(--asp-border-radius);

    .news-container-image,
    .news-container-image > img {
        border-start-start-radius: var(--asp-border-radius);
        border-start-end-radius: var(--asp-border-radius);
    }
}

.frame-type-news_pi1,
.frame-type-news_newsliststicky {
    > .frame-content {
        position: relative;

        .swiper-button-prev {
            left: -2rem;
        }

        .swiper-button-next {
            right: -2rem;
        }

    }
}

:root.site-asap {
    --anresis-color-secondary: var(--asp-color-blue);
    --anresis-color-secondary-filter: var(--asp-color-blue-filter);

    --anresis-color-primary: var(--asp-color-orange);
    --anresis-color-primary-filter: var(--asp-color-orange-filter);
}