/* ── Translator / Language Selector ─────────────────────────────────────── */

/* ── BLOG PAGE: lang-bar sits below toggle-container ─────────────────────
   Positioned absolutely in .blog-block-1-content (position:relative)       */
.lang-bar {
  position: absolute;
  top: 56px;
  right: 54px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 20;
}

/* ── BLOG POST PAGE: controls-group wraps dark-mode btn + lang-select ───── */
.controls-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Custom dropdown root ─────────────────────────────────────────────────
   position:relative so the list can be absolutely positioned below it      */
.lang-dropdown {
  position: relative;
}

/* ── Trigger button ──────────────────────────────────────────────────────── */
.lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background-color: var(--background-color, #f8f4f0);
  color: var(--primary-color, #090909);
  border: 1px solid var(--border-color, #2f2f2f);
  font-size: 0.78rem;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
  outline: none;
}

.lang-dropdown-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-color, #090909);
}

.lang-dropdown-btn:hover {
  background-color: var(--primary-color, #090909);
  color: var(--background-color, #f8f4f0);
}

.lang-dropdown-btn:hover .lang-arrow-icon {
  color: var(--background-color, #f8f4f0);
}

.lang-arrow-icon {
  font-size: 1rem;
  margin-left: auto;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--tertiary-color, #515254);
}

/* rotate arrow when open */
.lang-dropdown.open .lang-arrow-icon {
  transform: rotate(180deg);
}

/* ── Dropdown list panel ─────────────────────────────────────────────────── */
.lang-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  max-height: 340px;   /* ~10 items × 34px each */
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--background-color, #f8f4f0);
  border: 1px solid var(--border-color, #2f2f2f);
  z-index: 100;
  /* thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #2f2f2f) transparent;
}

.lang-dropdown-list::-webkit-scrollbar {
  width: 4px;
}
.lang-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}
.lang-dropdown-list::-webkit-scrollbar-thumb {
  background-color: var(--border-color, #2f2f2f);
}

/* show when .open on parent */
.lang-dropdown.open .lang-dropdown-list {
  display: block;
}

/* ── List items ──────────────────────────────────────────────────────────── */
.lang-dropdown-list li {
  padding: 8px 12px;
  font-size: 0.78rem;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: var(--primary-color, #090909);
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.lang-dropdown-list li:hover {
  background-color: var(--primary-color, #090909);
  color: var(--background-color, #f8f4f0);
}

.lang-dropdown-list li.selected {
  font-weight: 600;
  background-color: var(--primary-color, #090909);
  color: var(--background-color, #f8f4f0);
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
body.dark-mode .lang-dropdown-btn {
  background-color: var(--background-color-dark, #1a1a1a);
  color: var(--primary-color-dark, #e5e5e5);
  border-color: var(--border-color-dark, #404040);
}

body.dark-mode .lang-dropdown-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-color-dark, #e5e5e5);
}

body.dark-mode .lang-dropdown-btn:hover {
  background-color: var(--primary-color-dark, #e5e5e5);
  color: var(--background-color-dark, #1a1a1a);
}

body.dark-mode .lang-dropdown-btn:hover .lang-arrow-icon {
  color: var(--background-color-dark, #1a1a1a);
}

body.dark-mode .lang-arrow-icon {
  color: var(--tertiary-color-dark, #9d9d9d);
}

body.dark-mode .lang-dropdown-list {
  background-color: var(--background-color-dark, #1a1a1a);
  border-color: var(--border-color-dark, #404040);
  scrollbar-color: var(--border-color-dark, #404040) transparent;
}

body.dark-mode .lang-dropdown-list::-webkit-scrollbar-thumb {
  background-color: var(--border-color-dark, #404040);
}

body.dark-mode .lang-dropdown-list li {
  color: var(--primary-color-dark, #e5e5e5);
}

body.dark-mode .lang-dropdown-list li:hover {
  background-color: var(--primary-color-dark, #e5e5e5);
  color: var(--background-color-dark, #1a1a1a);
}

body.dark-mode .lang-dropdown-list li.selected {
  background-color: var(--primary-color-dark, #e5e5e5);
  color: var(--background-color-dark, #1a1a1a);
}

/* ── Translation status text — hidden by default, shown only while active ── */
.lang-status {
  display: none;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--tertiary-color, #515254);
  transition: color 0.3s ease;
}

body.dark-mode .lang-status {
  color: var(--tertiary-color-dark, #9d9d9d);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lang-bar {
    top: 52px;
    right: 12px;
  }
}

@media (max-width: 480px) {
  .lang-bar {
    top: 48px;
    right: 10px;
  }

  .lang-dropdown-btn {
    font-size: 0.74rem;
  }

  .controls-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}