/* ============================================================
   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}
/* the page you are on is marked, so the nav says where you are and not
   only where you can go */
.nav-links a[aria-current="page"]{background:#f1f1f3;font-weight:500}

/* 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. */

/* These links used to be the page's own headings, so hiding them on a phone
   cost nothing. They are the site's only route between pages now, and a
   phone would be stranded on whatever page it landed on. So the row scrolls
   sideways instead of disappearing, and the bar widens to give it room. */
@media(max-width:900px){
  .nav{max-width:calc(100vw - 24px);padding-inline-end:16px}
  .nav-links{
    margin-inline-end:10px;
    overflow-x:auto;
    scrollbar-width:none;             /* the row is short and obviously scrollable */
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline-start:8px;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:9px 10px;font-size:14px}
  /* Home must not scroll out of reach: it is the way back from every page */
  .nav-home{position:sticky;inset-inline-start:0;background:var(--white,#fff);z-index:1}
}
@media(max-width:620px){
  .nav-wrap{top:10px}
  .nav{margin-top:16px;padding:8px 14px 8px 8px;border-radius:16px}
  /* On a phone the language button and the CTA leave the links about 120px to
     live in, which is one and a half words. So the bar wraps: controls on top,
     the whole link row underneath with the pill's full width to scroll in. */
  .nav{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 20px)}
  .btn-lang,.nav .btn-nav{order:1}
  .nav-links{order:2;width:100%;margin-inline-end:0;margin-top:8px}
  .nav-links a{font-size:13.5px;padding:8px 9px}
  .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}
}

/* ============================================================
   PHONE LAYOUT
   One line: burger, the first destination, the CTA. Everything
   else (home, the rest of the links, the language switch, a
   second CTA) lives in a bottom drawer.
   Above 620px none of this applies and the bar is unchanged.
   ============================================================ */

/* Desktop: the panel is not a container at all, so its children lay out in
   the bar exactly as they did before it existed. */
.nav-panel{display:contents}
.nav-burger,.nav-quick,.drawer-head,.btn-drawer-cta,.nav-scrim{display:none}
.drawer-foot{display:contents}

.nav-burger{
  align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border:1px solid #ececec;border-radius:12px;
  background:#fdfdfd;color:var(--ink,#141414);cursor:pointer;
  margin-inline-end:8px;
}
.nav-burger svg{width:19px;height:19px}
.nav-burger:hover{background:#f4f4f4}

@media(max-width:620px){
  /* FIXED, not sticky. position:sticky only sticks inside its own parent,
     and on the landing page .page ends before #tools, #proof, #faq and the
     footer, which are its siblings. A sticky bar therefore rides away at
     that boundary and sets behind the next card, about 3000px before the
     page ends. Desktop never showed it because the bar fades out on scroll;
     keeping it visible on phones is what exposed it.
     Safe because no ancestor sets transform, filter, contain or will-change
     (checked), so the fixed box is positioned against the viewport and
     .page's overflow:clip does not clip it. */
  .nav-wrap{position:fixed;left:0;right:0}

  /* One row, no wrapping: that was the two-line problem. The bar takes the
     full width and spreads its three items, so nothing crowds.
     Physical margins on purpose: like .nav's pinned direction, the bar keeps
     the same side in both languages. margin-left:auto holds its right edge
     still while the width animates, which is what makes it collapse
     rightwards instead of shrinking from both sides. */
  .nav{
    flex-wrap:nowrap;align-items:center;
    justify-content:space-between;
    width:calc(100% - 40px);max-width:none;
    margin-left:auto;margin-right:20px;
    padding:8px 10px 8px 8px;
    transition:width .45s ease,padding .45s ease,border-radius .45s ease;
  }
  .nav-burger{display:inline-flex;margin-inline-end:6px}

  .nav-quick{
    display:inline-block;text-decoration:none;color:var(--ink,#141414);
    font-size:13.5px;font-weight:500;white-space:nowrap;
    padding:9px 10px;border-radius:10px;
  }
  .nav .btn-nav{margin-inline-start:0;font-size:13px;padding:11px 14px;border-radius:12px}

  /* ---------- the drawer ---------- */
  .nav-panel{
    display:flex;flex-direction:column;
    position:fixed;inset:20% 0 0 0;      /* full width, 20% of the screen left above */
    z-index:200;
    background:var(--white,#fff);
    border-radius:24px 24px 0 0;
    box-shadow:0 -18px 50px rgba(10,10,10,.22);
    transform:translateY(100%);
    transition:transform .38s cubic-bezier(.2,.7,.2,1);
    padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px));
    /* the sheet never grows past its own box; the list inside scrolls */
    overflow:hidden;
  }
  .nav-panel.drawer-open{transform:translateY(0)}

  /* :not([hidden]) is load-bearing. A bare display:block outranks the
     hidden attribute, which left an invisible full-screen layer over the
     page eating every tap, the burger included. It must not be displayed
     until JS un-hides it, and it must not catch pointers while fading. */
  .nav-scrim:not([hidden]){
    display:block;position:fixed;inset:0;z-index:199;
    background:rgba(10,10,10,.42);
    opacity:0;pointer-events:none;
    transition:opacity .38s ease;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .nav-scrim.scrim-on{opacity:1;pointer-events:auto}
  /* while the sheet is open the page behind it must not scroll */
  html.nav-drawer-open,html.nav-drawer-open body{overflow:hidden}

  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 4px 14px;flex:none;
  }
  .drawer-title{font-size:14px;color:#6a6a72}
  .drawer-close{
    width:40px;height:40px;flex:none;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #ececec;border-radius:12px;
    background:#fdfdfd;color:var(--ink,#141414);cursor:pointer;
  }
  .drawer-close svg{width:18px;height:18px}

  /* the link list: a column, and the only thing that scrolls when the site
     outgrows the screen */
  .nav-panel .nav-links{
    display:flex;flex-direction:column;align-items:stretch;
    order:0;width:auto;margin:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    flex:1 1 auto;min-height:0;
  }
  .nav-panel .nav-links a{
    font-size:16px;padding:14px 12px;border-radius:12px;text-align:start;
  }
  .nav-panel .nav-home{position:static;background:transparent;padding:14px 12px}
  .nav-panel .nav-sep{width:auto;height:1px;margin:6px 12px;background:#ececec}

  .drawer-foot{
    display:flex;align-items:center;gap:10px;flex:none;
    padding-top:14px;margin-top:6px;border-top:1px solid #f0f0f2;
  }
  .drawer-foot .btn-lang{flex:none;padding:13px 15px;font-size:13.5px;border-radius:13px}
  .btn-drawer-cta{
    display:block;flex:1 1 auto;text-align:center;text-decoration:none;
    padding:15px 18px;font-size:15px;border-radius:13px;
    background:linear-gradient(180deg,#c94e41,#c3382a);color:#fff;
    font-family:var(--font-body,inherit);font-weight:500;
    box-shadow:0 10px 22px rgba(241,75,60,.3), inset 0 1px 0 rgba(255,255,255,.35);
  }

  /* ---------- scrolling: minimize, do not vanish ----------
     On desktop the bar fades away. On a phone it must stay reachable, so
     the same trigger and the same .45s instead collapses it to the burger
     alone, keeping its white pill and shadow so it reads against any
     content underneath. */
  /* Collapsed it is a 56px square (40px burger + 8px each side) pinned to
     the right edge. Animating width to a real number rather than to auto is
     what gives the minimize a motion instead of a jump. */
  .nav-wrap.nav-hidden .nav{
    opacity:1;transform:none;filter:none;pointer-events:auto;
    width:56px;padding:8px;border-radius:14px;
    justify-content:center;
    margin-right:20px;
  }
  .nav-quick,.nav .btn-nav{
    transition:opacity .45s ease,max-width .45s ease,padding .45s ease,
               margin .45s ease,transform .45s ease;
    max-width:60vw;overflow:hidden;
  }
  .nav-wrap.nav-hidden .nav-quick,
  .nav-wrap.nav-hidden .nav .btn-nav{
    opacity:0;max-width:0;padding-inline:0;margin-inline:0;
    transform:scale(.9);pointer-events:none;
  }
  .nav-wrap.nav-hidden .nav-burger{margin-inline-end:0}
}