/* Shared language-switcher styles — used by every longread-design project.
   Kept visually neutral (works on dark or light headers) so it doesn't need
   a per-design override; if a design's header is unusually busy, wrap the
   include in a design-specific container and restyle with a MORE specific
   selector rather than editing this file. */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switcher__link {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  /* No text-transform: LANGUAGE_LABELS already supplies the exact casing
     wanted per label (EN/RU/UZ uppercase, Ўз mixed-case — Cyrillic "Ў"
     doesn't have a meaningful uppercase transform in every browser/font
     anyway, and forcing uppercase here used to silently turn it into "ЎЗ"). */
  text-decoration: none;
  color: inherit;
  opacity: .55;
  padding: 6px 9px;
  border-radius: 999px;
  transition: opacity .15s ease, background .15s ease;
  line-height: 1;
}

.lang-switcher__link:hover {
  opacity: 1;
  background: rgba(255,255,255,.08);
}

.lang-switcher__link.is-active {
  opacity: 1;
  background: rgba(201,162,39,.18);
  color: #C9A227;
}

.lang-switcher__link.is-unavailable {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

.lang-switcher__sep {
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: .25;
}

/* Phone dropdown variant — the four inline items don't fit a narrow header.
   Native <details>: no JS, closes on navigation. Desktop keeps the row. */
.lang-switcher-dd { display: none; position: relative; }

@media (max-width: 640px) {
  .lang-switcher { display: none; }
  .lang-switcher-dd { display: block; }
}

.lang-switcher-dd summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: #C9A227;
  background: rgba(201,162,39,.18);
  border-radius: 999px;
  padding: 8px 12px;
}
.lang-switcher-dd summary::-webkit-details-marker { display: none; }
.lang-switcher-dd__caret { font-size: 10px; transition: transform .15s ease; }
.lang-switcher-dd[open] .lang-switcher-dd__caret { transform: rotate(180deg); }

.lang-switcher-dd__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(10,30,24,.97);
  border: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 50;
}
.lang-switcher-dd__panel .lang-switcher__link {
  color: #F5F0E6;
  opacity: .75;
  text-align: center;
}
.lang-switcher-dd__panel .lang-switcher__link.is-active { opacity: 1; color: #C9A227; background: rgba(201,162,39,.18); }
.lang-switcher-dd__panel .lang-switcher__link.is-unavailable { opacity: .3; }