/*
 * popup-menu.css — 弹出菜单（移动端汉堡菜单）统一单一真源
 * ------------------------------------------------------------------
 * 本文件是「弹出菜单」相关样式的【唯一真源】，涵盖：
 *   · 汉堡按钮  #hamburger-menu 与三条线 .menu-line（含激活动画）
 *   · 右侧滑入面板 #popup-menu / #top-transparent-area / .popup-menu-*
 *   · 模糊遮罩   #menu-overlay
 * 行为由 js/hamburger-menu.js 控制（切换 .hamburger-active / .active）。
 *
 * 层级约定（来自 css/z-index.css）：
 *   #menu-overlay    z-index: var(--z-popup-overlay) = 2000 模糊遮罩
 *   #popup-menu      z-index: var(--z-popup-high)     = 2001 右侧滑入面板
 *
 * 遮罩采用 opacity/visibility 渐显方案（与原 41 个页面行为一致，零回归）。
 *
 * 其它文件（hamburger.css / common.css / index-nav.css）已改为 @import 本文件，
 * 不再重复定义，避免多源冲突。第 5 步收口 <link> 后删除这些委托壳即可。
 * ------------------------------------------------------------------
 */


/* ===== 汉堡按钮 ===== */
#hamburger-menu {
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    position: relative;
    padding: 2px 0;
}
#hamburger-menu .menu-line {
    width: 100%;
    height: 2.5px;
    background-color: var(--text-primary);
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}
#hamburger-menu .menu-line.top    { top: 0; }
#hamburger-menu .menu-line.middle { top: 8px; }
#hamburger-menu .menu-line.bottom { top: 16px; }

#hamburger-menu.hamburger-active .menu-line.top {
    top: 8px;
    transform: rotate(45deg);
}
#hamburger-menu.hamburger-active .menu-line.middle {
    opacity: 0;
}
#hamburger-menu.hamburger-active .menu-line.bottom {
    top: 8px;
    transform: rotate(-45deg);
}

/* ===== 右侧滑入面板 ===== */
/* 注：实际定位/层级/滑入由 js/hamburger-menu.js 以 JS 内联样式统一控制（覆盖各页内联 <style>），
   此处作为“未来彻底外置”的单一真源声明，保持与 JS 一致。 */
#popup-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background-color: transparent;
    z-index: var(--z-popup-high);
    transition: transform 0.3s ease;
    transform: translateX(100%);   /* 隐藏：完全位于屏幕右侧外 */
}
#popup-menu.active { transform: translateX(0); }

#top-transparent-area {
    height: 62px;
    background-color: transparent;
    cursor: pointer;
}
.popup-menu-inner {
    background-color: var(--surface-page);
    height: calc(100% - 62px);
}
.popup-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.popup-menu-list li {
    border-top: 1px solid var(--line-subtle);
}
.popup-menu-list li a {
    display: block;
    padding: var(--space-4) var(--space-6);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--line-subtle);
    /* 菜单项字号（2026-08-18 由 14px 提到 16px）：
       原值误用 --font-size-footer（页脚尺寸）做菜单尺寸，导致 index.html
       弹菜单偏小；ks100 各页因 <ul> 无 class 不命中本选择器、走 HTML 内联
       样式 fallback 默认 16px，故观感与 index 不一致。改为 16px 与 ks100
       实际渲染尺寸对齐，作为菜单项的合理基准（移动端易点）。*/
    font-size: 16px;
}
.popup-menu-list li a.active {
    color: var(--text-primary);
    font-weight: bold;
    font-size: calc(100% + 2px);
}

/* 展开分组子菜单样式（.product-item / .product-submenu）已随
   work-software-download.html 孤页删除而移除（2026-08-18，
   全站唯一使用分组子菜单的页面；备份见 backup/2026-08-18_del-work-software-download/）。 */

/* ===== 模糊遮罩 ===== */
/* 层级用 --z-popup-overlay (2000)，高于页眉导航(999~1002)，确保覆盖全屏。
   实际由 js/hamburger-menu.js 以 JS 内联样式控制，此处为外置真源声明。 */
#menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-popup-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   深色模式（仅移动端，ks100/*.html 顶部页眉 + 弹出面板）
   原实现见 css/ks100/product-intro.css（@media dark 段），
   2026-08-12 抽出为 popup-menu.css 的单一真源段，
   让 35 个 ks100 页面（32 引 hamburger.css + 4 直引 popup-menu.css）
   自动覆盖深色态，不再各自维护一份深色覆盖。
   由 hamburger.css（@import url('popup-menu.css')）串入 ks100 全域。
   ============================================================ */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    /* 页眉顶栏：白色背景 → 深色 --surface-page (#121418) */
    .header-menu-2 { background-color: var(--surface-page) !important; }

    /* 汉堡三横线：inline 浅色 #1a1a1a → 纯白（--menu-line，用户 2026-08-13 要求，
       参考 product-intro 视觉深色态：线需明显比 #E0E0E0 更亮才能在
       深色顶栏上识别清楚；原 #E0E0E0 在部分浏览器/截图环境下显得偏灰） */
    .menu-line {
        background-color: var(--menu-line) !important;
        /* 仅作用于三线条纹自身：声明已按深色适配，阻止浏览器
           Auto Dark Mode 的反色滤镜把白线再压回深色。
           不影响页面其余部分（区别于整页 <meta color-scheme>）。 */
        color-scheme: dark;
    }

    /* 31 个 inline 结构页：KS100 标题（first-child，纯白与三线统一）/
       副标题（last-child，从 #9CA3AF 提亮到 #E0E0E0，确保在深色顶栏上可读） */
    .header-menu-2 > div > div:first-child { color: var(--menu-line) !important; }
    .header-menu-2 > div > div:last-child  { color: var(--text-primary) !important; }

    /* 4 个类名结构页（mobile-guide-delay/pairing/password/rename-device）：
       与 inline 结构页统一，标题纯白 + 副标题浅灰 */
    .header-menu-logo-text { color: var(--menu-line) !important; }
    .header-menu-logo-sub  { color: var(--text-primary) !important; }

    /* 弹出菜单面板：inline 浅色 #FFFFFF → 深色卡片 + 边框/链接文本 */
    #popup-menu > div:last-child { background-color: var(--surface-card) !important; }
    #popup-menu li              { border-color: var(--popup-border) !important; }
    #popup-menu a               { color: var(--text-primary) !important; border-color: var(--popup-border) !important; }
}