// Styles specific to the Home Page layout (.backendlayout-home_page)

.backendlayout-home_page {

    header {
        // --- Desktop Styles ---
        @screen lg {
            // Initial state: Transparent background, fixed position
            @apply bg-transparent transition-colors duration-300 ease-in-out;

            // Initial link colors and background for transparent header (desktop)
            #mainNav .nav-link {
                @apply bg-white text-primary hover:text-primary px-3 py-1 rounded; // Add bg-white, padding, and rounded corners
            }
            // Ensure mobile toggle icon also uses primary color initially on desktop if visible (though usually hidden)
            #mainNav .nav-toggle-icon,
            #mainNav .nav-toggle-icon::before,
            #mainNav .nav-toggle-icon::after {
                 @apply bg-primary;
            }
            // Desktop submenu link colors (assuming light dropdown background)
            #mainNav .sub-menu .nav-link {
                 @apply text-gray-700 hover:text-black;
            }

            // Scrolled state: Primary background (desktop)
            &.scrolled {
                @apply bg-primary shadow-md;

                // Link colors for primary background (desktop scrolled)
                #mainNav .nav-link {
                    @apply bg-primary text-white hover:text-gray-200;
                }
                 // Submenu link colors likely don't need changing here if dropdown is consistent
            }
        }
    }
}