/*
 * The language switch (EN | NL) and the light/dark switch: in the header on
 * every page, and again in the footer, where Auto / Light / Dark can hand
 * the choice back to the device (layouts/_locale_switch, _theme_toggle,
 * _theme_choice). Where they sit in the header, on a phone too, is the
 * header's business: application.css ("Header on a phone").
 */

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-prefs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

/* ── EN | NL, and Auto | Light | Dark ───────────────────────────────────── */

.locale-switch,
.theme-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.locale-switch-form,
.theme-choice-form {
  display: inline-flex;
  margin: 0;
}
/* Small text, but a target a thumb can hit. */
.locale-switch-option,
.theme-choice-option,
.locale-switch-current,
.theme-choice-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.35rem;
}
.locale-switch-option,
.theme-choice-option {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--c-text-dim);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.locale-switch-option:hover,
.theme-choice-option:hover { color: var(--c-accent); }
.locale-switch-option:focus-visible,
.theme-choice-option:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.locale-switch-current,
.theme-choice-current {
  color: var(--c-accent);
  font-weight: 500;
}
.locale-switch-separator,
.theme-choice-separator { color: var(--c-border-strong); }

/* ── The light/dark toggle ──────────────────────────────────────────────── */

.theme-toggle-form { display: inline-flex; margin: 0; }
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  color: var(--c-accent);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.theme-toggle:hover { border-color: var(--c-accent); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
/* The words stay in the button as its accessible name, out of sight. */
.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The toggle offers the other palette than the one on screen: the sun while
   dark shows, the moon while light does. On screen is the visitor's choice
   (<html data-theme>), or else the device's. Each is a button of its own
   that posts the palette it names; the one that does not apply is
   display: none, out of reach and out of the accessibility tree, so the
   toggle is right on the first paint and after every switch with no script
   touching it, and does what it says without one. theme_controller.js
   decides the same way. */
.theme-toggle-to-light,
.theme-toggle-to-dark { display: inline-flex; align-items: center; }
.theme-toggle-to-dark { display: none; }
:root[data-theme="light"] .theme-toggle-to-light { display: none; }
:root[data-theme="light"] .theme-toggle-to-dark { display: inline-flex; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle-to-light { display: none; }
  :root:not([data-theme]) .theme-toggle-to-dark { display: inline-flex; }
}