/* ============================================================
   主選單 Header 樣式（完整可編輯版 v3）
   逐字抽取自 global.css：頂層取 .nav-course* 規則；@media 含 nav-course 者整塊照抄
   （media 內可能夾帶少數非 header 規則，為與原檔完全同值的複本，可放心）
   此檔最後載入 → 這裡的值蓋過 global.css 同名規則
   ⚠ global.css 內仍有原始副本：請一律改這裡，不要兩邊改
   ============================================================ */

.nav-course {
  background-color: #2D353D;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.admin-bar .nav-course {
  top: 32px;
  transition: top 0.15s;
}

@media (max-width: 782px) {
  .admin-bar .nav-course {
    top: 46px;
  }
}

.nav-course__inner { display: none; }

.nav-course__top { display: none; }

.nav-course__bottom { display: none; }

.nav-course__bar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 10px 20px;
  gap: 24px;
  box-sizing: border-box;
}

.nav-course__logo {
  flex-shrink: 0;
}

.nav-course__logo-img {
  height: auto !important;
  width: 180px !important;
  display: block;
}

.nav-course__bar .nav-course__links {
  flex: 1;
  justify-content: center;
}

.nav-course__dropdown--vertical {
  flex-direction: column;
  min-width: 180px;
  padding: 8px 0;
  background: #515C65;
  border-radius: 4px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.1);
  margin-top: 14px;
}

.nav-course__dropdown--vertical .nav-course__dropdown-item {
  display: block;
  padding: 16px 19px;
  color: #A2FFFA;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.nav-course__dropdown--vertical .nav-course__dropdown-item:hover {
  background: #3B464F;
  color: #39FFF5;
}

.nav-course__has-sub2 {
  position: relative;
  cursor: pointer;
}

.nav-course__has-sub2 > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 19px;
  color: #A2FFFA;
  font-family: Arial, sans-serif;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.nav-course__has-sub2:hover > span,
.nav-course__has-sub2.is-sub2-open > span {
  background: #3B464F;
  color: #39FFF5;
}

.nav-course__dropdown.nav-course__dropdown--sub2 {
  display: none !important;
  position: absolute;
  left: 100% !important;
  top: 0 !important;
  transform: none !important;
  margin-top: 0 !important;
  flex-direction: column;
  min-width: 280px;
  padding: 8px 0;
  background: #515C65;
  border-radius: 4px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.1);
  z-index: 210;
}

.nav-course__has-sub2:hover > .nav-course__dropdown--sub2,
.nav-course__has-sub2.is-sub2-open > .nav-course__dropdown--sub2 {
  display: flex !important;
  flex-direction: column;
}

.nav-course__dropdown--sub2 a {
  display: block;
  padding: 16px 19px;
  color: #A2FFFA;
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.nav-course__dropdown--sub2 a:hover {
  background: #3B464F;
  color: #39FFF5;
}

.nav-course__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-course__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0 0 0 48px;
  padding: 0;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: center;
}

.nav-course__right {
  margin-left: auto;
}

.nav-course__links .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #515C65;
  border-radius: 4px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.1);
  margin-top: 14px;
  padding: 8px 0;
  list-style: none;
  z-index: 200;
  overflow: visible;
}

.nav-course__links .menu-item-has-children {
  position: relative;
}

.nav-course__links .menu-item-has-children:hover > .sub-menu {
  display: block;
}

.nav-course__links .menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-course__links .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-top: 0;
}

.nav-course__links .sub-menu a {
  display: block;
  padding: 16px 19px;
  color: #A2FFFA;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.nav-course__links .sub-menu a:hover {
  background: #3B464F;
  color: #39FFF5;
}

.nav-course__links .sub-menu .menu-item-has-children > a::after {
  content: '▸';
  float: right;
  margin-left: 10px;
}

.nav-course__links > li > a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #39FFF5;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 2px;
  transition: color 0.3s;
  white-space: nowrap;
  position: relative;
}

.nav-course__links > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #39FFF5;
  transition: width 0.3s;
}

.nav-course__links > li > a:hover::after {
  width: 100%;
}

.nav-course__links > li > a:hover {
  color: #39FFF5;
}

.nav-course__links a {
  text-decoration: none;
  white-space: nowrap;
}

.nav-course__links > li {
  position: relative;
}

.nav-course__caret {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  transition: transform 0.2s;
}

.nav-course__has-sub:hover .nav-course__caret {
  transform: rotate(180deg);
}

.nav-course__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform: none;
  min-width: 200px;
  background: #515C65;
  border: none;
  overflow: visible;
  border-radius: 8px;
  padding: 12px 0;
  margin-top: 12px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.nav-course__has-sub:hover > .nav-course__dropdown {
  display: flex;
  flex-direction: column;
}

.nav-course__has-sub::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-course__dropdown-item,
.nav-course__sub-group a {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;
}

.nav-course__dropdown-item:hover,
.nav-course__sub-group a:hover {
  color: var(--color-accent);
  background: rgba(57,255,245,0.08);
}

.nav-course__sub-label {
  display: block;
  padding: 10px 20px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}

.nav-course__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-white);
  flex-shrink: 0;
}

.nav-course__greeting {
  white-space: nowrap;
}

.nav-course__auth-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

body.academy-custom-page .nav-course__auth-btn:hover {
  background-color: var(--color-accent);
  color: #1a1a1a;
}

.nav-course__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.nav-course__user-wrap {
  position: relative;
}

.nav-course__user-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #39FFF5;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  padding: 8px 2px;
  position: relative;
}

.nav-course__user-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #39FFF5;
  transition: width 0.3s;
}

.nav-course__user-link:hover::after {
  width: 100%;
}

.nav-course__login-link {
  color: #39FFF5;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-course__user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: #515C65;
  border-radius: 4px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.1);
  margin-top: 14px;
  padding: 8px 0;
  z-index: 200;
}

.nav-course__user-wrap:hover .nav-course__user-dropdown {
  display: block;
}

.nav-course__user-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-course__user-dropdown a {
  display: block;
  padding: 16px 19px;
  color: #A2FFFA;
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.nav-course__user-dropdown a:hover {
  background: #3B464F;
  color: #39FFF5;
}

.nav-course__cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-text-white, #fff);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-course__cart-btn:hover {
  color: var(--color-accent, #39fff5);
}

.nav-course__cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #f8ee36;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-course__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-course__burger {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-white);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.nav-course__burger-close { display: none; }

.nav-course.is-open .nav-course__burger-open { display: none; }

.nav-course.is-open .nav-course__burger-close { display: block; }

.nav-course__mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  /* Global: prevent horizontal overflow + bottom padding for fixed buy bar */
  body.academy-custom-page {
    overflow-x: hidden;
    padding-bottom: 60px;
    padding-top: 56px; /* Compensate for fixed nav */
  }
  .admin-bar.academy-custom-page {
    padding-top: 102px; /* 56px nav + 46px mobile admin bar */
  }

  /* Mobile header: fixed at top */
  .nav-course {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  .admin-bar .nav-course {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
  .nav-course__inner {
    height: 56px;
    padding: 0 20px;
  }
  /* Mobile bar layout: logo 左 + 購物車/漢堡 右，space-between 撐開 */
  .nav-course__bar {
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
  }
  .nav-course__logo {
    width: auto;
  }
  .nav-course__logo-img {
    width: 130px !important;
  }
  /* Hide desktop nav links on mobile */
  .nav-course__links {
    display: none;
  }
  /* Mobile: 隱藏 user dropdown（漢堡選單有替代），保留購物車 */
  .nav-course__user-wrap,
  .nav-course__login-link {
    display: none;
  }
  .nav-course__right {
    margin-left: auto;
    gap: 10px;
  }
  /* Show hamburger */
  .nav-course__burger {
    display: block;
  }

  /* Mobile dropdown menu */
  .nav-course.is-open .nav-course__mobile-menu {
    display: block;
  }
  .nav-course__mobile-menu {
    background: #2D353D;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 16px 20px 24px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .nav-course__mobile-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-course__mobile-links > li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-course__mobile-links > li > a,
  .nav-course__mobile-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-white);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-course__mobile-sub-toggle .nav-course__caret {
    transition: transform 0.2s;
  }
  .nav-course__mobile-sub-toggle.is-open .nav-course__caret {
    transform: rotate(180deg);
  }
  .nav-course__mobile-sub {
    display: none;
    padding: 0 0 12px 12px;
  }
  .nav-course__mobile-sub.is-open {
    display: block;
  }
  .nav-course__mobile-sub a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #ccc;
    text-decoration: none;
  }
  .nav-course__mobile-sub a:hover {
    color: var(--color-accent);
  }
  .nav-course__mobile-sub .nav-course__sub-label {
    padding: 12px 0 4px;
    border-top: none;
    margin-top: 0;
  }
  /* Section header in flat mobile menu (e.g. 實體課程 / 線上課程 / 更多) */
  .nav-course__mobile-section {
    padding: 14px 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(57, 255, 245, 0.75);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: none !important;
    border-top: 1px solid rgba(57, 255, 245, 0.15);
    margin-top: 8px;
    list-style: none;
  }
  .nav-course__mobile-section:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
  .nav-course__mobile-section--admin {
    color: #ff9800 !important;
    border-top-color: rgba(255, 152, 0, 0.35) !important;
  }
  .nav-course__mobile-user {
    margin-top: 0;
    text-align: left;
  }
  .nav-course__mobile-user .nav-course__auth-btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }
  .footer-site {
    padding: 32px 20px 0;
  }
  .footer-site__inner {
    flex-direction: column;
    gap: 32px;
  }
  .footer-site__brand {
    max-width: 100%;
  }

  /* Side cart — 手機版滿版但讓出 header（2026-07-17）：
     容器從 header 底下開始，header 保持可點可導覽；
     面板高度 = 容器剩餘高度，底部不會被切掉 */
  .side-cart {
    top: 56px; /* 手機版 header 高度 */
  }
  .admin-bar .side-cart {
    top: calc(56px + var(--wp-admin--admin-bar--height, 46px));
  }
  .side-cart__panel {
    top: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: translateX(100%);
  }
  .side-cart.is-open .side-cart__panel {
    transform: translateX(0);
  }
  .side-cart__header {
    padding: 16px 20px;
  }
  .side-cart__body {
    padding: 12px 20px;
  }
  .side-cart__footer {
    padding: 12px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 769px) {
  .nav-course__bar {
    max-width: 1170px; /* 2026-07-20 用戶指定：header 內容寬統一 1170 */
  }
  .nav-course__bar .nav-course__links {
    justify-content: flex-end; /* A 站選單靠右，logo 與選單間留大空 */
  }
  .nav-course__links {
    gap: 31px; /* A 站項目視覺間距 35px（扣掉 a 的左右 padding 2+2）*/
  }
  .nav-course__logo-img {
    width: 160px !important; /* A 站 logo 寬 */
  }
}

.nav-course__user-wrap .nav-course__user-link {
  color: #39FFF5 !important;
}

/* ── 2026-07-17: 手機選單對照 A 站 — 移除項目分隔線、子選單收合樣式 ── */
@media (max-width: 768px) {
  .nav-course__mobile-links > li,
  .nav-course__mobile-links > li > a,
  .nav-course__mobile-sub li,
  .nav-course__mobile-sub a {
    border: none !important;
  }
  .nav-course__mobile-links > li > a,
  .nav-course__mobile-sub-toggle {
    padding: 16px 0;
    font-size: 16px;
  }
  .nav-course__mobile-sub-toggle {
    gap: 10px;
    justify-content: flex-start; /* 跟 A 站一樣：文字後緊跟小箭頭 */
  }
  .nav-course__mobile-sub a {
    padding: 12px 0;
    display: block;
  }
  .nav-course__sub-label {
    padding: 12px 0 4px;
    font-size: 13px;
    color: var(--color-accent, #39fff5);
  }
}
/* 子選單去除預設圓點 */
@media (max-width: 768px) {
  .nav-course__mobile-sub {
    list-style: none;
    margin: 0;
  }
  .nav-course__mobile-sub li {
    list-style: none;
  }
}
/* ── 2026-07-17: 手機漢堡選單 字型/排版 對齊 A 站（量測值：行距52、字17px、字距2px、色#A2FFFA、面板#48515A、左縮排44px）── */
@media (max-width: 768px) {
  .nav-course__mobile-menu {
    background: #48515A;
    border-top: none;
    padding: 10px 24px 28px 44px;
  }
  .nav-course__mobile-links {
    padding: 0;
    margin: 0;
  }
  .nav-course__mobile-links > li > a,
  .nav-course__mobile-sub-toggle {
    color: #A2FFFA;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 2px;
    padding: 13px 0;
    line-height: 1.5;
  }
  .nav-course__mobile-sub-toggle .nav-course__caret {
    width: 11px;
    height: 16px; /* viewBox 320x512 等比 → 視覺約 11x7 實心▼，同 A 站 */
    margin-left: 12px;
  }
  .nav-course__mobile-sub a {
    color: #A2FFFA;
    font-size: 15px;
    letter-spacing: 1.5px;
    padding: 11px 0;
  }
  .nav-course__sub-label {
    color: var(--color-accent, #39fff5);
    letter-spacing: 1.5px;
  }
  /* 恢復管理員身份維持橘色警示（原樣式 !important 不受影響）*/
}
/* ── 2026-07-17: 子選單第二層收合（同 A 站）＋展開父項整列深色底 ── */
@media (max-width: 768px) {
  .nav-course__mobile-sub-toggle {
    margin: 0 -24px 0 -44px;
    padding-left: 44px;
    padding-right: 24px;
    transition: background 0.2s;
  }
  .nav-course__mobile-sub-toggle.is-open {
    background: rgba(35, 42, 49, 0.55); /* A 站展開列的深色底 */
  }
  .nav-course__mobile-sub-toggle--lv2 {
    margin-left: -28px; /* 對齊二層縮排（父層已縮 16px）*/
    padding-left: 28px;
    font-size: 16px;
  }
  .nav-course__mobile-sub {
    padding: 0 0 8px 16px;
  }
  .nav-course__mobile-sub--lv2 {
    padding-left: 14px;
  }
  .nav-course__mobile-sub--lv2 a {
    font-size: 15px;
  }
}
/* ── 2026-07-17: 子選單 0.3s 下拉動畫（height 動畫；JS 控制展開高度）── */
@media (max-width: 768px) {
  .nav-course__mobile-sub {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }
  .nav-course__mobile-sub.is-open {
    display: block;
  }
}
/* 收合後不留底部內距殘隙（把留白移進列表內、跟著高度動畫收合）*/
@media (max-width: 768px) {
  .nav-course__mobile-sub {
    padding-bottom: 0;
  }
  .nav-course__mobile-sub > li:last-child {
    padding-bottom: 10px;
  }
}
/* 子選單一般連結（課程總覽等）也用 A 站淡青色 */
@media (max-width: 768px) {
  .nav-course__mobile-menu .nav-course__mobile-sub a {
    color: #A2FFFA;
  }
}
/* ── 2026-07-17: 漢堡面板展開加 0.3s 下滑動畫（與 A 站元件一致；子選單動畫既有）── */
@media (max-width: 768px) {
  .nav-course__mobile-menu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-top: 0;
    padding-bottom: 0;
  }
  .nav-course.is-open .nav-course__mobile-menu {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 28px;
  }
}
/* 帶子選單的第一層項目加粗 100（500），第二層維持 400 */
@media (max-width: 768px) {
  .nav-course__mobile-sub-toggle {
    font-weight: 500;
  }
  .nav-course__mobile-sub-toggle--lv2 {
    font-weight: 400;
  }
}
/* ============================================================
   Footer 對齊 A 站（2026-07-20 上線切換前置）
   1) 社群 icon 加圓框、icon 白色（hover 青）
   2) 版權列左右對齊（© 左、公司右），拿掉置中與分隔線
   ============================================================ */
.footer-site__social a {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  color: #fff;
}
.footer-site__social a:hover {
  color: #39fff5;
  border-color: #39fff5;
  opacity: 1;
}
.footer-site__bottom {
  max-width: var(--content-width);
  margin: 40px auto 0;
  padding: 0 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  text-align: left;
}
.footer-site__divider { display: none; }
.footer-site__bottom p { margin: 0; font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: 0.5px; }
.footer-site__company { font-size: 12px; color: rgba(255,255,255,.5); }