@import url('../../components/menu/main-menu.css');
@import url('../../components/search-bar/main-search-bar.css');
@import url('../../components/slider/main-slider.css');

header#masthead.site-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--color-neutral-50);
    z-index: 99990;

    .header-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: var(--color-primary-500);

        .fixed-header-wrapper {
            position: relative;
            top: 0;
            width: 100%;
            background-color: transparent;
            z-index: 150;
            transition: background-color 250ms ease-in-out;

            &.fixed {
                position: fixed;
                top: var(--wp-admin--admin-bar--height, 0px);
                background-color: var(--color-primary-500);
                transition: background-color 250ms ease-in-out;
            }

            &.fixed .menu-main-wrapper,
            .menu-main-wrapper {
                border-bottom: 1px solid transparent;
            }

            &>.container-medium {
                z-index: 10;
            }
        }

        .open-button-search-bar,
        .button-donate {
            align-self: center;
        }

        &.has-slider {
            aspect-ratio: 1920/840;

            @media (max-width: 768px) {
                aspect-ratio: 320 / 450;
            }
        }

        .fixed-header-wrapper.open-menu-mobile,
        .fixed-header-wrapper.fixed,
        &.active-sub-menu {
            .button-donate {
                --background-color: var(--color-neutral-50);
                --color: var(--color-primary-500);
                --border-color: var(--color-neutral-50);
                --hover-background-color: var(--color-neutral-500);
                --hover-color: var(--color-neutral-50);
                --hover-border-color: var(--color-neutral-500);
            }

            .menu-main-wrapper .menu-main-wrapper-right .language-menu a.active {
                color: var(--color-neutral-50);
            }
        }

        .fixed-header-wrapper.open-menu-mobile .menu-main-wrapper,
        &.has-banner .menu-main-wrapper,
        &.has-slider .menu-main-wrapper,
        &.active-sub-menu .menu-main-wrapper,
        &.active-sub-menu .fixed-header-wrapper.fixed .menu-main-wrapper {
            border-bottom: 1px solid var(--color-neutral-50);
        }
    }
}