/* Chips styles moved from `style.css` + position overrides moved from `overrides.css` */

/* === Chips: hover & focus effects === */
.chips-scroll ul li a, .chips .chip {
  position:relative;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;will-change:transform,box-shadow;z-index:1
}
.chips-scroll ul li a::before, .chips .chip::before{
  content:'';position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg, rgba(98,211,255,0.06), rgba(98,211,255,0.02));opacity:0;transform:scale(.96);transition:opacity .18s ease,transform .18s ease;pointer-events:none;z-index:-1
}
.chips-scroll ul li a::after, .chips .chip::after{
  content:'';position:absolute;inset:-4px;border-radius:999px;padding:2px;
  background:conic-gradient(from 160deg, #19b4ff, #62d3ff, #ffd84d, #19b4ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none;z-index:0;transform:scale(.98);
  filter:drop-shadow(0 6px 16px rgba(25,180,255,.22))
}
.chips-scroll ul li a:hover::before, .chips .chip:hover::before, .chips-scroll ul li a:focus::before, .chips .chip:focus::before{opacity:1;transform:scale(1)}
.chips-scroll ul li a:hover::after, .chips .chip:hover::after, .chips-scroll ul li a:focus::after, .chips .chip:focus::after, .chips-scroll ul li a:focus-visible::after, .chips .chip:focus-visible::after{opacity:1;transform:scale(1.03)}
.chips .chip.active::after,
.chips .chip.current-menu-item::after,
.chips-scroll ul li.current-menu-item > a::after,
.chips-scroll ul li.current_page_item > a::after,
.chips-scroll ul li.current_page_parent > a::after,
.chips-scroll ul li.current_page_ancestor > a::after,
.chips-scroll ul li.current-menu-ancestor > a::after,
.chips-scroll ul li.current-menu-parent > a::after{
  opacity:1;transform:scale(1.03)
}
.chips-scroll ul li a:hover, .chips .chip:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 30px rgba(6,40,60,.34)}
.chips-scroll ul li a:active, .chips .chip:active{transform:translateY(-1px) scale(.998)}
.chips-scroll ul li a:focus-visible, .chips .chip:focus-visible{outline:2px solid rgba(98,211,255,.18);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .chips-scroll ul li a, .chips .chip{transition:none}
  .chips-scroll ul li a::before, .chips .chip::before, .chips-scroll ul li a::after, .chips .chip::after{transition:none}
}

/* Force sticky chips (override legacy fixed rules) */
.chips{
  position: sticky !important;
  z-index: 9999;
  background: linear-gradient(180deg,#061022 0%,#071427 60%,#081a2c 100%) !important;
  border-top: 1px solid rgba(255,255,255,.03) !important;
  border-bottom: 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.45) !important;
  transition: transform .22s ease, opacity .18s ease;
}

/* temporarily drop chips behind when any primary menu item has hover/focus
   using the :has() relational selector so we avoid JS toggling */
.jz-header:has(nav.primary li:hover) .chips,
.jz-header:has(nav.primary li:focus-within) .chips {
  z-index: 1 !important;
}

.chips .chips-scroll,
.chips .wrap.chips-scroll{
  background: transparent !important;
}

/* Base hide behavior for all breakpoints */
.chips.hide{
  transform: translateY(calc(-100% - var(--headH) - 14px)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

/* Positioning / placement (desktop tighter under header) */
@media (min-width:901px){
  /* desktop: position chips just below header for breathing room */
  .chips{ top: calc(var(--headH) + 10px) !important; margin-top: 0 !important; position: sticky !important; }
  .jz-header .head + .chips { top: calc(var(--headH) + 10px) !important; }
}
@media (max-width:900px){
  /* Mobile: keep exactly one chips background layer (no extra/double surfaces) */
  .chips{
    top: calc(var(--headH) + 2px) !important;
    position: sticky !important;
    /* preserve existing mobile sizing */
  }

  .chips-scroll{
    padding-right: 16px;
    scroll-padding-right: 16px;
  }

  /* Ensure full hide on mobile to remove the small visible sliver when scrolling up */
  .chips.hide{
    /* push completely out of viewport regardless of header height */
    transform: translateY(calc(-100% - 8px)) !important;

    /* fully invisible + non-interactive */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    /* remove visual accents that may remain visible */
    box-shadow: none !important;
    border-top-color: transparent !important;

    /* collapse any remaining layout footprint on mobile */
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
}