/**
 * ZibLL Font Switcher - 前台字体切换器样式
 * 支持多种暗色模式变体、RTL语言、可访问性优化
 */

/* ========================================
   CSS 变量定义（统一管理颜色）
   ======================================== */
:root {
    --font-switcher-bg-hover: rgba(0, 0, 0, 0.05);
    --font-switcher-color-hover: #0073aa;
    --font-switcher-bg-active: #e3f2fd;
    --font-switcher-color-active: #0073aa;
    --font-switcher-border-focus: #0073aa;
}

/* 暗色模式变量覆盖 - 支持多种主题变体 */
body.dark-theme,
html.dark,
body.night-mode {
    --font-switcher-bg-hover: rgba(255, 255, 255, 0.1);
    --font-switcher-color-hover: #64b5f6;
    --font-switcher-bg-active: #0d47a1;
    --font-switcher-color-active: #bbdefb;
    --font-switcher-border-focus: #64b5f6;
}

/* ========================================
   字体切换器容器
   ======================================== */
.font-switcher-dropdown-wrapper {
    display: inline-block;
    margin-left: 10px;
    position: relative; /* 确保下拉菜单相对定位 */
}

/* ========================================
   下拉菜单位置调整
   ======================================== */
/* 默认左对齐，兼容 RTL */
.header .font-switcher-dropdown-wrapper .dropdown-menu {
    right: 0;
    left: auto;
}

.header .font-switcher-dropdown-wrapper.pull-right.dropdown .dropdown-menu::before {
    right: 30px;
    left: auto;
}

/* RTL 语言适配 */
[dir="rtl"] .header .font-switcher-dropdown-wrapper .dropdown-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .header .font-switcher-dropdown-wrapper.pull-right.dropdown .dropdown-menu::before {
    right: auto;
    left: 30px;
}

/* ========================================
   切换按钮样式
   ======================================== */
.font-switcher-toggle {
    cursor: pointer;
    padding: 8px 12px;
    transition: background-color 0.3s ease, color 0.3s ease; /* 指定具体属性，提升性能 */
}

.font-switcher-toggle:hover {
    background-color: var(--font-switcher-bg-hover);
}

/* 键盘导航焦点环 - 提升可访问性 */
.font-switcher-toggle:focus-visible {
    outline: 2px solid var(--font-switcher-border-focus);
    outline-offset: 2px;
}

/* 触摸设备点击反馈 */
.font-switcher-toggle:active {
    background-color: var(--font-switcher-bg-hover);
}

/* ========================================
   下拉列表样式
   ======================================== */
.font-switcher-dropdown {
    max-height: 50vh; /* 动态适应视口高度 */
    overflow-y: auto;
    overflow-x: hidden; /* 防止水平滚动条 */
}

/* ========================================
   字体选项按钮
   ======================================== */
.font-switcher-button {
    padding: 8px 15px;
    transition: background-color 0.2s ease, color 0.2s ease; /* 指定具体属性 */
    white-space: nowrap;
    overflow: hidden; /* 隐藏溢出文本 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-width: 250px; /* 限制最大宽度，防止长文本溢出 */
}

.font-switcher-button:hover {
    background-color: var(--font-switcher-bg-hover);
    color: var(--font-switcher-color-hover);
}

/* 键盘导航焦点环 */
.font-switcher-button:focus-visible {
    outline: 2px solid var(--font-switcher-border-focus);
    outline-offset: -2px;
}

.font-switcher-button.active {
    background-color: var(--font-switcher-bg-active);
    color: var(--font-switcher-color-active);
    font-weight: bold;
}

/* ========================================
   移动端适配
   ======================================== */
@media (max-width: 768px) {
    .font-switcher-dropdown {
        max-height: 50vh; /* 保持动态高度 */
    }
    
    .font-switcher-button {
        max-width: 200px; /* 移动端缩小最大宽度 */
    }
}