/*--------------------------------------------------------------
# navbar 
--------------------------------------------------------------*/

#nav-uj{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100%;
  margin: auto;
  transition: background-color .25s ease, box-shadow .25s ease;
  background-color: transparent; 
}


#nav-uj .container {
  width: 100%;
  max-width: 1600px;
  /* border: 1px solid #fff; */
  align-items: center;
}

#nav-menu{
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}


/* ****************************************** 
/* 共用 X LOGO
****************************************** */
.navbar-brand {
  margin-right: 0;
  width: fit-content;
}

.nav-logo img {
  position: relative;
  width: 100%;
  max-width: 180px;
  z-index: 100;
  margin-top: 0px;
  filter: drop-shadow(0 0 0.2rem rgb(255, 255, 255));
}




/* ****************************************** 
/* 天標-項目設定 
****************************************** */
  .tt_all {
    width: 70%;/*68%(咖坡再調回)  暫定75%*/
    display: flex;
    gap: .7rem;
    margin-left: .5rem;
    justify-content:space-evenly;/*(咖坡再刪除)  暫定75%*/
  }
  .tt_all a{
    /* width: 120px; */
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* 字體樣式 */
  .txt_nav_menu{
    width: max-content;
    font-size: 18px;
    font-weight: 600;
    color: #0f59ab;
    text-shadow:
      -2px -2px 0 #ffffff,
      0px -2px 0 #ffffff,
      2px -2px 0 #ffffff,
      -2px  0px 0 #ffffff,
      2px  0px 0 #ffffff,
      -2px  2px 0 #ffffff,
      0px  2px 0 #ffffff,
      2px  2px 0 #ffffff,
      2px  2px 0 rgba(0,0,0,0.15);/* 陰影 */
  }



/* ****************************************** 
/社群 X 語系 X 立即下載 
****************************************** */

.icon_all {
  width: 17%;/*30%(咖坡再調回)  暫定20%*/
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.icon_all a {
  width:unset;
  padding: 0 7px;
}

.icon_all a:hover {color: #FFF; filter: drop-shadow(2px 4px 6px #FFF) blur(.5px); }
.icon_all img { width: 20px; }


/*社群 X icon*/
.icon_all .socail{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 4px;
  border-radius: 50px;
  background: #ee6a8c;
}

.icon_all .socail img{
  filter: brightness(2);
}




/*語系 X 立即下載*/
#download_mb{display: none;}

a#langDropdown,a.download{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ee6a8c;
  /* width: 100%; */
  color: #fff !important;
  padding: 0 15px 0 5px !important;
  border-radius: 50px;
  font-size: 14px;
}
a.download{
  width: 100%;
  max-width: 100px;
  padding: 7px 3px !important;
}

a#langDropdown img{
  width: 20px;
  margin: 3px 0px 3px 0px;
}



/* 語系選單：容器 *//* 下拉面板 */
.lang-switch { position: relative; }

.lang-menu {
  width: 100%;
  min-width: unset;
  background: rgb(250, 249, 250);
  border: 2px solid #f88da9;
  backdrop-filter: blur(4px);
  z-index: 1060; 
}
.lang-menu .dropdown-item {
  display: block;
  padding: 1.2rem 1rem !important;
  color: #ee6a8c;
  line-height: 1.2;
}
.lang-menu .dropdown-item:hover{
  background: #f88da9 !important;
  color: #FFF;
  filter: none;
}





/* 手機：下拉面板寬度稍微收斂 */
/* @media (max-width: 991.98px){
  .lang-menu { min-width: 160px; }
} */



/* ****************************************** 
/捲動超過 1000px 後套用 X 導覽列滾動後縮小效果
****************************************** */
  #nav-uj.scrolled {
    background-color:rgb(251 250 251 / 52%);      
    box-shadow: 0 6px 20px rgba(170, 172, 175, 0.25);
    -webkit-backdrop-filter: saturate(150%) blur(6px);
    backdrop-filter: saturate(150%) blur(6px);  /* 玻璃霧面效果 */
    height: 70px;
    transition: all 0.35s ease;
  }

  #nav-uj.scrolled .container {
    align-items: center;
    /* width: 70%; */
    transition: all 0.35s ease;
  }
  
/* LOGO 單獨微縮 + 調整間距 */
  #nav-uj.scrolled .nav-logo img {
    transform: scale(0.75);
    filter: drop-shadow(0 0 0.15rem rgba(255,255,255,0.8));
    transition: transform 0.35s ease, filter 0.35s ease;
  }

/* 導覽項縮小字距與 padding，視覺集中 */
  #nav-uj.scrolled .tt_all a {
    /* padding-top: 4px; */
    /* letter-spacing: 0.5px; */
    /* transform: scale(0.75); */
    transition: all 0.35s ease;
  }

  #nav-uj.scrolled .icon_all a {
    /* letter-spacing: 0.5px; */
    /* transform: scale(0.75); */
    transition: all 0.35s ease;
  }

/* 固定導覽列浮在上方（比 offcanvas backdrop 高一點） */
/* Bootstrap offcanvas/backdrop 預設 z-index 1045，保留不動 */
  #nav-uj.navbar.fixed-top {
    z-index: 1046;
  } 

/* 769px以下收起 */
  #nav-uj.nav-hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none; /* 隱藏後不佔互動 */
    position: fixed;      /* 固定於頂端移動 */
  }




/* ========== 導覽列平滑縮放（取代 .scrolled 突兀效果） ========== */
#nav-uj .container{
  --shrink: 0;
  transform-origin: top center;
  transform: scale(calc(1 - 0.08 * var(--shrink)));
  background-color: rgba(20, 3, 41, calc(0.78 * var(--shrink)));
  box-shadow: 0 6px 20px rgba(0,0,0,calc(0.25 * var(--shrink)));
  transition: none; 
}

/* LOGO 連續縮放 */
#nav-uj .nav-logo img {
  transform: scale(calc(1 - 0.15 * var(--shrink)));
  filter: drop-shadow(0 0 .15rem rgba(255,255,255,calc(.8 * var(--shrink))));
  transition: none;
}

/* 導覽項縮小字距與 padding */
#nav-uj .tt_all a,
#nav-uj .icon_all a {
  transform: scale(calc(1 - 0.15 * var(--shrink)));
  transition: none;
}

/* 桌機以外不要縮 */
@media (max-width: 991.98px) {
  #nav-uj {
    transform: none;
    background-color: rgba(20, 3, 41, calc(0.78 * var(--shrink)));
  }
}
/* ========== 導覽列平滑縮放（取代 .scrolled 突兀效果） ========== */




   

/* *************************************** 
   ========== 手機版 右側選單 ========== */
.navbar-light .navbar-toggler{
  width: 4rem;
  border: none;
  filter: drop-shadow(0px 0px 3px #fff);
}

#div_frame_headmenu  .navbar-light  .navbar-toggler:focus{
  box-shadow:none !important;
}
#div_frame_headmenu  .navbar-light  .navbar-toggler:focus-visible{
  box-shadow:none !important;
  border: none !important;
}


  /*手機版 語系*/
  #language_mb #langDropdownMbIndex{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ee6a8c;
    width: 100%;
    color: #fff;
    font-size: 15px;
    padding: 0 10px 0 0px !important;
    border-radius: 50px;
  }
  #langDropdownMbIndex img{
    width: 25px;
  }


.offcanvas-body{
  background: rgb(251 237 246);
  text-align: center;
  /* overflow-y:unset; */
  flex: 1 1 auto;    /* 讓 body 自動撐開剩餘空間 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 2rem; /* 避免內容被底部遮住 */
  }

#ujOffcanvas .offcanvas-header {
    flex: 0 0 auto;
    padding-top: 1rem;
  }


.offcanvas-body .tt_all{
    flex-direction:column;
}

.offcanvas-body .icon_all{
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.offcanvas-body .tt_all a{
    display: flex;
    justify-content: center;
    margin: 0rem 0;
}

.offcanvas-body .icon_all a{
    display: flex;
    justify-content: center;
    width: 30%;
}


/* Offcanvas 外觀 */
#ujOffcanvas {
  background: rgb(251 237 246);
  backdrop-filter: blur(6px);
  color: #fff;
  border-left: 1px solid rgb(245 135 200 / 60%);
  width: 65%;
  height: 100vh !important;            /* 高度填滿整個螢幕 */
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;                    /* 超出內容可捲動 */
}

.offcanvas-end{
  width: auto;
}

#ujOffcanvas .nav-link {
  color: #fff;
  font-weight: 500;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
}

#ujOffcanvas .nav-link:hover {
  filter: drop-shadow(0 0 6px #e680fd);
}

#ujOffcanvas .tt_all{
  gap: 1rem;
}

#ujOffcanvas .tt_all img {
  width: 140px;
  height: auto;
  transition: filter .2s ease;
}

#ujOffcanvas .tt_all a:hover img,
#ujOffcanvas .icon_all a:hover img {
  filter: drop-shadow(2px 4px 6px #fd80ec) blur(.3px);
}

#ujOffcanvas .icon_all{
  width: 100%;
}

#ujOffcanvas .icon_all img {
  width: 40px; /* 縮小貼合手機 */
}

#ujOffcanvas .icon_all a {
    padding: 10px 7px;
}

/* 手機版：左 Close X 右漢堡對稱 */
.navbar .navbar-close {
  padding: 0.25rem;
  line-height: 1;
  /* close 深色背景清楚 */
  background: transparent;
  border: 0;
}
.offcanvas-header .btn-close{
  width: 1.5rem;
  height: auto;
  padding: none;
}

/* 若navbar 背景偏深，使用白色 close 圖示 */
.navbar .btn-close.btn-close-white {
  filter: invert(1) grayscale(100%);
}
/* ========== 手機版 右側選單 ========== */











/* ========== Mobile Offcanvas Nav ========== */

@media (max-width: 1441px) {
  .txt_nav_menu{
    font-size: 17px;
  }
}

@media (max-width: 1281px) {
  .icon_all .socail{
    height: auto;
  }
  #language_pc #langDropdown{
    padding: 3px 10px !important;
  }
  #language_pc #langDropdown img{
    display: none;
  }
}

@media (max-width: 1025px) {
  .offcanvas-body{
    align-items: center;
    
  }
  #ujOffcanvas .tt_all{
    gap: .5rem;
  }
  .offcanvas-body .tt_all a{
    margin: 0 auto;
  }
  .icon_all{
    gap: .5rem;
  }
}


@media (max-width: 991.98px) {
  #nav-uj{
    width: 100%;
  }
  .nav-logo img{
    max-width: 150px;
  }
  #nav-menu{
    width: auto;
  }

  .nav_mb,#download_mb{
    display: flex;
  }
  #download_mb{
    max-width: 80px;
  }


  .tt_all,
  .icon_all_pc { display: none !important;}

  .icon_all_mb a.socail{ display: none !important;}

  .tt_all{
    width: auto;
  }


  #ujOffcanvas .icon_all a{
    width: auto;
    padding: 5px;
  }

  .icon_all_mb{
    display: flex !important;
  }

  #ujOffcanvas .tt_all,
  #ujOffcanvas .icon_all {
    display: flex !important;
    align-items: center;
    padding-right: 0;
    margin-right: 0;
  }

  #language_mb { 
    display: flex !important;
  }
  #language_mb #langDropdownMbIndex{
    padding: 0 0px 0 0px !important;
    margin-right: 7px;
  }
  #langDropdownMbIndex img{
    width: 45px;
  }
  #language_mb .lang-menu{
    width: auto;
  }

  .dropdown-menu-end[data-bs-popper]{
    transform: translateX(25%);
  }
  .modal-backdrop.show{
    background: #9adcfba5;
    filter: blur(2px);
  }
}



@media (max-width: 769px) {  
  #nav-uj.scrolled .container{
    width: 100%;
    height: 75px;
  }

  #nav-uj {
    transform: translateY(0);  /* 預設不移動 */
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 1;
  }
  #nav-uj .nav-logo img,
  #nav-uj .tt_all a,
  #nav-uj .icon_all a {
    transform: none !important;
    opacity: 1 !important;
  }
  #nav-uj.nav-hide {
    transform: translateY(-100%);
    opacity: 0;
  }


}

@media (max-width: 681px) {  
  .nav-logo img{
    max-width: 130px;
  }
}



@media (max-width:540px) {
  #nav-uj .container{
    width: 100%;
  }
  #ujOffcanvas .tt_all img{
    width: 120px;
  }
}


@media (max-width: 431px) {

  #ujOffcanvas .icon_all img {
    width: 35px;
  }

}



/* ========================================
   UJJ Shift - Offcanvas close button
======================================== */
#ujOffcanvas .offcanvas-close {
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#ujOffcanvas .offcanvas-close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   UJJ Shift - Header stabilization
   Scope all overrides to #div_frame_headmenu / #nav-uj so the
   activity page and Bootstrap components do not affect each other.
============================================================ */

#div_frame_headmenu {
  position: relative;
  z-index: 1080;
}

#div_frame_headmenu #nav-uj {
  min-height: 72px;
}

#div_frame_headmenu #nav-uj > .container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 5rem;
  padding-right: 5rem;
}

#div_frame_headmenu #nav-menu {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 1rem;
}

/* Desktop navigation ------------------------------------------------ */
@media (min-width: 992px) {
  /* #div_frame_headmenu #nav-uj {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    backdrop-filter: blur(8px) saturate(135%);
    box-shadow: 0 3px 12px rgba(136, 73, 96, .10);
  } */

  #div_frame_headmenu .nav-logo {
    flex: 0 0 auto;
  }

  #div_frame_headmenu .nav-logo img {
    display: block;
    width: 150px;
    max-width: 150px;
    margin: 0;
  }

  #div_frame_headmenu #nav-menu {
    display: flex;
  }

  #div_frame_headmenu #nav-menu > .tt_all {
    display: flex !important;
    flex: 1 1 auto;
    width: auto;
    max-width: 760px;
    margin: 0;
    gap: clamp(.7rem, 1.4vw, 1.6rem);
    justify-content: flex-end;
    align-items: center;
  }

  #div_frame_headmenu #nav-menu > .tt_all .txt_nav_menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .2rem;
    white-space: nowrap;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.2;
    text-decoration: none;
  }

  #div_frame_headmenu #nav-menu > .icon_all_pc {
    display: flex !important;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    gap: 5px;
    justify-content: flex-end;
  }

  #div_frame_headmenu .nav_mb {
    display: none !important;
  }

  /* Offcanvas is a mobile-only component. Explicitly remove it from
     desktop layout even if another stylesheet changes Bootstrap rules. */
  #div_frame_headmenu #ujOffcanvas {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #div_frame_headmenu + .offcanvas-backdrop,
  body > .offcanvas-backdrop {
    display: none;
  }
}

/* Mobile / tablet navigation ---------------------------------------- */
@media (max-width: 991.98px) {
  #div_frame_headmenu #nav-uj {
    min-height: 64px;
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    backdrop-filter: blur(8px) saturate(135%);
    box-shadow: 0 3px 12px rgba(136, 73, 96, .10);
  }

  #div_frame_headmenu #nav-uj > .container {
    min-height: 64px;
    padding-left: .8rem;
    padding-right: .8rem;
  }

  #div_frame_headmenu .nav-logo img {
    width: 118px;
    max-width: 118px;
    margin: 0;
  }

  #div_frame_headmenu #nav-menu {
    flex: 0 0 auto;
    width: auto;
  }

  #div_frame_headmenu .nav_mb {
    display: flex !important;
    align-items: center;
    gap: .35rem;
  }

  #div_frame_headmenu #nav-menu > .tt_all,
  #div_frame_headmenu #nav-menu > .icon_all_pc {
    display: none !important;
  }

  /* Restore Bootstrap offcanvas behavior on mobile. */
  #div_frame_headmenu #ujOffcanvas {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: min(82vw, 340px);
    height: 100dvh !important;
    min-height: 100dvh !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    z-index: 1085;
  }

  #div_frame_headmenu #ujOffcanvas.show,
  #div_frame_headmenu #ujOffcanvas.showing {
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  #div_frame_headmenu #ujOffcanvas.hiding {
    visibility: visible;
    pointer-events: none;
  }

  #div_frame_headmenu #ujOffcanvas .offcanvas-body {
    width: 100%;
    padding: .5rem 1rem 2rem;
  }

  #div_frame_headmenu #ujOffcanvas .tt_all {
    display: flex !important;
    width: 100%;
    margin: 0;
    gap: 0;
  }

  #div_frame_headmenu #ujOffcanvas .tt_all .txt_nav_menu {
    width: 100%;
    padding: .95rem .5rem;
    border-bottom: 1px solid rgba(238, 106, 140, .16);
    text-decoration: none;
  }

  #div_frame_headmenu #ujOffcanvas .icon_all {
    display: flex !important;
    width: 100%;
    margin-top: 1rem;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  #div_frame_headmenu #nav-uj,
  #div_frame_headmenu #nav-uj > .container {
    min-height: 58px;
  }

  #div_frame_headmenu .nav-logo img {
    width: 104px;
    max-width: 104px;
  }

  #div_frame_headmenu .navbar-light .navbar-toggler {
    width: 3.25rem;
    padding: .2rem;
  }

  #div_frame_headmenu #langDropdownMbIndex img {
    width: 36px;
  }
}