/* =========================================================
   mod_custommenu － 水平 / 垂直、多層子選單
   顏色由模組參數以 CSS 變數注入，以下為預設值
   ========================================================= */
.cm {
  --cm-bg: #24445c;
  --cm-color: #ffffff;
  --cm-hover-bg: #315a78;
  --cm-hover-color: #ffffff;
  --cm-sub-bg: #ffffff;
  --cm-sub-color: #22313f;
  --cm-sub-hover-bg: #eaf1f5;
  --cm-accent: #e0b84c;
  --cm-radius: 6px;
  --cm-indent: 0px;
  --cm-speed: .2s;

  position: relative;
  box-sizing: border-box;
  background: var(--cm-bg);
  color: var(--cm-color);
  border-radius: var(--cm-radius);
  font-size: 1rem;
  line-height: 1.4;
}

.cm *,
.cm *::before,
.cm *::after { box-sizing: border-box; }

.cm ul { list-style: none; margin: 0; padding: 0; }
.cm__item { position: relative; margin: 0; }
.cm__row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  transition: background-color var(--cm-speed) ease, color var(--cm-speed) ease, box-shadow var(--cm-speed) ease;
}

/* ---------- 連結 / 標題 / 箭頭按鈕 ---------- */
.cm__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .75em 1em .75em calc(1em + var(--cm-indent));
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cm__link:hover,
.cm__link:focus { color: inherit; text-decoration: none; }
.cm__separator,
.cm__heading:not(button) { cursor: default; opacity: .75; }
.cm__heading .cm__chev { margin-left: auto; }
/* 項目圖片 */
.cm__link img,
.cm__img {
  display: block;
  flex: 0 0 auto;
  height: var(--cm-img-h, 1.4em);
  width: auto;
  max-width: none;
  border-radius: 3px;
  object-fit: contain;
}

/* Font Awesome 圖示 */
.cm__icon {
  flex: 0 0 auto;
  width: 1.2em;
  text-align: center;
  line-height: 1;
  color: var(--cm-icon-color, currentColor);
  transition: color var(--cm-speed) ease, transform var(--cm-speed) ease;
}
.cm .cm__icon::before { display: inline-block; }
.cm__row:hover .cm__icon { transform: scale(1.12); }

.cm__caret {
  flex: 0 0 auto;
  width: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* 箭頭：預設朝下 */
.cm__chev {
  display: inline-block;
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform var(--cm-speed) ease;
  flex: 0 0 auto;
}

.cm a:focus-visible,
.cm button:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: -2px;
}

/* ---------- 第一層 ---------- */
/* 滑過：換背景色（「背景填滿」效果改由 ::before 滑入，所以這裡排除） */
.cm:not(.cm-fx-fill) .cm__level-1 > .cm__item > .cm__row:hover,
.cm:not(.cm-fx-fill) .cm__level-1 > .cm__item.is-open > .cm__row,
.cm--hover:not(.cm--mobile):not(.cm-fx-fill) .cm__level-1 > .cm__item:hover > .cm__row,
.cm--mobile .cm__level-1 > .cm__item > .cm__row:hover,
.cm--mobile .cm__level-1 > .cm__item.is-open > .cm__row {
  background: var(--cm-hover-bg);
  color: var(--cm-hover-color);
}
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item:first-child > .cm__row { border-radius: var(--cm-radius) 0 0 var(--cm-radius); }
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item:last-child > .cm__row { border-radius: 0 var(--cm-radius) var(--cm-radius) 0; }

/* 目前所在的主選單：以強調色標示 */
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row { box-shadow: inset 0 -3px 0 var(--cm-accent); }
.cm--vertical .cm__level-1 > .cm__item.active > .cm__row,
.cm--mobile .cm__level-1 > .cm__item.active > .cm__row { box-shadow: inset 3px 0 0 var(--cm-accent); }

/* ---------- 水平 ---------- */
.cm--horizontal:not(.cm--mobile) > .cm__level-1 { display: flex; flex-wrap: wrap; }
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__link { white-space: nowrap; }
.cm--align-center:not(.cm--mobile) > .cm__level-1 { justify-content: center; }
.cm--align-right:not(.cm--mobile) > .cm__level-1  { justify-content: flex-end; }
.cm--align-justify:not(.cm--mobile) > .cm__level-1 > .cm__item { flex: 1 1 0; }
.cm--align-justify:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__link { justify-content: center; }

/* ---------- 彈出式子選單（水平、垂直 flyout） ---------- */
.cm--popup:not(.cm--mobile) .cm__sub {
  --cm-indent: 0px;
  position: absolute;
  z-index: 1000;
  min-width: 13em;
  padding: .35em 0;
  background: var(--cm-sub-bg);
  color: var(--cm-sub-color);
  border-radius: var(--cm-radius);
  box-shadow: 0 12px 28px -8px rgba(15, 30, 45, .35), 0 0 0 1px rgba(15, 30, 45, .06);
  opacity: 0;
  visibility: hidden;
  /* 出現前的位置，依方向與效果由變數決定 */
  --cm-from-slide: translateY(8px);
  --cm-from-drop: scaleY(.6);
  --cm-from: var(--cm-from-slide);
  transform-origin: top center;
  transform: var(--cm-from);
  transition: opacity var(--cm-speed) ease, transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1), visibility 0s linear var(--cm-speed);
}

/* 水平：第二層在下方 */
.cm--horizontal.cm--popup:not(.cm--mobile) .cm__level-2 { top: 100%; left: 0; }
.cm--horizontal.cm--popup:not(.cm--mobile) .cm__level-2.cm__sub--left { left: auto; right: 0; }

/* 垂直第二層、以及所有第三層以後：在右側 */
.cm--vertical.cm--popup:not(.cm--mobile) .cm__level-2,
.cm--popup:not(.cm--mobile) .cm__sub .cm__sub {
  top: -.35em; left: 100%;
  --cm-from-slide: translateX(8px);
  --cm-from-drop: scaleX(.6);
  transform-origin: left top;
}
.cm--vertical.cm--popup:not(.cm--mobile) .cm__level-2.cm__sub--left,
.cm--popup:not(.cm--mobile) .cm__sub .cm__sub.cm__sub--left {
  left: auto; right: 100%;
  --cm-from-slide: translateX(-8px);
  transform-origin: right top;
}

/* 顯示 */
.cm--popup:not(.cm--mobile) .cm__item.is-open > .cm__sub,
.cm--popup.cm--hover:not(.cm--mobile) .cm__item:hover > .cm__sub,
.cm--popup.cm--hover:not(.cm--mobile) .cm__item:focus-within > .cm__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* 子選單項目 */
.cm--popup:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__row:hover,
.cm--popup:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__item.is-open > .cm__row,
.cm--popup.cm--hover:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__item:hover > .cm__row { background: var(--cm-sub-hover-bg); }
.cm--popup:not(.cm--mobile) .cm__sub .cm__link { padding-top: .6em; padding-bottom: .6em; }
.cm--popup:not(.cm--mobile) .cm__sub .cm__item.current > .cm__row { box-shadow: inset 3px 0 0 var(--cm-accent); font-weight: 600; }

/* 箭頭方向：彈出到右側的一律朝右 */
.cm--popup:not(.cm--mobile) .cm__sub .cm__chev,
.cm--vertical.cm--popup:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__chev { transform: rotate(-45deg); }
.cm--horizontal.cm--popup:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row .cm__chev { transform: translateY(.12em) rotate(225deg); }

/* ---------- 內嵌展開（垂直手風琴、手機版） ---------- */
.cm--accordion .cm__sub,
.cm--mobile .cm__sub {
  display: none;
  background: rgba(0, 0, 0, .14);
}
.cm--accordion .cm__item.is-open > .cm__sub,
.cm--mobile .cm__item.is-open > .cm__sub { display: block; }

.cm--accordion .cm__sub .cm__row:hover,
.cm--mobile .cm__sub .cm__row:hover { background: var(--cm-hover-bg); color: var(--cm-hover-color); }
.cm--accordion .cm__item.current > .cm__row,
.cm--mobile .cm__item.current > .cm__row { font-weight: 600; }
.cm--accordion .cm__item.is-open > .cm__row .cm__chev,
.cm--mobile .cm__item.is-open > .cm__row .cm__chev { transform: translateY(.12em) rotate(225deg); }

/* 逐層縮排 */
.cm__level-2 { --cm-indent: 1em; }
.cm__level-3 { --cm-indent: 2em; }
.cm__level-4 { --cm-indent: 3em; }
.cm__level-5 { --cm-indent: 4em; }

/* 垂直時項目之間細線 */
.cm--vertical .cm__level-1 > .cm__item + .cm__item,
.cm--mobile .cm__level-1 > .cm__item + .cm__item { border-top: 1px solid rgba(255, 255, 255, .08); }
.cm--vertical .cm__level-1 > .cm__item:first-child > .cm__row { border-radius: var(--cm-radius) var(--cm-radius) 0 0; }
.cm--vertical .cm__level-1 > .cm__item:last-child > .cm__row { border-radius: 0 0 var(--cm-radius) var(--cm-radius); }

/* ---------- 手機版漢堡按鈕 ---------- */
.cm__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: .7em;
  padding: .8em 1em;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cm__burger { position: relative; width: 1.2em; height: .9em; }
.cm__burger::before,
.cm__burger::after,
.cm__burger span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.cm__burger::before { top: 0; }
.cm__burger span { top: 50%; margin-top: -1px; }
.cm__burger::after { bottom: 0; }
.cm.is-expanded .cm__burger::before { transform: translateY(calc(.45em - 1px)) rotate(45deg); }
.cm.is-expanded .cm__burger span { opacity: 0; }
.cm.is-expanded .cm__burger::after { transform: translateY(calc(-.45em + 1px)) rotate(-45deg); }

.cm--mobile .cm__toggle { display: flex; }
.cm--mobile > .cm__level-1 { display: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.cm--mobile.is-expanded > .cm__level-1 { display: block; }
.cm--mobile .cm__level-1 > .cm__item > .cm__row { border-radius: 0 !important; }
.cm--mobile .cm__caret { width: 3em; }

/* =========================================================
   滑入效果
   ========================================================= */

/* ---------- 主選單：底線滑入（水平）／色條滑入（垂直） ---------- */
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--cm-accent);
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm--horizontal.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  left: .9em; right: .9em; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
}
.cm--vertical.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  left: 0; top: .45em; bottom: .45em; width: 3px;
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
}
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover::after,
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row::after,
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row::after,
.cm-fx-underline.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row::after { transform: none; }
/* 底線已標示目前位置，不再疊加色條 */
.cm.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row { box-shadow: none; }

/* ---------- 主選單：背景填滿（水平由下往上、垂直由左往右） ---------- */
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cm-hover-bg);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm--vertical.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::before {
  transform: scaleX(0);
  transform-origin: left;
}
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover::before,
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row::before,
.cm-fx-fill.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row::before { transform: none; }
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover,
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row,
.cm-fx-fill.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row { color: var(--cm-hover-color); }

/* ---------- 子選單出現方式 ---------- */
.cm--popup.cm-open-fade:not(.cm--mobile) .cm__sub { --cm-from: none; }
.cm--popup.cm-open-drop:not(.cm--mobile) .cm__sub { --cm-from: var(--cm-from-drop); }
.cm--popup.cm-open-none:not(.cm--mobile) .cm__sub { --cm-from: none; transition: none; }

/* 手風琴、手機版展開時 */
@keyframes cm-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cm--accordion .cm__item.is-open > .cm__sub,
.cm--mobile .cm__item.is-open > .cm__sub { animation: cm-reveal var(--cm-speed) ease; }
.cm-open-none .cm__item.is-open > .cm__sub { animation: none; }

/* ---------- 子選單項目：背景由左滑入 ---------- */
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cm-sub-hover-bg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover::before,
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__item.is-open > .cm__row::before,
.cm-subfx-slide.cm--popup.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row::before { transform: none; }

/* ---------- 子選單項目：左側色條滑入 ---------- */
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  pointer-events: none;
  background: var(--cm-accent);
  transform: scaleY(0);
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover::after,
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__item.is-open > .cm__row::after,
.cm-subfx-bar.cm--popup.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row::after { transform: none; }

/* 兩種子選單效果都讓文字往右滑一點 */
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__link,
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__link { transition: padding-left var(--cm-speed) ease; }
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover .cm__link,
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover .cm__link { padding-left: 1.4em; }

@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { transition: none !important; animation: none !important; }
}