/**
 * 全局共享样式
 * 包含通用 reset、导航栏（默认态 / 滚动态）及语言切换按钮。
 * 所有页面均引用此文件。
 */

/* ==========================================
   全局 Reset 和基础设置
   ========================================== */

/* 统一盒模型为 border-box，避免 padding/border 撑大元素 */
* {
    box-sizing: border-box;
}

/* 根元素：基础字号 16px，全局字体为微软雅黑 */
html {
    height: 100%;
    width: 100%;
    font-size: 16px;
    font-family: '微软雅黑';
}

/* 页面主体：纵向 flex 布局，水平居中 */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 0;
    width: 100%;
}


/* ==========================================
   导航栏 — 默认态（页面顶部未滚动时）
   ========================================== */

/* 导航栏容器：固定定位在页面顶部，左右 10% 留白 */
.navbar {
    flex-shrink: 0;
    width: 100%;
    height: 6rem;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10%;
    overflow: hidden;
    font-weight: bold;
    justify-content: space-between;
}

/* 品牌 Logo：使用背景图方式展示，方便后续切换图片 */
.navbarBrand {
    background-image: url(../assets/icon/fetaphon_logo_368x68.png);
    width: 10.35rem;
    height: 1.8rem;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 导航链接列表容器 */
.navbarLinkList {
    display: flex;
    flex-direction: row;
    width: 70%;
    height: 100%;
    justify-content: end;
}

/* 单个导航链接项 */
.navbarLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4%;
    height: 100%;
}

/* 导航链接文字默认颜色 */
.navbarLink a {
    color: #3b3b3b;
    text-decoration: none;
}

/* 导航链接悬停态：粉色高亮 */
.navbarLink a:hover {
    color: #FFDEE4;
    cursor: pointer;
}

/* 语言切换与导航之间的分隔符 */
.split {
    margin: 0 2% 0 2%;
    color: #3b3b3b;
    height: 100%;
    line-height: 6rem;
}

/* 语言切换按钮默认态 */
.switchLanguageButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 2%;
    color: #3b3b3b;
    height: 100%;
}

/* 语言切换按钮悬停态 */
.switchLanguageButton:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 2%;
    color: #FFDEE4;
    cursor: pointer;
    height: 100%;
}


/* ==========================================
   导航栏 — 滚动态（页面滚动 > 20px 后触发）
   背景变为半透明黑色，文字变白，Logo 切换为白色版本
   ========================================== */

/* 滚动后的导航栏：添加半透明黑色背景 */
.navbarScrolled{
    flex-shrink: 0;
    width: 100%;
    height: 6rem;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10%;
    overflow: hidden;
    font-weight: bold;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);  /* 半透明黑色遮罩 */
}

/* 滚动态下 Logo 切换为白色版本 */
.navbarScrolled .navbarBrand {
    background-image: url(../assets/icon/fetaphon_logo_white_370x68.png);
    width: 10.35rem;
    height: 1.88rem;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 当前选中导航项（粉色背景） */
.navbarScrolled .navbarLinkSelected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4%;
    height: 100%;
    background-color: #FFDEE4;
}

/* 当前选中导航项的子项（底部粉色下划线） */
.navbarScrolled .navbarLinkSelectedSub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4%;
    height: 100%;
    border-bottom: solid 4px #FFDEE4;
}

.navbarScrolled .navbarLinkSelectedSub a {
    color: #FFDEE4;
    text-decoration: none;
}

.navbarScrolled .navbarLinkSelected a {
    color: #000000;
    text-decoration: none;
}

/* 滚动态下导航项悬停时显示粉色背景 */
.navbarScrolled .navbarLink:hover {
    background-color: #FFDEE4;
}

/* 滚动态下导航链接文字为白色 */
.navbarScrolled .navbarLink a {
    color: #ffffff;
    text-decoration: none;
}

/* 滚动态下 hover 时文字变黑（JS 动态添加此 class） */
.navbarScrolled .navbarLink .navbarLinkBlack {
    color: #000000;
}

/* 滚动态下分隔符变为白色 */
.navbarScrolled .split {
    margin: 0 2% 0 2%;
    color: #ffffff;
    height: 100%;
    line-height: 6rem;
}

/* 滚动态下语言切换按钮文字为白色 */
.navbarScrolled .switchLanguageButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 2%;
    color: #ffffff;
    height: 100%;
}

/* 滚动态下语言切换按钮悬停变黑 */
.navbarScrolled .switchLanguageButton:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 2%;
    color: #000000;
    cursor: pointer;
    height: 100%;
}