/*
 * translogi-global.css
 * CSS được load trên TẤT CẢ trang — header height vars + mega menu.
 *
 * KIẾN TRÚC MENU:
 * - Plugin JS sở hữu toàn bộ control mở/đóng (mouseenter/mouseleave + delay).
 * - JS phát hiện item 3 cấp → thêm class .tprod-mega; mở → thêm .tprod-open.
 * - CSS dùng class (không phải :has()) → specificity ổn định, dễ override.
 */

/* ============================================================
   Header height CSS variable
   ============================================================ */
:root {
  --header-height: 60px;
  scroll-padding-top: 70px;
}
body.admin-bar {
  --header-height: 92px;
  scroll-padding-top: 102px;
}
body.tprod-product-page,
body.tprod-archive-page {
  --header-height: 80px;
  scroll-padding-top: 90px;
}
body.admin-bar.tprod-product-page,
body.admin-bar.tprod-archive-page {
  --header-height: 112px;
  scroll-padding-top: 122px;
}

/* ============================================================
   1. Chặn CSS :hover của theme — plugin JS điều khiển
   ============================================================ */
.main-navigation ul > li:hover > ul,
.tprod-nav__list  > li:hover > ul {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tắt ::before hover-bridge của theme cho top-level */
.main-navigation ul > li > ul::before,
.tprod-nav__list  > li > ul::before {
  display: none !important;
}

/* ============================================================
   2. Mega panel layout — CHỈ áp dụng cho item có class .tprod-mega
   (class do JS thêm khi phát hiện 3 cấp)
   ============================================================ */
.main-navigation li.tprod-mega > ul,
.tprod-nav__list  li.tprod-mega > ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;

  position: fixed !important;
  /* top + left KHÔNG dùng !important để JS có thể set inline style */
  top: var(--header-height, 60px);
  left: 0;
  right: auto !important;
  width: auto !important;
  min-width: 400px !important;
  max-width: calc(100vw - 24px) !important;

  padding: 0 !important;
  overflow: hidden !important;

  background: #fff !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
  border-top: 3px solid #43baff !important;
  border-radius: 0 0 10px 10px !important;
  z-index: 9999 !important;

  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

/* ============================================================
   3. Show sub-menu khi plugin thêm .tprod-open
   Specificity (0,3,2) > mega base (0,2,2) → ghi đè được visibility
   ============================================================ */
.main-navigation li.tprod-open.tprod-mega > ul,
.tprod-nav__list  li.tprod-open.tprod-mega > ul,
.main-navigation li.tprod-open > ul,
.tprod-nav__list  li.tprod-open > ul {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Khi cursor vẫn còn trên item lúc panel mở → đè rule :hover ở section 1 */
.main-navigation li.tprod-open:hover > ul,
.tprod-nav__list  li.tprod-open:hover > ul {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================================
   4. Cột cấp-2 của mega
   ============================================================ */
.main-navigation li.tprod-mega > ul > li,
.tprod-nav__list  li.tprod-mega > ul > li {
  flex: 0 0 300px !important;
  width: 300px !important;
  padding: 28px 32px !important;
  border-right: 1px solid #f0f0f0 !important;
  background: #fff !important;
}
.main-navigation li.tprod-mega > ul > li:last-child,
.tprod-nav__list  li.tprod-mega > ul > li:last-child {
  border-right: none !important;
}

/* Tiêu đề cột (link cấp-2 mega) */
.main-navigation li.tprod-mega > ul > li > a,
.tprod-nav__list  li.tprod-mega > ul > li > a {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #6b7280 !important;
  padding: 0 0 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 2px solid #43baff !important;
  background: transparent !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.main-navigation li.tprod-mega > ul > li > a:hover,
.tprod-nav__list  li.tprod-mega > ul > li > a:hover {
  color: #43baff !important;
  background: transparent !important;
  padding-left: 0 !important;
}

/* Ẩn mũi tên ở tiêu đề cột mega */
.main-navigation li.tprod-mega > ul > li.menu-item-has-children > a::after,
.tprod-nav__list  li.tprod-mega > ul > li.menu-item-has-children > a::after {
  display: none !important;
}

/* Sub-menu cấp-3 trong cột mega — inline, không float */
.main-navigation li.tprod-mega > ul > li > ul,
.tprod-nav__list  li.tprod-mega > ul > li > ul {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  transform: none !important;
  float: none !important;
}

.main-navigation li.tprod-mega > ul > li > ul > li,
.tprod-nav__list  li.tprod-mega > ul > li > ul > li {
  display: block !important;
  padding: 0 !important;
  position: static !important;
}

.main-navigation li.tprod-mega > ul > li > ul > li > a,
.tprod-nav__list  li.tprod-mega > ul > li > ul > li > a {
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1f2937 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 7px 10px !important;
  margin: 0 -10px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  border: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}
.main-navigation li.tprod-mega > ul > li > ul > li > a:hover,
.tprod-nav__list  li.tprod-mega > ul > li > ul > li > a:hover {
  color: #43baff !important;
  background: #f0f9ff !important;
  padding-left: 10px !important;
}

/* Ẩn pseudo "//" của theme trong mega cấp-3 */
.main-navigation li.tprod-mega > ul > li > ul > li > a::before,
.tprod-nav__list  li.tprod-mega > ul > li > ul > li > a::before,
.main-navigation li.tprod-mega > ul > li > ul > li > a::after,
.tprod-nav__list  li.tprod-mega > ul > li > ul > li > a::after {
  display: none !important;
}

/* ============================================================
   5. Mobile (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .main-navigation li.tprod-mega > ul,
  .tprod-nav__list  li.tprod-mega > ul {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: calc(100vw - 32px) !important;
    flex-direction: column !important;
    transform: translateY(-4px) !important;
  }
  .main-navigation li.tprod-mega > ul > li,
  .tprod-nav__list  li.tprod-mega > ul > li {
    flex: none !important;
    width: auto !important;
    padding: 12px 20px !important;
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .main-navigation li.tprod-mega > ul > li:last-child,
  .tprod-nav__list  li.tprod-mega > ul > li:last-child {
    border-bottom: none !important;
  }
  .main-navigation li.tprod-mega > ul > li > a,
  .tprod-nav__list  li.tprod-mega > ul > li > a {
    padding: 0 0 8px !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
    font-size: 12px !important;
  }
  .main-navigation li.tprod-mega > ul > li > ul > li > a,
  .tprod-nav__list  li.tprod-mega > ul > li > ul > li > a {
    font-size: 14px !important;
    padding: 5px 10px !important;
    margin: 0 -10px !important;
  }
}