/* ============================================================
   GENIEFX NAVBAR — SINGLE SHARED SOURCE OF TRUTH
   Used by BOTH the static marketing pages and the Next app pages
   (pricing / login / register), so the navbar is literally the same
   component everywhere. Self-contained: literal values (no external CSS
   token dependency) and every rule scoped under .nav / .nav-mobile, so it
   can be loaded next to any page CSS (marketing or the app's Tailwind)
   without leaking styles onto non-nav elements.
   Extracted verbatim (values resolved) from components.css + animations.css
   + visual-enhanced.css + main.css.
   ============================================================ */

/* ---- Smooth cross-page transitions (SPA feel across the WHOLE site) ----
   This file is loaded by every page — static marketing AND the Next app — so
   enabling cross-document View Transitions here makes EVERY same-origin
   navigation (including the full-reload marketing pages) crossfade instead of
   hard-flicker. Naming the navbar `gfx-navbar` makes the browser treat the old
   and new navbars as the SAME element and hold it in place through the
   transition — so the navbar no longer flashes/rebuilds when you change tabs.
   Chromium (Chrome/Edge) animates it; other browsers just navigate normally
   (no worse than before). Respects reduced-motion. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(gfx-navbar) { animation-duration: 0.001s; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.22s; }
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 72px;
  /* Persist the navbar across page navigations (no flicker/rebuild). */
  view-transition-name: gfx-navbar;
  display: flex;
  align-items: center;
  background: rgba(10, 10, 15, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav--hidden { transform: translateY(-100%); }
.nav.scrolled {
  background: rgba(10, 10, 15, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  isolation: isolate;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}
.nav-logo img {
  height: 36px;
  width: auto;
  max-width: 160px;
  display: block;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #b8bed0;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active { color: #f7faff; }

/* Animated underline (section links + the Sign in link). */
.nav-link-underline { position: relative; }
.nav-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #0181fa;
  border-radius: 9999px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link-underline:hover::after,
.nav-link-underline.active::after { width: 100%; }
.nav-link-underline.active { color: #0181fa !important; font-weight: 600; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Sign in — plain text link in the actions cluster (not a section link). */
.nav-right .nav-link-underline {
  font-size: 1rem;
  font-weight: 400;
  color: #f7faff;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Typography lock (unified navbar on EVERY page) ----
   The navbar is shared chrome rendered once by the app shell, but each reused
   marketing page injects its own inline <style> into the document — and some of
   those carry DOCUMENT-LEVEL rules that were harmless as standalone pages but
   leak onto the shared nav in the SPA. The worst offender is pricing.html's
   `[lang="ar"] a, [lang="ar"] button { font-family: 'Cairo', … }`: on an Arabic
   page it matches the nav's own links/buttons and repaints them in a different
   font from every other route (Cairo isn't even loaded, so it lands on the
   system fallback). `.nav-links a` and `[lang="ar"] a` have EQUAL specificity
   (0,1,1), so which wins is just source order — hence the per-page drift.

   Fix: the nav declares its OWN font-family here, on selectors with higher
   specificity than any leaked `[lang="ar"] a/button` (0,1,1), so page CSS can
   never restyle it — AND it mirrors production exactly, PER LANGUAGE:

     • English  → SF Pro Display first (production's <body> font on EN pages).
     • Arabic   → DIN Next Arabic first (production swaps <body> to DIN on AR
                  pages, so the WHOLE nav — including the Latin "EN"/"AR" toggle
                  labels — renders in DIN there). SF Pro has no Arabic glyphs,
                  so Arabic always lands on DIN either way; putting DIN first in
                  AR also pulls the Latin bits into DIN, matching production.

   Sizes/weights are untouched (they already matched production: 15/500 links,
   16/400 sign-in, 14/600 buttons, 13/600 toggle), so this only corrects the
   font-family cascade. */
.nav .nav-links a,
.nav .nav-right a,
.nav .lang-toggle .lang-btn,
.nav .btn,
.nav-mobile a[href],
.nav-mobile .btn {
  font-family:
    var(--font-latin, "SF Pro Display"),
    var(--font-din, "DIN Next LT Arabic"),
    system-ui, -apple-system, sans-serif;
}
/* Arabic: DIN first — exactly what production renders (its AR <body> font is
   dinArabic). Higher specificity than both the rule above and the Cairo leak. */
[lang="ar"] .nav .nav-links a,
[lang="ar"] .nav .nav-right a,
[lang="ar"] .nav .lang-toggle .lang-btn,
[lang="ar"] .nav .btn,
[lang="ar"] .nav-mobile a[href],
[lang="ar"] .nav-mobile .btn {
  font-family:
    var(--font-din, "DIN Next LT Arabic"),
    var(--font-latin, "SF Pro Display"),
    system-ui, -apple-system, sans-serif;
}

/* Segmented control: a single blue pill slides between EN and AR.
   Two rules make this bulletproof:
     • `direction: ltr` on the toggle — this is a UI CONTROL, not content, so
       we lock it to LTR regardless of the page direction. That way EN is
       always on the left, AR is always on the right, and the pill's slide
       animation goes the way the user expects on both English and Arabic
       pages. (When the toggle inherited dir=rtl the flex row flipped
       instantly on language change and the pill did not move — buttons
       swapped positions under a stationary pill, which reads as flicker.)
     • `grid-template-columns: 1fr 1fr` — locks each button to exactly half
       the width. That means the pill's position for each state is a fixed
       CSS value (3px or 50%), no JS measurement needed, no SSR/hydration
       jitter, and the pill is correctly placed on the very first paint. */
.lang-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  direction: ltr;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  padding: 3px;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.lang-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: #0181fa;
  border-radius: 9999px;
  z-index: 0;
  /* Smooth ease-out, no overshoot. Bounce curves (cubic-bezier with a peak
     above 1) read as wobble on a 44 px slide — the pill lands, then jitters,
     which feels like a flicker on tap. Fast-out-slow-in lands cleanly. */
  transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left;
}
.lang-toggle[data-lang="ar"] .lang-pill { left: 50%; }
.lang-btn {
  position: relative;
  z-index: 1;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #838aa0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  text-align: center;
  /* Text color crossfades in step with the pill so the label under the pill
     turns white as the pill arrives. */
  transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.lang-btn.active { color: #fff; }
.lang-btn:focus-visible { outline: 2px solid #0181fa; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .lang-pill,
  .lang-btn { transition: none; }
}

/* Buttons — scoped under .nav / .nav-mobile so global page buttons that also
   use .btn are never affected when this file is loaded on a marketing page. */
.nav .btn,
.nav-mobile .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  position: relative;
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav .btn-sm,
.nav-mobile .btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.nav .btn-primary,
.nav-mobile .btn-primary {
  background: #0181fa;
  color: #fff;
  box-shadow: 0 4px 20px rgba(1, 129, 250, 0.35);
}
.nav .btn-primary:hover,
.nav-mobile .btn-primary:hover {
  background: #0166cc;
  box-shadow: 0 6px 30px rgba(1, 129, 250, 0.5);
  transform: translateY(-1px);
}
.nav .btn-ghost,
.nav-mobile .btn-ghost {
  background: transparent;
  color: #b8bed0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.nav .btn-ghost:hover,
.nav-mobile .btn-ghost:hover { color: #f7faff; border-color: rgba(255, 255, 255, 0.08); }
.nav .btn-ghost-primary,
.nav-mobile .btn-ghost-primary {
  background: transparent;
  color: #0181fa;
  border: 1px solid rgba(1, 129, 250, 0.5);
}
.nav .btn-ghost-primary:hover,
.nav-mobile .btn-ghost-primary:hover {
  background: rgba(1, 129, 250, 0.1);
  color: #0181fa;
  border-color: rgba(1, 129, 250, 0.65);
  box-shadow: 0 0 18px rgba(1, 129, 250, 0.3);
  transform: translateY(-2px);
}

/* Mobile menu */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #f7faff;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #07070a;
  flex-direction: column;
  padding: 2rem 1.5rem;
  gap: 0.5rem;
  overflow-y: auto;
  z-index: 999;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 1.25rem;
  font-weight: 600;
  color: #b8bed0;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.15s;
  text-decoration: none;
}
.nav-mobile a:hover { color: #f7faff; }
.nav-mobile a.active { color: #0181fa; }
.nav-mobile .btn { margin-top: 0.5rem; text-align: center; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-right .btn-primary,
  .nav-right .nav-link-underline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}