/* Magic Tales — language picker (EN/ES)
   The navbar is transparent over the dark hero (light text) and turns white
   when sticky (dark text), so the picker colors swap with the sticky state to
   stay legible in both. */

.lang-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 14px;
}

.lang-option {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s ease;
  color: rgba(255, 255, 255, 0.55); /* over dark hero */
}

.lang-option:hover {
  color: #fff;
}

.lang-option.active {
  color: #fff;
}

.lang-divider {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.3);
}

/* Sticky navbar = white background → dark picker text. */
.navbar-area.sticky .lang-option {
  color: #8a929c;
}

.navbar-area.sticky .lang-option:hover,
.navbar-area.sticky .lang-option.active {
  color: #081828;
}

.navbar-area.sticky .lang-divider {
  color: #c9cdd3;
}

@media (max-width: 991px) {
  .lang-picker {
    margin-right: 10px;
  }
  /* On mobile the navbar background is light even before sticky, so use the
     dark treatment for legibility. */
  .lang-option {
    color: #8a929c;
  }
  .lang-option:hover,
  .lang-option.active {
    color: #081828;
  }
  .lang-divider {
    color: #c9cdd3;
  }
}