@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&family=Poiret+One&display=swap');
@import "./root.scss";

.navbar {
    position: fixed !important;
    top: 0px;
    width: 100%;
    z-index: 99999;

    a {
        font-size: 1.5vw;
        letter-spacing: 0.3vw;
        opacity: 0.5;
        transition: all 0.2s ease-in-out;
    }

    .logo img {
        width: 6vw;
        height: auto;
    }

    .contact {
        font-family: "Poiret One", serif !important;
        font-weight: 700;
        font-style: normal;
        font-size: 1.5vw;
        letter-spacing: 0.3vw;
        opacity: 0.5;
        color: $primary-light;
        transition: all 0.15s ease-in-out;
        width: max-content;
        left: 99%;
        transform: translate(-100%);
        position: relative;
    }

    .contact:hover {
        opacity: 1;
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .navbar {
        .navbar-nav {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            color: $primary-light;
            
            a {
                font-family: "Poiret One", serif !important;
                font-weight: 700;
                font-style: normal;
                color: $primary-light;

                &.active {
                    opacity: 1;
        
                    &:hover{
                        color: $primary-light;
                    }
                }

                &:hover {
                    opacity: 1;
                    color: $cta-green;
                }
            }

            .ms-auto {
                margin-left: none;
            }
    
            .nav-item {
                padding: 0 1vw; /* Add spacing of 1vw to the left and right */
                position: relative; /* Ensure pseudo-element positioning works */
            }
    
            .nav-item:not(:last-child)::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 0; /* Position the line on the right */
                transform: translateY(-50%);
                height: 80%; /* Adjust height of the line */
                width: 0.15vw; /* Thin vertical line */
                background-color: $primary-light; /* Light color for the line */
            }
    
            .nav-item:first-child {
                padding-left: 0; /* Remove extra left spacing */
            }
        }
    }
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    .navbar { 

        color: black !important;

        .offcanvas {
            background-color: $primary-light;
        }

        .logo img {
            opacity: 1 !important;
            width: 20vw;
            height: auto;
        }

        .contact {
            display: none;
        }

        .navbar-nav {
            position: relative;
            top: 50%;
            transform: translate(-0%, -50%);
            text-align: center;
        }

        .offcanvas-header {
            button {
                font-size: 7vw;
            }
        }

        a {
            font-weight: 600;
            font-size: 4vh;
            margin-bottom: 3vh;
            color: $primary-dark !important;

            &.active {
                color: $cta-green !important;
            }
        }

    }
}