/* GB preference shim — banner shown when a page doesn't exist in the
 * chosen Language (ADR 0006). Material CSS variables only, so it is
 * correct in light and dark scheme alike. */
.gb-banner {
  padding: .65rem .8rem;
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
  color: var(--md-primary-bg-color);
  background: var(--md-primary-fg-color);
}

/* --- Anti-FOUC (dark mode) ------------------------------------------------
 * The head script in main.html mirrors the stored colour scheme onto <html>
 * before first paint; gb-prefs.js keeps it in sync with the toggle afterwards.
 * Material paints the page background on <body>, but <body> ships with the
 * hard-coded light default until Material's deferred JS swaps it — the white
 * flash on navigation. This makes <body> adopt <html>'s background instead.
 * No hard-coded colour: `inherit` pulls the value straight from <html>, where
 * the slate scheme has already defined --md-default-bg-color. */
html[data-md-color-scheme="slate"] body { --md-default-bg-color: inherit; }

/* --- Single-version selector ---------------------------------------------
 * Material renders its version dropdown even for a Module with one version,
 * where there is nothing to switch to. When the runtime-injected list holds a
 * single entry, present it as a plain label: no caret, no hover/focus menu.
 * :has() reacts to whatever Material injects, so this self-corrects if a
 * second version is ever published. */
.md-version:has(.md-version__list > li:only-child) .md-version__current {
  cursor: default;
  pointer-events: none;
}
.md-version:has(.md-version__list > li:only-child) .md-version__current::after {
  display: none; /* the dropdown caret */
}
.md-version:has(.md-version__list > li:only-child) .md-version__list {
  display: none;
}

/* --- Header spacing -------------------------------------------------------
 * Give the theme + language controls some breathing room from the search box.
 * Applied to the search side so it is independent of how many controls render
 * (a single-language Module has no language switcher). */
.md-header__option ~ .md-search,
.md-header__option ~ [for="__search"] {
  margin-left: .4rem;
}

/* --- Language selector (issue #3, "Sprachauswahl besser machen") ----------
 * partials/alternate.html turns Material's bare translate icon into a LABELLED
 * control that names the current Language and marks it in the dropdown. Only
 * presentation here — Material's md-select behaviour and gb-prefs.js click
 * upgrade are untouched. Uses Material CSS variables only, so light/dark both
 * stay correct. Everything is scoped to .gb-lang, so the theme, version, and
 * search controls are unaffected. */

/* The button gains a text label, so it must lay the icon + label out in a row
 * instead of being a fixed-size icon box. The triple-class selector clears
 * Material's `.md-header__button:not([hidden]){display:inline-block}`. */
.md-header__button.md-icon.gb-lang__button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  width: auto;                 /* override md-icon's square sizing */
  border-radius: .1rem;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}
/* Keep the glyph its native size next to the flexed label. */
.gb-lang__button svg {
  height: 1.1rem;
  width: 1.1rem;
  flex-shrink: 0;
}
.gb-lang__label {
  white-space: nowrap;
}
/* A caret makes the control legibly a menu, mirroring the version selector. */
.gb-lang__button::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: .18rem solid transparent;
  border-right: .18rem solid transparent;
  border-top: .2rem solid currentcolor;
  margin-left: .05rem;
  flex-shrink: 0;
  transition: transform .25s;
}
.gb-lang:hover .gb-lang__button::after,
.gb-lang:focus-within .gb-lang__button::after {
  transform: rotate(180deg);
}

/* JS-enhanced disclosure (gb/gb-lang.js). Without JS, Material's native
 * hover / focus-within reveal above is the fallback. With JS, <html> gains
 * .gb-js: the dropdown is hidden from view AND the tab order until the button
 * toggles .gb-lang--open, giving a predictable click/Enter/Space/Escape menu.
 * visibility (not display) keeps the transform/opacity transition intact and,
 * unlike Material's max-height:0, removes the links from the tab sequence while
 * closed. */
.gb-js .gb-lang .md-select__inner {
  visibility: hidden;
}
.gb-js .gb-lang.gb-lang--open .md-select__inner {
  visibility: visible;
  max-height: 10rem;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transition: transform .25s cubic-bezier(.1, .7, .1, 1), opacity .25s, max-height 0ms;
}
.gb-lang.gb-lang--open .gb-lang__button::after {
  transform: rotate(180deg);
}

/* Full name on roomy headers, compact ISO code once space tightens — same
 * breakpoint at which Material collapses the header nav to a drawer. */
.gb-lang__label--code { display: none; }
@media screen and (max-width: 76.1875em) {
  .gb-lang__label--name { display: none; }
  .gb-lang__label--code { display: inline; }
}

/* Give the dropdown room for the check marker + names, and center it under a
 * now-wider button. */
.gb-lang .md-select__inner {
  min-width: 6.5rem;
}
.gb-lang .md-select__link {
  display: flex;
  align-items: center;
}
/* Active-language marker: a leading check, plus a heavier weight. The check
 * occupies a fixed gutter so inactive entries stay text-aligned with it. */
.gb-lang__link::before {
  content: "";
  width: .9rem;
  flex-shrink: 0;
  opacity: 0;
}
.gb-lang__link--active {
  font-weight: 700;
}
.gb-lang__link--active::before {
  content: "\2713";            /* ✓ */
  opacity: 1;
}