/**
 * 语言切换样式
 * Language Switcher Styles
 */

/* 语言切换按钮容器 */
.language-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 语言切换按钮基础样式 */
.language-btn {
  border: 1px solid #888;
  background: white;
  color: #333;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

/* 页头语言切换按钮（data-lang-switch）始终蓝色；导航栏内与主题一致，避免两端蓝色色块 */
button[data-lang-switch] {
  border: 1px solid #3556a9 !important;
  background: #3556a9 !important;
  color: white !important;
}

button[data-lang-switch]:hover {
  background: #2a4587 !important;
  border-color: #2a4587 !important;
  color: white !important;
}

/* 导航栏内的语言按钮使用主题色，与 navbar 一致，消除异常蓝色色块 */
#navbar button[data-lang-switch] {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: white !important;
}

#navbar button[data-lang-switch]:hover {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: white !important;
}

.language-btn:hover {
  background: #f5f5f5;
  border-color: #666;
}

/* 激活状态的语言按钮 */
.language-btn.active {
  background: #3556a9;
  color: white;
  border-color: #3556a9;
}

.language-btn.active:hover {
  background: #2a4587;
  border-color: #2a4587;
}

/* 默认隐藏中文内容 */
body[data-lang="en"] .cn {
  display: none !important;
}

/* 默认隐藏英文内容 */
body[data-lang="cn"] .en {
  display: none !important;
}

/* 确保中文内容正常显示 */
body[data-lang="cn"] .cn {
  display: inline !important;
}

/* 确保英文内容正常显示 */
body[data-lang="en"] .en {
  display: inline !important;
}

/* Keep bilingual blocks visible when requested */
body[data-lang="en"] [data-lang-both="true"] .cn,
body[data-lang="cn"] [data-lang-both="true"] .en {
  display: block !important;
}

/* 对于块级元素 */
body[data-lang="en"] .cn.block,
body[data-lang="en"] div.cn,
body[data-lang="en"] p.cn,
body[data-lang="en"] section.cn {
  display: none !important;
}

body[data-lang="cn"] .en.block,
body[data-lang="cn"] div.en,
body[data-lang="cn"] p.en,
body[data-lang="cn"] section.en {
  display: none !important;
}

body[data-lang="cn"] .cn.block,
body[data-lang="cn"] div.cn,
body[data-lang="cn"] p.cn,
body[data-lang="cn"] section.cn {
  display: block !important;
}

body[data-lang="en"] .en.block,
body[data-lang="en"] div.en,
body[data-lang="en"] p.en,
body[data-lang="en"] section.en {
  display: block !important;
}

/* 语言切换动画效果 */
.lang-fade-in {
  animation: langFadeIn 0.3s ease-in;
}

@keyframes langFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .language-switcher {
    gap: 6px;
  }
  
  .language-btn {
    padding: 3px 10px;
    font-size: 0.9em;
  }
}

/* 可选：为整个网站添加语言切换过渡效果 */
body[data-lang] {
  transition: opacity 0.15s ease;
}

/* 语言切换按钮组（如果需要同时显示两个按钮） */
.language-btn-group {
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.language-btn-group .language-btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid #ddd;
  margin: 0;
}

.language-btn-group .language-btn:last-child {
  border-right: none;
}

.language-btn-group .language-btn.active {
  background: #3556a9;
  color: white;
}

/* 下拉式语言选择器（可选） */
.language-dropdown {
  position: relative;
  display: inline-block;
}

.language-dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 1000;
  top: 100%;
  right: 0;
  margin-top: 4px;
}

.language-dropdown:hover .language-dropdown-content {
  display: block;
}

.language-dropdown-content a {
  color: #333;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  transition: background 0.2s;
}

.language-dropdown-content a:hover {
  background-color: #f5f5f5;
}

.language-dropdown-content a.active {
  background-color: #3556a9;
  color: white;
}