/* Section bands set in the builder's "Built-in pages" card (issue #130).
   RouteCopyHelper::band() adds .rc-l (light value) and/or .rc-d (dark value)
   plus --rc-bg / --rc-ink (and the -dark pair). No class = the section's own colours. */
:root:not([data-theme="dark"]) .rc-l {
    background: var(--rc-bg) !important;
    color: var(--rc-ink);
}
:root[data-theme="dark"] .rc-d {
    background: var(--rc-bg-dark) !important;
    color: var(--rc-ink-dark);
}
:root:not([data-theme="dark"]) .rc-l :is(h1, h2, h3, h4, .grove-eyebrow, .creator-eyebrow),
:root[data-theme="dark"] .rc-d :is(h1, h2, h3, h4, .grove-eyebrow, .creator-eyebrow) {
    color: inherit;
}

/* Heroes (Explore / Content / Communities / Organizations): the band replaces
   the frame or tab layer colour, and the hero copy follows the readable ink. */
:root:not([data-theme="dark"]) :is(.explore-hero__frame, .explore-hero__layer, .directory-hero__layer).rc-l {
    background: var(--rc-bg) !important;
}
:root[data-theme="dark"] :is(.explore-hero__frame, .explore-hero__layer, .directory-hero__layer).rc-d {
    background: var(--rc-bg-dark) !important;
}
/* Dark ink (a light band): the active layer / the frame of the same hero decides. */
:root:not([data-theme="dark"]) :is(.explore-hero, .directory-hero):has(.is-active.rc-l.rc-li-dark) :is(h1, p),
:root:not([data-theme="dark"]) .content-hero:has(.explore-hero__frame.rc-l.rc-li-dark) :is(h1, p),
:root[data-theme="dark"] :is(.explore-hero, .directory-hero):has(.is-active.rc-d.rc-di-dark) :is(h1, p),
:root[data-theme="dark"] .content-hero:has(.explore-hero__frame.rc-d.rc-di-dark) :is(h1, p) {
    color: #1a1a1a !important;
}
/* Light ink on a dark band, in case the theme default is dark ink. */
:root:not([data-theme="dark"]) :is(.explore-hero, .directory-hero):has(.is-active.rc-l.rc-li-light) :is(h1, p),
:root:not([data-theme="dark"]) .content-hero:has(.explore-hero__frame.rc-l.rc-li-light) :is(h1, p),
:root[data-theme="dark"] :is(.explore-hero, .directory-hero):has(.is-active.rc-d.rc-di-light) :is(h1, p),
:root[data-theme="dark"] .content-hero:has(.explore-hero__frame.rc-d.rc-di-light) :is(h1, p) {
    color: #ffffff !important;
}

/* For Creators hero: the fade on the empty left follows the chosen colour. */
:root:not([data-theme="dark"]) .creator-hero.rc-l { --creator-hero-bg: var(--rc-bg); }
:root[data-theme="dark"] .creator-hero.rc-d { --creator-hero-bg: var(--rc-bg-dark); }