/* Header / Primary menu styles moved from `style.css` */

/* Ensure header itself can overflow so submenus drawn from nav aren't clipped by parent */
.jz-header{position:relative;z-index:2147483647;overflow:visible}

/* ✅ Primary menu — modern chips style + remove dot separators */
/* Remove any pseudo-element separators and ensure list-style is disabled */
nav.primary .primary-menu,
nav.primary .primary-menu ul{
  margin:0;padding:0;list-style:none;
}
nav.primary .primary-menu li{
  list-style:none;margin:0;padding:0;position:relative;
}
nav.primary .primary-menu li::before,
nav.primary .primary-menu li::after,
nav.primary .primary-menu a::before,
nav.primary .primary-menu a::after{
  content:none !important;display:none !important;
}

/* Chip-like anchors */
nav.primary {position:relative; z-index:2147483647; overflow:visible;} /* bring whole nav above fixed chips; max value to avoid any overlap */

nav.primary .primary-menu a,
nav.primary .nav-link{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);color:var(--text);
  font-weight:800;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.24);
  position:relative;z-index:1;
  /* keep z-index low so dropdowns can stack above */
}
nav.primary .primary-menu a:hover,
nav.primary .nav-link:hover,
nav.primary .primary-menu a:focus,
nav.primary .nav-link:focus{
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.36);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));outline:none;
}
nav.primary .primary-menu a:focus-visible,
nav.primary .nav-link:focus-visible{outline:2px solid rgba(98,211,255,.18);outline-offset:3px}

/* Gradient ring on hover/focus */
nav.primary .primary-menu a:hover::after,
nav.primary .primary-menu a:focus::after,
nav.primary .primary-menu li:hover > a::after,
nav.primary .nav-link:hover::after,
nav.primary .nav-link:focus::after,
nav.primary .primary-menu a:focus-visible::after,
nav.primary .nav-link:focus-visible::after{
  content:'' !important;position:absolute;inset:-4px;border-radius:999px;padding:2px;display:block !important;
  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;pointer-events:none;opacity:.9;
  filter:drop-shadow(0 6px 16px rgba(25,180,255,.25));
}

/* Active/current item style */
nav.primary .primary-menu a.active,
nav.primary .nav-link.current-menu-item{
  background:linear-gradient(90deg,var(--brand) 0%, rgba(98,211,255,.12) 100%);
  color:#061426;border-color:rgba(98,211,255,.35);box-shadow:0 12px 30px rgba(6,40,60,.5);
}

/* Also style current item when class is applied to <li> (WP default). */
nav.primary .primary-menu li.current-menu-item > a,
nav.primary .primary-menu li.current_page_item > a{
  background:linear-gradient(90deg,var(--brand) 0%, rgba(98,211,255,.12) 100%);
  color:#061426;border-color:rgba(98,211,255,.35);box-shadow:0 12px 30px rgba(6,40,60,.5);
}

/* Responsive tweaks */
@media (max-width:899px){
  /* primary nav is hidden on mobile by design; ensure chips remain available */
  nav.primary{display:none !important;visibility:hidden !important}
}

/* small screen safety: keep drop‑downs inside viewport */
@media (max-width:899px){
  nav.primary .primary-menu li ul{position:relative;opacity:1;visibility:visible;transform:none;margin-top:4px;z-index:2147483647;}
  nav.primary .primary-menu li ul a{margin:4px 0;}
}

/* Active indicator (wrap-around pill) */
nav.primary{position:relative}

/* temporarily push chips behind when submenu is visible
   uses :has() so no JS required; browsers support modern selectors */
.jz-header:has(nav.primary li:hover) .chips,
.jz-header:has(nav.primary li:focus-within) .chips {
  z-index:1 !important; /* lower than dropdown */
}
nav.primary .nav-indicator{position:absolute;left:0;top:0;width:0;height:0;background:transparent;outline:3px solid rgba(98,211,255,0.18);outline-offset:-3px;border-radius:999px;box-shadow:0 6px 18px rgba(6,40,60,.45), 0 0 0 6px rgba(98,211,255,.04);transition:left .28s cubic-bezier(.2,.9,.3,1),width .28s cubic-bezier(.2,.9,.3,1),top .18s ease,height .18s ease,opacity .18s ease;opacity:0;pointer-events:none}
nav.primary.has-indicator .nav-indicator{opacity:1}
nav.primary .nav-indicator.pulse{animation:indicator-pulse .65s cubic-bezier(.2,.9,.3,1)}
nav.primary .primary-menu a.is-active{transform:translateY(0) scale(1.02);box-shadow:0 18px 40px rgba(6,40,60,.5)}
@keyframes indicator-pulse{0%{transform:scale(0.98)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* Fallback: wrap active/current link with pill outline using ::after */
nav.primary .primary-menu a.current-menu-item,
nav.primary .primary-menu a.is-active{position:relative;z-index:2}
nav.primary .primary-menu a.current-menu-item::after,
nav.primary .primary-menu a.is-active::after{
  content:'';position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;border-radius:999px;border:3px solid rgba(98,211,255,0.16);box-shadow:0 8px 22px rgba(6,40,60,.45), 0 0 0 6px rgba(98,211,255,0.04);pointer-events:none;transition:box-shadow .22s ease,transform .22s ease,opacity .18s ease;opacity:1}
nav.primary .primary-menu a.current-menu-item::after{transform:scale(1);}
nav.primary .primary-menu a.is-active::after{transform:scale(1.02)}

nav.primary .primary-menu li.current-menu-item > a::after,
nav.primary .primary-menu li.current_page_item > a::after{
  content:'';position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;border-radius:999px;border:3px solid rgba(98,211,255,0.16);box-shadow:0 8px 22px rgba(6,40,60,.45), 0 0 0 6px rgba(98,211,255,0.04);pointer-events:none;transition:box-shadow .22s ease,transform .22s ease,opacity .18s ease;opacity:1;transform:scale(1);
}

/* Responsive logo sizing */
.jz-header .custom-logo-link{
  display:inline-flex;align-items:center;line-height:0;max-width:clamp(140px, 22vw, 280px);position:relative;border-radius:16px;
  transition:transform .2s ease, box-shadow .22s ease, background .22s ease, filter .22s ease
}
.jz-header .custom-logo{
  display:block;max-width:100%;height:auto;max-height:clamp(28px, 6vw, 52px);width:auto
}
.jz-header .custom-logo-link::before{
  content:'';position:absolute;inset:-6px -18px -6px -20px;border-radius:20px;pointer-events:none;opacity:0;
  background:radial-gradient(72% 84% at 50% 50%, rgba(8,28,44,.42) 0%, rgba(10,42,66,.26) 46%, rgba(7,20,32,0) 100%);
  filter:blur(4px);
  transition:opacity .22s ease
}
.jz-header .custom-logo-link:hover,
.jz-header .custom-logo-link:focus-visible,
.jz-header .custom-logo-link:active{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(6,24,38,.70), rgba(4,16,28,.52));
  box-shadow:0 12px 30px rgba(1,8,18,.62), inset 0 1px 0 rgba(120,170,210,.12);
  filter:saturate(1.04)
}
.jz-header .custom-logo-link:hover::before,
.jz-header .custom-logo-link:focus-visible::before,
.jz-header .custom-logo-link:active::before,
.jz-header .custom-logo-link:active::before{opacity:1}
.jz-header .custom-logo-link:focus,
.jz-header .custom-logo-link:focus-visible{outline:none}

@media (max-width:600px){
  .jz-header .custom-logo-link{
    max-width:clamp(170px, 52vw, 320px);
    margin-left:6px;
    border-radius:22px
  }
  .jz-header .custom-logo-link::before,
  .jz-header .custom-logo-link::after{ content:none !important; display:none !important }
  .jz-header .custom-logo-link,
  .jz-header .custom-logo-link:hover,
  .jz-header .custom-logo-link:focus,
  .jz-header .custom-logo-link:focus-visible,
  .jz-header .custom-logo-link:active{ transform:none !important; background:none !important; box-shadow:none !important; filter:none !important; outline:none !important }
  .jz-header .custom-logo{
    max-height:clamp(30px, 9vw, 60px);
    transform:scale(1.06);
    transform-origin:left center
  }
}

/* Visual locked state while toggling to prevent rapid double clicks */
.jzv2-menu-btn.jzv2-locked, .jzv2-menu-btn.jzv2-locked *{pointer-events:none}
.jzv2-menu-btn.jzv2-locked{opacity:.86}

/* helper: when closing after a choice, disable hover submenu briefly */
nav.primary.closing .primary-menu li:hover > ul,
nav.primary.closing .primary-menu li:focus-within > ul{
  display:none !important;
}
/* when a submenu item was selected we also suppress **all** dropdowns
   including those opened by current-menu-item until the user moves cursor
   back into the nav */
nav.primary.just-closed .primary-menu li > ul {
  display:none !important;
}

/* --------------------------------------------------
   Submenu / nested menus (modern drop‑downs)
   appear automatically when WordPress marks an item active
   or when the parent is hovered/focused.
-------------------------------------------------- */

nav.primary .primary-menu li {
  position:relative; /* ensure child ul absolute positioning */
}

/* dropdown container styling */
nav.primary .primary-menu li ul {
  position:absolute;top:100%;left:0;
  /* vertical list for desktop, remove nowrap to allow wrapping if required */
  white-space:normal; display:flex; flex-direction:column;
  /* when nav is above chips, extreme z-index ensures visibility */
  z-index:2147483647;
  background:var(--bg); /* inherit global background variable */
  border-radius:12px;
  /* more generous padding gives wider visual area */
  padding:8px 20px 12px 8px;
  min-width:220px; /* wider baseline so right edge extends further */
  box-shadow:0 12px 30px rgba(6,40,60,.5);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}

/* show when parent active/hover/focus/ancestor (but NOT solely because it's the current page) */
nav.primary .primary-menu li:hover > ul,
nav.primary .primary-menu li:focus-within > ul {
  opacity:1;visibility:visible;transform:translateY(0);
}

/* don't auto-open submenus just because the item is marked current */
nav.primary .primary-menu li.current-menu-ancestor > ul,
nav.primary .primary-menu li.current_page_ancestor > ul,
nav.primary .primary-menu li.current-menu-item > ul {
  opacity:0 !important;visibility:hidden !important;transform:translateY(4px) !important;
}

/* inner list items behave like vertical chips */
nav.primary .primary-menu li ul li{
  display:block; margin:0; padding:0;
}
nav.primary .primary-menu li ul a {
  display:block; padding:8px 14px; margin:2px 8px;
  border-radius:8px; font-weight:700;
  background:rgba(255,255,255,.02);
  color:var(--text); text-decoration:none;
  transition:background .12s ease,transform .12s ease;
  width:100%; /* stretch full width of dropdown */
  box-sizing:border-box;
}
nav.primary .primary-menu li ul a:hover,
nav.primary .primary-menu li ul a:focus{
  background:rgba(255,255,255,.06);
  transform:translateX(2px);
}

/* highlight current/active submenu link */
nav.primary .primary-menu li ul a.current-menu-item,
nav.primary .primary-menu li ul a.current_page_item,
nav.primary .primary-menu li ul a.active {
  background:linear-gradient(90deg,var(--brand) 0%, rgba(98,211,255,.12) 100%);
  color:#061426; border-color:rgba(98,211,255,.35);
}

/* ensure indicatory ring also wraps submenu links */
nav.primary .primary-menu li ul a:focus-visible,
nav.primary .primary-menu li ul a:hover {
  outline:2px solid rgba(98,211,255,.18);outline-offset:3px;
}

/* small screen safety: keep drop‑downs inside viewport */
@media (max-width:899px){
  nav.primary .primary-menu li ul{position:relative;opacity:1;visibility:visible;transform:none;margin-top:4px;z-index:10001;}
  nav.primary .primary-menu li ul a{margin:4px 0;}
}

