:where(.mobile-header-navigation) {
    display: none;
    height: 100%;
    align-items: center;

    .mobile-nav-links {
        padding-top: 4rem;
    }

    & a {
        color: var(--color-brand-navy);
        font-size: var(--font-size-h6);
        font-weight: var(--font-weight-h6);
        line-height: var(--line-height-h6);
        text-decoration: none;
    }

    .mobile-nav-bottom {
        margin-top: auto;
    }

    :is(summary, .l2-container) > a {
        font-family: var(--font-family-heading);
        max-width: fit-content;
    }


    .mobile-social {

        li {
            background: var(--color-brand-orange);
            border-radius: 50%;
            aspect-ratio: 1;
            width: 2.4rem;
            height: 2.4rem;
            padding: 1.5rem;
            display: inline-flex;
            place-content: center;
            place-items: center;

            & > a {
                display: inline-flex;
                place-content: center;
                place-items: center;
            }
        }

        .linkedin svg {
            height: 1.3rem;
        }

        .youtube svg {
            height: 1.2rem;
        }

        svg {
            min-width: 1.5rem;
            height: 1.5rem;
            fill: var(--color-primary-white);
        }
    }


    .mobile-utility-nav {
        width: 100%;
        justify-content: space-around;
        margin-block: var(--size-medium);

        & > a {
            padding-inline: var(--size-medium);
            display: grid;
            grid-template-columns: auto auto;
            gap: 1rem;
            align-items: center;
        }

        .spacer {
            width: 0.1rem;
            height: 100%;
            min-height: 4rem;
            background: var(--color-brand-navy);
        }

    }

    .mobile-nav-logo-link {
        & > svg {
            max-width: 70%;
            height: auto;
            fill: var(--color-primary-white);
        }
    }

    .twitter svg {
        stroke: var(--color-primary-white);
        path {
            fill: var(--color-primary-white);
        }
    }

    .mobile-menu-button-container {
        width: fit-content;
        margin-left: auto;
        max-width: 10rem;
        height: 100%;
        display: flex;
        align-items: center;

        .mobile-menu-button {
            height: 4rem;
            width: 4rem;
            aspect-ratio: 1 / 1;
            border: none;
            background: none;
            padding: 0;
            transition: all ease-in-out 250ms;
        }

        .mobile-menu-button:hover {
            cursor: pointer;
        }

        .mobile-menu-button svg {
            width: 3rem;
            height: 3rem;
        }


    }
}

@keyframes slideInFromRight {
    0% {
        right: -100vw;
    }
    100% {
        right: 0;
    }
}

.mobile-nav[open] {
    animation: slideInFromRight 250ms ease-in-out;
    right: 0;
    padding-left: 2rem;
    border: none;
    display: flex;
    flex-flow: column;
    padding-inline: var(--size-medium);
    container: mobileNav / inline-size;


    a {
        text-decoration: none;

        & + svg {
            justify-self: flex-end;
        }
    }
}

.mobile-nav[open]::backdrop {
    background: rgb(0 0 0 / 0.8);
}

.mobile-nav {
    width: 100%;
    max-width: 100dvw;
    position: fixed;
    z-index: var(--z-index-mobile-menu);
    right: -100vw;
    transition: all 250ms ease-in-out;
    top: 0;
    margin: 0 0 0 auto;
    height: 100%;
    max-height: 100vh;
    padding-top: var(--size-medium);
    background: linear-gradient(to bottom, var(--color-primary-white) 0%, var(--color-brand-pale-blue) 100%);

    .close-button {
        position: fixed;
        right: var(--size-medium);
        top: var(--size-medium);
        animation: slideInFromRight 250ms ease-in-out;
    }

    .close-button,
    .expand-arrow,
    .back-button {
        border: none;
        background: none;

        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: 2px solid var(--color-brand-navy);
            outline-offset: 2px;
            border-radius: 2px;
        }
    }

    .expand-arrow {
        & svg {
            width: 2rem;
            height: 2rem;
        }

        & svg path {
            fill: var(--color-brand-navy) !important;
        }
    }

    summary svg[role="button"] {
        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: 2px solid var(--color-brand-navy);
            outline-offset: 2px;
            border-radius: 2px;
        }
    }

    .expand-arrow:hover,
    .back-button:hover,
    .close-button:hover {
        cursor: pointer;
    }

    .back-button {
        display: none;
        position: fixed;
        top: 2rem;

        & svg {
            width: 3rem;
        }
    }

    .mobile-menu-children {
        height: 91vh;
        width: 73vw;
        position: fixed;
        top: 8rem;
        right: -75vw;
        transition: all 250ms ease-in-out;
    }

    .mobile-menu-item {
        padding: 1rem 2rem;
        border-bottom: 1px solid var(--color-brand-navy);

        summary {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            font-size: var(--font-size-h6);
            font-weight: var(--font-weight-h6);
            line-height: var(--line-height-h6);
            list-style: none;

            &:focus {
                outline: none;
            }

            &:focus-visible {
                outline: 2px solid var(--color-brand-navy);
                outline-offset: 2px;
                border-radius: 2px;
            }

            & > svg {
                width: 2.5rem;
                height: 2.5rem;
                transform: none;
                transition: all 250ms ease-in-out;
            }
        }

        &[open] {

            svg {
                transform: rotate(45deg);
                transition: all 250ms ease-in-out;

            }
        }

        .content-area {
            padding-top: 2rem;
            display: flex;
            flex-flow: column;
            gap: 1rem;
            padding-inline: var(--size-small);

            .l3-link {
                font-size: 1.6rem;
                font-weight: 400;
            }
        }
    }

    .l2-container.active > .l3-container,
    .l3-menu-item.active > .l4-container,
    .l4-menu-item.active > .l5-container {
        right: 0;
    }

    .mobile-top-nav-container {
        margin-block: 6rem;

        .mobile-menu-item {
            border-bottom: none;
        }
    }
}

.mobile-nav:has(.l2-container.active) .back-button {
    display: inline-block;
}

:where(.g-translate-mobile) {
    display: none;
}

.mobile-menu-button {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: none;
    border: none;

    & > svg {
        width: 3rem;
        height: 3rem;

        path {
            stroke: var(--color-brand-orange);

        }

    }
}

dialog .g-translate-mobile {
    display: flex;
    flex-flow: row;
    align-items: center;

    .gtranslate_wrapper {
        display: contents;
    }

    &::before {
        content: "";
        background-image: var(--globe-icon);
        height: 1em;
        aspect-ratio: 1;
        display: inline-block;
        position: relative;
    }

    option[value=""] {
        display: none;
    }

    &:focus-visible {
        outline: black auto 1px;
        outline-offset: var(--size-x-small);
    }

    &:hover {
        text-decoration: underline;
    }

    .glink {
        display: none;
        width: 0;
    }

    .gt_selector {
        background: transparent;
        border: none;
        color: #c8d0d8;
        font-size: 1.4rem;
        outline: none;
        position: relative;

        & option {
            color: var(--color-brand-primary-spd-blue);
        }

        @supports (appearance: base-select) {
            color: #c8d0d8;
        }

        &::picker(.gt_selector) {
            appearance: base-select;
        }
    }

    &::picker-icon {
        color: #999;
        transition: 0.4s rotate;
        /*display: none;*/
    }
}


@media screen and (width > 60em) {
    dialog.mobile-nav {
        display: none;
    }
}

@media screen and (width <= 60em) {
    .mobile-header-navigation {
        display: flex;
    }
}


@container mobileNav  (width < 50rem) {
    .mobile-nav[open] {
        .mobile-utility-nav {
            flex-flow: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;

            .spacer {
                display: none;
            }
        }
    }
}