/* nBUN Global Nav — v2.0.0
   ladybug-sync + auto-width + inner-scale + offset-x
*/

/* =========================================
   nBUN Global Nav — 進度條 + Projects 類別 + 預覽控制列
   ========================================= */

/* ---------- 共用變數（手機預設） ---------- */
:root{
  --nbun-nav-min:   260px;
  --nbun-nav-ideal: 88vw;
  --nbun-nav-max:   420px;
  --nbun-nav-width: clamp(var(--nbun-nav-min),
                          var(--nbun-nav-ideal),
                          var(--nbun-nav-max));

  --nbun-spn-track-pad-x: 30px;
  --nbun-spn-dot-size:    10px;
  --nbun-spn-dot-r:       calc(var(--nbun-spn-dot-size) / 2);

  --nbun-device-scale:    1;
  --nbun-spn-bottom:      60px;

  /* 分類／預覽文字用的內層縮放 */
  --nbun-nav-inner-scale: 1;

  /* 新增：整組 Global Nav 左右位移（預設 0） */
  --nbun-nav-offset-x: 0px;
}

/* 桌機 & 平板 */
@media (min-width:768px){
  :root{
    --nbun-nav-min:   360px;
    --nbun-nav-ideal: 20vw;
    --nbun-nav-max:   520px;
    --nbun-nav-width: clamp(var(--nbun-nav-min),
                            var(--nbun-nav-ideal),
                            var(--nbun-nav-max));
    --nbun-device-scale: 1.12;
    --nbun-spn-bottom:   60px;
  }
}

html.nbun-spn-expanded{
  --nbun-spn-bottom: 80px;
}

/* =========================================
   1) 總選單根元素
   ========================================= */

.nbun-gn{
  position:fixed;
  left:50%;
  bottom:var(--nbun-spn-bottom);
  transform:
    translateX(calc(-50% + var(--nbun-nav-offset-x, 0px)))
    scale(calc(var(--nbun-spn-scale,1) * var(--nbun-device-scale,1)));
  transform-origin:center bottom;
  z-index:105000;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;

  pointer-events:none;
  overflow:visible;
}

.nbun-gn .nbun-spn-track{
  pointer-events:auto;
}

/* 模式切換 */
.nbun-gn--mode-home .nbun-gn__cats-slot{
  display:none;
}
.nbun-gn--mode-work .nbun-gn__cats-slot{
  display:block;
}
.nbun-gn--mode-preview .nbun-gn__preview-slot{
  display:block;
}

/* 預覽時：保留下方灰底，但隱藏分類膠囊，顯示文字 */
.nbun-gn--mode-preview #nbunGnCats .nbunpg-filters{
  display:none;
}

/* =========================================
   預覽模式：隱藏進度線＋圓點＋泡泡
   ========================================= */

.nbun-gn--mode-preview .nbun-spn-track::before,
.nbun-gn--mode-preview .nbun-spn-fill{
  opacity:0;
}

.nbun-gn--mode-preview .nbun-spn-dot::after,
.nbun-gn--mode-preview .nbun-spn-dot::before{
  opacity:0;
}

.nbun-gn--mode-preview .nbun-spn-dot{
  pointer-events:none;
}

.nbun-gn--mode-preview .nbun-spn-dot::before,
.nbun-gn--mode-preview .nbun-spn-dot:hover::before,
.nbun-gn--mode-preview .nbun-spn-dot.is-active::before{
  display:none !important;
}

/* =========================================
   2) 白色膠囊進度條
   ========================================= */

.nbun-spn-label{
  display:none !important;
}

.nbun-spn-track{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:var(--nbun-nav-width);
  max-width:100%;

  padding:0 var(--nbun-spn-track-pad-x);
  height:40px;

  border-radius:6px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  overflow:visible;
}

.nbun-spn-track::before{
  content:"";
  position:absolute;
  left:  calc(var(--nbun-spn-track-pad-x) + var(--nbun-spn-dot-r));
  right: calc(var(--nbun-spn-track-pad-x) + var(--nbun-spn-dot-r));
  top:50%;
  height:2px;
  transform:translateY(-50%);
  border-radius:2px;
  background:#EAF0E8;
  opacity:0.9;
  z-index:0;
}

.nbun-spn-fill{
  position:absolute;
  left: calc(var(--nbun-spn-track-pad-x) + var(--nbun-spn-dot-r));
  top:50%;
  transform:translateY(-50%);
  height:2px;
  width:0%;
  border-radius:999px;
  background:#82F5B5;
  z-index:1;
  transition:left .25s ease-out, width .25s.ease-out;
}

.nbun-spn-dot{
  position:relative;
  flex:0 0 auto;
  width: var(--nbun-spn-dot-size);
  height: var(--nbun-spn-dot-size);
  border-radius:50%;
  cursor:pointer;
  z-index:10;
  background:transparent;
  border:none;
}

.nbun-spn-dot::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: var(--nbun-spn-dot-size);
  height: var(--nbun-spn-dot-size);
  transform: translate(-50%,-50%) scale(0.75);
  transform-origin:center center;
  border-radius:50%;
  background:#b4b4b4;
  border:1.5px solid rgba(255,255,255,0.9);
  box-sizing:border-box;
}

.nbun-spn-dot::before{
  content:attr(data-label);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(calc(-50% - 15px), -50%);
  opacity:0;
  padding:4px 6px;
  border-radius:999px;
  background:#fff;
  border:2px solid #82F5B5;
  color:#111;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  z-index:200000;
  transition:opacity .18s ease-out,
             transform .50s cubic-bezier(.18,.89,.32,1.28);
}

.nbun-spn-dot.is-active::before{
  opacity:1;
  transform:translate(-50%, -50%);
}

@media (hover:hover) and (pointer:fine){
  .nbun-spn-dot:hover::before{
    opacity:1;
    transform:translate(-50%, -50%);
  }
}

.nbun-spn-dot.is-active::after{
  background:#ffffff;
  border-color:#beff00;
  box-shadow:0 0 0 2px rgba(155,224,129,0.7);
}

.nbun-spn-dot.is-passed::after{
  background:#82F5B5 !important;
  border:1px solid #fff !important;
}

/* Ladybug：跟著進度條跑，漂浮在膠囊上方 */
.nbun-spn-gif{
  position:absolute;
  top:-18px;
  left:0;
  transform:translate(-50%, -90%);
  z-index:200000;
  pointer-events:auto;
}
.nbun-spn-gif img{
  height:60px;
  width:auto;
}
@media (max-width:767px){
  .nbun-spn-gif img{
    height:50px;
  }
}

/* =========================================
   3) Projects 分類選單 (Work 模式用)
   ========================================= */

.nbun-gn__cats-slot{
  width:var(--nbun-nav-width);
  max-width:100%;
  margin-top:0;
}

.nbun-gn__cats-slot-inner,
#nbunGnCats{
  width:100%;
  max-width:100%;
}

/* 直接用 .nbunpg-filters 當灰底膠囊（內容可縮放） */
.nbun-gn .nbunpg-filters{
  position:relative;
  left:auto;
  bottom:auto;

  transform:scale(var(--nbun-nav-inner-scale, 1));
  transform-origin:center top;

  width:100%;
  max-width:100%;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;

  margin:0;
  padding:8px 8px;

  background:rgba(0,0,0,0.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:6px;
  box-shadow:0 14px 28px rgba(0,0,0,.16);

  gap:4px;
  overflow:hidden;
  opacity:1;
  pointer-events:auto;
}

.nbun-gn .nbunpg-filters button{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:18px;
  border:0;
  padding:7px 8px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;

  background:#fff;
  color:#212121;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}

.nbun-gn .nbunpg-filters button.is-active{
  background:#000;
  color:#c7ffdb;
}

@media (max-width:767px){
  .nbun-gn .nbunpg-filters{
    padding:8px 12px;
    gap:4px;
  }
  .nbun-gn .nbunpg-filters button{
    padding:6px 10px;
    font-size:13px;
    border-radius:16px;
  }
}

/* =========================================
   4) 預覽控制列 + 下方兩行文字
   ========================================= */

.nbun-gn__preview-slot{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}

.nbun-gn-previewbar{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  pointer-events:auto;
}

/* 四顆按鈕：沿用分類膠囊形狀，只改顏色 */
.nbun-gn-preview-btn{
  background:#000;
  color:#fff;
  border:0;
  border-radius:9999px;
  padding:7px 16px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:.25s;
}

.nbun-gn-preview-view{
  padding-inline:26px;
}

.nbun-gn-preview-btn:hover{
  background:#fff;
  color:#000;
}

/* 下方兩行小字：貼齊上方，不留縫隙，寬度跟進度條一致 */
.nbun-gn-previewmeta{
  margin-top:0;
  padding:10px 16px;

  width:var(--nbun-nav-width);
  max-width:100%;
  overflow:hidden;

  background:#fff;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);

  margin-left:auto;
  margin-right:auto;

  text-align:left;
  display:none;

  transform:scale(var(--nbun-nav-inner-scale, 1));
  transform-origin:center top;
}

.nbun-gn--mode-preview .nbun-gn-previewmeta{
  display:block;
}

.nbun-gn-previewmeta-line1{
  font-size:12px;
  letter-spacing:.03em;
  color:#777;
  margin-bottom:3px;
}

.nbun-gn-previewmeta-line2{
  font-size:14px;
  font-weight:600;
  color:#111;
  line-height:1.4;
}

/* 手機版微調 */
@media (max-width:767px){
  .nbun-gn-preview-btn{
    padding:6px 12px;
    font-size:12px;
  }
  .nbun-gn-previewmeta{
    max-width:88vw;
    padding:8px 12px;
  }
}

/* =========================================
   5) 小安全調整
   ========================================= */

html, body{
  overflow-x:hidden;
}