/* 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:14px;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:var(--font);font-weight:600;color:#fff;letter-spacing:.01em}
.urgency .u-count{font-family:var(--font);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:var(--gut)}
.brand{display:flex;align-items:center;flex:none}
.brand__img{display:block;height:30px;width:auto}

.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:15px;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,
.navitem--drop.open .nav__lang .chev{transform:rotate(180deg)}
.tag-new{font-family:var(--font);font-weight:700;font-size:9px;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:var(--font);font-weight:600;font-size:14px;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:14px;color:var(--ink-3);transition:background .25s}
.nav__lang:hover{background:var(--bone)}
.nav__lang{cursor:pointer;background:none;border:0;font-family:var(--font)}
.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:var(--font);font-weight:600;font-size:11px;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:var(--font);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.mitem__d,.msub__d{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.badge{font-family:var(--font);font-weight:700;font-size:9px;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) ---- */
/* top is set inline by navbar.js to the urgency bar's visible bottom edge, so
   the promo stays readable while the menu is open. Falls back to 0 when the bar
   has been scrolled past. */
.mdrawer{position:fixed;inset:0;z-index:80;pointer-events:none;transition:top .2s}
.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:var(--font);font-weight:500;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
.mpane .m-link:hover{color:var(--blue-deep)}
.m-sect{font-family:var(--font);font-weight:600;font-size:12px;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:var(--font);font-weight:500;font-size:17px;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:var(--font);font-weight:600;font-size:16px;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:var(--font);font-weight:600;font-size:16px;color:var(--ink)}
.m-migrate p{font-size:14px;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:12px}
  .urgency__in{gap:3px 10px;padding-inline:12px}
  .urgency .dot{display:none}
}

/* ---- region / language picker ----
   This control sits at the far RIGHT of the nav, so the panel must be anchored
   right. The shared .dropdown uses left:0, which would push it off-screen. */
.nav__region{position:relative}
.nav__region .dropdown{left:auto;right:0;min-width:300px;padding:12px}
.region__h{font-family:var(--font);font-weight:600;font-size:13px;color:var(--ink);padding:5px 10px 11px}
.region__i{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);transition:background .2s}
.region__i:hover{background:var(--paper)}
.region__i.on{background:var(--blue-soft)}
.region__c{font-family:var(--font);font-weight:600;font-size:15px;color:var(--ink)}
.region__l{font-size:14px;color:var(--muted)}
.region__cur{margin-left:auto;font-size:12px;font-weight:700;color:var(--blue-deep);font-variant-numeric:tabular-nums}

/* circular flag chip */
.cflag{width:20px;height:20px;border-radius:50%;overflow:hidden;flex:none;display:block;
  box-shadow:inset 0 0 0 1px rgba(15,27,46,.14)}
.cflag svg{width:100%;height:100%;display:block}
/* NOTE: .mdrawer__foot svg{width:18px} sits earlier in this file at the SAME
   specificity, so the rule above wins for flags. Don't add a more specific
   override here — that's what squashed them before. */

/* drawer version (nav__lang is display:none under 1024px) */
.mregion{display:flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line)}
.mregion__i{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);
  font-family:var(--font);font-weight:600;font-size:13px;color:var(--ink-3);transition:background .25s,color .25s}
.mregion__i.on{background:var(--blue);color:#fff}