/* Light theme - follows the OS setting. Loaded after slides.min.css.
   Same background images and animations as the dark theme; the black
   fade overlay becomes a white one so the images show through much lighter,
   and text/icons turn dark. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }

  .slides {
    color: #202020;
    fill: #202020;
    background: #f3f6fa;
  }

  /* bright, low-contrast photos (e.g. pale clouds) vanish under a strong white overlay:
     keep them visible with a much lighter overlay and a bit more contrast */
  .slide.bright-bg .content { background: rgba(255, 255, 255, 0.30); }
  .slide.bright-bg .background { filter: contrast(1.45) brightness(0.96); }

  /* each slide sets its own white text */
  .slide:not(.whiteSlide),
  .popup {
    color: #202020;
  }

  /* overlay on top of the background image: black -> white (fade-N = N/10 dark) */
  .fade-1 .content { background: rgba(255, 255, 255, 0.60); }
  .fade-2 .content { background: rgba(255, 255, 255, 0.65); }
  .fade-3 .content { background: rgba(255, 255, 255, 0.70); }
  .fade-4 .content { background: rgba(255, 255, 255, 0.75); }
  .fade-5 .content { background: rgba(255, 255, 255, 0.80); }
  .fade-6 .content { background: rgba(255, 255, 255, 0.85); }
  .fade-7 .content { background: rgba(255, 255, 255, 0.89); }
  .fade-8 .content { background: rgba(255, 255, 255, 0.93); }
  .fade-9 .content { background: rgba(255, 255, 255, 0.96); }

  /* top / bottom panels, sidebar and navigation */
  .panel,
  .side,
  .slides .panel a,
  .slides .side a {
    color: #202020;
  }
  .slides .panel svg:not(.noFill),
  .slides .side svg:not(.noFill) {
    fill: #202020;
  }
  .panel .button svg,
  .side .button svg {
    fill: #fff;
  }

  /* text that was forced white for the dark theme */
  .slide:not(.whiteSlide) .text-white:not(.button) {
    color: #202020 !important;
  }
  .slide:not(.whiteSlide) svg:not(.noFill) {
    fill: #202020;
  }
  .slide:not(.whiteSlide) .button svg {
    fill: #fff;
  }

  /* big logo on the first slide: dark pale blue instead of near-black */
  .slide:not(.whiteSlide) svg.logo-hero {
    fill: #4a6b91;
    filter: drop-shadow(0 3px 6px rgba(20, 40, 70, 0.28));
  }
  /* slides.css resets filter to none until the entrance animation is .done, which made
     the shadow pop in at the end - keep it on so it fades in with the logo */
  .slides.animated .animate.active svg.logo-hero:not(.done) {
    filter: drop-shadow(0 3px 6px rgba(20, 40, 70, 0.28));
  }

  /* stroked (outline) buttons on the light overlay */
  .slide:not(.whiteSlide) .button.stroke,
  .slide:not(.whiteSlide) .button.thin-stroke {
    color: #202020;
    border-color: rgba(0, 0, 0, 0.6);
  }

  /* dot / bar navigation on the right */
  .slides .navigation li:after {
    background: #202020;
    box-shadow: 0 0 1px #fff;
  }
  .slides .stroke .navigation li:after {
    border-color: #202020;
    background: transparent;
  }
  .slides .stroke .navigation li:hover:after,
  .slides .stroke .navigation li.selected:after {
    border-color: #202020;
    background: #202020;
  }
  .slides .navigation.numbers li:after {
    color: #202020;
    text-shadow: 0 0 2px #fff !important;
  }

  /* cookie banner (cookieconsent library; its palette is set to dark in index.php) */
  .cc-window.cc-theme-classic {
    background-color: #fff !important;
    color: #202020 !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  }
  .cc-revoke.cc-theme-classic,
  .cc-revoke.cc-bottom {
    background-color: #fff !important;
    color: #202020 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }
  .cc-window .cc-link {
    color: #1c7ed6 !important;
  }

  /* white cards need a little lift on the light overlay */
  .slide .pad.shadow {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.15);
  }

  /* links inside running text keep the brand colour, readable on white */
  .rescolor { color: #1c7ed6; }

  /* dark cards stay legible: they use their own dark background + light text */
  .slide .pad:not(.left):not(.selected) { color: inherit; }
}