/* ============================================================================
 * 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.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1) Desktop-only: hide hamburger menu button (mobile drawer toggle)
 * ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .tw-header .tw-header__hamburger,
  .tw-header__hamburger,
  button.tw-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;
  }
}

/* ----------------------------------------------------------------------------
 * 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 .sf-menu-toggle .sf-menu-toggle-icon path,
header .sf-menu-toggle-icon path {
  transform: rotate(0deg);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.2s ease;
}

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

body:not(.home) header .sf-menu-toggle,
body:not(.home) header .sf-menu-toggle-icon,
body:not(.home) header .sf-menu-toggle-icon svg,
body:not(.home) header .sf-menu-toggle-icon path,
body:not(.home) header .menu-layout-single .sf-menu-toggle,
body:not(.home) header .menu-layout-single .sf-menu-toggle-icon,
body:not(.home) header .menu-layout-single .sf-menu-toggle-icon path,
body:not(.home) header .menu-layout-mega .sf-menu-toggle,
body:not(.home) header .menu-layout-mega .sf-menu-toggle-icon,
body:not(.home) header .menu-layout-mega .sf-menu-toggle-icon path,
body:not(.home) header .product-category .sf-menu-toggle,
body:not(.home) header .product-category .sf-menu-toggle-icon,
body:not(.home) header .product-category .sf-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 .sf-menu-toggle,
  body:not(.home) header .sf-menu-toggle-icon,
  body:not(.home) header .sf-menu-toggle-icon svg,
  body:not(.home) header .sf-menu-toggle-icon path,
  body:not(.home) header .menu-layout-single .sf-menu-toggle,
  body:not(.home) header .menu-layout-single .sf-menu-toggle-icon,
  body:not(.home) header .menu-layout-single .sf-menu-toggle-icon path,
  body:not(.home) header .menu-layout-mega .sf-menu-toggle,
  body:not(.home) header .menu-layout-mega .sf-menu-toggle-icon,
  body:not(.home) header .menu-layout-mega .sf-menu-toggle-icon path,
  body:not(.home) header .product-category .sf-menu-toggle,
  body:not(.home) header .product-category .sf-menu-toggle-icon,
  body:not(.home) header .product-category .sf-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"] + .sf-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"] + .sf-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 .sf-mega-inner,
  .tw-header__nav .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  .tw-header__nav-menu .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  body.page-template-page-service-php header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  body.blog header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  body.archive header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  body.category header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner,
  body.page header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-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 .sf-mega-cards,
  .tw-header__nav .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  .tw-header__nav-menu .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  body.page-template-page-service-php header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  body.blog header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  body.archive header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  body.category header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards,
  body.page header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-cards {
    flex: 0 0 calc(220px * 2 + 20px) !important;
    width: calc(220px * 2 + 20px) !important;
    min-width: calc(220px * 2 + 20px) !important;
    max-width: calc(220px * 2 + 20px) !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    order: 999 !important; /* right side */
  }

  header .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner > .sub-column,
  .tw-header__nav .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner > .sub-column,
  .tw-header__nav-menu .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-mega-inner > .sub-column,
  .menu-item.product-category > .sub-menu.sub-menu-product-category .sf-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; /* left side */
  }
}

/* ----------------------------------------------------------------------------
 * 4) Interaction policy: disable hover-open on desktop unless .sf-dropdown-open
 * ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .menu-item.product-category:not(.sf-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  header .menu-item.product-category:not(.sf-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  .tw-header__nav .menu-item.product-category:not(.sf-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  .tw-header__nav-menu .menu-item.product-category:not(.sf-dropdown-open):hover > .sub-menu.sub-menu-product-category,
  header .menu-item:not(.sf-dropdown-open):hover > .sub-menu,
  header .menu-item-has-children:not(.sf-dropdown-open):hover > .sub-menu,
  header .page_item_has_children:not(.sf-dropdown-open):hover > .sub-menu,
  .tw-header__nav .menu-item:not(.sf-dropdown-open):hover > .sub-menu,
  .tw-header__nav-menu .menu-item:not(.sf-dropdown-open):hover > .sub-menu,
  .desktop-nav .menu-item:not(.sf-dropdown-open):hover > .sub-menu,
  header .menu-item-support:not(.sf-dropdown-open):hover > .sub-menu-support-block,
  header .menu-item-service:not(.sf-dropdown-open):hover > .sub-menu-support-block,
  header .menu-item-about:not(.sf-dropdown-open):hover > .sub-menu-support-block,
  header .menu-item-oem:not(.sf-dropdown-open):hover > .sub-menu-single-column,
  header .menu-item-blog-guides:not(.sf-dropdown-open):hover > .sub-menu-single-column,
  header .menu-layout-mega:not(.sf-dropdown-open):hover > .sub-menu,
  header .menu-layout-block:not(.sf-dropdown-open):hover > .sub-menu,
  header .menu-layout-single:not(.sf-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;
  }
}