/* Header Container */
.header {
    position: relative;
    padding-top: 3rem;
    z-index: 1;

    &.mobile-only {
        display: none;

        @media (max-width: 768px) {
            display: block;
        }
    }

    &:not(.mobile-only) {
        @media (max-width: 768px) {
            display: none;
        }
    }

    .container {
        width: 75vw;
        margin: 0 auto;
        position: relative;

        @media (max-width: 768px) {
            width: 100%;
        }
    }


    /* Logo Section */
    .logo {
        margin-bottom: 60px;
        text-align: center;

        a {
            display: inline-block;
        }

        img {
            max-width: 300px;
            height: auto;
        }
    }

    /* Main Navigation Bar */
    nav {
        background-color: #FBF9F3;
        border: 2px solid #FD8B51;
        border-radius: 25px;
        height: 59px;
        display: flex;
        align-items: center;
        justify-content: flex-start;


        /* Make room for phone section */
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;

        /* Navigation Links */
        >a {
            color: #FD8B51;
            text-decoration: none;
            font-size: .75rem;
            font-weight: 500;
            padding: 0 15px;
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            transition: color 0.3s ease;
            white-space: nowrap;

            &:hover {
                color: #e6743a;
            }

            &:first-child {
                margin-left: 20px;
            }

            /* Vertical Dividers Between Links */
            &:not(.call)::after {
                content: '';
                position: absolute;
                right: -1px;
                top: 50%;
                transform: translateY(-50%);
                width: 2px;
                height: 26px;
                background-color: #FD8B51;
                border-radius: 89px;
            }

            /* Remove divider after last navigation link before phone section */
            &:nth-last-child(2)::after {
                display: none;
            }
        }


        #welcome-message {
            padding-left: 2rem;
            color: #FD8B51;
        }

        .menu {
            background-color: #FD8B51;
            border-radius: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 2rem;
            padding-right: 2rem;
            gap: 8px;
            position: absolute;
            right: -2px;
            top: -0px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            cursor: pointer;

            &:hover {
                background-color: #e6743a;
            }

            /* Phone Icon Container */
            svg {
                flex-shrink: 0;
            }

            /* Phone Number Text */
            span {
                color: #FFFFFF;
                font-size: 14px;
                font-weight: 500;
                white-space: nowrap;
            }
        }

        /* Phone Section */
        .call {
            background-color: #FD8B51;
            border-radius: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 2rem;
            padding-right: 2rem;
            gap: 8px;
            position: absolute;
            right: -2px;
            top: -0px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            cursor: pointer;

            &:hover {
                background-color: #e6743a;
            }

            /* Phone Icon Container */
            svg {
                flex-shrink: 0;
            }

            /* Phone Number Text */
            span {
                color: #FFFFFF;
                font-size: 14px;
                font-weight: 500;
                white-space: nowrap;
            }
        }
    }
}