/* 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);
}

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

/* --- 漢堡鈕位置 -----------------------------------------------------------
   舊版漢堡是 style1.css 的「#top a, .top a」，position:absolute; top:10px;
   left:3px，放在最上方深色列 #top 裡；而 #top 又被 jquery.sticky.js 釘在
   視窗頂端，實際效果就是固定在畫面左上角。這裡用 position:fixed 直接重現。

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

  /* 沿用舊版的漢堡圖，取代 SmartMenus 用 border 畫的三條線 */
  #navbar1 > .sm-toggler .sm-toggler-anchor--show {
    width: 30px;
    height: 30px;
    background: url(/images/smenu.png) center center no-repeat transparent;
  }

  #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;
}