/* ============================
   Navbar Styles (Desktop)
============================ */

/* Username */
.username {
    color: #fff; /* desktop top section white text */
    font-weight: 600;
    margin-right: 15px;
}

/* Username color on scroll */
.navbar.scrolled .username {
    color: #192A0A; /* dark text after scroll (desktop only) */
}

/* Navbar wrapper */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: transparent; /* top section transparent (desktop only) */
    padding: 0 40px;
    display: flex;
    align-items: center;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

    /* Nav links (desktop top section) */
    .navbar .nav-link {
        color: #fff !important; /* white text */
        font-weight: 600;
    }

/* Phone & icon (desktop top section) */
.phone-link,
.bi-telephone-fill {
    color: #fff !important; /* white on top */
    transition: color 0.3s ease;
}

    /* Hover effect desktop */
    .phone-link:hover {
        border-bottom: 2px solid #66C3EF;
    }

/* Navbar after scroll (desktop only) */
.navbar.scrolled {
    background: #fff !important; /* solid background after scroll */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .navbar.scrolled .nav-link,
    .navbar.scrolled .phone-link,
    .navbar.scrolled .bi-telephone-fill {
        color: #000 !important; /* black text after scroll */
    }

/* Logo size transition */
#navbar-logo {
    transition: all 0.3s ease;
    height: 70px; /* desktop top section */
}

.navbar.scrolled #navbar-logo {
    height: 50px;
}

/* Navbar links container (desktop) */
.navbar-links {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex: 1;
    margin-left: 20px;
}

/* ============================
   Mobile / Small Screen Overrides
============================ */

@media (max-width: 992px) {

    /* Always solid navbar on mobile */
    .navbar {
        background-color: #FDFDFD !important; /* off-white for mobile */
        padding: 0 15px;
        height: 120px;
    }

        /* Navbar links always black on mobile */
        .navbar .nav-link,
        .phone-link,
        .bi-telephone-fill,
        .username {
            color: #000 !important; /* keep black text */
        }

    /* Change navbar logo on mobile */
    #navbar-logo {
        content: url('/images/ProcessForge/Logo_Landscape.svg'); /* new logo for small screens */
        height: 60px; /* adjust as needed */
        width: auto;
    }

    /* Hamburger menu on the right */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        padding: 5px;
        border-radius: 6px;
        color: #000 !important; /* black bars */
        border: 1px solid rgba(0,0,0,0.1);
        cursor: pointer;
        z-index: 1100;
        background-color: #FDFDFD; /* off-white background */
    }
    /* Hamburger dropdown menu */
    .navbar-collapse {
        position: absolute;
        top: 120px;
        left: 0;
        width: 100%;
        background-color: #F5F5F5; /* off-white background */
        padding: 20px;
        border-radius: 0 0 8px 8px;
        display: flex; /* flex container */
        flex-direction: column;
        align-items: flex-start; /* align items to the left */
    }

        /* Show dropdown when active */
        .navbar-collapse.show {
            display: flex;
        }

        .navbar-collapse .nav-item {
            margin: 10px 0;
            width: 100%; /* make nav item full width */
        }

        .navbar-collapse .nav-link {
            text-align: left; /* left-align text */
            width: 100%; /* make link full width */
            display: block; /* ensure it spans full width */
            padding-left: 0; /* remove any left padding if present */
        }
    .hamburger span {
        border-radius: 2px;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    /* Center phone number below on mobile */
    .contact-center {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0;
    }

    .contact-center .phone-link,
    .contact-center i {
        font-size: 18px;
        font-weight: bold;
        color: #000; /* black text */
    }

    /* Hide scroll effect for mobile */
    .navbar.scrolled {
        background-color: #FDFDFD !important; /* override desktop scroll effect */
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

        .navbar.scrolled .nav-link,
        .navbar.scrolled .phone-link,
        .navbar.scrolled .bi-telephone-fill {
            color: #000 !important; /* black text on scroll for mobile */
        }
}

/* Extra small screens */
@media (max-width: 576px) {
    #navbar-logo {
        height: 50px;
    }

    .navbar-collapse .nav-link {
        font-size: 16px;
    }

    .hamburger {
        width: 25px;
        height: 20px;
    }

        .hamburger span {
            height: 2.5px;
        }
}