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

.backendlayout-home_page {

    // --- Target the header element ---
    header {
        // --- Mobile First: Always Primary Background ---
        @apply bg-primary text-white;

        // Mobile link/icon colors (on primary background)
        #mainNav .nav-link { // Target links within #mainNav
            @apply text-white hover:text-gray-200;
        }
        #mainNav .nav-toggle-icon,
        #mainNav .nav-toggle-icon::before,
        #mainNav .nav-toggle-icon::after {
             @apply bg-white; // Ensure mobile toggle is visible
        }
        // Adjust mobile submenu link colors if needed (depends on dropdown background)
        #mainNav .sub-menu .nav-link {
             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
        }

        // --- Desktop Styles ---
        @screen lg {
            // Initial state: Transparent background, fixed position
            @apply fixed top-0 left-0 right-0 z-50 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
            }
        }
    }
}

// --- Default styles for header on NON-home pages ---
// Ensures header has a background and correct colors on other pages
body:not(.backendlayout-home_page) {
    header {
        @apply bg-primary text-white; // Or your desired default background/text

        #mainNav .nav-link {
            @apply text-white hover:text-gray-200;
        }
        #mainNav .nav-toggle-icon,
        #mainNav .nav-toggle-icon::before,
        #mainNav .nav-toggle-icon::after {
             @apply bg-white;
        }
        #mainNav .sub-menu .nav-link {
             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
        }
    }
    // On non-home pages, main content doesn't need extra padding-top
    @screen lg {
        main {
            @apply pt-0; // Reset padding if needed
        }
    }
}