/**
 * ==============================================================================
 * Project: 側邊懸浮直排導覽列模組 (Vertical Side Navigation Module)
 * Author: Ray Shih (施睿皇) - Jingrui Design Studio
 * Email: n8822314n@gmail.com
 * Contact: services@jingruidesign.com
 * Created: 2026-07-05 13:38
 * Version: 1.0.2
 *
 * Copyright (c) 2026 Jingrui Design Studio. All rights reserved.
 *
 * Unauthorized use, reproduction, or distribution is prohibited.
 * ==============================================================================
 *
 * 【操作流程】
 * 1. 核心樣式全面與圖像脫鉤，未來僅需修改 `--jr-nav-text` 與 `--jr-nav-hover` 變數即可完成色系替換。
 * 2. 內建中高階寬度過濾機制：當螢幕解析度 <= 1440px 時，自動銷毀顯示區塊（display: none）。
 *
 * 【更新日誌 (Update Log)】
 * v1.0.2 (2026-07-05) - 移除表情符號樣式，增加 SVG 控制變數（--jr-icon-size, --jr-icon-spacing），達成 100% 純 CSS 控制顏色與架構。
 * v1.0.1 (2026-07-05) - 變更預設停靠方位為左側，新增 1440px 斷點隱藏規則，重構 BEM 命名空間。
 */

/* ==========================================
 * 全域可視化變數系統 (CSS Design Tokens)
 * 未來更換文字、主題、或專案，僅需微調以下數值，不需重新製圖。
 * ========================================== */
:root {
  /* 色彩控制 */
  --jr-nav-bg: #ffffff;           /* 頂級白背景 */
  --jr-nav-text: #44514B;         /* 客戶品牌內文墨綠色 */
  --jr-nav-hover: #D2695E;        /* 客戶品牌主色 (磚紅) */
  --jr-nav-border: #EFECE5;       /* 客戶品牌細緻邊界線 */
  
  /* 結構與字體控制 */
  --jr-nav-width: 68px;           /* 導覽列極致精準寬度 */
  --jr-nav-z-index: 9999;         /* 確保覆蓋層級 */
  --jr-nav-letter-spacing: 0.22em;/* 直排文字專業字距擴充 */
  --jr-nav-font-size: 13px;       /* 直排黃金視覺字體大小 */
  
  /* SVG 圖示控制 */
  --jr-icon-size: 18px;           /* 向量圖示黃金比例尺寸 */
  --jr-icon-spacing: 14px;        /* 圖示與下方文字的物理垂直間距 */
}

/* ==========================================
 * 側邊導覽列主容器 (定位與佈局)
 * ========================================== */
.jr-vertical-nav {
  position: fixed;
  top: 0;
  height: 100vh;
  width: var(--jr-nav-width);
  background-color: var(--jr-nav-bg);
  z-index: var(--jr-nav-z-index);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 40px 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
  user-select: none;
}

/* 左側停靠防禦架構 */
.jr-vertical-nav[data-position="left"] {
  left: 0;
  border-right: 1px solid var(--jr-nav-border);
  border-left: none;
}

/* 備用右側停靠防禦架構 */
.jr-vertical-nav[data-position="right"] {
  right: 0;
  border-left: 1px solid var(--jr-nav-border);
  border-right: none;
}

/* ==========================================
 * 模組列表清單
 * ========================================== */
.jr-vertical-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* 控制選單項目彼此之間的垂直跨距 */
}

.jr-vertical-nav__top {
  flex-grow: 1;
  justify-content: flex-start;
}

.jr-vertical-nav__bottom {
  padding-top: 28px;
  border-top: 1px solid var(--jr-nav-border);
}

.jr-vertical-nav__item {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* ==========================================
 * 連結與純 CSS 文字控制（解耦核心）
 * ========================================== */
.jr-vertical-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  /* 顏色強制繼承 CSS 變數，實現 100% 動態更換 */
  color: var(--jr-nav-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: var(--jr-nav-font-size);
  font-weight: 500;
  letter-spacing: var(--jr-nav-letter-spacing);
  padding: 10px 4px;
  transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* 滑過（Hover）與動態反饋 */
.jr-vertical-nav a:hover {
  color: var(--jr-nav-hover);
  transform: translateY(-3px); /* 優雅上浮 */
}

/* 核心：高階直排文字排版規範 */
.jr-vertical-nav__text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

/* ==========================================
 * 向量 SVG 圖示純 CSS 顏色連動樣式
 * ========================================== */
.jr-vertical-nav__icon {
  width: var(--jr-icon-size);
  height: var(--jr-icon-size);
  margin-bottom: var(--jr-icon-spacing);
  display: inline-block;
  /* 關鍵：使 SVG 內部控制顏色與外層文字 color 變數完美融合 */
  color: inherit; 
  transition: color 0.25s ease;
}

/* ==========================================
 * 企業級 RWD 響應式限制（1440px 臨界防禦）
 * ========================================== */
@media screen and (max-width: 1440px) {
  /* 當解析度在 1440 軸距以內時，強制隱藏該區塊，絕不干擾小螢幕黃金版面 */
  .jr-vertical-nav {
    display: none !important;
  }
}