/* ============================================================================
 * themes/custom-3ffood/sidebar.css — 3ffood 主題 sidebar 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   承接舊 3ffood.css 的「行動裝置側邊抽屜選單（Mobile Sidebar）」與跨頁
 *   「商品分類側欄（.product-cat / .product-side-menu）」段落，作為 3ffood
 *   主題對 common/sidebar.css 的覆寫與補充層。載入順序在 common/sidebar.css
 *   之後，重複規則由 3ffood 版本後勝覆寫。
 *
 * 抽取策略（按 kgtwbeef 模式 — 完整段落抽取）：
 *   舊 3ffood.css 過渡期仍由 css.blade.php 載入托底（實際已註解，改由 helper
 *   增量接線），其 mobile-sidebar 與 product-cat 段落 SHALL 完整抽到本檔。
 *
 * 抽取來源（public/web/css/3ffood.css）：
 *   - line 7392-7900：Mobile Sidebar（overlay / .mobile-sidebar 抽屜本體 /
 *                     sidebar-header(-top/-title/-close-btn/-divider) /
 *                     sidebar-content(custom-scrollbar) / 3 層選單
 *                     (sidebar-menu-l1~l3 / menu-item / menu-btn / menu-icon /
 *                     menu-label / arrow-icon / menu-container-l2~l3) /
 *                     sidebar-system-menu / sidebar-footer /
 *                     member-menu-header/-list / logout-btn(-container)）
 *                     ※ 結尾 .strong { font-weight:700 } 為通用 utility，
 *                       已在 common/sidebar.css 提供，跳過不重複
 *   - line 3060-3247：跨頁商品分類側欄（.product-cat / .product-side-menu /
 *                     .product-cat-item 各層 ul / hover / .is-active /
 *                     .has-children），比照 kgtwbeef sidebar.css 收於 sidebar 層
 *                     （posts.show 等頁面亦使用，common/sidebar.css 已同樣處理）
 *
 * Cascade 提醒（.product-side-menu 用單一選擇器，勿改複合）：
 *   .product-side-menu 維持單一選擇器 (0,1,0)。原曾比照 kgtwbeef 改用
 *   .widget.product-side-menu (0,2,0)，但實測 cm12 參考站的 cascade 是：
 *   posts.show（無 .shop-section）由 3ffood/widget.css 的 .widget { padding: 20px 8px }
 *   以 source order 後勝；products.show 由 3ffood/pages/product.css 的
 *   .shop-section .product-side-menu (0,2,0) 勝出。複合選擇器會在 posts.show 反而
 *   蓋過 .widget，與 cm12 不符（task 10.7 user 回報「文章分類位置差異」修正）。
 *
 * 跳過範圍（非 sidebar 層，留給對應檔）：
 *   - .product-cat .treeview / .hitarea（3ffood.css 5341+，分類樹外掛樣式）→ product.css
 *   - .shop-section .product-side-menu / .shop-section .widget-search
 *     （3ffood.css 9924+，三福商品頁側欄日式簡約重設計，product-scoped）→ product.css(task 10.6)
 *   - .btn-group-category（3ffood.css 2965+，商品頁分類按鈕組）→ product.css
 *
 * 載入順序：
 *   common/sidebar.css -> themes/custom-3ffood/sidebar.css（本檔）-> 其他
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 10.3）
 * ============================================================================
 */

/* ============================================================================
 * 行動裝置側邊抽屜選單 Mobile Sidebar（overlay / 抽屜本體 / header / content / 3 層選單 / system-menu / footer / member-menu / logout）(3ffood.css 7392-7900；結尾 .strong utility 跳過)
 * ============================================================================ */

/* =========================================
   Mobile Sidebar Styles (Custom Implementation)
   ========================================= */

/* #548 3ffood 手機 sidebar 品牌覆寫（深酒紅 #6a1d15 + 米金 #c9ac6e + 奶油 #f6ece4 + 棕字 #5b3a1b）
   採單一 class、載於 common 之後 → 覆寫 default 中性色；展開連結文字用 (0,4,0) 對齊 common 權重才壓得過 */

/* 標頭 */
.sidebar-title {
  color: #c9ac6e;
}

.sidebar-close-btn:hover {
  color: #6a1d15;
}

.sidebar-divider {
  background-color: #e3d3b3;
}

/* 主選單 L1 */
.menu-btn-l1-link {
  color: #5b3a1b;
}

.menu-btn-l1-link:hover {
  color: #6a1d15;
}

.menu-item-l1:hover {
  background-color: #f6ece4;
}

.menu-icon-l1 {
  color: #c9ac6e;
}

/* L1 展開狀態：淡奶油底 + 深酒紅字 */
.menu-btn-l1-toggle.active {
  background-color: #efddc7;
  color: #6a1d15;
}

/* issue #701 item 1：wrapper 移除，高亮底色/文字改指 row 連結與圖示 */
.menu-item-l1:has(.menu-btn-l1-toggle.active) > .menu-btn-l1-link {
  background-color: #efddc7;
}

.menu-item-l1:has(.menu-btn-l1-toggle.active) > .menu-btn-l1-link,
.menu-item-l1:has(.menu-btn-l1-toggle.active) .menu-icon-l1 {
  color: #6a1d15;
}

/* 第 2 / 3 層選單 */
.menu-btn-l2-link {
  color: #8f744b;
}

.menu-btn-l2-link:hover {
  color: #6a1d15;
}

.menu-btn-l2-toggle.active {
  background-color: #efddc7;
  color: #6a1d15;
}

.menu-link-l3 {
  color: #8f744b;
}

.menu-link-l3:hover {
  color: #6a1d15;
}

.menu-container-l3 {
  border-left-color: #c9ac6e;
}

/* 底部：身份卡片 + 會員清單 */
.user-info-section:hover {
  background-color: #f6ece4;
}

.user-info-section::before {
  background-color: #f6ece4;
}

.user-name {
  color: #6a1d15;
}

.user-role {
  color: #8f744b;
}

.member-menu-list a {
  color: #5b3a1b;
}

.member-menu-list a:hover {
  color: #6a1d15;
  background-color: #f6ece4;
}

/* 登出：深酒紅 */
.logout-btn {
  color: #6a1d15;
}

.logout-btn:hover {
  background-color: #f6ece4;
  color: #4f130d;
}

/* Overlay */

/* Sidebar Aside */

/* Header */

/* Content Area */

/* Scrollbar hide */

/* Menu Level 1 */

/* 第 1 層選單容器 - 使用 flexbox 分離跳轉和展開按鈕 */

/* 左側：跳轉連結區域 */

/* 右側：展開按鈕區域 */

/* 當展開時，整個容器變黑 */

/* Menu Level 2 */

/* 第 2 層選單容器 - 使用 flexbox 分離跳轉和展開按鈕 */

/* 左側：跳轉連結區域 */

/* 右側：展開按鈕區域 */

/* Menu Level 3 */

/* System Menu */

/* Footer */

/* Member Center Menu */

/* ============================================================================
 * 跨頁商品分類側欄 .product-cat / .product-side-menu（比照 kgtwbeef sidebar 收於 sidebar 層）(3ffood.css 3060-3247)
 * ============================================================================ */

.product-cat ul li {
  list-style: none !important;
  padding: 0;
}

/* .product-side-menu 基底（忠實對應 3ffood.css 3107，單一選擇器 0,1,0）：
 * 註：原曾比照 kgtwbeef 改用複合選擇器 .widget.product-side-menu (0,2,0)，但實測 cm12
 * 參考站在 posts.show（無 .shop-section）是讓 .widget { padding: 20px 8px }（載於
 * 3ffood/widget.css、source order 後勝）勝出、products.show 由 .shop-section
 * .product-side-menu(18px 14px) 勝出；複合選擇器會在 posts.show 反而蓋過 .widget
 * 變成 24px 20px（與 cm12 不符）。還原為單一 .product-side-menu 才正確重現 cm12 cascade。 */
.product-side-menu {
  /* 3ffood 品牌色：分類手風琴全由 common/sidebar.css 的 --cat-* 變數驅動，
     主題僅覆寫變數值即可一次套用品牌色（卡片底／棗紅強調／金棕次要色／hover／箭頭） */
  --cat-card-bg: #fffdfa;
  --cat-border: rgba(201, 172, 110, 0.38);
  --cat-accent: #6a1d15;
  --cat-accent-text: #ffffff;
  --cat-text: #4f130d;
  --cat-sub-text: #8f744b;
  --cat-hover: #f8ede2;
  --cat-chevron: #c9ac6e;

  background: var(--cat-card-bg);
  border-left: 4px solid #6a1d15;
  padding: 24px 20px;
  box-shadow: 0 6px 22px rgba(40, 3, 0, 0.08);
}

/* product-side-menu 子規則族（product-cat-item 連結/hover/is-active/has-children chevron/
 * 子分類）與 common/sidebar.css 語意完全相同（僅 combinator 空白寫法不同），已移除由
 * common 托底；本主題僅保留上方 .product-side-menu 本體的 brand border-left 覆寫。issue #562 */