/* ══════════════════════════════════════════════════════════════
   PI2AI shared nav bar — canonical styling, resolved from index.html's
   cascade. Every page links this file, placed after any of that page's
   own inline styles, so it wins the cascade without needing to hunt
   down and delete every old per-page nav rule (same strategy as
   footer.css). Requires tokens.css to be loaded for --navy/--navy-dim/
   --text/--muted/--border/--max.

   Markup contract (must match on every page):

   <nav id="main-nav"> or <nav>
     <div class="nav-inner">
       <a href="index.html" class="nav-logo">...</a>
       <ul class="nav-links">
         <li><a href="..." class="active-link">...</a></li>  (active-link on current page)
       </ul>
       <div class="nav-actions">
         <a class="btn-primary-sm">...</a>
         <button class="hamburger" id="hamburger">
           <span></span><span></span><span></span>
         </button>
       </div>
     </div>
     <div class="mobile-menu" id="mobile-menu">
       <ul class="mobile-links">...</ul>
       <a class="mobile-cta">...</a>
     </div>
   </nav>
   ══════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--navy);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 700;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

nav,
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition:
    top 0.3s ease,
    box-shadow 0.3s ease;
}
nav::after,
#main-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navy-dim);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo — rendered as the logo.svg image on every page */
.nav-logo {
  display: inline-flex !important;
  align-items: center;
  width: 200px;
  height: 36px;
  background: url("../logo.svg") left center/contain no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}
.nav-logo > * {
  display: none !important;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  transition:
    color 0.2s,
    background 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  right: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition:
    left 0.25s ease,
    right 0.25s ease;
}
.nav-links a:hover {
  color: var(--text);
  background: var(--navy-dim);
}
.nav-links a:hover::after {
  left: 16px;
  right: 16px;
}
.nav-links a.active-link {
  color: var(--navy);
  font-weight: 600;
}
.nav-links a.active-link::after {
  left: 16px;
  right: 16px;
}

/* Right actions */
.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-primary-sm {
  padding: 9px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #9368b7, #3d3fbf);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transition: all 0.22s;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(147, 104, 183, 0.22),
    0 1px 3px rgba(61, 63, 191, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
  border: none;
  font-family: inherit;
}
.btn-primary-sm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.btn-primary-sm:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 8px 24px rgba(61, 63, 191, 0.28),
    0 2px 6px rgba(61, 63, 191, 0.25);
}
.btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(1.5);
  }
}

/* Hamburger + mobile menu */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
}
.hamburger:hover {
  background: var(--navy-dim);
}
.hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: all 0.3s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px 24px;
  box-shadow: 0 8px 32px var(--navy-dim);
}
.mobile-menu.open {
  display: block;
}
.mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}
.mobile-links a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.mobile-links a:hover {
  background: var(--navy-dim);
  color: var(--navy);
}
.mobile-cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #9368b7, #3d3fbf);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(61, 63, 191, 0.28);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .btn-primary-sm {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}
@media (max-width: 768px) {
  .nav-inner {
    padding: 0 24px;
  }
}
@media (max-width: 480px) {
  .nav-logo {
    width: 160px;
    height: 32px;
  }
  .nav-inner {
    padding: 0 16px;
    height: 60px;
  }
  .btn-primary-sm {
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
  .btn-dot {
    width: 6px;
    height: 6px;
  }
}
@media (max-width: 360px) {
  .nav-inner {
    padding: 0 12px;
    height: 58px;
  }
}