/* Parent Element */
.o-header {
    position: relative;
    z-index: 90;
    background-color: var(--color-black);
    color: var(--color-white);


    & .container {
        height: inherit;
    }
}

/* Inner */

.o-header__inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (width >=768px) {
    .o-header__inner {
        justify-content: flex-start;
    }
}

/* Logo */

.o-header__logo {
    height: inherit;
    order: 2;
    padding-bottom: .85rem;
    padding-top: .85rem;

    & .a-image-a {
        margin: 0;
        max-width: 75px;

        @media (width >=768px) {
            max-width: 112px
        }

        & img {
            height: unset;
        }
    }
}

@media (width >=768px) {
    .o-header__logo {
        order: 1;
    }
}

/* Menu */

.o-header__menu {
    order: 1;
    height: 100%;
}

@media (width >=768px) {
    .o-header__menu {
        order: 2;
    }
}

.o-header__menu button {
    background-color: transparent;
    display: block;
    height: inherit;
}

@media (width >=768px) {
    .o-header__menu button {
        display: none;
    }
}


.o-header__nav {
    & .m-menu-a__items {
        list-style-type: none;
        padding-left: 0;
    }

    & .m-menu-a__submenu {
        list-style-type: none;
        padding: 0.5rem 0;
        margin: 0;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: all 0.25s ease 0.25s;
        background-color: var(--color-black);
        /*max-width: 240px;*/
        min-width: 122px;
        width: auto;
        white-space: nowrap;
    }

    /*& .m-menu-a__submenu .m-menu-a__item a:hover {*/
    /*    color: var(--color-red);*/
    /*}*/

    & .m-menu-a__item {
        font-family: var(--font-family-heading);
        position: relative;
        margin: 0;

        &.is-parent {

            i {
                display: none;
            }
        }
    }

    & .m-menu-a__item.is-parent > span > a:after,
    & .m-menu-a__item.is-parent > a:after {
        content: '';
        width: 1rem;
        height: 1rem;
        display: inline-block;
        position: relative;
        background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-size: 10px 6px;
        background-position: center;
        background-repeat: no-repeat;
    }

    & .m-menu-a__item:hover .m-menu-a__submenu {
        margin: 1rem 0 0 0;
        visibility: visible;
        opacity: 1;
    }

    & .m-menu-a__item a {
        text-decoration: none;
        font-size: 1.5rem;
        text-transform: uppercase;
        line-height: 2.1em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

@media (width <=768px) {

    .o-header__nav {
        /* Hide initially on mobile */
        position: fixed;
        left: 0;
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        box-shadow: 0 1.875rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);

        /* Top is set  dynamically based on header height via global-header.js */
        &[aria-hidden="true"] {

        }

        &[aria-hidden="false"] {
            /*max-height: 400px;*/
            max-height: 100%;
            z-index: 100;
            overflow: auto;
            padding: 0;
            max-width: 100%;
        }

        & .m-menu-a__items {
            padding-bottom: 1rem;
            background-color: var(--color-black);
            list-style-type: none;
            margin-top: 0;
            padding-top: 1rem;
            margin-bottom: 0;
        }

        & .m-menu-a__item {
            padding-left: 4%;

            &.is-parent {

                > span {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                }

                i {
                    display: block;
                    height: 3rem;
                    width: 3rem;
                    place-content: center;
                    text-align: center;

                    &:after {
                        content: '';
                        width: 1rem;
                        height: 1rem;
                        display: inline-block;
                        position: relative;
                        background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
                        background-size: 15px 9px;
                        background-position: center;
                        background-repeat: no-repeat;
                        transition: transform 0.25s;
                    }
                }
            }

            &.is-active {

                i {

                    &:after {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        & .m-menu-a__item a {
            text-decoration: none;
            font-size: 1.5rem;
            text-transform: uppercase;
            line-height: 2.1em;
        }

        & .m-menu-a__item a:after {
            content: none !important;
        }

        & .m-menu-a__submenu {
            position: relative;
            visibility: visible;
            opacity: 1;
            margin: 0 !important;
            max-width: 100%;
            padding: 0 0 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s;

            &.is-open {
                max-height: calc(var(--submenu-items-count, 4) * 52px);
            }
        }

        & .m-menu-a__submenu .m-menu-a__item {
            padding-left: 0;
        }
    }
}

@media (width >=768px) {
    .o-header__nav {
        & .m-menu-a__items {
            padding-left: 4vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        & .m-menu-a__item a {
            font-size: 1.15rem;
            padding-left: 1em;
            padding-right: 1em;
        }
    }
}



.o-header__menu-toggle {
    max-width: 25px;
}

/* Aux */
.o-header__aux {
    opacity: 0;
    order: 3;
}

@media (width >=768px) {
    .o-header__aux {
        margin-left: auto;
    }
}

.menu-open .o-header__menu-toggle .a-hamburger {
    display: none;
}

.o-header__menu-toggle .a-exit {
    display: none;
}

.menu-open .o-header__menu-toggle .a-exit {
    display: block;
}

/* Hamburger Menu */
.o-header .hamburger {
    cursor: pointer;
    background: transparent;
    border: none;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    width: 31px;
    height: 18px !important;

    & span {
        display: block;
        height: 1.5px;
        width: 100%;
        background: white;
        transition: all 0.2s ease;
        border-radius: 2px;
    }

    & span:nth-child(2) {
        width: 65%;
    }
}

.o-header .o-header__menu-toggle[aria-expanded="true"] .hamburger {
    & span:nth-child(1) {
        transform: rotate(29deg) translate(5px, 10px);
    }

    & span:nth-child(2) {
        opacity: 0;
    }

    & span:nth-child(3) {
        transform: rotate(-29deg) translate(2px, -5px);
    }
}