@media (min-width: 1024px) {
    header .header-container {
        transition: background-color 0.3s ease, top 0.3s ease;
    }
    
    header .header-container .header-logo svg path {
        transition: fill 0.3s ease;
    }
    
    header .header-container .header-links a {
        transition: color 0.3s ease;
    }
    
    /* Only apply scrolled styles when header is above program-page-content */
    header .header-container.scrolled-above-content {
        background-color: #7234C4;
    }
    
    header .header-container.scrolled-above-content .header-logo svg path {
        fill: #fff;
    }
    
    header .header-container.scrolled-above-content .header-links a {
        color: #fff;
    }
}