/* ---- Language switch (segmented pill: GR | EN) ----
   Plain links, so it looks the same on every OS and works without JS.
   The blue thumb sits behind the current language and slides on click. */
.lang-switch {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 36px;
  padding: 3px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  isolation: isolate;
}
.lang-switch::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  transition: transform var(--duration-slow) var(--ease-out);
}
.lang-switch[data-lang="en"]::before { transform: translateX(100%); }

.lang-switch__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: var(--transition-control);
  -webkit-tap-highlight-color: transparent;
}
.lang-switch__option:hover { color: var(--text-strong); }
.lang-switch[data-lang="el"] [data-lang="el"],
.lang-switch[data-lang="en"] [data-lang="en"] { color: var(--text-invert); }
.lang-switch__option[aria-current] { cursor: default; }
.lang-switch__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  .lang-switch::before { transition: none; }
}