/* smartmenus-custom.css */

/* 依官方建議：先 @import 套件本體，客製樣式寫在下面。
   這支對應 configurator 的設定：offcanvas-left + offcanvas-only。 */
@import url("./smartmenus-only-layout-and-theme-collapsible.css");

/* --- 客製區 --------------------------------------------------------------
   SmartMenus 2.0 的可調參數是 CSS 變數，且定義在 .sm-navbar 上（不是 :root），
   所以要覆寫請針對 .sm-navbar 或個別 navbar 的 id。
------------------------------------------------------------------------- */

#navbar1 {
  /* 滑出面板寬度，預設 300px */
  --sm-offcanvas-width: 280px;
  /* 遮罩底色，預設 rgba(0,0,0,.3) */
  --sm-offcanvas-overlay-bg: rgba(0, 0, 0, 0.5);
}

/* 20260824限改+更換選單：offcanvas-only 版型的 nav 本身不該畫出橫條。
   套件預設 .sm-navbar 是 display:flex + padding:6px + 淺灰底(#f7f7f7)，
   而這個版型底下三個子元素（漢堡鈕、遮罩、滑出面板）全都是 position:fixed，
   nav 只剩上下各 6px 的 padding，在版面上就變成一條 12px 的淺色橫條
   （英文站首頁的 nav 是獨立區塊，這條橫條會很明顯）。 */
#navbar1 {
  padding: 0;
  background: transparent;
  border: 0;
}

/* --- 顯示範圍 -------------------------------------------------------------
   960px 以上走 mainmenu.jsp 的橫向選單（nav#navigation），手機選單整個隱藏。
   這是舊版 style1.css 裡「#menu{display:none}」那條規則的接手者。 */
@media screen and (min-width: 960px) {
  #navbar1 {
    display: none;
  }
}

/* --- 漢堡鈕位置與外觀 -----------------------------------------------------
   20260803修改 本站（檢查局）的漢堡鈕樣式與其他局處不同：
   style1.css 的「#top a, .top a」是 45x40 的橘底方塊（#ee771d），
   position:absolute; top:0; left:0，圖示以 background-position:9px center
   靠左擺放；而 #top 又被 jquery.sticky.js 釘在視窗頂端，實際效果就是
   固定在畫面左上角。這裡用 position:fixed 直接重現。

   為什麼不把 nav 搬進 #top：那條「#top a, .top a」是後代選擇器，會命中
   #top 底下每一個 <a>，選單面板裡所有連結都會被畫成橘色方塊。 */
@media screen and (max-width: 959px) {
  #navbar1 > .sm-toggler {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0;
  }

  /* 沿用舊版的漢堡鈕外觀，取代 SmartMenus 用 border 畫的三條線 */
  #navbar1 > .sm-toggler .sm-toggler-anchor--show {
    width: 45px;
    height: 40px;
    background-color: #ee771d;
    background-image: url(/images/smenu.png);
    background-repeat: no-repeat;
    background-position: 9px center;
  }

  #navbar1 > .sm-toggler .sm-toggler-icon--show {
    display: none;
  }
}

/* 面板內的關閉鈕靠右（.sm-toggler-icon 是 block 元素，text-align 對它無效，用 flex） */
#navbar1 .sm-offcanvas > .sm-toggler {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}