/* Dark mode, the site's default. html[data-theme] is set before the page paints by the script
   at the top of Base.astro: "light" only once a visitor switches with the toggle (remembered in
   localStorage "wi-theme") and in the Site Editor. The theme's own colours are swapped in dark-theme.css, generated by
   scripts/dark_css.py from the tokens below; this file covers everything outside style.css
   and the places where a straight colour swap is not enough. */

html[data-theme="dark"] {
  color-scheme: dark;
  /* page, then a step lighter for the header, then cards and panels */
  --dk-bg: #121515;
  --dk-header: #272e2e;
  --dk-surface: #232929;
  --dk-surface-2: #2d3434;
  --dk-text: #e4e7e6;
  --dk-text-muted: #a5adab;
  --dk-line: #414948;
  /* --main (#00887F) is too dark for text on --dk-bg; buttons and panels keep it */
  --dk-main-text: #3cb8ad;
  --dk-metal-text: #9db8c4;
  --lightgreen: rgba(0, 132, 126, .18);

  /* mmenu (burger menu) */
  --mm-color-background: var(--dk-surface);
  --mm-color-text: rgba(228, 231, 230, .85);
  --mm-color-text-dimmed: rgba(228, 231, 230, .4);
  --mm-color-border: rgba(255, 255, 255, .1);
  --mm-color-button: rgba(255, 255, 255, .4);
  --mm-color-background-highlight: rgba(255, 255, 255, .06);
  --mm-color-background-emphasis: rgba(255, 255, 255, .08);
}
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--dk-bg);
}
html[data-theme="dark"] #head {
  background-color: var(--dk-header);
}

/* Icons drawn in black */
html[data-theme="dark"] .breadcrumbs .home:after {
  filter: invert(1);
}
html[data-theme="dark"] #toTop svg g {
  fill: var(--dk-text);
}

/* Press archive: current year in the year list (inline style of Category.astro) */
html[data-theme="dark"] .intro .linklist ul li.current-cat {
  background-color: var(--dk-surface);
}

/* Cookie consent dialog (CookieConsent.astro) */
html[data-theme="dark"] .wi-consent__box {
  background: var(--dk-surface);
  color: var(--dk-text);
}
html[data-theme="dark"] .wi-consent__groups input[type="checkbox"] {
  background-color: var(--dk-bg) !important;
}
html[data-theme="dark"] .wi-consent__groups input[type="checkbox"]:checked {
  background-color: #00847e !important;
}
html[data-theme="dark"] .wi-consent__buttons button[data-consent="essential"],
html[data-theme="dark"] .wi-consent__buttons button[data-consent="save"] {
  background: var(--dk-surface-2);
  color: var(--dk-text);
}
html[data-theme="dark"] .wi-consent__links a {
  color: var(--dk-main-text);
}

/* Footer seals: the prize logo is a JPEG on white */
html[data-theme="dark"] footer .siegel-wrap > img {
  background: #fff;
  padding: 8px 12px;
}

/* Light/dark toggle (SiteHeader.astro, next to the language switcher) */
.theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--main);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle .theme-toggle__sun,
html[data-theme="dark"] .theme-toggle .theme-toggle__moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle .theme-toggle__sun {
  display: block;
}
html[data-theme="dark"] .theme-toggle:hover {
  color: var(--dk-main-text);
}
/* The toggle sits in the language list's box, left of DE/EN on the same line, out of the
   flow: the menu bar (.main-nav) narrows itself beside the header's floats, so anything that
   widened the floated switcher would move the menu. */
header .language-selector {
  position: relative;
  /* above the logo link, which is wider than the logo on phones */
  z-index: 2;
}
header .language-selector .wpml-ls {
  position: relative;
}
header .theme-toggle {
  position: absolute;
  top: 50%;
  right: 100%;
  /* same distance to DE as between DE and EN */
  margin-right: -12px;
  transform: translateY(-50%);
}
/* style.css paints hovered, focused and pressed buttons green */
.theme-toggle:hover,
.theme-toggle:focus,
.theme-toggle:active {
  background: none;
}
@media (max-width: 1280px) {
  /* The theme moves DE/EN into the burger menu here; it stays in the header too, top right
     above the burger, so the toggle has its place next to it on every screen. Taken out of
     the flow for the same reason as above (the burger would move left). */
  header .container {
    position: relative;
    z-index: 1;
  }
  header .language-selector {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
}
/* The Site Editor always shows the light page */
html[data-theme-locked] .theme-toggle {
  display: none !important;
}