/**
 * Header Block 模式手機抽屜 —— 預設長相(只在 block 模式頁首載入)
 *
 * plan-header-block-drawer-decouple-20261023。骨架是 HeaderBlockService::drawer_skeleton() 印的
 * `[data-hz-bdrawer]` 一族,開關狀態由 header-block-drawer.js 切在外框上:
 *   .hz-bdrawer-open     打開中
 *   .hz-bdrawer-closing  收起中(掛到面板 transitionend 為止 —— 收起動畫看得到)
 *
 * ⭐ 權重契約(站主:長相都要能用 Custom HTML 改,手機電腦都不能寫死):
 *   - 每條都包在 :where() 裡 = 權重 0,作者寫一層 class(0,1,0)就蓋得掉。
 *   - 只有「主題 / H/F reset 會用元素選擇器搶走」的那幾條(a、button、子選單 ul 的 padding)
 *     墊 :not(br) 到 (0,0,2) —— 贏主題的 `a {}`(0,0,1)與 H/F reset(0,0,2,本檔載在 hauzii-tailwind 之後),
 *     仍低於作者單層 class。測試:tests/js/headerBlockDrawer.test.js「權重契約」。
 *   - ⛔ !important。
 *
 * ⚠️ 位移只放在面板自己身上:外框是 position:fixed 滿版,`<header>` → 抽屜的祖先鏈 ⛔ transform /
 *    filter / will-change / contain(會讓抽屜縮成那個祖先的框)。
 *
 * 作者改方向的範例(單層 class 就贏;改了收起時的 transform 就要連打開中一起寫):
 *   .hz-bdrawer-panel { left: 0; right: auto; transform: translateX(-100%); transition: transform .6s ease; }
 *   .hz-bdrawer-open .hz-bdrawer-panel { transform: translateX(0); }
 *
 * 間距 / 顏色的預設值沿用 template 抽屜讀的變數(--hz-hf-drawer-nav-* / --hz-mobile-nav-*),只當預設來源。
 */

/* ── 外框:滿版、關閉時藏起來(visibility 不拿掉排版 → 打開時面板起點已在,收起中仍可見) ── */
:where(.hz-bdrawer) {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

:where(.hz-bdrawer:not(.hz-bdrawer-open):not(.hz-bdrawer-closing)) {
  visibility: hidden;
  pointer-events: none;
}

/* ── 背景 ── */
:where(.hz-bdrawer-backdrop) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

:where(.hz-bdrawer-open .hz-bdrawer-backdrop) {
  opacity: 1;
}

/* ── 面板:預設右側、從右滑入 ── */
:where(.hz-bdrawer-panel) {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: min(85vw, 24rem);
  max-width: 100vw;
  transform: translateX(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

:where(.hz-bdrawer-open .hz-bdrawer-panel) {
  transform: translateX(0);
}

/* ── 關閉列 / 關閉鈕 ── */
:where(.hz-bdrawer-close-row) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

:where(.hz-bdrawer-close):not(br):not(br) {
  padding: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

:where(.hz-bdrawer-close svg) {
  width: 1.5rem;
  height: 1.5rem;
}

:where(.hz-bdrawer-close:focus):not(br):not(br) {
  outline: none;
}

:where(.hz-bdrawer-close:focus-visible):not(br):not(br) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── 內容捲動區 ── */
:where(.hz-bdrawer-body) {
  flex: 1;
  overflow-y: auto;
}

/* ── 抽屜內選單的預設長相(接近 template 抽屜;全部作者單層 class 可蓋) ── */
:where(.hz-bdrawer-body ul:not(.hz-mobile-submenu)) {
  display: flex;
  flex-direction: column;
  gap: var(--hz-hf-drawer-nav-item-gap);
}

:where(.hz-bdrawer-body a, .hz-bdrawer-body button):not(br):not(br) {
  display: flex;
  align-items: center;
}

:where(.hz-bdrawer-body a):not(br):not(br) {
  color: var(--hz-mobile-nav-text, inherit);
  -webkit-user-select: auto;
  user-select: auto;
}

:where(.hz-bdrawer-body .hz-submenu-toggle):not(br):not(br) {
  color: var(--hz-mobile-nav-text, inherit);
  padding: 0.5rem;
  padding-right: var(--hz-hf-drawer-nav-toggle-padding-r);
}

:where(.hz-bdrawer-body .hz-mobile-submenu):not(br):not(br) {
  padding-inline-start: var(--hz-hf-drawer-nav-sub-indent);
}

:where(.hz-bdrawer-body .hz-mobile-submenu a):not(br):not(br) {
  color: var(--hz-mobile-nav-sub-text, var(--hz-mobile-nav-text, inherit));
}

/* 子選單箭頭:展開時轉向(接手 mobile-nav.css 的 (0,1,1) / (0,2,1),那兩條已排除 .hz-bdrawer) */
:where(.hz-bdrawer-body .hz-submenu-toggle svg) {
  transition: transform 0.2s ease;
}

:where(.hz-bdrawer-body .hz-submenu-toggle[aria-expanded="true"] svg) {
  transform: rotate(180deg);
}

/* ── 減少動畫(JS 同步改成立即收起) ── */
@media (prefers-reduced-motion: reduce) {
  :where(.hz-bdrawer-backdrop, .hz-bdrawer-panel, .hz-bdrawer-body .hz-submenu-toggle svg) {
    transition: none;
  }
}