/* === 主選單容器 === */
.sm-mint {
  border-top: 2px solid #e2e2e2;
  border-bottom: 2px solid #e2e2e2;
  background: #fff;
}

/* === 第一層選單項目（主選單） === */
.sm-mint > li {
  float: left;
  position: relative;
}

.sm-mint > li:first-child {
  border-top: 0;
}

/* === 第一層連結樣式 === */
.sm-mint > li > a {
  display: block;
  padding: 13px 20px;
  padding-right: 58px; /* 預留箭頭空間 */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
  color: #333;
  position: relative;
}

.sm-mint > li > a:hover,
.sm-mint > li > a:focus,
.sm-mint > li > a:active {
  background: #333;
  color: #ff0;
  border-radius: 4px 4px 0 0;
}

/* === 狀態樣式 === */
.sm-mint > li > a.current {
  font-weight: bold;
}

.sm-mint > li > a.disabled {
  color: #cccccc;
  pointer-events: none;
}

/* === 子選單箭頭（僅限主選單） === */
.sm-mint > li > a .sub-arrow {
  position: absolute;
  top: 50%;
  right: 4px;
  margin-top: -17px;
  width: 34px;
  height: 34px;
  font: bold 14px/34px monospace !important;
  text-align: center;
  background: rgba(227, 227, 227, 0.2);
  border-radius: 4px;
}

.sm-mint > li > a .sub-arrow::before {
  content: '+';
}

.sm-mint > li > a.highlighted .sub-arrow::before {
  content: '-';
}

/* === 桌面版調整 === */
@media (min-width: 1024px) {
  .sm-mint {
    border-top: 0;
    background: transparent;
  }

  .sm-mint > li > a {
    padding: 14px 20px;
    color: #fff;
  }

  .sm-mint > li > a:hover,
  .sm-mint > li > a:focus,
  .sm-mint > li > a:active {
    background: #333;
    color: #ff0;
  }

  .sm-mint > li > a.highlighted {
    background: #F4F4F4;
    color: #333;
    box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
  }

  .sm-mint > li > a.disabled {
    background: transparent;
    color: #cccccc;
    box-shadow: none;
  }
}