/* Kingman static-mirror UI fixes */

/* 1) Sticky header.
   Elementor theme-builder renders the header inside its own wrapper
   (.elementor-location-header) that is only as tall as the header itself,
   so position:sticky has no room to stick. Fix the wrapper instead, and
   pad the main content by the header height (JS keeps --kg-header-h in sync
   across breakpoints; 100px is the desktop fallback). The header already
   renders on black, so we force a solid black bg to avoid any transparent
   sliver once it overlaps white body content. */
/* IMPORTANT: scope to the REAL site header only. The "Product Range" mega-panel
   embeds four more .elementor-location-header templates (one per JetTabs panel).
   An unscoped rule pins those to the viewport top too, which drags the mega's
   contents up over the ribbon. The real header is the only one that is a direct
   child of .hfeed. */
.hfeed > .elementor-location-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 9999;
  background: #000;
}
/* The nested templates inside the mega must stay in normal flow. They keep the
   black backing (the panel is otherwise transparent and the hero shows through
   the product links). */
.jet-sub-mega-menu .elementor-location-header{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: #000 !important;
  width: auto !important;
}
.site-content{
  padding-top: var(--kg-header-h, 100px);
}

/* 2) Kill orphaned Swiper loading spinners.
   On the live WordPress site Swiper's JS removed each slide's preloader once
   its image loaded. On the static mirror that cleanup never fires, so the
   spinners sit forever over logos that are, in fact, fully loaded (img-fix.js
   already forces every lazy image to load eagerly). */
.swiper-lazy-preloader{ display: none !important; }

/* 3) JetMenu dropdowns without JetMenu's (dead) Vue JS.
   The main nav is a Vue-driven JetMenu whose script never initialises on the
   static mirror, so hovering a parent used to do nothing and the real links
   live in dropdowns that never appeared. The parents' href="#" are now wired
   to real section pages (in the HTML), and these rules re-open the dropdowns
   on hover using pure CSS so every sub-page link is reachable again. */
.elementor-location-header .jet-menu > .jet-menu-item:hover > .jet-sub-menu,
.elementor-location-header .jet-menu > .jet-menu-item:hover > .jet-sub-mega-menu,
.elementor-location-header .jet-menu-item.jet-menu-item-has-children:hover > .jet-sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
/* The wide "Product Range" mega-panel. Its default Elementor position is
   absolute near the top of the nav, so it renders OVER the ribbon. Pin it as a
   full-width panel directly under the header.
   This must NOT be scoped to :hover — if it were, the instant the hover
   selector stops matching the panel snaps back up over the ribbon while still
   fading out. Position it always; visibility/opacity alone gate it. */
.elementor-location-header .jet-menu > .jet-menu-item > .jet-sub-mega-menu{
  position: fixed !important;
  top: var(--kg-header-h, 100px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* the panel itself is transparent — its black came from the nested header
     templates, which we've now returned to normal flow. Give the panel its
     own solid backing so the hero doesn't show through the product links. */
  background: #000 !important;
}
/* Invisible bridge: the menu item sits ~30px above the panel, so travelling
   from the ribbon to the panel crossed a dead zone that closed it. This strip
   is part of the panel (and a DOM child of the item), keeping :hover alive. */
.elementor-location-header .jet-menu > .jet-menu-item > .jet-sub-mega-menu::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -45px; height: 45px;
}
/* keep the parent's dropdown open while the cursor is inside it, and support
   a second level of nested sub-menus */
.elementor-location-header .jet-sub-menu:hover,
.elementor-location-header .jet-sub-mega-menu:hover{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
.elementor-location-header .jet-sub-menu .jet-menu-item:hover > .jet-sub-menu{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* the parents are now real links — make that obvious */
.elementor-location-header .jet-menu > .jet-menu-item > a{ cursor: pointer; }

/* 4) Mobile menu. JetMenu's hamburger is injected by its (dead) JS, so on
   phones there was no way to open the nav. img-fix.js injects a plain .kg-burger
   button; these rules hide the horizontal menu on small screens, show the
   burger, and drop the nav as a tappable vertical panel when it's toggled.
   The top-level items are real links, so this needs no JetMenu JS. */
.kg-burger{ display:none; }
@media (max-width: 1024px){
  /* show the burger, hide the inline horizontal menu by default */
  .kg-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    position:absolute; top:50%; right:20px; transform:translateY(-50%);
    width:44px; height:44px; padding:9px 8px; box-sizing:border-box;
    background:transparent; border:0; cursor:pointer; z-index:10000;
  }
  .kg-burger span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:.25s; }
  html.kg-mnav-open .kg-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  html.kg-mnav-open .kg-burger span:nth-child(2){ opacity:0; }
  html.kg-mnav-open .kg-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .elementor-location-header .jet-menu-container{ display:none; }
  /* opened panel */
  html.kg-mnav-open .elementor-location-header .jet-menu-container{
    display:block;
    position:fixed; top:var(--kg-header-h,90px); left:0; right:0;
    background:#000; padding:8px 22px 22px;
    max-height:calc(100vh - var(--kg-header-h,90px)); overflow-y:auto;
    z-index:9998; border-top:1px solid rgba(255,255,255,.12);
  }
  html.kg-mnav-open .elementor-location-header .jet-menu-inner,
  html.kg-mnav-open .elementor-location-header ul.jet-menu{
    display:block !important; width:100%;
  }
  html.kg-mnav-open .elementor-location-header ul.jet-menu > .jet-menu-item{
    display:block !important; width:100%; border-bottom:1px solid rgba(255,255,255,.10);
  }
  html.kg-mnav-open .elementor-location-header ul.jet-menu > .jet-menu-item > a{
    display:block !important; padding:15px 0; font-size:1.05rem;
  }
  /* on mobile show only the top-level links (sub-menus stay collapsed) */
  .elementor-location-header .jet-sub-menu,
  .elementor-location-header .jet-sub-mega-menu{ display:none !important; }

  /* --- the 3 "Kingman Signs" pages use an Elementor nav menu instead of
     JetMenu. Elementor's own toggle is inert and its mobile dropdown is held
     shut by max-height:0, so hide both and drive the main nav with our burger. */
  .hfeed > .elementor-location-header .elementor-menu-toggle{ display:none !important; }
  .hfeed > .elementor-location-header nav.elementor-nav-menu--dropdown{ display:none !important; }

  html.kg-mnav-open .hfeed > .elementor-location-header nav.elementor-nav-menu--main{
    display:block !important;
    position:fixed; top:var(--kg-header-h,90px); left:0; right:0;
    background:#000; padding:8px 22px 22px;
    max-height:calc(100vh - var(--kg-header-h,90px)); overflow-y:auto;
    z-index:9998; border-top:1px solid rgba(255,255,255,.12);
  }
  html.kg-mnav-open .hfeed > .elementor-location-header nav.elementor-nav-menu--main > ul.elementor-nav-menu{
    display:block !important; width:100%;
  }
  html.kg-mnav-open .hfeed > .elementor-location-header nav.elementor-nav-menu--main > ul.elementor-nav-menu > li{
    display:block !important; width:100%; border-bottom:1px solid rgba(255,255,255,.10);
  }
  html.kg-mnav-open .hfeed > .elementor-location-header nav.elementor-nav-menu--main > ul.elementor-nav-menu > li > a{
    display:block !important; padding:15px 0; font-size:1.05rem; color:#fff; height:auto !important;
  }
  /* nested sub-menus stay collapsed — the top-level links are real section pages */
  .hfeed > .elementor-location-header nav.elementor-nav-menu--main ul ul{ display:none !important; }
}