/* nx-header.css — Desktop + Mobile nested submenus, responsive hamburger with glassy shine + premium effects */

/* -------------------------
   Variables & base
   ------------------------- */
:root {
  --primary-purple: #7b52ff;
  --primary-indigo: #6b74e6;
  --accent-green: #03bb7c;
  --accent-orange: #f26716;
  --accent-cyan: #02aff0;
  --text-dark: #111827;
  --bg: #ffffff;
  --nav-height: 72px;
  --ease: cubic-bezier(.25,.8,.25,1);
}

.nx-header,
.nx-container,
.nx-nav,
.nx-menu,
.nx-menu li { box-sizing: border-box; }

/* -------------------------
   Desktop header
   ------------------------- */
.nx-header {
  background: var(--bg);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: fixed; /* ✅ instead of sticky */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: background 280ms var(--ease),
              box-shadow 280ms var(--ease),
              padding 260ms var(--ease),
              height 260ms var(--ease);
  backdrop-filter: blur(12px) saturate(140%);
}

.nx-header.shrink {
  box-shadow: 0 6px 22px rgba(2,6,23,0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(160%);
}

.nx-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px;
  height: var(--nav-height);
  gap: 20px;
  transition: padding 260ms var(--ease), height 260ms var(--ease);
}
.nx-header.shrink .nx-container {
  padding: 10px 24px; /* smoother shrink */
  height: 62px;
}

/* -------------------------
   Right wrapper (nav + CTA + hamburger)
   ------------------------- */
.nx-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 20px;
}

.nx-header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -------------------------
   Logo Styling
   ------------------------- */
.nx-logo img {
  height: 76px;
  transition: height 260ms var(--ease), filter 260ms var(--ease);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.16)) contrast(1.05) saturate(1.08);
}
.nx-header.shrink .nx-logo img {
  height: 60px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12)) contrast(1.02) saturate(1.02);
}

@media (max-width: 991px) {
  .nx-logo img {
    height: 44px !important;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12));
  }
  .nx-header.shrink .nx-logo img {
    height: 40px !important;
  }
}

/* -------------------------
   Navigation
   ------------------------- */
.nx-nav { margin-left: auto; }
.nx-menu {
  display: inline-flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
}
.nx-menu > li { position: relative; }
.nx-menu > li > a {
  display:inline-block;
  color:var(--text-dark);
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  padding:10px 6px;
  position:relative;
  transition: color 240ms var(--ease), transform 240ms var(--ease), text-shadow 240ms var(--ease);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.1);
}
.nx-menu > li > a::after {
  content:""; 
  position:absolute; 
  left:50%; transform:translateX(-50%);
  bottom:-6px; height:3px; width:0%;
  background:linear-gradient(90deg,var(--primary-purple),var(--primary-indigo));
  border-radius:2px; 
  transition:width 300ms var(--ease), box-shadow 300ms var(--ease);
}
.nx-menu > li:hover > a,
.nx-menu > li:focus-within > a { 
  color: var(--primary-purple); 
  transform:translateY(-2px); 
  text-shadow: 0 2px 8px rgba(123,82,255,0.5), 0 0 18px rgba(107,116,230,0.4);
}
.nx-menu > li:hover > a::after,
.nx-menu > li:focus-within > a::after { 
  width: 70%; 
  box-shadow: 0 0 10px rgba(123,82,255,0.5);
}

/* ✅ Active/current menu item highlight */
.nx-menu > li.current-menu-item > a,
.nx-menu > li.current_page_item > a {
  color: var(--primary-purple);
  text-shadow: 0 2px 8px rgba(123,82,255,0.5), 0 0 18px rgba(107,116,230,0.4);
}
.nx-menu > li.current-menu-item > a::after,
.nx-menu > li.current_page_item > a::after {
  width: 70%;
  box-shadow: 0 0 10px rgba(123,82,255,0.5);
}

.nx-menu ul {
  position: absolute;
  top:100%; left:50%;
  transform:translateX(-50%) translateY(8px) scale(.995);
  transform-origin: top center;
  min-width:220px;
  background: rgba(255,255,255,0.9);
  border-radius:12px;
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow:0 18px 40px rgba(2,6,23,0.12);
  padding:8px 6px;
  list-style:none;
  margin-top:0;
  opacity:0; visibility:hidden;
  transition:opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms var(--ease);
  z-index:1500;
}
.nx-menu li:hover > ul,
.nx-menu li:focus-within > ul { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
.nx-menu ul li { opacity:0; transform:translateY(6px); transition:opacity 300ms var(--ease), transform 300ms var(--ease); }
.nx-menu li:hover > ul li,
.nx-menu li:focus-within > ul li { opacity:1; transform:translateY(0); }
.nx-menu ul li a {
  display:block; padding:10px 16px;
  text-decoration:none; color:#222;
  font-weight:500; border-radius:8px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5), 0 1px 4px rgba(0,0,0,0.12);
}
.nx-menu ul li a:hover { background: rgba(123,82,255,0.1); color:var(--primary-purple); }

/* -------------------------
   CTA Button (glassy)
   ------------------------- */
/* -------------------------
   CTA Button (Premium Consistent)
   ------------------------- */
.nx-btn-primary,
.view-more-button {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 38px;
  border-radius: 50px;
  color: #fff;
  background: linear-gradient(135deg, #03bb7c, #6a4ee6, #af2cee);
  background-size: 200% 200%;
  text-decoration: none;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow, background-position;
  transition: transform 0.28s var(--ease), 
              box-shadow 0.28s var(--ease), 
              background-position 0.5s ease;
  isolation: isolate;
}

/* Shine streak */
.nx-btn-primary::before,
.view-more-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 55px;
  height: 200%;
  background: rgba(255,255,255,0.75);
  transform: rotate(25deg);
  opacity: 0;
  pointer-events: none;
}
.nx-btn-primary:hover::before,
.view-more-button:hover::before {
  left: 130%;
  opacity: 1;
  transition: left 0.35s ease, opacity 0.2s ease;
}

/* Hover state */
.nx-btn-primary:hover,
.view-more-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.25);
  background: linear-gradient(135deg, #af2cee, #6a4ee6, #03bb7c);
  background-position: right center;
}
/* -------------------------
   Hamburger (unchanged)
   ------------------------- */
.nx-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 28px;
  height: 22px;
  cursor: pointer;
  position: relative;
  z-index: 1601;
  background: transparent !important;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}
.nx-hamburger .bar {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text-dark);
  transition: transform 0.3s ease, opacity 0.2s ease, background 160ms;
}
.nx-hamburger.active .bar:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nx-hamburger.active .bar:nth-child(2) { opacity: 0; }
.nx-hamburger.active .bar:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

@media (min-width: 992px) {
  .nx-hamburger { width: 30px; height: 24px; }
  .nx-hamburger:hover .bar { background: var(--primary-purple); }
}
@media (max-width: 991px) {
  .nx-hamburger { width: 32px; height: 24px; gap: 7px; margin-left: auto; margin-right: 0; }
  .nx-hamburger .bar { height: 3px; }
  .nx-nav { display:none; }
  .nx-header-cta .nx-btn-primary { display:none; }
}

/* -------------------------
   Overlay
   ------------------------- */
.nx-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0; visibility:hidden;
  transition:opacity 0.3s;
  z-index:1300;
}
.nx-overlay.active { opacity:1; visibility:visible; }

/* -------------------------
   Mobile Panel
   ------------------------- */
.nx-mobile-panel {
  position:fixed; top:0; right:0;
  height:100vh;
  width:25%; min-width:240px; max-width:380px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px) saturate(150%);
  transform:translateX(100%);
  transition:transform 0.3s var(--ease);
  z-index:1600;
  display:flex; flex-direction:column;
  box-shadow: -4px 0 18px rgba(0,0,0,0.12);
}
.nx-mobile-panel.open { transform:translateX(0); }

.nx-mobile-panel-inner {
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Mobile Logo */
.nx-mobile-logo {
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
.nx-mobile-logo img {
  height: 32px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}

/* Mobile Menu */
.nx-mobile-menu {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nx-mobile-menu > li > a {
  font-weight:600;
  color:var(--text-dark);
  text-decoration:none;
  display:block;
  padding:6px 0;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.nx-mobile-menu > li > a:hover { color:var(--primary-purple); }
.nx-mobile-menu .sub-menu {
  display:block !important;
  margin:4px 0 6px 16px !important;
  padding:0 !important;
  list-style:none !important;
}
.nx-mobile-menu .sub-menu li a {
  font-size:14px !important;
  font-weight:500 !important;
  padding:4px 0 !important;
  display:block !important;
  color:var(--text-dark) !important;
}
.nx-mobile-menu .sub-menu li a:hover { color:var(--primary-purple) !important; }
.nx-mobile-menu .sub-menu .sub-menu { margin-left:16px !important; font-size:13px !important; }

/* Mobile CTA */
.nx-mobile-cta {
  margin-top:20px;
  text-align:center;
}
.nx-mobile-cta .nx-btn-primary {
  width:100%;
  max-width:240px;
  margin:0 auto;
  font-size:16px;
}
/* Remove streak animation on CTA button */
.nx-btn-primary::before,
.nx-btn-primary:hover::before {
  display: none !important;
}