/* SitePex — navbar.css
   Urgency bar + nav + mega menu + mobile drawer. Requires base.css. */

/* ---- 04. URGENCY BAR ---- */
.urgency{
  min-height:var(--ub-h);display:flex;align-items:center;justify-content:center;
  padding-block:7px;line-height:1.45;
  background:var(--ink);color:var(--bone);
  font-size:.85rem;position:relative;overflow:hidden;z-index:60;
  border-bottom:1px solid var(--line-ink);
}
.urgency::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.18),transparent);
  transform:translateX(-100%);animation:sweep 6s linear infinite;
}
@keyframes sweep{to{transform:translateX(100%)}}
.urgency__in{display:flex;align-items:center;gap:5px 13px;flex-wrap:wrap;justify-content:center;text-align:center;padding-inline:16px;position:relative}
.urgency .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(249,115,22,.6);animation:pulse 2s infinite}
.urgency strong{font-family:"Space Grotesk",sans-serif;font-weight:600;color:#fff;letter-spacing:.01em}
.urgency .u-count{font-family:"JetBrains Mono",monospace;color:var(--blue-bright);font-weight:600}
.urgency a{color:#fff;border-bottom:1px dashed rgba(255,255,255,.5);padding-bottom:1px;transition:border-color .3s}
.urgency a:hover{border-color:var(--blue-bright)}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}

/* ---- 05. NAV ---- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(240,244,255,.72);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s;
}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1);background:rgba(240,244,255,.9)}
.nav__in{display:flex;align-items:center;gap:8px;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.26rem;color:var(--ink);letter-spacing:-.02em;flex:none}
.brand__mark{width:32px;height:32px;border-radius:9px;background:var(--grad-blue);display:grid;place-items:center;box-shadow:var(--sh-blue);flex:none}
.brand__mark svg{width:18px;height:18px;color:#fff}
.brand b{color:var(--blue-deep)}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:14px}
.navitem{display:flex;align-items:center}
.navitem--drop{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:inherit;
  padding:9px 13px;border-radius:var(--r-sm);
  font-weight:500;font-size:.96rem;color:var(--ink-3);transition:background .25s,color .25s;
}
.nav__link:hover{background:var(--bone);color:var(--ink)}
.nav__link .chev{width:14px;height:14px;opacity:.55;transition:transform .3s}
.navitem--mega.open .nav__link .chev,.navitem--drop.open .nav__link .chev{transform:rotate(180deg)}
.tag-new{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.58rem;letter-spacing:.07em;color:var(--blue-deep);background:var(--blue-soft);padding:2px 6px;border-radius:6px;margin-left:1px;text-transform:uppercase}

.nav__spacer{flex:1}
.nav__cta{display:flex;align-items:center;gap:8px}
.nav__ai{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-pill);
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.9rem;color:var(--blue-deep);
  border:1.5px solid transparent;position:relative;transition:box-shadow .3s,transform .3s;
  background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--grad-blue) border-box;
  box-shadow:var(--sh-1);
}
.nav__ai:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.nav__ai svg{width:15px;height:15px;color:var(--blue)}
.nav__lang{display:inline-flex;align-items:center;gap:6px;padding:9px 9px;border-radius:var(--r-sm);font-weight:500;font-size:.9rem;color:var(--ink-3);transition:background .25s}
.nav__lang:hover{background:var(--bone)}
.nav__lang .globe{width:17px;height:17px;opacity:.75}
.nav__lang .chev{width:12px;height:12px;opacity:.5}
.nav__acct{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink);border:1px solid var(--line);background:var(--paper-2);transition:border-color .25s,color .25s;flex:none}
.nav__acct:hover{border-color:var(--blue-bright);color:var(--blue-deep)}
.nav__acct svg{width:19px;height:19px}
.nav__burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--paper-2);place-items:center;flex:none}
.nav__burger svg{width:22px;height:22px;color:var(--ink)}

/* ---- mega + dropdown panels (desktop hover/focus) ---- */
.mega,.dropdown{
  position:absolute;opacity:0;visibility:hidden;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:70;
}
.mega{top:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(8px);width:min(1080px,calc(100vw - 40px));padding:26px 28px}
.dropdown{top:calc(100% + 7px);left:0;min-width:290px;padding:10px}
.navitem--mega.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.navitem--drop.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.navitem--mega .nav__link,.navitem--drop .nav__link{user-select:none}

.mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 30px}
.mega__group + .mega__group{margin-top:20px}
.mega__h{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:0 10px;margin-bottom:5px}
.mitem{display:flex;gap:12px;padding:9px 10px;border-radius:var(--r);transition:background .2s}
.mitem:hover{background:var(--paper)}
.mitem__ic,.msub__ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--grad-blue-soft);color:var(--blue-deep);border:1px solid var(--line)}
.mitem__ic svg,.msub__ic svg{width:18px;height:18px}
.mitem__tx{min-width:0}
.mitem__t,.msub__t{display:flex;align-items:center;gap:7px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.94rem;color:var(--ink);letter-spacing:-.01em}
.mitem__d,.msub__d{font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.4}
.badge{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.56rem;letter-spacing:.05em;padding:2px 6px;border-radius:6px;text-transform:uppercase;white-space:nowrap}
.badge--new{color:var(--blue-deep);background:var(--blue-soft)}
.badge--trial{color:var(--green);background:var(--green-soft)}
.dropdown .mitem__ic{width:30px;height:30px}
.dropdown .mitem__ic svg{width:16px;height:16px}

/* ---- mobile drawer (drill-down) ---- */
.mdrawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.mdrawer__scrim{position:absolute;inset:0;background:rgba(15,27,46,.45);opacity:0;transition:opacity .3s}
.mdrawer__panel{position:absolute;top:0;right:0;height:100%;width:min(100%,460px);background:var(--paper-2);
  box-shadow:var(--sh-4);transform:translateX(100%);transition:transform .38s var(--ease);display:flex;flex-direction:column;overflow:hidden}
.mdrawer.open{pointer-events:auto}
.mdrawer.open .mdrawer__scrim{opacity:1}
.mdrawer.open .mdrawer__panel{transform:none}
.mdrawer__top{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line);flex:none}
.mdrawer__close{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);background:var(--paper-2)}
.mdrawer__close svg{width:20px;height:20px}
.mdrawer__body{position:relative;flex:1;overflow:hidden}
.mpane{position:absolute;inset:0;overflow-y:auto;padding:12px 18px 22px;transform:translateX(100%);transition:transform .32s var(--ease);background:var(--paper-2);display:flex;flex-direction:column}
.mpane--root{transform:translateX(0)}
.mpane.is-active{transform:translateX(0)}
.mpane .m-link{display:flex;align-items:center;padding:15px 10px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:1.06rem;color:var(--ink);border-bottom:1px solid var(--line)}
.mpane .m-link:hover{color:var(--blue-deep)}
.m-sect{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:20px 10px 8px;display:flex;align-items:center;gap:12px}
.m-sect::after{content:"";flex:1;height:1px;background:var(--line)}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:15px 10px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:1.06rem;color:var(--ink);border-bottom:1px solid var(--line)}
.m-row:hover{color:var(--blue-deep)}
.m-row .chev{width:18px;height:18px;opacity:.45;flex:none}
.mpane__back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);padding:6px 4px 14px;align-self:flex-start}
.mpane__back svg{width:20px;height:20px}
.msub{display:flex;gap:12px;padding:13px 8px;border-bottom:1px solid var(--line)}
.m-migrate{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:18px;padding:16px;border-radius:var(--r);background:var(--grad-blue-soft);border:1px solid var(--line)}
.m-migrate h6{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1rem;color:var(--ink)}
.m-migrate p{font-size:.85rem;color:var(--muted);margin-top:3px}
.m-migrate svg{width:18px;height:18px;color:var(--blue-deep);flex:none;margin-top:2px}
.mdrawer__foot{flex:none;display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-top:1px solid var(--line)}
.mdrawer__foot a{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink-3)}
.mdrawer__foot svg{width:18px;height:18px}


/* ---- responsive ---- */
@media(max-width:1024px){
  .nav__links,.nav__ai,.nav__lang,.nav__acct{display:none}
  .nav__burger{display:grid}
  .nav__in{gap:12px}
}
@media(max-width:560px){
  .urgency{font-size:.78rem}
  .urgency__in{gap:3px 10px;padding-inline:12px}
  .urgency .dot{display:none}
}