/* Project-specific tweaks layered on top of the Furo theme. */

/* Visited-link color in light mode. Furo's default (#872ee0) is a bright lavender that
   reads as washed-out on the white canvas; deepen it to a richer purple. Scoped to plain
   `body`, which only wins in light mode: Furo's dark defaults live on higher-specificity
   selectors (body[data-theme="dark"] and the prefers-color-scheme:dark auto rule), so they
   keep their lighter purple. The palette switcher never paints --color-brand-visited, so
   this survives a live palette change. */
body {
  --color-brand-visited: #6b21a8;
}

/* Navigation cards (sphinx-design grid-item-cards, e.g. the "Where to next" grid). Furo
   leaves them near-flat — a transparent background in light mode and a 5%-opacity shadow
   — so they blend into the page. Give them a real surface, a visible shadow, and a clear
   hover lift. Colors come from Furo variables, so they track the active palette and
   light/dark mode. The shadow utility class uses !important, so these must too. */
.sd-card {
  background-color: var(--color-background-secondary) !important;
  border: 1px solid var(--color-background-border, rgba(128, 128, 128, 0.3)) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease !important;
}
.sd-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

/* Live palette + code-theme switcher (added by js/palette-switcher.js). */
.palette-switcher-bar {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.palette-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-background-border, rgba(128, 128, 128, 0.3));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  font-size: 0.8rem;
}
.palette-switcher__icon {
  line-height: 1;
}
.palette-switcher select {
  border: none;
  /* The <select> and its option popup are native widgets: their chrome is governed by
       the CSS `color-scheme` property, not by `background-color`. Furo never sets it, so
       without the rules below the popup renders as a light widget (light text on white)
       even in dark mode. Match color-scheme to the active theme so the native control
       (and its dropdown list) flips dark; the explicit colors then layer cleanly. */
  background-color: var(--color-background-secondary);
  color: var(--color-foreground-primary);
  font: inherit;
  cursor: pointer;
}
.palette-switcher option,
.palette-switcher optgroup {
  background-color: var(--color-background-secondary);
  color: var(--color-foreground-primary);
}
.palette-switcher select {
  color-scheme: light;
}
body[data-theme="dark"] .palette-switcher select {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .palette-switcher select {
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  body[data-theme="auto"] .palette-switcher select {
    color-scheme: light;
  }
}