/*
  檔案功能：_nav.css
  被引用目的：導覽列與連結狀態，例如主選單、active 狀態、hover 效果與手機選單呈現。
  編寫安排：以模組化方式集中管理相關 class，讓 style.css 可以用 @import 組合多個小檔案，避免所有樣式混在單一大檔中。
  與 HTML 的關係：HTML 先使用語意清楚的 class 名稱，本檔再針對這些 class 定義可重複使用的視覺規則。
*/

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.nav {
    /*預設重整*/
  /* 設定元素外距，控制元素與元素之間的距離。 */
  margin: 0;
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 0;
  /* 設定 CSS 屬性 list-style，用來微調版面或視覺表現。 */
  list-style: none;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.nav-number {
  /* 設定 CSS 屬性 counter-reset，用來微調版面或視覺表現。 */
  counter-reset: number-item;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.nav-number li {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 設定左側內距。 */
  padding-left: 1.5em;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.nav-number li:before {
  /* 設定 CSS 屬性 content，用來微調版面或視覺表現。 */
  content: counter(number-item);
  /* 設定 CSS 屬性 counter-increment，用來微調版面或視覺表現。 */
  counter-increment: number-item;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: absolute;
  /* 搭配定位使用，設定左側位移。 */
  left: 0;
  /* 設定文字大小。 */
  font-size: 20px;
  /* 設定 CSS 屬性 font-weight，用來微調版面或視覺表現。 */
  font-weight: 800;
  /* 設定透明度，可用於淡入動畫。 */
  opacity: 0.2;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.nav-link {
    /*基本內距*/
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 5px;
  /* 設定元素外距，控制元素與元素之間的距離。 */
  margin: 0px;
    /*修改類型*/
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: inline-block;}

