/* ============================================================================
 * Header Navigation Overrides (Global)
 * ----------------------------------------------------------------------------
 * Purpose:
 * - Centralize header/nav behavior overrides that previously lived across:
 *   - header.php inline <style>
 *   - assets/css/bridge-components.css (multiple override blocks)
 * - Ensure consistent behavior across pages (Home / OEM/ODM / Blog / etc.)
 *
 * IMPORTANT:
 * - This file is intended to be enqueued LAST (after output.css and page CSS),
 *   so it can safely override Tailwind-generated defaults.
 * ============================================================================ */

/* ============================================================================
 * iPad Pro Drawer Fix (1024px – 1279px)
 * ----------------------------------------------------------------------------
 * Problem: At 1024–1279px the desktop nav is hidden and the hamburger is
 * shown, but output.css hides .hd-drawer at min-width:992px. This block
 * ensures the drawer is renderable AND that submenus never leak into view
 * in their pre-toggled state on this viewport range.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1) Desktop-only: hide hamburger menu button (mobile drawer toggle)
 * ---------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hd-header .hd-header__hamburger,
  .hd-header__hamburger,
  button.hd-header__hamburger,
  button#menu-toggle,
  #menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ----------------------------------------------------------------------------
 * 1b) iPad Pro (1024px-1279px): show hamburger, hide desktop nav,
 *     AND make the drawer renderable at this breakpoint.
 * ---------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hd-header .hd-header__nav,
  .hd-header__nav {
    display: none !important;
  }
  .hd-header .hd-header__hamburger,
  .hd-header__hamburger,
  button.hd-header__hamburger,
  button#menu-toggle,
  #menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make the drawer renderable at the iPad Pro breakpoint */
  .hd-drawer {
    display: block !important;
    transform: translateX(-100%);
  }
  .hd-drawer.open {
    transform: translateX(0) !important;
  }
  .hd-overlay {
    display: block !important;
  }
}

/* ----------------------------------------------------------------------------
 * 1c) Sidebar sub-menu: safe targeted reset (supersedes any all:unset)
 * ---------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* 强制所有 sidebar-menu 内的 li 都是 block 布局（覆盖 WooCommerce/插件的 .flex class） */
  #sidebar-nav .sidebar-menu > li,
  #sidebar-nav .sidebar-menu > li.menu-item {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    position: relative !important;
  }

  /* Collapse any sub-menu type that might appear inside the drawer */
  #sidebar-nav .sidebar-menu .sub-menu,
  #sidebar-nav .sidebar-menu .sub-menu-product-category,
  #sidebar-nav .sidebar-menu .sub-menu-single-column,
  #sidebar-nav .sidebar-menu .sub-menu-support-block {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    grid-template-columns: unset !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
    transition: max-height 0.25s ease !important;
  }

  /* Open state: reveal and expand */
  #sidebar-nav .sidebar-menu li.menu-item-has-children.open > .sub-menu,
  #sidebar-nav .sidebar-menu li.menu-item-has-children.open > .sub-menu-product-category,
  #sidebar-nav .sidebar-menu li.menu-item-has-children.open > .sub-menu-single-column,
  #sidebar-nav .sidebar-menu li.menu-item-has-children.open > .sub-menu-support-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: 2000px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Sub-menu items styling */
  #sidebar-nav .sidebar-menu .sub-menu > li > a {
    display: block !important;
    padding: 12px 20px 12px 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(27, 58, 95, 0.85) !important;
    text-decoration: none !important;
    white-space: normal !important;
    position: static !important;
  }
}

/* ----------------------------------------------------------------------------
 * 1d) Prevent desktop dropdown sub-menus from bleeding at tablet widths
 * ---------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .hd-header__nav .sub-menu,
  .hd-header__nav .sub-menu-product-category,
  .hd-header__nav .sub-menu-single-column,
  .hd-header__nav .sub-menu-support-block,
  header nav .sub-menu,
  header nav .sub-menu-product-category,
  header nav .sub-menu-single-column,
  header nav .sub-menu-support-block {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -9999px !important;
  }
}

/* ----------------------------------------------------------------------------
 * 2) Non-home: make nav dropdown arrows use the standard nav text color
 *    (override output.css where arrows are white on desktop)
 * ---------------------------------------------------------------------------- */

/* Arrow direction: rely on aria-expanded (maintained by header.js) */
header .hd-menu-toggle .hd-menu-toggle__icon path,
header .hd-menu-toggle__icon path {
  stroke: var(--nav-text, #1B3A5F);
  transform: rotate(0deg);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.2s ease;
}

header .hd-menu-toggle[aria-expanded="true"] .hd-menu-toggle__icon path {
  transform: rotate(180deg) !important;
}

body:not(.home) header .hd-menu-toggle,
body:not(.home) header .hd-menu-toggle__icon,
body:not(.home) header .hd-menu-toggle__icon svg,
body:not(.home) header .hd-menu-toggle__icon path,
body:not(.home) header .menu-layout-single .hd-menu-toggle,
body:not(.home) header .menu-layout-single .hd-menu-toggle__icon,
body:not(.home) header .menu-layout-single .hd-menu-toggle__icon path,
body:not(.home) header .menu-layout-mega .hd-menu-toggle,
body:not(.home) header .menu-layout-mega .hd-menu-toggle__icon,
body:not(.home) header .menu-layout-mega .hd-menu-toggle__icon path,
body:not(.home) header .product-category .hd-menu-toggle,
body:not(.home) header .product-category .hd-menu-toggle__icon,
body:not(.home) header .product-category .hd-menu-toggle__icon path {
  color: var(--nav-text, #1B3A5F) !important;
  stroke: var(--nav-text, #1B3A5F) !important;
}

/* Explicitly mirror output.css desktop breakpoint so the override always wins. */
@media (min-width: 1024px) {
  body:not(.home) header .hd-menu-toggle,
  body:not(.home) header .hd-menu-toggle__icon,
  body:not(.home) header .hd-menu-toggle__icon svg,
  body:not(.home) header .hd-menu-toggle__icon path,
  body:not(.home) header .menu-layout-single .hd-menu-toggle,
  body:not(.home) header .menu-layout-single .hd-menu-toggle__icon,
  body:not(.home) header .menu-layout-single .hd-menu-toggle__icon path,
  body:not(.home) header .menu-layout-mega .hd-menu-toggle,
  body:not(.home) header .menu-layout-mega .hd-menu-toggle__icon,
  body:not(.home) header .menu-layout-mega .hd-menu-toggle__icon path,
  body:not(.home) header .product-category .hd-menu-toggle,
  body:not(.home) header .product-category .hd-menu-toggle__icon,
  body:not(.home) header .product-category .hd-menu-toggle__icon path {
    color: var(--nav-text, #1B3A5F) !important;
    stroke: var(--nav-text, #1B3A5F) !important;
  }
}

/* ----------------------------------------------------------------------------
 * 2.1) OEM/ODM & Blog & Guides single-column dropdown spacing (desktop)
 * ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
  header .menu-item-oem > .sub-menu-single-column,
  header .menu-item-blog-guides > .sub-menu-single-column,
  header .menu-item-has-children > a[href*="blog"] + .hd-menu-toggle + .sub-menu-single-column,
  header .menu-item-has-children > a[href*="blog"] + .sub-menu-single-column {
    padding-top: 20px !important;
  }

  header .menu-item-blog-guides > .sub-menu-single-column .sub-column,
  header .menu-item-has-children > a[href*="blog"] + .hd-menu-toggle + .sub-menu-single-column .sub-column,
  header .menu-item-has-children > a[href*="blog"] + .sub-menu-single-column .sub-column {
    padding-top: 20px !important;
  }
}

/* ----------------------------------------------------------------------------
 * 3) Mega menu layout guard:
 *    Ensure product-category mega menu cards stay on the RIGHT on desktop
 *    across OEM/ODM / Blog / Page templates.
 * ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
  header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  .hd-header__nav .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  .hd-header__menu .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  body.page-template-page-service-php header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  body.blog header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  body.archive header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  body.category header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner,
  body.page header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  .hd-header__nav .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  .hd-header__menu .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  body.page-template-page-service-php header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  body.blog header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  body.archive header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  body.category header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards,
  body.page header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__cards {
    flex: 0 0 calc(200px * 4 + 16px * 3) !important;
    width: calc(200px * 4 + 16px * 3) !important;
    min-width: calc(200px * 4 + 16px * 3) !important;
    max-width: calc(200px * 4 + 16px * 3) !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    order: 999 !important;
  }

  header .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner > .sub-column,
  .hd-header__nav .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner > .sub-column,
  .hd-header__menu .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner > .sub-column,
  .menu-item.product-category > .sub-menu.sub-menu-product-category .hd-mega__inner > .sub-column {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    order: 0 !important;
  }
}

/* ----------------------------------------------------------------------------
 * 4) Interaction policy: disable hover-open on desktop unless .hd-dropdown-open
 * ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .menu-item.product-category:not(.hd-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  header .menu-item.product-category:not(.hd-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  .hd-header__nav .menu-item.product-category:not(.hd-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  .hd-header__menu .menu-item.product-category:not(.hd-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  header .menu-item:not(.hd-dropdown-open):hover > .sub-menu,
  header .menu-item-has-children:not(.hd-dropdown-open):hover > .sub-menu,
  header .page_item_has_children:not(.hd-dropdown-open):hover > .sub-menu,
  .hd-header__nav .menu-item:not(.hd-dropdown-open):hover > .sub-menu,
  .hd-header__menu .menu-item:not(.hd-dropdown-open):hover > .sub-menu,
  .desktop-nav .menu-item:not(.hd-dropdown-open):hover > .sub-menu,
  header .menu-item-support:not(.hd-dropdown-open):hover > .sub-menu-support-block,
  header .menu-item-service:not(.hd-dropdown-open):hover > .sub-menu-support-block,
  header .menu-item-about:not(.hd-dropdown-open):hover > .sub-menu-support-block,
  header .menu-item-oem:not(.hd-dropdown-open):hover > .sub-menu-single-column,
  header .menu-item-blog-guides:not(.hd-dropdown-open):hover > .sub-menu-single-column,
  header .menu-layout-mega:not(.hd-dropdown-open):hover > .sub-menu,
  header .menu-layout-block:not(.hd-dropdown-open):hover > .sub-menu,
  header .menu-layout-single:not(.hd-dropdown-open):hover > .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
  }
}

/* ----------------------------------------------------------------------------
 * 5) Sidebar drawer close button size
 * ---------------------------------------------------------------------------- */
#sidebar-nav .hd-drawer__header #sidebar-close,
#sidebar-close {
  font-size: 24px !important;
  line-height: 1 !important;
}

/* ----------------------------------------------------------------------------
 * 6) Fix: sub-menu items must not overflow the drawer width
 * ---------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  #sidebar-nav .sidebar-menu .sub-menu > li,
  #sidebar-nav .sidebar-menu .sub-menu > li > a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Prevent the drawer itself from overflowing */
  #sidebar-nav,
  .hd-drawer {
    overflow-x: hidden !important;
    max-width: 280px !important;
  }
}