/* 靜態 landing 頂部選單在 960～1199px 的緊湊排版。
 * 各頁的選單樣式是各自複製一份（pro／faq／seminar／training-management／marketing…），
 * 新增「方案比較」後選單在這個寬度區間放不下，右側「企業會員登入」會被擠出畫面。
 * 這個檔案要在各頁自己的 style.css 之後載入。≥1200px 與 ≤959px（漢堡選單）不受影響。 */
@media screen and (min-width: 960px) and (max-width: 1199px) {
  .colorlib-nav ul li {
    letter-spacing: 0;
  }

  .colorlib-nav ul > li,
  .colorlib-nav ul > a {
    margin-left: 6px;
  }

  .colorlib-nav ul li a {
    padding: 4px 6px;
  }
}

/* 960～1023px 再縮一階，否則仍差約 46px */
@media screen and (min-width: 960px) and (max-width: 1023px) {
  .colorlib-nav ul li {
    font-size: 15px;
  }

  .colorlib-nav ul > li,
  .colorlib-nav ul > a {
    margin-left: 2px;
  }

  .colorlib-nav ul li a {
    padding: 4px 5px;
  }
}

/* 820～959px：faq（含 cate1～7）、seminar 的選單原本在 819px 才切成漢堡選單，
 * 其他頁（pro／plan／training-management／marketing）是 959px。這段區間完整選單放不下，
 * 右側按鈕會被切掉，所以統一成 ≤959px 用漢堡選單（規則同 pro 的 ≤959px 設定）。
 * 其他頁在這個區間本來就是這些規則，重複套用不影響。 */
@media screen and (min-width: 820px) and (max-width: 959px) {
  .colorlib-nav .top-menu {
    min-height: 58px;
  }

  .colorlib-nav .nav-logo {
    margin-left: 20px;
    width: 188px;
  }

  .colorlib-nav .menu-1 {
    display: none;
  }

  .colorlib-nav ul {
    margin-left: 0;
  }

  /* 右側「登入」按鈕（faq／seminar 的 .mb-show 在 ≥820px 被隱藏） */
  .colorlib-nav .menu-mbshow.mb-show {
    display: block !important;
  }

  #colorlib-offcanvas {
    display: block;
  }

  #colorlib-offcanvas ul li {
    font-size: 16px;
    padding: 6px 4px 6px 16px;
  }

  .colorlib-nav-toggle {
    display: block;
  }
}