/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/header/style.css ***!
  \**************************************************************************************************************************************************************************/
header.page-header {
    --carrot-size: 0.5rem;

    padding-block: 1rem;

    position: relative;
    z-index: 10;
    background: white;

    button {
        cursor: pointer;
    }

    nav {
        display: flex;
        flex-direction: column;

        a:not(.btn) {
            text-decoration: none;
            color: var(--rich-black);
            font-weight: bold;
        }

        button.mega-menu-toggle, button.submenu-toggle {
            background: transparent;
            border: none;
            font-weight: bold;
            font-size: var(--px16);
            line-height: var(--px19);

            margin-inline-end: var(--carrot-size);
            position: relative;
            color: var(--rich-black);


            &::after {
                content: "";
                display: block;
                width: var(--carrot-size);
                height: var(--carrot-size);
                position: absolute;
                top: 35%;
                left: 100%;
                border-block-start: 2px solid var(--sage-green);
                border-inline-start: 2px solid var(--sage-green);
                transform: rotate(225deg);
                transition: transform .4s ease-out;
            }

            &.open {
                color: var(--sage-green);
            }
        }
    }

    ul { 
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 1rem;
        align-items: center;
        justify-self: flex-end;
    }

    ul.submenu {
        display: none;
        flex-direction: column;
        position: absolute;
        background: white;
        align-items: flex-start;
        padding: 1.5rem 1.25rem;
        gap: 0.5rem;

        a {
            font-weight: normal;
            padding-block: 0.5rem;

            &:hover {
                color: var(--sage-green);
            }
        }
    }

    button.submenu-toggle.open {
        & + ul.submenu {
            display: flex;
        }
    }

    .upper-nav {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: flex-end;
        align-items: center;

        .submenu {
            border-radius: var(--px5);
            box-shadow: 0px 3px 10px #3636361A;
            z-index: 3;
        }
    }

    .lower-nav {
        display: grid;
        grid-template-columns: max-content 1fr max-content max-content;
        gap: 1rem;
    }

    .main-nav-mobile {
        display: none;
    }
}

.main-nav .btn {
    align-self: center;
}

.submenu {
    display: none;
}

.main-nav-mobile {

    gap: 1em;
    
    .btn {
        align-self: center;
    }

    .logo {
        width: 100%;
        max-width: 256px;
    }
}

.mega-menu {
    width: 100%;
    position: absolute;
    top: 100%;
    background: white;
    display: none;
    z-index: 2;

    box-shadow: 0px 3px 10px #3636361A;

    grid-template-columns: 3fr 2fr;
 
    --mega-block-padding: 2rem;
    --mega-inline-padding: max(calc((100vw - var(--max-width)) / 2), 2rem);
    --menu-inset: 3rem;

    .close-button {
        position: absolute;
        width: var(--px40);
        height: var(--px40);
        background: var(--rich-black);
        color: white;
        border-radius: var(--px20);
        top: 2rem;
        right: 3rem;
        display: grid;
        place-items: center;

        svg {
            width: 60%;
            height: 60%;
        }
    }

    h2 {
        font-size: var(--px20);
        font-weight: bold;
        border-block-end: 1px solid var(--rich-black);
        padding-block-end: 1rem;
        margin-block-end: 1rem;
    }


    .mega-menu-links {
        padding-block: var(--mega-block-padding);
        padding-inline-start: calc(var(--mega-inline-padding) + var(--menu-inset));
        padding-inline-end: 2rem;
        display: flex;
        flex-direction: column;


        .mega-menu-grid {
            
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            margin-block-end: 1rem;
        }

    }
    .mega-menu-video {
        background: var(--mist-gray);
        padding-block: var(--mega-block-padding);
        padding-inline-end: calc(var(--mega-inline-padding) + var(--menu-inset));
        padding-inline-start: 2rem;

        .demo, .video {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            p {
                font-size: var(--px14);
                line-height: var(--px16);
                font-weight: bold;
            }
            .green {
                color: var(--sage-green);
            }

            a {
                color: white;

                &:hover {
                    color: white;
                }
            }
        }
    }

    &.open {
        display: grid;
    }

    article {
        padding: 0.6rem;

        h3 {
            font-weight: bold;
            font-size: var(--px15);
        }

        p {
            font-size: var(--px14);
            line-height: var(--px18);
        }
    }

    article:hover {
        background: var(--mist-gray);
        h3 {
            color: var(--sage-green);
        }
    }

    a {
        color: var(--rich-black);
        text-decoration: none;
    }

    a:last-of-type {
        grid-column: 2/3;
        font-size: var(--px14);
        padding-inline-start: 0.6rem;

        &:hover {
            color: var(--sage-green);
        }
    }
}

#markets {
    grid-template-columns: 1fr;
    padding-block: 2rem;

    .markets-links {
        padding-inline: 3rem;
    }

    .markets-link-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;

        a:last-of-type {
            grid-column: 3/4;
        }
    }
}

.rjof-nav-container {
    max-width: var(--max-nav-width);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media screen and (min-width: 62.5rem) {
    body:has(.mega-menu.open) {

        #mega-menu-backdrop {
            display: block;
        }
    
    }
}

@media screen and (max-width: 62.5rem) {

    .mega-menu {
        display: none;

        &.open {
            display: none;
        }
    }

    header.page-header {
        position: relative;

        .main-nav {
            display: none;
        }

        ul.submenu {
            position: static;
        }

        .main-nav-mobile {
            display: grid;
            grid-template-columns: 1fr max-content min-content;
            align-items: center;

            .mobile-menu {
                position: absolute;
                background: white;
                width: 100%;
                list-style-type: none;
                display: none;
                flex-direction: column;
                z-index: 2;
                left: 0;
                right: 0;
                top: 100%;
                align-items: flex-start;
                padding: 1rem;

                button {
                    background: transparent;
                    border: none;
                    padding: 0;
                    font-weight: bold;
                    color: var(--rich-black);
                }

                li:has(.submenu) button {

                    padding-inline-end: var(--carrot-size);
                    position: relative;


                    &::after {
                        content: "";
                        display: block;
                        width: var(--carrot-size);
                        height: var(--carrot-size);
                        position: absolute;
                        top: 35%;
                        left: 100%;
                        border-block-start: 2px solid var(--sage-green);
                        border-inline-start: 2px solid var(--sage-green);
                        transform: rotate(225deg);
                        transition: transform .4s ease-out;
                    }
                }
                
                .submenu {
                    margin-inline-start: 2rem;
                    margin-block-start: 0.5rem;
                    display: none;
                    flex-direction: column;
                    align-items: flex-start;
                }

                li:has(.submenu) button.open {
                    color: var(--sage-green);

                    & + .submenu {
                        display: flex;

                    }

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

            }

            .mobile-menu-toggle {
                --button-size: 49px;
                --line-height: 3px;
                --line-start: 14px;
                --line-move: 9px;

                width: var(--button-size);
                height: var(--button-size);
                position: relative;
                background: white;
                border: none;

                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    height: var(--line-height);
                    top: var(--line-start);
                    background: var(--sage-green);
                    transition: transform 0.3s ease-out;
                }
                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    height: var(--line-height);
                    bottom: var(--line-start);
                    background-color: var(--sage-green);
                    transition: transform 0.3s ease-out, background-color 0.3s ease-out;
                }
            }

            .mobile-menu-toggle.open {

                &::before {
                    transform: translateY(var(--line-move)) rotateZ(225deg);
                    background-color: var(--rich-black);
                }
                
                &::after {
                    transform: translateY(calc(var(--line-move) * -1)) rotateZ(-225deg);
                    background-color: var(--rich-black);
                }
            }
            .mobile-menu-toggle.open + .mobile-menu {
                display: flex;
            }
        }
    }

    body:has(.mobile-menu-toggle.open) {

        #mega-menu-backdrop {
            display: block;
        }
    
    }
}

.floating-section {
    position: fixed;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    bottom: var(--px36);
    right: var(--px40);
    align-items: center;
}

.floatingButton, #LP_DIV_1461104587412 {
    background: transparent;
    border: none;
}

.openChat, #LP_DIV_1461104587412 {   

    width: 55px;
    height: 55px;
    
    .LPMoverlay {
        position: absolute;
        inset: 0;

        .LPMlabel {
            color: transparent !important;
        }
    }
}

.jumpToTop {
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease-in;

    &.active {
        pointer-events: initial;
        opacity: 1;
        cursor: pointer;
    }
}

#mega-menu-backdrop {
    position: fixed;
    inset: 0;
    background: var(--rich-black);
    opacity: 0.8;
    display: none;
    z-index: 1;
}

.stonex-banner {
    background: var(--sage-green);
    color: white;
    padding-block-end: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    display: grid;
    align-items: center;
    justify-content: center;
    margin-block-end: 0.5rem;
}

header.page-header:has(.stonex-banner) {
    padding-block-start: 0;
}

/*# sourceMappingURL=style-index.css.map*/