/* goapp.net site header — the same menu as the home page and every inner page.
   Self-contained (own --sn-* tokens) so any inner page can link it as-is.
   Needs: Clash Display + Satoshi (fontshare), JetBrains Mono, IBM Plex Sans Arabic. */
#nav {
  --sn-text: #F4F7FB;
  --sn-muted: #AEB7C6;
  --sn-line: rgba(244,247,251,0.12);
  --sn-blue: #4DA3FF;
  --sn-orange: #FF6B2C;
  position: sticky; top: 0; z-index: 40;
  padding: 1.05rem 5vw; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(8,11,20,0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--sn-line);
  font-family: 'Satoshi', system-ui, sans-serif;
}
#nav a { text-decoration: none; }
#nav .nav-logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
#nav .nav-logo img { height: 30px; width: auto; }
#nav .nav-wordmark { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--sn-text); }
#nav .nav-wordmark .go { color: var(--sn-orange); }
#nav .nav-wordmark .app { color: var(--sn-blue); }
#nav .nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; }
#nav .nav-links a { color: var(--sn-muted); transition: color 0.2s; white-space: nowrap; position: relative; }
#nav .nav-links a:not(.nav-pill):not(.nav-lang)::after { content: ''; position: absolute; inset-inline-start: 0; bottom: -5px; width: 0; height: 1px; background: var(--sn-blue); transition: width 0.25s ease; }
#nav .nav-links a:not(.nav-pill):not(.nav-lang):hover { color: var(--sn-text); }
#nav .nav-links a:not(.nav-pill):not(.nav-lang):hover::after,
#nav .nav-links a[aria-current="page"]::after { width: 100%; }
#nav .nav-links a[aria-current="page"] { color: var(--sn-text); }
#nav .nav-pill {
  background: var(--sn-orange); color: #fff;
  padding: 0.42em 0.95em; border-radius: 100px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.35em;
}
#nav .nav-pill::before { content: '★'; font-size: 0.7em; }
#nav .nav-lang {
  border: 1px solid var(--sn-line); border-radius: 6px;
  padding: 0.35em 0.7em; font-family: 'JetBrains Mono', system-ui, monospace;
  font-size: 0.68rem; letter-spacing: 0.08em; color: var(--sn-muted);
}
#nav .nav-lang:hover { color: var(--sn-text); border-color: var(--sn-muted); }
#nav .nav-lang b { color: var(--sn-text); }
#nav .nav-lang .ar { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; letter-spacing: 0; }
#nav .nav-toggle { display: none; }
/* Pages whose hero was laid out under a fixed header keep it fixed. */
#nav.nav-fixed { position: fixed; left: 0; right: 0; }
/* The language switch can be a button (in-page switch on /build). */
#nav button.nav-lang { background: none; cursor: pointer; line-height: inherit; font-weight: inherit; }

html[dir="rtl"] #nav .nav-links { font-family: 'IBM Plex Sans Arabic', 'Satoshi', sans-serif; font-size: 0.84rem; letter-spacing: 0; gap: 1.1rem; }

/* 15 items: tighten first, then collapse to the menu button before anything clips */
@media (max-width: 1500px) { #nav { padding-inline: 3vw; } #nav .nav-links { gap: 1.1rem; } html[dir="rtl"] #nav .nav-links { gap: 0.95rem; font-size: 0.8rem; } }
@media (max-width: 1320px) {
  #nav .nav-links {
    position: fixed; top: 0; left: 0; right: 0;
    height: 100vh; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 1.6rem;
    background: rgba(7,10,18,0.97);
    font-size: 1.1rem; transform: translateY(-100%);
    visibility: hidden; pointer-events: none;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), visibility 0.45s; z-index: 39;
  }
  html[dir="rtl"] #nav .nav-links { font-size: 1.15rem; }
  #nav .nav-links.open { transform: translateY(0); visibility: visible; pointer-events: auto; }
  #nav .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; z-index: 41;
    background: none; border: none; cursor: pointer; padding: 10px;
  }
  #nav .nav-toggle span { width: 24px; height: 2px; background: var(--sn-text); transition: transform 0.3s, opacity 0.3s; }
  #nav .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #nav .nav-toggle.open span:nth-child(2) { opacity: 0; }
  #nav .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { #nav .nav-links, #nav .nav-toggle span { transition: none; } }