/* ============================================
   Jump-button palette — kursevi-jezika section
   Opted in per-tree via content/kursevi-jezika/data/extra_css.yaml
   (-> meta.extra_css), rendered by the hub templates' css block.
   ============================================ */

/* Jump-button palette.
   Each jump button in a hub/sub-page header gets its own UX-friendly color,
   cycling through this accessible palette (every shade keeps white button
   text legible). These rules override the inline default background that
   modules/button-move.twig writes, so !important is required. The 10n+k
   pattern repeats the palette if a header ever has more than ten buttons. */
:root {
  --jump-1: var(--color-success); /* green (fixed) */
  --jump-2: #e03131; /* red */
  --jump-3: #e8590c; /* orange */
  --jump-4: #c77800; /* amber */
  --jump-5: #5c940d; /* lime */
  --jump-6: #099268; /* teal */
  --jump-7: #0c8599; /* cyan */
  --jump-8: #1971c2; /* blue */
  --jump-9: #4263eb; /* indigo */
  --jump-10: #7048e8; /* violet */
}

.jump-buttons > .d-inline-block:nth-child(10n + 1) .button-move { background-color: var(--jump-1) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 2) .button-move { background-color: var(--jump-2) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 3) .button-move { background-color: var(--jump-3) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 4) .button-move { background-color: var(--jump-4) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 5) .button-move { background-color: var(--jump-5) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 6) .button-move { background-color: var(--jump-6) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 7) .button-move { background-color: var(--jump-7) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 8) .button-move { background-color: var(--jump-8) !important; }
.jump-buttons > .d-inline-block:nth-child(10n + 9) .button-move { background-color: var(--jump-9) !important; }
.jump-buttons > .d-inline-block:nth-child(10n) .button-move    { background-color: var(--jump-10) !important; }

/* Subtle press/hover feedback so the recolored buttons still read as interactive. */
@media (hover: hover) {
  .jump-buttons .button-move:hover { filter: brightness(0.93); }
}