.primary-header {
    background: #fff;

    &__container {
        padding-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        &:before,
        &:after {
            content: initial;
        }
    }

    &__fdic {
        flex-basis: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        font:
            400 oblique 12px/1 'open-sans',
            sans-serif;

        &.--active:before {
            content: '';
            display: block;
            aspect-ratio: 38/16;
            height: 16px;
            background: #003256;
            mask: var(--icon-fdic) no-repeat center center / contain;
        }
    }

    &__logo {
        img {
            display: block;
            height: 70px;
        }
    }

    &__nav {
        position: absolute;
        top: 0;
        left: 100%;
        width: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        transition: width 0.3s ease-out;
        z-index: 11;

        &__container {
            width: 80vw;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            background: #585858;
        }

        &-toggle {
            display: block;
            width: 44px;
            aspect-ratio: 1;
            cursor: pointer;
            background-color: #94979b;
            mask: var(--icon-menu) no-repeat center center / 32px;
        }

        &__buttons {
            display: none !important;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            white-space: nowrap;
        }

        &__container > ul {
            > li {
                > a {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 16px 32px;
                    text-decoration: none;
                    font:
                        700 16px/2 'open-sans',
                        sans-serif;
                    text-transform: uppercase;
                }

                & > ul {
                    background-color: #fff;
                    --height: 0;
                    height: 0;
                    overflow: hidden;
                    transition: height 0.3s ease-out;

                    & > li {
                        padding: 0 32px;

                        &:first-child {
                            padding-top: 16px;
                        }

                        &:not(.dropdown) + li {
                            padding-top: 16px;
                        }

                        > a {
                            display: inline-block;
                            font:
                                700 16px/2 'open-sans',
                                sans-serif;
                            color: #333;

                            &[href='#']:not(.external-link-warning) {
                                cursor: default;
                                pointer-events: none;

                                &,
                                &:hover {
                                    text-decoration: none;
                                }
                            }
                        }

                        > ul {
                            margin: 0 0 16px;

                            & > li {
                                & > a {
                                    display: inline-block;
                                    font:
                                        400 14px/2.5 'open-sans',
                                        sans-serif;
                                }
                            }
                        }
                    }

                    &.--open {
                        height: var(--height);
                    }
                }

                &.dropdown {
                    & > a {
                        &:after {
                            content: '';
                            display: block;
                            width: 1.25em;
                            aspect-ratio: 1;
                            background: currentColor;
                            mask: var(--icon-chevron) no-repeat center center / contain;
                            transition: transform 0.3s ease-out;
                        }

                        &:has(+ ul.--open) {
                            &:after {
                                transform: rotate(90deg);
                            }
                        }
                    }
                }
            }
        }
    }

    &__main-menu {
        order: -1;

        > li:not(:last-child) > a {
            border-bottom: 1px solid currentColor;
            border-bottom-color: rgba(255, 255, 255, 0.25);
        }
    }

    &__buttons {
        &__items {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;

            & > li {
                width: 50%;

                > a {
                    display: block;
                    padding: 1.5em 1em;
                    text-align: center;
                    text-decoration: none;
                    font:
                        700 16px/2 'open-sans',
                        sans-serif;
                    white-space: nowrap;
                    background: #787a7d;
                    color: #fff;
                    text-transform: uppercase;
                }

                &:last-child > a {
                    background: #d3d3d3;
                    color: #231f20;
                }
            }
        }
    }

    html.menu-open &__nav {
        width: 80vw;

        &-toggle {
            mask-image: var(--icon-close);
        }
    }
}


.search {
    float: right;
    position: relative;
    // margin-top: 2.25rem;

    &.mobile {
        display: none;
    }

    form {
        position: relative;
        display: inline-block;

        label {
            display: none;
            font-size: 1.0625rem;
            color: #ffffff;
            margin-bottom: 1.5rem;
        }

        input {
            width: 350px;
            border: none;
            outline: none;
            padding-top: .5rem;
            padding-left: 4rem;
            padding-right: 4rem;
            padding-bottom: .5rem;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);

            &::placeholder {
                opacity: 1;
                color: #c6c6c6;
            }
        }

        button {
            left: 1rem;
            padding: 0;
            width: 20px;
            height: 32px;
            border: none;
            margin-top: 3px;
            background: none;
            position: absolute;

            img {
                width: 20px;
                height: 20px;
                margin-top: 6px;

                &.on-hover {
                    display: none;
                }
            }

            &:hover {
                img {
                    
                    &.no-hover {
                        display: none;
                    }

                    &.on-hover {
                        display: inherit !important;
                    }
                }
            }
        }
    }

    &:not(.open) {
        form {
            display: none;
        }

        .open-search {
            margin-top: 0rem;
        }

        .close-search {
            display: none;
        }
    }

    &.open {
        margin-left: 2rem;

        .open-search {
            display: none;
        }

        .on-hover {
            margin-top: 10px;
        }
    }

    .search__controls {
        button {
            vertical-align: super;
            margin-left: 10px;
            margin-top: -4px;
            background: none;
            border: none;
            height: 32px;
            width: 20px;
            padding: 0;

            img {
                width: 20px;
                height: 20px;
                margin-top: -3px;

                &.on-hover {
                    display: none;
                }
            }

            &:hover {
                img {
                    
                    &.no-hover {
                        display: none;
                    }

                    &.on-hover {
                        display: inherit !important;
                    }
                }
            }

            &.close-search {
                top: 0.75rem;
                right: 1rem;
                position: absolute;
            }
        }
    }
}


@media screen and (max-width: 1199px) {
    body {
        transition: transform 0.3s ease-out;
    }

    html.menu-open {
        max-height: 100vh;

        body {
            max-height: 100vh;
            transform: translateX(-80vw) !important;
            overflow: hidden;
        }
    }

    .primary-header {

        &__nav {

            .search {
                display: none;
            }
        }
    }



    .search {

        &.mobile {
            display: block;
            margin: 4px 15px 0 auto;

            &.open {
                margin: 0;
            }
        }

        &.open {
            top: 0;
            left: 0;
            right: 0;
            margin: 0;
            z-index: 3;
            height: 200px;
            position: fixed;
            background: $blue-light;

            form {
                left: 3rem;
                right: 3rem;
                bottom: 5rem;
                position: absolute;

                input {
                    width: 100%;
                    padding-left: 2rem;
                }

                button {
                    right: 2rem;
                    left: unset;
                }

                label {
                    display: inherit;
                }
            }

            .close-search {

                img {
                    width: 40px;
                    height: 40px;
                    filter: invert(1) brightness(5);
                }
            }
        }
    }




}

@media screen and (min-width: 1200px) {
    .primary-header {
        position: relative;

        &__nav-toggle,
        &__buttons {
            display: none;
        }

        &__logo {
            img {
                display: block;
                height: 65x;
            }
        }

        &__nav {
            position: unset;
            width: unset;
            height: unset;
            overflow: unset;
            flex: 1;

            &__container {
                width: unset;
                min-height: unset;
                flex-direction: row !important;
                gap: 16px;
                align-items: center;
                justify-content: end;
                background: transparent !important;
                padding-top: 8px;
            }

            &__buttons {
                display: flex !important;
                flex-direction: row !important;
                align-items: center;
                justify-content: end;
                gap: 16px;

                margin-top: 30px !important;

                & > li {
                    position: relative;

                    & > a {
                        padding: 0 !important;
                        font: 700 12px/20px $font-family-sans-serif !important;
                        padding: 0 1.25em !important;
                        border-radius: 1000px;
                        text-transform: uppercase;
                        color: #94979b !important;
                        border: 2px solid currentColor;
                        background: #fff;
                    }

                    &:last-child > a {
                        background: #94979b;
                        color: #fff !important;
                    }
                }
            }
        }

        &__top-menu {
            position: absolute;
            top: 25px;
            height: 34px;
            flex-direction: row !important;
            align-items: center;
            gap: 16px;

            & > li {
                & > a {
                    padding: 0 !important;
                    font: 700 12px/1 $font-family-sans-serif !important;
                    text-transform: uppercase;
                    color: #4f4f4f;
                }
            }
        }

        &__main-menu {
            order: unset;
            flex-direction: row !important;
            align-items: center;
            justify-content: end;
            background: transparent;

            margin-top: 30px !important;

            & a {
                white-space: nowrap;
            }

            & > li {
                position: relative;
                z-index: 2;

                & > a {
                    padding: 0 !important;
                    font: 700 12px/32px $font-family-sans-serif !important;
                    text-transform: uppercase;
                    padding: 0 8px !important;
                    gap: 8px;
                    color: #000;

                    &:after {
                        transform: rotate(90deg);
                        width: 0.65em !important;
                    }
                }

                & > ul {
                    display: none;
                    position: absolute;
                    height: unset !important;
                    padding: 16px;
                    background: #ccc !important;
                    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
                    columns: 2;
                    column-gap: 32px;

                    > li {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        padding: 0 !important;
                        break-inside: avoid;

                        &:not(.dropdown):has(+ li) {
                            margin-bottom: 8px;
                        }

                        & > a {
                            font-size: 12px !important;
                            line-height: 14px !important;
                        }

                        & > ul {
                            gap: 8px;

                            & > li {
                                &,
                                & > a {
                                    font-size: 12px !important;
                                    line-height: 14px !important;
                                    font-weight: 600 !important;
                                }
                            }
                        }
                    }
                }

                &:last-child > ul {
                    right: 0;
                }

                &:hover {
                    background: #ccc;
                    > ul {
                        display: block;
                    }
                }
            }
        }
    }
}