/* ============================================================
   Site nav — one component, shared by every page.
   Rendered by nav.js into <div id="siteNav"></div>.

   The scroll-away state is .nav-hidden rather than .gone, because the
   Nisha case study already uses .gone for a content grid and the two
   would collide the moment this stylesheet loads there.
   ============================================================ */

.nav-wrap{
  position:sticky;top:26px;z-index:100;
  display:flex;justify-content:center;align-items:flex-start;
  height:0;
}
.nav{
  margin-top:34px;
  position:relative;
  display:flex;align-items:center;
  direction:rtl;                  /* pinned: nav layout never mirrors on language switch */
  background:var(--white,#fff);
  border-radius:18px;
  padding:10px 26px 10px 14px;
  box-shadow:0 12px 34px rgba(10,10,10,.08);
  transition:opacity .45s ease,transform .45s ease,filter .45s ease;
}
.nav-wrap.nav-hidden .nav{
  opacity:0;
  transform:translateY(-46px);
  filter:blur(8px);
  pointer-events:none;
}

.nav-links{display:flex;align-items:center;gap:6px;margin-inline-end:22px}
.nav-links a{
  text-decoration:none;color:var(--ink,#141414);
  font-size:14.5px;font-weight:400;
  padding:9px 12px;border-radius:10px;
  transition:background .2s;
  white-space:nowrap;
}
.nav-links a:hover{background:#f1f1f3}

/* Home is the way back from every subpage, so it carries a mark, sits a
   step firmer than a section link, and never collapses on small screens. */
.nav-home{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.nav-home svg{flex:none}
.nav-sep{width:1px;height:20px;background:#ececec;margin:0 4px;flex:none}

.btn-lang{
  display:flex;align-items:center;gap:7px;
  background:#fdfdfd;
  border:1px solid #ececec;
  border-radius:13px;
  font-family:var(--font-body,inherit);
  font-size:13.5px;font-weight:500;padding:12px 15px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:background .2s;
  flex:none;
}
.btn-lang:hover{background:#f4f4f4}
.btn-lang span{display:inline-block;min-width:22px;text-align:center}
.btn-lang svg{flex:none}

/* the nav CTA is the page's own .btn-red, just sized for the bar. Two
   classes deep so it outranks .btn-red wherever that is defined. */
.nav .btn-nav{
  margin-top:0;margin-inline-start:9px;
  padding:14px 24px;font-size:14.5px;
  white-space:nowrap;flex:none;
  box-shadow:0 8px 20px rgba(241,75,60,.3), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Breakpoints match the landing page's existing ladder (900 / 620 / 360) so
   moving the nav out of the pages changes nothing about how it responds. */

/* section links fold away, Home does not: it is the only way back from a
   subpage, which is the whole reason this component exists */
@media(max-width:900px){
  .nav-links a[data-nav-section],.nav-sep{display:none}
  .nav-links{margin-inline-end:10px}
}
@media(max-width:620px){
  .nav-wrap{top:10px}
  .nav{margin-top:16px;padding:8px 14px 8px 8px;border-radius:16px}
  .btn-lang{padding:10px 11px;font-size:12.5px;gap:5px;border-radius:11px}
  .btn-lang svg{width:14px;height:14px}
  .nav .btn-nav{margin-inline-start:6px;font-size:13px;padding:11px 13px;border-radius:11px;margin-top:0;width:auto;max-width:none}
  .nav-wrap.nav-hidden .nav{transform:translateY(-34px)}
  .nav-home{padding:9px 10px}
}
@media(max-width:360px){
  .btn-lang{padding:9px 9px;font-size:12px}
  .nav .btn-nav{font-size:12px;padding:10px 11px;margin-inline-start:4px}
}