/* Language Switcher (EN / TR / FR) ------------------------------------- */
/* Companion stylesheet for src/components/LanguageSwitcher.jsx.          */
/* Reuses the template's existing CSS custom properties (colors, radii)   */
/* so it blends into light/dark mode without touching main.css.          */

.lang-switcher {
  position: relative;
}

.lang-switcher__trigger {
  gap: 0.5rem;
  height: 4.4rem;
  padding: 0 1.4rem;
  border-radius: 2rem;
  color: var(--t-muted);
  background-color: transparent;
  border: 1px solid var(--stroke-elements);
  font: normal 600 1.3rem/1 var(--_font-default);
  letter-spacing: 0.02em;
  transition:
    color var(--_animspeed-medium) ease-in-out,
    border-color var(--_animspeed-medium) ease-in-out;
}

.lang-switcher__trigger i {
  font-size: 1.6rem;
}

.no-touch .lang-switcher__trigger:hover,
.lang-switcher__trigger[aria-expanded="true"] {
  color: var(--t-bright);
  border-color: var(--t-muted);
}

.lang-switcher__panel {
  position: absolute;
  /* Mobile/tablet: the header dock is pinned near the BOTTOM of the
     viewport (see .header in main.css), so opening the panel downward
     (as on desktop) pushes it below the visible screen - that's what made
     the languages "invisible"/unreachable on phones. Opening upward keeps
     it fully on-screen at every width. */
  bottom: calc(100% + 0.8rem);
  top: auto;
  right: 0;
  max-width: calc(100vw - 3rem);
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 0.5rem;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  border-radius: var(--_radius-s);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
  z-index: 20;
}

[dir="rtl"] .lang-switcher__panel {
  right: auto;
  left: 0;
}

@media only screen and (min-width: 992px) {
  /* Desktop: the header dock flips to the TOP of the viewport here, so the
     panel can safely open downward again, right under the trigger. */
  .lang-switcher__panel {
    top: calc(100% + 0.8rem);
    bottom: auto;
  }
}

.lang-switcher__option {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: none;
  background: none;
  color: var(--t-muted);
  font: normal 500 1.4rem/1 var(--_font-default);
  text-align: start;
  border-radius: calc(var(--_radius-s) - 0.4rem);
  cursor: pointer;
  transition:
    background-color var(--_animspeed-medium) ease-in-out,
    color var(--_animspeed-medium) ease-in-out;
}

.lang-switcher__option:hover,
.lang-switcher__option:focus-visible {
  background-color: var(--base-tint);
  color: var(--t-bright);
}

.lang-switcher__option[aria-current="true"] {
  background-color: var(--accent);
  color: var(--t-opp-bright);
}