@import url('/content/blocks/horoscope/block.css');
@import url('/content/blocks/horoscope/cover.css');

/* Keep the cover navigation above the shared, later-loaded horoscope CSS. */
.hp-horoscope--navigation .hp-horoscope__nav a {
  background: color-mix(in srgb, var(--hp-accent) 50%, #000);
  border-color: transparent;
  color: #fff;
}

.hp-horoscope--navigation .hp-horoscope__nav a img {
  filter: brightness(0) invert(1);
}

.hp-horoscope--navigation .hp-horoscope__nav a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: color-mix(in srgb, var(--hp-accent) 38%, #000);
  color: #fff;
  filter: none;
}