/* ============================================================
   Ontdek Stadswandelingen — taalwissel NL / EN.
   Laad dit ná styles.css.

   De header is een grid van 1fr auto 1fr (nav | logo | nav).
   Een vierde kind zou dat raster breken, dus de wissel staat
   er absoluut in geplaatst. Onder 980px verdwijnen de navs en
   komt de burger links: rechtsboven is dan sowieso vrij.
   ============================================================ */

/* Op desktop staat de rechternav gecentreerd in zijn kolom. Zonder
   ruimte te reserveren schuift de pil eroverheen, dus de header
   krijgt rechts wat extra ruimte en de navs schuiven mee naar links. */
@media (min-width: 981px) {
  .od-header__inner { padding-right: 96px; }
}

.od-lang {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(47, 122, 114, .18);
  border-radius: 999px;
  background: rgba(47, 122, 114, .06);
}

.od-lang a {
  display: block;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--menuInk);
  opacity: .62;
  transition: background-color .18s ease, opacity .18s ease;
}

.od-lang a:hover,
.od-lang a:focus-visible { opacity: 1; }
.od-lang a:focus-visible { outline: 2px solid var(--menuInk); outline-offset: 2px; }

/* De actieve taal is geen link maar een <span>: je klikt niet
   naar de pagina waar je al staat. */
.od-lang [aria-current="true"],
.od-lang span {
  display: block;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--menuInk);
  opacity: 1;
}

@media (max-width: 980px) {
  .od-lang { right: 14px; }
  .od-lang a,
  .od-lang span { padding: 5px 9px; font-size: 11px; }
}

/* Op de kleinste schermen botst de pil met het logo-schildje.
   Daar schuift hij onder de header in de mobiele navigatie. */
@media (max-width: 420px) {
  .od-header__inner .od-lang { display: none; }
}

.od-mobilemenu .od-lang {
  position: static;
  transform: none;
  margin-top: 14px;
}

@media (min-width: 421px) {
  .od-mobilemenu .od-lang { display: none; }
}