/* ═══════════════════════════════════════════════════════════════
   PrintWearAI — shared marketing nav (mega-menu + mobile drawer)
   Loaded on every public page; consumed by the markup injected
   in saas/*.html and saas/widget.html.
   ═══════════════════════════════════════════════════════════════ */

.pwai-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }

.nav-link { color: var(--ink-2); transition: color .15s; font-size: 14px; text-decoration: none; }
.nav-link:hover { color: var(--ink); }
.nav-link-account { padding: 7px 10px; border-radius: 8px; }
.nav-link-account:hover { background: var(--surface); color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 6px; }

.nav-mega { position: relative; }
.nav-mega-trigger {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--ink-2);
  padding: 7px 10px; border-radius: 8px;
}
.nav-mega-trigger:hover { color: var(--ink); background: var(--surface); }
.nav-mega.open .nav-mega-trigger { color: var(--ink); background: var(--surface); }

.nav-mega-pop {
  position: absolute; top: 100%; left: -10px; min-width: 480px;
  /* Padding-top de 14 px comble le 'trou' entre le trigger et le
     popup visuel — sans ce padding, mouseleave se déclenchait
     pendant que la souris traversait le gap, et le menu fermait
     avant que l'utilisateur puisse cliquer un sous-lien. */
  padding-top: 14px;
  background: transparent;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 50;
}
/* Le vrai conteneur visuel : on le distingue du padding-top transparent */
.nav-mega-pop .nav-mega-grid {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(10,10,10,.10);
}
.nav-mega.open .nav-mega-pop { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-mega-grid a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; transition: background .12s;
}
.nav-mega-grid a:hover { background: var(--surface); }
.nav-mega-grid a b { display: block; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: -.005em; }
.nav-mega-grid a span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.nav-burger {
  display: none; width: 32px; height: 32px; padding: 8px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 4px; align-items: stretch;
}
.nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s, opacity .18s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position: fixed; top: 64px; left: 0; right: 0;
  max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 18px 22px 28px; z-index: 40;
}
.nav-drawer-grp { padding: 12px 0; border-bottom: 1px solid var(--border); }
.nav-drawer-grp:last-child { border-bottom: 0; }
.nav-drawer-h { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.nav-drawer-grp a { display: block; padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 16px; }

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-link-account { display: none; }
}