/* 置頂導覽列 -----------------------------------*/


.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 固定的高度比較好對齊 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;

  /* 1. 設定條紋：確保條紋是從 0% 開始，且藍白比例各半 */
  background-image: linear-gradient(
    90deg, 
    var(--nav-bg) 0%, var(--nav-bg) 50%, 
    #ffffff 50%, #ffffff 100%
  );
  background-size: 80px 100%; /* 每個藍白循環總寬度 80px */
  background-position: center top; /* 居中對齊，確保計算基準一致 */
}

.navbar::after {
  content: "";
  position: absolute; 
  left: 0;
  right: 0;
  bottom: -20px; /* 根據波浪高度調整 */
  height: 20px;

  /* 2. 設定波浪：同樣要 0% 開始，半圓顏色要對上 */
  background-image: 
    /* 藍色半圓 */
    radial-gradient(circle at 20px 0%, var(--nav-bg) 20px, transparent 21px),
    /* 白色半圓 */
    radial-gradient(circle at 60px 0%, #ffffffaf 20px, transparent 21px);
  
  /* 寬度必須跟 navbar 一模一樣是 80px */
  background-size: 80px 20px; 
  background-position: center top; /* 基準點與 navbar 保持一致 */
  background-repeat: repeat-x;
 }



.navbar h1 {
  font-size: 20px;
  color: var(--word);   /*淺粉桃*/
  margin: 0;
  /* 核心：文字描邊 */
  text-shadow: 
    -1px -1px 0 rgb(24, 21, 80),  
     1px -1px 0 rgb(24, 21, 80),
    -1px  1px 0 rgb(24, 21, 80),
     1px  1px 0 rgb(24, 21, 80);
  -webkit-text-stroke: 0.5px ; /* 寬度 顏色 */
}

.nav-links {     
  display: flex;
  gap: 20px;
  transition: all 0.8s ease; /* 動畫時間與曲線 */
}

.nav-links a {
  text-decoration: none;
  color: var(--word);   /*淺粉桃*/
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #F5DAA7;  /*鵝黃*/
}