:root {
    --color-green: #C8D400;
    /*hsl(63, 100%, 42%);*/
    --c-infographic-1: #5DC5C9;
    --c-infographic-2: #A2DEDE;
    --c-infographic-3: #DCE857;
    --c-infographic-4: #E3E9A1;
    --c-infographic-5: #73D7D7;
    --c-infographic-6: #B1B1B1;
    --c-infographic-7: #BDC9C9;
    --c-infographic-8: #D7D7D7;
    --c-infographic-9: var(--color-teal);
    --c-infographic-10: var(--color-grey);
    --c-infographic-11: var(--color-green);
    --c-infographic-12: var(--c-white);
}

main#main .container {
    margin-bottom: 8rem;
}

main#main .container-inner {
    max-width: 1080px;
    margin-left: 0;
    margin-right: auto;
}

/* Keep the hero container centred (it has its own max-width: 1366px) */
main#main .annual-report-hero .container-inner {
    margin-left: auto;
}

.annual-report-header,
.annual-report-hero {
    --header-height: 4.5rem;
    --submenu-width-desktop: 484px;

    .focus-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;

        &:focus-within {
            outline: 2px solid var(--c-focus-outline);
            outline-offset: 2px;
        }

        input {
            font-size: 2.8rem;
        }
    }

    a,
    input {
        &:focus-visible {
            outline: 2px solid var(--c-focus-outline);
            outline-offset: 2px;
        }
    }
}





body:has(input#menu-toggle:checked) {
    overflow: hidden;
}

.annual-report-header:has(input#menu-toggle:checked) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;

    .info {
        display: block;
    }

    nav.annual-report-nav {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 2147483647;
    }
}


.annual-report-hero {
    --swap-stagger: 1s;
    --swap-items: 6;
    --swap-images: 6;
    --swap-start-offset: 1s;
    --swap-image-step: calc(var(--swap-items) * var(--swap-stagger));
    --swap-cycle: calc(var(--swap-images) * var(--swap-image-step));

    @media (width >=768px) {
        --swap-items: 8;
    }

    .container {

        &.filled {
            background-color: var(--c-primary);
        }

        .container-inner {
            padding: 1rem 0.75rem 5.5rem 0.75rem;
            container-type: inline-size;

            max-width: 1366px;
            margin: 0 auto;
        }
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;

        @media (width >=768px) {
            grid-template-columns: repeat(5, 1fr);
            grid-auto-rows: calc(20cqw - 0.4rem - 0.6rem);
        }

        .headline {
            grid-row: 1;
            grid-column: 1 / -1;

            @media (width >=768px) {
                grid-row: 2;
                grid-column-start: 3;
                grid-column-end: 6;
                padding-left: 17%
            }

            h1 {
                font-weight: bold;
            }
        }

        .image {
            overflow: hidden;

            &:has(img:nth-child(2)) {
                display: grid;
            }

            &:has(img:nth-child(2))>img {
                grid-area: 1 / 1;
                opacity: 0;
                animation-name: annualReportImageSwap;
                animation-duration: var(--swap-cycle);
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-delay: calc(-1 * (var(--swap-start-offset) + (var(--swap-item-index, 0) * var(--swap-stagger)) + (var(--swap-image-index, 0) * var(--swap-image-step))));
                will-change: opacity;
            }

            &:has(img:nth-child(2))>img:nth-child(1) {
                --swap-image-index: 0;
            }

            &:has(img:nth-child(2))>img:nth-child(2) {
                --swap-image-index: 1;
            }

            &:has(img:nth-child(2))>img:nth-child(3) {
                --swap-image-index: 2;
            }

            &:has(img:nth-child(2))>img:nth-child(4) {
                --swap-image-index: 3;
            }

            &:has(img:nth-child(2))>img:nth-child(5) {
                --swap-image-index: 4;
            }

            &:has(img:nth-child(2))>img:nth-child(6) {
                --swap-image-index: 5;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            &.image-1 {
                --swap-item-index: 0;
            }

            &.image-2 {
                --swap-item-index: 1;
            }

            &.image-3 {
                --swap-item-index: 2;
            }

            &.image-4 {
                --swap-item-index: 3;
            }

            &.image-5 {
                --swap-item-index: 4;
            }

            &.image-6 {
                --swap-item-index: 5;
            }

            &.image-7 {
                --swap-item-index: 6;
            }

            &.image-8 {
                --swap-item-index: 7;
            }

            &.image-7,
            &.image-8 {
                display: none;

                @media (width >=768px) {
                    display: block;
                }
            }

            @media (width >=768px) {
                &.image-2 {
                    grid-column: span 2;
                }

                &.image-3 {
                    grid-column: span 2;
                }

                &.image-6 {
                    grid-row: 3;
                }

                &.image-7 {
                    grid-column: span 2;
                    grid-row: 3;
                }

                &.image-8 {
                    grid-row: 3;
                }

                &.arrow {
                    grid-row: 2;
                    grid-column-start: 3;
                    grid-column-end: 4;
                }
            }
        }

        .statements {
            @media (width >=768px) {
                grid-row: 3;
                align-self: self-end;
            }
        }

        p {
            margin-bottom: 0;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .annual-report-hero .grid-container .image:has(img:nth-child(2))>img {
        animation: none;
        opacity: 1;
    }

    .annual-report-hero .grid-container .image:has(img:nth-child(2))>img:not(:first-child) {
        display: none;
    }
}

@keyframes annualReportImageSwap {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 1;
    }

    16.5% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}