/* ==========================================
   components.css
   可复用组件样式
   当前内容：
   - Navbar 右侧布局
   - Language Switcher 语言切换器
========================================== */


/* ==========================================
    Navbar Right Area
   作用：让导航链接和语言切换器横向排列
========================================== */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* ==========================================
   Language Switcher 容器
   作用：作为下拉菜单的定位参考点
========================================== */
.language-switcher {
    position: relative;
}


/* ==========================================
   🌐 按钮本体：显示为一个简洁的语言切换按钮
========================================== */
.language-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

/* 鼠标悬停效果 */
.language-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}


/* ==========================================
   下拉菜单本体：默认隐藏，点击后通过 .show 显示
========================================== */
.language-dropdown {
    display: none; /* 默认不显示 */
    position: absolute;
    top: 120%;     /* 出现在按钮下方 */
    right: 0;
    min-width: 170px;

    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    overflow: hidden;
    z-index: 1000;
}

/* 当 JS 给它加上 .show 时显示出来 */
.language-dropdown.show {
    display: block;
}


/* ==========================================
   下拉菜单里的每个语言选项
========================================== */
.language-option {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 鼠标悬停时高亮 */
.language-option:hover {
    background-color: #f5f5f5;
}


/* ==========================================
   Project Card
========================================== */
.project-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 鼠标悬停时微微浮起 */
.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.project-card__title {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.project-card__description {
    margin-bottom: 16px;
    line-height: 1.7;
    color: #4b5563;
}

.project-card__stack {
    font-size: 0.95rem;
    color: #374151;
}