/**
 * Magic Pixel - 语言切换按钮样式
 * Language Switch Button Styles
 */

/* =====================
   语言切换按钮
   Language Switch Button
   ===================== */

/* 基础按钮样式 - 定位在右上角，随页面滚动 */
.lang-switch,
#langSwitch {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #a87250 0%, #8a5d42 100%);
    border: 2px solid #8a5d42;
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100 !important;
    box-shadow: 2px 2px 0 rgba(45, 31, 61, 0.15);
}

.lang-switch:hover,
#langSwitch:hover {
    background: linear-gradient(135deg, #8a5d42 0%, #7a4d32 100%);
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 rgba(45, 31, 61, 0.20);
}

.lang-switch:active,
#langSwitch:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 0 rgba(45, 31, 61, 0.15);
}

/* 地球图标 */
.lang-switch__icon,
#langSwitch .lang-switch__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 语言标识文字 */
.lang-switch__current,
#langSwitch .lang-switch__current,
#langCurrent {
    display: inline-block;
    width: 1.75rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* =====================
   在header中的位置调整
   Position adjustment in header
   ===================== */

/* 当语言按钮存在时，调整header导航位置 */
.header.has-lang-switch .header__nav {
    /* 不需要调整，语言按钮在右侧 */
}

/* 语言按钮始终固定在右上角（已通过基础样式 !important 强制） */

/* =====================
   主页特殊样式
   Special styles for index.html
   ===================== */

/* 主页的语言按钮也定位在右上角，随页面滚动 */
.lang-switch--home,
#langSwitch.lang-switch--home {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 100 !important;
}

/* =====================
   响应式设计
   Responsive Design
   ===================== */

@media (max-width: 640px) {
    .lang-switch,
    #langSwitch {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        border-radius: 8px;
        z-index: 100 !important;
    }

    .lang-switch__icon,
    #langSwitch .lang-switch__icon {
        width: 14px;
        height: 14px;
    }

    .lang-switch__current,
    #langSwitch .lang-switch__current,
    #langCurrent {
        width: 1.5rem;
    }

    .header.has-lang-switch .header__nav {
        /* 不需要调整，语言按钮在右侧 */
    }
}

/* =====================
   动画效果
   Animation Effects
   ===================== */

.lang-switch--animating,
#langSwitch.lang-switch--animating {
    animation: langPulse 0.3s ease;
}

@keyframes langPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* =====================
   颜色变体（可选）
   Color Variants (optional)
   ===================== */

/* 绿色主题变体 */
.lang-switch--green,
#langSwitch.lang-switch--green {
    background: linear-gradient(135deg, #5BA88F 0%, #4a8a75 100%);
    border-color: #4a8a75;
}

.lang-switch--green:hover,
#langSwitch.lang-switch--green:hover {
    background: linear-gradient(135deg, #4a8a75 0%, #3a7a65 100%);
}

/* 粉色主题变体 */
.lang-switch--pink,
#langSwitch.lang-switch--pink {
    background: linear-gradient(135deg, #E8A0B5 0%, #d890a5 100%);
    border-color: #d890a5;
}

.lang-switch--pink:hover,
#langSwitch.lang-switch--pink:hover {
    background: linear-gradient(135deg, #d890a5 0%, #c88095 100%);
}