/* Linton Microsite - Global Styling */
/*section#lintonNavWeb {
    background: aliceblue;
}*/

:root {
    --colorBlack: #212121;
    --colorLightBlack: #252324;
    --colorGrey: #414042;
    --colorDarkBlue: #010d3f;
    --colorStrongBlue: #0056e5;
    --colorLightBlue: #1f6def;
    --colorDeepBlue: #1616cc;
    --colorLightGrey: #f5f8ff;
    --colorYellow: #f3bf00;
}

section#lintonNavWeb {
    padding: 20px 15px;
    display: flex;
    width: 100%;

    background: var(--colorLightGrey);

    @media (max-width: 1199px) {
        display: none;
    }

    .linton-nav-contents {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1530px;
        margin: auto;

        a {
            &.logo-link {
                display: flex;
                align-items: center;

                img {
                    width: 100%;
                    min-width: 154px;
                    max-width: 154px;
                }
            }
        }

        .nav-menu-items {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            max-width: 1322px;
            gap: 5.21vw;

            @media (min-width: 1921px) {
                gap: 100px;
            }

            .nav-item {
                display: flex;
                align-items: center;
                width: 100%;
                /*max-width: -webkit-fill-available;*/
                max-width: fit-content;
                gap: 15px;

                a {
                    &.nav-link {
                        padding: 0;
                        color: var(--colorBlack);
                        font-family: "Sora", sans-serif;
                        font-size: 1.15vw;
                        /*font-size: 22px;*/
                        text-wrap: nowrap;
                        display: flex;
                        width: 100%;
                        max-width: 100%;
                        height: 100%;
                        max-height: 100%;
                        align-items: center;

                        @media (min-width: 1921px) {
                            font-size: 22px;
                        }
                    }
                }

                &.with-sub {
                    position: relative;

                    a {
                        padding-right: 30px;
                    }

                    img {
                        display: flex;
                        width: 100%;
                        max-width: 20px;
                        height: 100%;
                        max-height: 10px;
                        position: absolute;
                        right: 0;
                        pointer-events: none;
                    }

                    .nav-submenu-items {
                        display: flex;
                        flex-direction: column;
                        /*width: 100%;*/
                        width: 100vw;
                        max-width: 290px;
                        position: absolute;
                        top: 60px;
                        padding-top: 20px;

                        a {
                            &.nav-submenu-link {
                                background: var(--colorLightGrey);
                                text-decoration: none;
                                padding: 10px 20px;
                                color: var(--colorBlack);
                                font-family: "Sora", sans-serif;
                                font-size: 1.15vw;
                                /*font-size: 22px;*/
                                text-wrap: nowrap;
                                display: flex;
                                width: 100%;
                                max-width: 100%;
                                height: 100%;
                                max-height: 100%;
                                align-items: center;
                                transition: 0.4s ease;

                                @media (min-width: 1921px) {
                                    font-size: 22px;
                                }

                                &:hover {
                                    background: var(--colorDarkBlue);
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#steelProductsMain {
    &:hover {
        #steelProductsSub {
            display: flex;
            opacity: 1;
        }
    }

    #steelProductsSub {
        display: none;
        opacity: 0;
    }
}

#steelServicesMain {
    &:hover {
        #steelServicesSub {
            display: flex;
            opacity: 1;
        }
    }

    #steelServicesSub {
        display: none;
        opacity: 0;
    }
}

section#lintonNavMobile {
    padding: 20px 15px;
    display: flex;
    width: 100%;

    background: var(--colorLightGrey);

    @media (min-width: 1200px) {
        display: none;
    }

    .linton-nav-contents {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        max-width: 1530px;
        margin: auto;

        .mobile-nav-items {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            a {
                &.logo-link {
                    display: flex;
                    align-items: center;

                    img {
                        width: 100%;
                        min-width: 154px;
                        max-width: 154px;
                    }
                }

                &.mobile-burger {
                    display: flex;
                    height: 100%;
                    max-height: fit-content;
                    padding: 4px 12px;
                    border: 1px solid rgba(0, 0, 0, 0.15);
                    border-radius: 6px;

                    img {
                        width: 100%;
                        min-width: 30px;
                        max-width: 30px;
                    }
                }
            }
        }

        .nav-menu-items {
            display: grid;
            grid-template-rows: 1fr;
            transition: grid-template-rows 0.4s ease;

            .items-container {
                overflow: hidden;

                .nav-item {
                    a {
                        &.nav-link {
                            color: var(--colorBlack);
                            font-family: "Sora", sans-serif;
                            font-size: 16px !important;
                            font-weight: 700;
                            align-items: center;
                        }
                    }

                    &.with-sub {
                        .nav-submenu-items {
                            display: flex;
                            flex-direction: column;

                            a {
                                &.nav-submenu-link {
                                    text-decoration: none;
                                    padding: 8px 16px;
                                    padding-left: 32px;
                                    color: var(--colorBlack);
                                    font-family: "Sora", sans-serif;
                                    font-size: 16px !important;
                                    font-weight: 700;
                                    align-items: center;
                                }
                            }
                        }
                    }
                }
            }

            &.closed {
                grid-template-rows: 0fr;
            }
        }
    }
}

/* Linton Microsite - Global Styling - end */