header.annual-report-header {
    display: flex;
    flex-direction: column;
    background-color: var(--c-primary);

    .accessibility-options {
        display: none;
        align-items: center;
        gap: 0.75rem;

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

        nav {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .accessibility-icon {
            display: flex;
            justify-content: center;
        }
    }

    .header-top {
        max-width: 1366px;
        margin: 0 auto;
        width: 100%;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 1.5rem 1rem;
        height: var(--header-height);


        @media (width >=768px) {
            gap: 2rem;
        }

        .logo {
            flex-grow: 1;
            height: 100%;

            img {
                height: 100%;
                object-fit: contain;
            }
        }

        .menu-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 0.5rem;
            background-color: color-mix(in srgb, var(--c-secondary) 20%, transparent);
            color: var(--c-secondary);

            &:hover {
                background-color: color-mix(in srgb, var(--c-secondary) 35%, transparent);
            }

            input {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }

            .focus-wrapper:has(input:checked)~.menu-icon span {
                &:first-child {
                    rotate: 14deg;
                    transform-origin: top left;
                }

                &:last-child {
                    rotate: -14deg;
                    transform-origin: top left;
                }
            }

            .menu-icon {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                pointer-events: none;

                span {
                    display: block;
                    width: 1.5rem;
                    height: 0.125rem;
                    background-color: var(--c-secondary);
                }
            }
        }
    }

    .info {
        display: none;

        .accessibility-options {
            display: flex;
            padding: 1rem 0.75rem;
        }

        .social-media {
            padding: 1rem 0.75rem;
            border-top: 1px solid var(--c-secondary);

            h4 {
                margin-bottom: 0.5rem;
            }

            a {
                margin-right: 0.5rem;
            }
        }

        @media (width >=768px) {
            .social-media {
                border-top: none;
            }
        }
    }
}