/* ==========================================================================
 * menu-drawer.css — 移动端汉堡抽屉（全站唯一实现）
 *
 * 由 public/header.html 无条件引入，首页与分类/详情/搜索/标签页共用。
 * 此前抽屉样式只存在于 home-index.css 且被 .home-index 限定作用域，
 * 导致内页渲染 menu-slide--v2 结构（品牌栏/关闭按钮/尺寸折叠/胶囊标签）时全无样式。
 *
 * 依赖的 HTML 结构见 template/toopic/html/public/header.html 的 .menu-slide 块。
 * 交互由 static/toopic/js/menu-drawer.js 驱动：is-active 负责显示，is-open 负责位移，
 * 两者分离以便 display 切换后仍能触发 transform 过渡。
 * ========================================================================== */

.menu-slide,
.menu-mask {
  /* 组件令牌：home-index.css 的 --accent/--ease 只定义在 .home-index 下，
     内页取不到，故组件自带一份。 */
  --md-accent: #1496ff;
  --md-ease: cubic-bezier(.22, 1, .36, 1);
  --md-panel-w: 360px;
  --md-panel-min-w: 280px;
  --md-radius: 10px;
  --md-z-mask: 10040;
  --md-z-panel: 10050;
  --md-top: #171d27;
  --md-bottom: #0e131b;
}

/* 宽屏不出现；汉堡按钮在 style.css 中同样只在 ≤1280px 显示 */
.menu-slide { display: none; }

@media (max-width: 1280px) {

  /* ── 汉堡按钮图标（雪碧图）── */
  .header .tool .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 300px 300px;
  }
  .header .tool .menu-icon { background-position: 0 -163px; }

  /* ── 抬升承载抽屉的 .header ──
     抽屉位于 .header 内部。首页 .header 是 position:fixed + z-index:200，会形成层叠
     上下文，把抽屉的 z-index:10050 困在该层级里，于是 z-index:10040 的遮罩反而盖住
     抽屉（并被遮罩的 backdrop-blur 糊住）。展开时抬高 header，使抽屉随 header 一起
     处于遮罩之上。内页 .header 为 static，此规则对它们不产生作用。 */
  body.md-drawer-open .header { z-index: 10060; }

  /* ── 遮罩 ──
     与 .menu-slide 的位移同为 .32s：背景虚化随抽屉同步淡入/淡出，
     避免关闭时抽屉已滑走、虚化却滞留片刻才消失的错位。 */
  .menu-mask {
    position: fixed;
    inset: 0;
    z-index: var(--md-z-mask);
    background: rgba(8, 12, 20, .58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .32s var(--md-ease);
  }
  .menu-mask.is-on { opacity: 1; }

  /* ── 面板本体 ── */
  .menu-slide {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--md-z-panel);
    width: min(86vw, var(--md-panel-w));
    min-width: var(--md-panel-min-w);
    height: 100%;
    padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #e8eaed;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(20, 150, 255, .16), transparent 54%),
      linear-gradient(180deg, var(--md-top) 0%, var(--md-bottom) 100%);
    box-shadow: 16px 0 48px rgba(0, 0, 0, .42);
    transform: translate3d(-105%, 0, 0);
    transition: transform .32s var(--md-ease);
  }
  /* 显示与位移分离：先 is-active 渲染，再 is-open 触发过渡 */
  .menu-slide.is-active { display: block; }
  .menu-slide.is-open { transform: translate3d(0, 0, 0); }

  /* 未启用后台菜单分区时的兜底标题 */
  .menu-slide:not(.menu-slide--v2)::before {
    content: "菜单";
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    padding: 16px 18px 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(180deg, var(--md-top) 72%, rgba(23, 29, 39, .92));
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  /* ── 分区 ── */
  .menu-slide .menu-item {
    padding: 16px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .menu-slide .menu-item:last-of-type { border-bottom: 0; padding-bottom: 12px; }
  .menu-slide .menu-item .title,
  .menu-slide .menu-item h3,
  .menu-slide .menu-item h3.title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    line-height: 1.3;
    margin: 0 0 10px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .48);
  }
  .menu-slide .menu-item h3.title::before,
  .menu-slide .menu-item .title::before {
    content: "";
    width: 3px;
    height: 12px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--md-accent), rgba(20, 150, 255, .35));
    box-shadow: 0 0 10px rgba(20, 150, 255, .45);
  }

  /* ── 网格列表 ── */
  .menu-slide .menu-item ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 8px;
    margin: 0;
    list-style: none;
    overflow: visible;
  }
  .menu-slide .menu-item ul::after,
  .menu-slide .menu-item ul::before { display: none; }
  .menu-slide .menu-item:first-child > ul.category,
  .menu-slide .menu-item ul.size {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .menu-slide .menu-item ul li {
    float: none;
    width: auto;
    padding: 0;
  }
  .menu-slide .menu-item ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 38px;
    line-height: 1.25;
    padding: 8px 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    border-radius: var(--md-radius);
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .045);
    box-sizing: border-box;
    transition: background .2s var(--md-ease), border-color .2s var(--md-ease), color .2s var(--md-ease);
  }
  .menu-slide .menu-item ul.size li a,
  .menu-slide .menu-item ul.category li a { font-size: 12px; }
  .menu-slide .menu-item:first-child > ul.category li a { font-size: 13px; }
  .menu-slide .menu-item ul li a:hover,
  .menu-slide .menu-item ul li a:active {
    color: #fff;
    border-color: rgba(20, 150, 255, .5);
    background: rgba(20, 150, 255, .18);
    box-shadow: 0 0 0 1px rgba(20, 150, 255, .12), 0 8px 18px -12px rgba(20, 150, 255, .55);
  }

  /* ── 品牌区 ── */
  .menu-slide .md-chrome {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, rgba(23, 29, 39, .96) 0%, rgba(23, 29, 39, .88) 70%, rgba(23, 29, 39, 0));
  }
  .menu-slide .md-chrome__copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .menu-slide .md-chrome__copy em {
    font-style: normal;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .4);
  }
  .menu-slide .md-chrome__copy strong { font-size: 20px; font-weight: 700; color: #fff; }
  .menu-slide .md-close {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .menu-slide .md-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

  /* ── 尺寸折叠：超过 8 个默认收起 ── */
  .menu-slide ul.md-sizes:not(.is-expanded) .md-size-more { display: none; }
  .menu-slide .md-more-sizes {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 8px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .menu-slide .md-more-sizes:hover { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .25); }

  /* ── 标签胶囊 ── */
  .menu-slide .menu-item ul.md-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 8px;
  }
  .menu-slide .menu-item ul.md-pills li { float: none; width: auto; }
  .menu-slide .menu-item ul.md-pills li a {
    display: inline-flex;
    padding: 5px 10px;
    min-height: 0;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 99px;
  }
}

/* ==========================================================================
 * NAV_MOBILE_SEARCH_V1（优化 P1-3）：≤768 顶栏搜索入口
 * 背景：≤768 时 style.css 把 #headerSearch 整块隐藏，分类/标签/详情页于是没有任何搜索入口
 *      （首页靠 hero 自带搜索框兜住）。这里在顶栏加一个搜索图标，点击进入搜索页。
 * 只在 ≤768 显示；≥769 有真正的搜索框，不需要它。
 * 放在本文件（全站无条件加载）而非 style.css/style-1.css，避免"会员中心页用 style-1.css"导致规则失效。
 * ========================================================================== */
.header .tool-search-m { display: none; }
@media (max-width: 768px) {
  .header .tool-search-m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 6px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .74);
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid rgba(255, 255, 255, .12);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .header .tool-search-m:active { background: rgba(255, 255, 255, .14); }
}

/* ==========================================================================
 * NAV_TABLET_BAR_V1（优化 P1-3）：769–1280 顶栏内启用「横滑分类条」
 * 背景：≤1280 原先把 ul.nav 整块隐藏，平板档只剩汉堡，"切换分类"要多两步（开抽屉→找分类）；
 *      而该区间顶栏空间其实足够放一条横向滚动的分类条（横滑能力基础样式早已存在于 style.css）。
 * 做法：本区间隐藏 logo 让位，恢复 ul.nav 并让它横向滚动；顶栏高度不变（60px），零布局影响。
 * 注意：本例需压过 style.css 的 `@media(max-width:1280px){.header .fixed .nav{display:none!important}}`；
 *      两者特异性相同且都带 !important，靠**加载顺序**取胜 —— menu-drawer.css 在 header.html 中
 *      晚于 style.css 加载（见 public/header.html 的 <link> 顺序），故本文件生效。
 * 手机档（≤768）仍隐藏 nav（屏幕过窄，保留汉堡 + 搜索图标）。
 * ========================================================================== */
@media (min-width: 769px) and (max-width: 1280px) {
  .header .logo { display: none !important; }
  .header .fixed .nav { display: flex !important; }
  .header .nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .header .nav::-webkit-scrollbar { display: none; }
  .header .nav .item .one { padding: 0 10px; font-size: 13px; }
}