/* Navbar Left Gradient Effect - Integration with existing styles */
.navbar-left-gradient {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 500px; /* Increased width to reach just before Home link */
    background: linear-gradient(to right,
                rgba(255, 255, 255, 0.95) 0%, /* Much more solid white at the left edge */
                rgba(255, 255, 255, 0.8) 20%,
                rgba(255, 255, 255, 0.6) 40%,
                rgba(255, 255, 255, 0.3) 60%,
                rgba(255, 255, 255, 0.1) 80%,
                rgba(255, 255, 255, 0) 100%);
    pointer-events: none; /* Makes sure the gradient doesn't interfere with clicks */
    z-index: 2; /* Above the navbar background but below content */
}

/* RTL Support for Kurdish language */
html[dir="rtl"] .navbar-left-gradient {
    left: auto;
    right: 0;
    width: 550px; /* Slightly wider than LTR to ensure good coverage */
    background: linear-gradient(to left,
                rgba(255, 255, 255, 0.95) 0%, /* Much more solid white at the right edge for RTL */
                rgba(255, 255, 255, 0.8) 20%,
                rgba(255, 255, 255, 0.6) 40%,
                rgba(255, 255, 255, 0.3) 60%,
                rgba(255, 255, 255, 0.1) 80%,
                rgba(255, 255, 255, 0) 100%);
}

/* Transparent navbar special styling */
#mainNavbar.transparent .navbar-left-gradient {
    background: linear-gradient(to right,
                rgba(255, 255, 255, 0.9) 0%, /* Strong white at left */
                rgba(255, 255, 255, 0.7) 20%,
                rgba(255, 255, 255, 0.5) 40%,
                rgba(255, 255, 255, 0.2) 60%,
                rgba(255, 255, 255, 0.05) 80%,
                rgba(255, 255, 255, 0) 100%);
}

/* RTL Support for transparent navbar */
html[dir="rtl"] #mainNavbar.transparent .navbar-left-gradient {
    background: linear-gradient(to left,
                rgba(255, 255, 255, 0.9) 0%, /* Strong white at right for RTL */
                rgba(255, 255, 255, 0.7) 20%,
                rgba(255, 255, 255, 0.5) 40%,
                rgba(255, 255, 255, 0.2) 60%,
                rgba(255, 255, 255, 0.05) 80%,
                rgba(255, 255, 255, 0) 100%);
}

/* Scrolled navbar special styling */
#mainNavbar.scrolled .navbar-left-gradient {
    background: linear-gradient(to right,
                rgba(255, 255, 255, 1) 0%, /* Solid white when scrolled */
                rgba(255, 255, 255, 0.9) 20%,
                rgba(255, 255, 255, 0.7) 40%,
                rgba(255, 255, 255, 0.4) 60%,
                rgba(255, 255, 255, 0.1) 80%,
                rgba(255, 255, 255, 0) 100%);
}

/* RTL Support for scrolled navbar */
html[dir="rtl"] #mainNavbar.scrolled .navbar-left-gradient {
    width: 600px; /* Even wider when scrolled to ensure a solid white background */
    background: linear-gradient(to left,
                rgba(255, 255, 255, 1) 0%, /* Solid white when scrolled for RTL */
                rgba(255, 255, 255, 0.95) 10%, /* Increased opacity for stronger white background */
                rgba(255, 255, 255, 0.9) 20%,
                rgba(255, 255, 255, 0.8) 30%,
                rgba(255, 255, 255, 0.7) 40%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0.4) 60%,
                rgba(255, 255, 255, 0.2) 70%,
                rgba(255, 255, 255, 0.1) 80%,
                rgba(255, 255, 255, 0) 100%);
}

/* Make sure the logo stands out against the gradient */
.navbar-brand-container {
    position: relative;
    z-index: 3;
    padding-left: 5px; /* Add a small padding for better appearance */
}

/* RTL Support for brand container */
html[dir="rtl"] .navbar-brand-container {
    padding-left: 0;
    padding-right: 5px;
}

/* Make the navbar logo contrast better with the white background */
.navbar-logo {
    position: relative;
    z-index: 3;
}

/* Make sure the Home link is visible against the fading gradient */
.navbar-nav .nav-link {
    position: relative;
    z-index: 3;
}

/* Make menu items more visible with text shadow for better contrast */
#mainNavbar.transparent .nav-link {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for the gradient */
@media (max-width: 991.98px) {
    /* For mobile view, adjust the gradient width */
    .navbar-left-gradient {
        width: 220px; /* Narrower on mobile */
        background: linear-gradient(to right,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(255, 255, 255, 0.7) 40%,
                    rgba(255, 255, 255, 0.3) 70%,
                    rgba(255, 255, 255, 0) 100%);
    }

    /* Adjust for RTL (Kurdish) language - Using html[dir="rtl"] */
    html[dir="rtl"] .navbar-left-gradient {
        left: auto;
        right: 0;
        width: 250px; /* Slightly wider for Kurdish to ensure full logo coverage */
        background: linear-gradient(to left,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(255, 255, 255, 0.7) 40%,
                    rgba(255, 255, 255, 0.3) 70%,
                    rgba(255, 255, 255, 0) 100%);
    }

    /* Special handling for scrolled state in RTL mode */
    html[dir="rtl"] #mainNavbar.scrolled .navbar-left-gradient {
        width: 280px; /* Even wider when scrolled to ensure white background behind logo */
    }
}

/* Make sure the navbar content stays above the gradient */
.navbar-brand-container,
.navbar-nav,
.navbar-collapse,
.navbar-toggler {
    position: relative;
    z-index: 3;
}