/**
 * 顶部悬浮胶囊导航 —— 全站一级导航
 *
 * 原先只服务 Spark 落地页，与该页其余样式一起放在 spark-showcase.css 里；
 * 现在全站启用（header.php 与 header-spark.php 都输出它），所以抽成独立文件，
 * 免得每个页面为了一条导航去加载整份落地页样式。
 *
 * class 仍沿用 `spark-nav__*` 前缀 —— 改名要动模板、JS 选择器和这里共 100 多处，
 * 与本次「让导航全局可用」是两件事，留作后续单独重构。
 *
 * 「滚过 Hero 后隐藏」是 Spark 落地页专有的（.spark-header--hidden 由
 * spark-showcase.js 切换），那条规则仍留在 spark-showcase.css 里，没有跟过来。
 *
 * 交互规范：Figma 6840:11882。这里只放 Tailwind 表达不了或重复太多次的部分：
 * 状态切换、hover、以及那条 rgba(255,255,255,.48) 的分隔线。
 * 尺寸、间距、字号都在模板的 Tailwind class 里。
 */


/**
 * 统一的缓动。项目惯例是 `transition-all duration-300`，
 * 而 Tailwind 的 transition 工具类默认曲线就是 cubic-bezier(.4,0,.2,1) ——
 * 手写 CSS 里跟着用同一条，免得 hover 的手感和模板里 Tailwind 那些按钮不一致。
 *
 * 两档：hover 反馈 300ms，面板开合/横移这种大位移 400ms。
 */
.spark-nav {
    --spark-nav-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --spark-nav-hover: 300ms;
    --spark-nav-panel: 400ms;
}

/* 分隔线：稿子导出的 SVG 是 stroke white / opacity .48（curl 出来核对过） */
.spark-nav__divider {
    background-color: rgba(255, 255, 255, 0.48);
}

/* 面板视口：初始高度 0，由 JS 动画。写在 CSS 里而不是模板上，
   是为了首屏不会闪一下完整面板（Tailwind 的 h-0 也行，但这里要和 JS 的 will-change 放一起） */
.spark-nav__viewport {
    height: 0;
}

/**
 * 三个面板并排成一条轨道，只有激活的那个可交互。
 *
 * 🔴 隐藏面板必须 `visibility: hidden` —— `opacity: 0` + `pointer-events: none`
 * 拦得住鼠标，但**拦不住 Tab**：另两个面板就在旁边、有完整尺寸（只是被卡片裁掉了），
 * 键盘用户会 Tab 进看不见的链接里。aria-hidden 只管读屏器，也不管焦点。
 *
 * visibility 的过渡延迟 0.3s 是为了等 opacity 淡出走完再真正隐藏，
 * 否则切换时旧面板会瞬间消失而不是淡出。
 */
.spark-nav__panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--spark-nav-hover) var(--spark-nav-ease),
        visibility 0s linear var(--spark-nav-hover);
}

.spark-nav__panel--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--spark-nav-hover) var(--spark-nav-ease), visibility 0s linear 0s;
}

/* ---------- 面板内的列表：去掉符号与缩进 ---------- */

/**
 * 🔴 站点在「外观 → 自定义 → 附加 CSS」里存了两条**元素级** ul 规则
 * （输出成 <style id="wp-custom-css">，**在数据库里，仓库怎么 grep 都找不到**）：
 *   ul    { list-style-type: disc; font-size: 16px; padding-left: 1.5em; margin-bottom: 1em }
 *   ul li { margin-bottom: 0.5em; font-size: 16px }
 * 它没带 !important，但排在 tailwind.css 之后、特异度又相同，
 * 所以直接盖掉 preflight 的 `ul { list-style: none; margin: 0; padding: 0 }`。
 *
 * Profile / Menu 两个面板的模板上挂的是 `.spark-list-reset`，但那个类定义在
 * spark-showcase.css 里 —— 只有 Spark 落地页加载它。导航全站启用后，别的页面
 * 拿不到那条重置，菜单每一项前面就会漏出一个圆点（实测于博客页）。
 *
 * 这里按导航自己的作用域再写一份，不跨文件依赖那个类：模板改不改 class 都对，
 * 且 Spark 页上两份规则结果一致、不冲突。
 *
 * !important 跟随 .spark-list-reset 的原写法 —— 那两条附加 CSS 目前没带
 * !important，但它在数据库里，随时可能被人改成带的。
 */
.spark-nav__panel ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
}

.spark-nav__panel ul > li {
    margin: 0 !important;
    font-size: inherit !important;
}

/* ---------- 图标行 ---------- */

/**
 * 选中项 100%、其他两个 48%（三处标注一致）。
 * 什么都没展开时三个都是 100%。
 */
[data-spark-nav][data-nav-open] .spark-nav__icon {
    opacity: 0.48;
}

[data-spark-nav][data-nav-open] .spark-nav__icon[aria-expanded="true"] {
    opacity: 1;
}

/**
 * 面板打开时，另外两个图标是 48% —— 悬停它们要有反馈，否则看不出还能点。
 * 只动 opacity（稿子自己就在动这个属性），不新造颜色。
 * ⚠️ 收起态三个图标都是 100%，稿子没规定 hover，所以那时悬停没有变化 —— 待确认。
 */
[data-spark-nav][data-nav-open] .spark-nav__icon:hover,
[data-spark-nav][data-nav-open] .spark-nav__icon:focus-visible {
    opacity: 1;
}

/* 汉堡在 Menu 展开时换成 ✕。两个字形叠着交叉淡化，不切 DOM。 */
.spark-nav__icon-glyph--alt {
    opacity: 0;
}

.spark-nav__icon-glyph {
    transition: opacity var(--spark-nav-hover) var(--spark-nav-ease);
}

[data-spark-nav][data-nav-open="menu"] .spark-nav__icon[aria-expanded="true"] .spark-nav__icon-glyph {
    opacity: 0;
}

[data-spark-nav][data-nav-open="menu"] .spark-nav__icon[aria-expanded="true"] .spark-nav__icon-glyph--alt {
    opacity: 1;
}

/* ---------- 文字链接（NavTitleLink）---------- */

/**
 * 稿子的两个状态（6858:18166 / 6858:18172）：
 *   Default  opacity 64
 *   Hover    opacity 100 + 右移 8
 * ⚠️ 标注写的是「48% → 100%」，组件实际是 64 —— 按组件走。
 * ⚠️ 稿子的右移是 padding-left: 8px，容器定宽 + overflow-clip 会把文字挤掉 8px。
 *   这里用 transform：视觉一样，不触发重排，动画也顺。
 *
 * 字号写在这里而不是模板：11 个链接共用，重复 6 个 Tailwind class 太脏。
 */
.spark-nav__link-text {
    display: block;
    font-size: 24rem;
    line-height: 32rem;
    letter-spacing: -0.24rem;
    font-weight: 500;
    color: #fff;
    opacity: 0.64;
    transition: opacity var(--spark-nav-hover) var(--spark-nav-ease),
        transform var(--spark-nav-hover) var(--spark-nav-ease);
}

@media (min-width: 768px) {
    .spark-nav__link-text {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.24px;
    }
}

.spark-nav__link:hover .spark-nav__link-text,
.spark-nav__link:focus-visible .spark-nav__link-text {
    opacity: 1;
    transform: translateX(8px);
}

/* 地址未定的项（Pillar Page / Stores）不做 hover，别暗示它能点 */
.spark-nav__link[aria-disabled="true"] {
    cursor: default;
}

.spark-nav__link[aria-disabled="true"]:hover .spark-nav__link-text {
    opacity: 0.64;
    transform: none;
}

/* ---------- 图片按钮（NavThumbLink）---------- */

/* 悬停：图片等比放大 5%，**另一张**透明度 → 64%（稿子标注 6858:20308） */
.spark-nav__thumb-img {
    transition: transform var(--spark-nav-panel) var(--spark-nav-ease);
}

.spark-nav__thumb:hover .spark-nav__thumb-img {
    transform: scale(1.05);
}

.spark-nav__thumb {
    transition: opacity var(--spark-nav-hover) var(--spark-nav-ease);
}

[data-nav-thumbs]:hover .spark-nav__thumb:not(:hover) {
    opacity: 0.64;
}

/* ---------- 购物车行 ---------- */

/* 圆钮的悬停色（6858:18065）：#3A3A3A → #2A2A2A ｜ #1D1D1D → #000 */
.spark-nav__qty-btn {
    background-color: #3a3a3a;
    transition: background-color var(--spark-nav-hover) var(--spark-nav-ease);
}

.spark-nav__qty-btn:hover {
    background-color: #2a2a2a;
}

.spark-nav__remove-btn {
    background-color: #1d1d1d;
    transition: background-color var(--spark-nav-hover) var(--spark-nav-ease);
}

.spark-nav__remove-btn:hover {
    background-color: #000;
}

/**
 * 移动端 Cart 面板占满屏幕高度、合计与按钮压在底部（稿子的移动端标注）。
 *
 * 要让「列表长高、把合计推到底」成立，高度链必须一路是定高：
 *   viewport（JS 给的定高）→ track → panel → .spark-nav__cart → 列表 flex-1
 * track 默认是 items-start（桌面各面板不该被拉伸），所以只在满屏态才切成 stretch。
 *
 * 只在这个状态下打通，是因为 panel.scrollHeight 是桌面算高度的依据 ——
 * 一旦面板被 flex 拉伸，scrollHeight 就变成「当前视口高」而不是内容高，
 * 切换面板时会拿到上一个面板的高度。
 */
.spark-nav__track--fill {
    height: 100%;
    align-items: stretch;
}

.spark-nav__panel--fill .spark-nav__cart {
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {

    .spark-nav__panel,
    .spark-nav__icon-glyph,
    .spark-nav__link-text,
    .spark-nav__thumb,
    .spark-nav__thumb-img {
        transition: none;
    }
}