/* ============================================================================
   DESKTOP SUBMENU STABILITY 2026
   ---------------------------------------------------------------------------
   OWNER / SCOPE
   - Public horizontal navigation only: #mainNavigation
   - Desktop mouse/trackpad only: >= 861px + hover-capable pointer
   - Activated by JS class: #mainNavigation.desktop-submenu-stable
   - Transport theme is intentionally excluded by JS because it already has
     its own proven transport-menu-unified.css + transport-menu-unified.js.

   WHY THIS FILE EXISTS
   Several visual themes add margin-top / margin-left to nested UL.menu-sub for
   nicer spacing. Those visual gaps can become a real pointer gap: the parent
   LI loses :hover before the pointer reaches the next submenu. The submenu
   then closes too early.

   RULES FOR FUTURE DEV
   1) Do NOT put theme colors, fonts, widths or decorative styling here.
   2) This file only owns hit-area continuity, visibility while JS keeps a
      branch open, stacking, and overflow required for multi-level menus.
   3) Theme files remain responsible for palette / typography / dimensions.
   4) Keep selectors under .desktop-submenu-stable to avoid side effects.
   ============================================================================ */
@media (min-width:861px) and (hover:hover) and (pointer:fine) {
  #mainNavigation.desktop-submenu-stable,
  #mainNavigation.desktop-submenu-stable .main-menu-shell,
  #mainNavigation.desktop-submenu-stable .primary-menu-host,
  #mainNavigation.desktop-submenu-stable .menu-root,
  #mainNavigation.desktop-submenu-stable .menu-sub {
    overflow: visible !important;
  }

  #mainNavigation.desktop-submenu-stable .menu-root li {
    position: relative !important;
  }

  /* JS safety state. It supplements existing :hover/:focus-within rules; it
     does not replace a theme's normal hover styling. */
  #mainNavigation.desktop-submenu-stable .menu-root li.submenu-open > ul.menu-sub {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Vertical bridge: covers visual margin between root menu and level 1. */
  #mainNavigation.desktop-submenu-stable .menu-root > li > ul.menu-sub::before {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: -14px;
    height: 16px;
    pointer-events: auto;
  }

  /* Horizontal bridge: covers margin-left/gutter from level 1 -> 2 -> 3...
     The bridge belongs to the submenu itself, so moving across it still counts
     as hovering that submenu and keeps the ancestor branch alive. */
  #mainNavigation.desktop-submenu-stable .menu-sub li > ul.menu-sub::before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -18px;
    width: 20px;
    pointer-events: auto;
  }

  /* Keep deeper levels above nearby page cards/banners without altering color. */
  #mainNavigation.desktop-submenu-stable .menu-root > li > ul.menu-sub { z-index: 100000 !important; }
  #mainNavigation.desktop-submenu-stable .menu-sub li > ul.menu-sub { z-index: 100010 !important; }
}