/* ============================================================
   PXS Global Navigation — loaded on every page
   Self-contained: own fonts, own variables (--psn-*),
   no dependency on home.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --psn-h:      76px;
  --psn-text:   #ECEAF6;
  --psn-muted:  #9C97BB;
  --psn-blue:   #4DA3FF;
  --psn-stroke: rgba(255,255,255,.16);
  --psn-grad:   linear-gradient(92deg,#4DA3FF 0%,#7C5CFF 52%,#D24DF0 100%);
  --psn-panel:  rgba(7,6,15,.92);
}

/* Pages other than the custom homepage need room under the fixed bar.
   (functions.php adds body class "psnav-home" on the homepage template.) */
body:not(.psnav-home):not(.cw-landing){padding-top:var(--psn-h)}

/* ============ BAR — instant glass ============ */
.psnav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:var(--psn-h);
  will-change:backdrop-filter, background;
  background:rgba(255,255,255,.07);
  border-bottom:1px solid var(--psn-stroke);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(16px) saturate(180%) brightness(.75);
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(.75);
  transition:none;
  font-family:"Inter",sans-serif;
}
body.admin-bar .psnav{top:32px}
@media (max-width:782px){ body.admin-bar .psnav{top:46px} }

.psnav-in{
  max-width:1280px;margin:0 auto;padding:0 24px;
  height:100%;display:flex;align-items:center;gap:28px;
}
.psnav a{text-decoration:none;color:inherit}
.psnav img{display:block}

/* ============ BRAND ============ */
.psnav-brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--psn-text)}
.psnav-brand img{width:42px;height:42px}
.psnav-brand b{font-family:"Sora",sans-serif;font-size:14px;letter-spacing:.06em}
.psnav-brand small{display:block;font-size:8.5px;letter-spacing:.34em;color:var(--psn-muted);font-weight:500}

/* ============ MENU (from wp_nav_menu) ============ */
.psnav-list{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
.psnav-list li{position:relative}
.psnav-list a{display:block;color:var(--psn-muted);padding:10px 2px;transition:color .2s}
.psnav-list li:hover > a,
.psnav-list .current-menu-item > a,
.psnav-list .current-menu-ancestor > a{color:var(--psn-text)}
.psnav-list .current-menu-item > a{
  background:var(--psn-grad) no-repeat left bottom / 100% 2px;
}
/* caret on items that have a dropdown */
.psnav-list .menu-item-has-children > a::after{
  content:"";display:inline-block;vertical-align:middle;margin-left:3px;
  width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7;
}

/* ============ DROPDOWN ============ */
.psnav-list .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:190px;margin:0;padding:8px;list-style:none;
  background:var(--psn-panel);
  border:1px solid rgba(140,110,255,.3);
  border-radius:14px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.6), 0 0 26px -8px rgba(124,92,255,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;translate:0 8px;
  transition:opacity .18s ease, translate .18s ease, visibility .18s;
}
.psnav-list li:hover > .sub-menu,
.psnav-list li:focus-within > .sub-menu{opacity:1;visibility:visible;translate:0 0}
.psnav-list .sub-menu li{width:100%}
.psnav-list .sub-menu a{
  padding:10px 16px;text-align:center;border-radius:9px;color:var(--psn-text);
}
.psnav-list .sub-menu a:hover{background:rgba(124,92,255,.18)}
.psnav-list .sub-menu .menu-item-has-children > a::after{display:none}

/* ============ SOCIALS ============ */
.psnav-socials{display:flex;gap:14px;align-items:center}
.psnav-socials a{color:var(--psn-muted);transition:color .2s}
.psnav-socials a:hover{color:var(--psn-text)}
.psnav-socials svg{width:16px;height:16px;fill:currentColor}

/* ============ BUTTON ============ */
.psnav-btn{
  display:inline-flex;align-items:center;
  font-weight:600;font-size:13.5px;color:var(--psn-text);
  padding:10px 20px;border-radius:999px;
  border:1px solid rgba(160,130,255,.38);
  transition:transform .2s, border-color .2s, box-shadow .25s;
}
.psnav-btn:hover{transform:translateY(-2px);border-color:var(--psn-blue);box-shadow:0 8px 26px -10px rgba(124,92,255,.6)}

/* ============ CART ============ */
.psnav-cart{position:relative;display:flex;align-items:center;color:var(--psn-muted);transition:color .2s}
.psnav-cart:hover{color:var(--psn-text)}
.psnav-cart svg{width:21px;height:21px}
.psnav-cart-n{
  position:absolute;top:-7px;right:-9px;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--psn-grad);color:#fff;
  font-size:10px;font-weight:600;line-height:16px;text-align:center;
}

/* ============ MOBILE ============ */
.psnav-toggle{display:none;background:none;border:none;color:var(--psn-text);cursor:pointer;padding:6px}

/* tight desktop: shrink instead of wrapping */
@media (max-width:1240px) and (min-width:1025px){
  .psnav-in{gap:16px}
  .psnav-list{gap:14px}
  .psnav-list a{font-size:12.5px;white-space:nowrap}
  .psnav-brand b{font-size:12px}
  .psnav-brand small{display:none}
  .psnav-socials{display:none}
  .psnav-btn{padding:8px 14px;font-size:12px;white-space:nowrap}
}

@media (max-width:1024px){
  .psnav-menu,.psnav-socials,.psnav-btn{display:none}
  .psnav-toggle{display:block;margin-left:auto}

  .psnav.open .psnav-menu{
    display:block;position:fixed;top:var(--psn-h);left:0;right:0;
    background:var(--psn-panel);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--psn-stroke);
    padding:10px 24px 20px;max-height:calc(100vh - var(--psn-h));overflow-y:auto;
  }
  body.admin-bar .psnav.open .psnav-menu{top:calc(var(--psn-h) + 46px)}

  .psnav-list{display:block}
  .psnav-list a{padding:13px 0;font-size:16px}
  .psnav-list .menu-item-has-children > a::after{float:right;margin:8px 4px 0 0}

  /* dropdown becomes an inline accordion */
  .psnav-list .sub-menu{
    position:static;transform:none;translate:0;min-width:0;
    opacity:1;visibility:visible;display:none;
    background:transparent;border:none;box-shadow:none;padding:0 0 6px 18px;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .psnav-list li.open > .sub-menu{display:block}
  .psnav-list .sub-menu a{text-align:left;padding:11px 0;font-size:15px}
}