/* Artwork stays with the theme. A selected color or Media Library image replaces its layers. */
.home .hero[data-willinet-background]:not([data-willinet-background='gradient'])::before,
.home .hero[data-willinet-background]:not([data-willinet-background='gradient'])::after {
  content: none;
}

.willinet-home-artwork-preview {
  overflow: hidden;
  isolation: isolate;
}

.willinet-home-artwork-preview::before,
.willinet-home-artwork-preview::after {
  z-index: -1;
}

[data-willinet-background='gradient'] {
  --willinet-gradient-edge: color-mix(in srgb, var(--willinet-gradient-base) 70%, var(--willinet-gradient-shade));
  --willinet-gradient-fill: linear-gradient(135deg, var(--willinet-gradient-base), var(--willinet-gradient-edge));
}

:is(.home .hero, .willinet-home-artwork-preview)[data-willinet-background='gradient'] {
  --willinet-gradient-fill:
    radial-gradient(ellipse 70% 90% at 18% 40%, var(--willinet-gradient-edge), transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 115%, var(--willinet-gradient-edge), transparent 60%),
    linear-gradient(118deg, var(--willinet-gradient-edge), var(--willinet-gradient-base) 48%, var(--willinet-gradient-edge));
}

[data-willinet-background] {
  color: var(--willinet-section-ink);
}

/* Color only copy and controls that sit directly on the replaced backdrop. */
[data-willinet-background].hero .hero__grid > div:first-child :is(h1, strong, .eyebrow, .hero__tagline),
[data-willinet-background].priority-hero--create :is(h1, .priority-eyebrow, .priority-intro, .priority-intro-panel :is(h2, p)),
[data-willinet-background].priority-section--tinted .site-container > :is(h2, p, .priority-link-row a),
[data-willinet-background].wn-workshops :is(.wn-workshops-title, .wn-workshops-intro, .section-label),
[data-willinet-background].watch-hero > .site-container > h1,
[data-willinet-background].watch-hero :is(.schedule-heading, .schedule-heading h2, .watch-platforms-label, .schedule-channel h3, .schedule-list li:not(.is-current) time),
[data-willinet-background].program-archive > .site-container > :is(h1, h2, p, .archive-back),
[data-willinet-background].program-archive :is(.archive-results-context, .archive-browse, .archive-toolbar label, .archive-clear a),
.editor-styles-wrapper [data-willinet-background].willinet-editor-section :is(h1, h2, p):not(.willinet-copy-channel_1302_label, .willinet-copy-channel_1303_label) {
  color: var(--willinet-section-ink);
}

[data-willinet-background].watch-hero .schedule-list li:not(.is-current) {
  background: color-mix(in srgb, var(--willinet-section-ink) 6%, transparent);
}

[data-willinet-background].hero .carousel-dot {
  background: var(--willinet-section-ink);
}

/* Keep the intro panel transparent when its foreground follows a light background. */
[data-willinet-background].priority-hero--create .priority-intro-panel {
  background: color-mix(in srgb, var(--willinet-section-ink) 7%, transparent);
}

[data-willinet-background].hero .hero__grid > div:first-child .button--ghost,
[data-willinet-background].priority-hero--create .priority-actions > .priority-link-row:last-child > a,
[data-willinet-background].watch-hero .channel-switcher__link:not(.is-active),
.editor-styles-wrapper [data-willinet-background].willinet-editor-hero :is(.willinet-copy-watch_label .wp-block-button__link, .willinet-copy-channel_1302_label, .willinet-copy-channel_1303_label) {
  color: var(--willinet-section-ink);
  background: transparent;
  border: 1px solid currentColor;
}

[data-willinet-background] :is(.priority-link-row a, .archive-back, .archive-browse, .button--ghost, .channel-switcher__link):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}