/*
 * This SOFTWARE PRODUCT is provided by Credit Security Limited "as is" and
 * "with all faults". Credit Security Limited makes no representations or
 * warranties of any kind concerning the safety, suitability, lack of viruses,
 * inaccuracies, typographical errors, or other harmful components of this
 * SOFTWARE PRODUCT. There are inherent dangers in the use of any software,
 * and you are solely responsible for determining whether this SOFTWARE PRODUCT
 * is compatible with your equipment and other software installed on your
 * equipment. You are also solely responsible for the protection of your
 * equipment and backup of your data, and Credit Security Limited will not be
 * liable for any damages you may suffer in connection with using, modifying,
 * or distributing this SOFTWARE PRODUCT.
 *
 */

.navbar-light .navbar-nav .nav-link {
    font: var(--csl-navbar-font);
    color: var(--csl-navbar-text-color); /* set link colour */
}

.nav-link.active {
    color: var(--csl-navbar-text-color);
    /*border-bottom: var(--color-primary-light) solid 2px;*/
}

/* Initial transparent style */
.navbar {
    transition: background-color 0.3s ease-in-out;
}

/* Override positioning of navbar */
.navbar-collapse {
    flex-grow: initial;
}

.navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 1200px) {
    .navbar-nav .nav-link {
        padding-right: 2rem !important;
        padding-left: 2rem !important;
    }
}

.nav-link {
    /*padding: 0;*/
}

.navbar-transparent {
    background-color: var(--csl-navbar-bg-color);
}

/* Set relative positioning to `.menu-item-text` to contain the underline width */
.menu-item-text {
    position: relative;
    display: inline-block; /* Ensure it wraps only its contents */
}


/*
modify navbar on screen sizes under 1211px
 */
@media only screen and (max-width: 1211px) {

    .navbar-toggler {
        border: none;
    }

    .navbar-toggler-icon {
        color: var(--color-primary-light);
    }

    .custom-slide-panel {
        position: fixed;
        top: 0;
        right: 0; /* Start from the right */
        width: 50%; /* Adjust width as needed */
        background-color: rgba(255, 255, 255, 1); /* Background color */
        z-index: 1050; /* Ensure it appears above other content */
        transform: translateX(100%); /* Start off-screen */
        transition: transform 0.3s ease-in-out; /* Smooth slide-in and slide-out effect */
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        visibility: hidden; /* Ensure it's not focusable/clickable when hidden */
    }

    .custom-slide-panel.show {
        transform: translateX(0); /* Slide into view */
        visibility: visible; /* Allow interaction */
    }

    .navbar-collapse ul {
        padding-bottom: 1rem !important;
    }

    .nav-link {
        /*margin: 1rem 1rem;*/
        padding: 1rem 1rem;
        border-bottom: rgba(0, 0, 0, 0.1) solid 1px;
    }


    .navbar-toggler {
        z-index: 1100; /* Place toggler above the sliding menu */
    }

    body.custom-slide-panel.show {
        overflow: hidden; /* Prevent scrolling when navbar is open */
    }
}

/*
modify navbar on screen sizes under 575px
 */
@media only screen and (max-width: 575px) {
    .navbar {
        background-color: #ffffff !important; /* Change to your desired opaque color */
    }

    .navbar-brand-img {
        width: 95%;
    }
}

/* Opaque style when scrolling */
.navbar.opaque {
    background-color: #ffffff !important; /* Change to your desired opaque color */
}


/*
modify navbar on screen sizes under 1209px
 */
@media only screen and (max-width: 1209px) {
    .nav-link {
        border-left: var(--color-primary-light) transparent 3px;
        padding-left: 1rem;
    }

    .nav-link.active {
        color: var(--csl-navbar-text-color);
        background-color: var(--rgba-primary-light-opaque);
        /*text-decoration: var(--csl-navbar-text-color) underline;*/
        border-left: var(--color-primary-light) solid 3px;
        border-bottom: none;
        padding-left: 1rem;
    }
}

@media only screen and (min-width: 1210px) {
    /* Apply underline on hover for non-active links */
    .l-to-r-line > li > a:hover .menu-item-text i.underline,
    .l-to-r-line > li > a.active .menu-item-text i.underline {
        bottom: -8px; /* Aligns with active underline positioning */
        background-color: #3bb8eb;
        height: 2px;
        width: 100%;
        opacity: 0.85;
    }

    /* Set up the underline default style */
    .l-to-r-line > li > a > .menu-item-text i.underline {
        position: absolute;
        display: block;
        bottom: -5px;
        left: 0;
        height: 2px;
        background-color: #3bb8eb;
        width: 0; /* Start with no width */
        opacity: 0.85;
        transition: width 0.3s cubic-bezier(.175, .885, .32, 1.275); /* Smooth width transition */
    }

    /* Active link underline style */
    .l-to-r-line > li > a.active .menu-item-text i.underline {
        width: 100%; /* Full width for active links */
    }

    /* Hover effect to slide in the underline */
    .l-to-r-line > li > a:hover .menu-item-text i.underline {
        width: 100%; /* Expand to full width on hover */
    }
}