/* ============================================================================
   nav26.css — the site-wide navigation, extracted from home26.css (20.9.26)

   WHY THIS FILE EXISTS
   Lior, 20.9.26: "התפריט משתנה בין הסקטורים, צריך אחידות."
   The site ran two navigations: `.nav26` (home + 20 investment pages, styled by
   home26.css) and `.nav` (15 content pages, styled by styles.css). They differed in
   shape, items and colour, so moving between sections looked like moving between sites.

   WHY NOT JUST LOAD home26.css ON THOSE PAGES
   home26.css and styles.css share 15 class names — .btn, .btn-gold, .btn-ghost, .lead,
   .reveal, .form-card, .hero-grid, .a, .b, .c, .in … — so loading it would restyle every
   button and paragraph on those pages. This file carries the nav rules only.

   VARIABLE SCOPING
   The tokens are declared on `.nav26` itself, not on :root. `--ink` and `--ink-2` also
   exist in styles.css with different values; scoping keeps this file from changing
   anything outside the header.

   PAIRS WITH js/nav26.js. Do not load this on a home26 page — home26.css already has it.
   ============================================================================ */

.nav26{
  --paper-2:#F7F9FA; --paper-3:#EFF3F5;
  --ink:#0A0B0D; --ink-2:#3A414D; --ink-3:#646C7A;
  --teal-dk:#0B7D6F; --teal-pale:rgba(14,158,140,.10); --teal-wash:rgba(14,158,140,.06);
  --gold-dk:#8A6508; --gold-pale:rgba(184,134,11,.12); --gold-wash:rgba(184,134,11,.07);
  --line:rgba(10,11,13,.10); --line-2:rgba(10,11,13,.18); --line-gold:rgba(184,134,11,.3);
  --sh-1:0 1px 2px rgba(10,11,13,.04);
  --sh-3:0 1px 3px rgba(10,11,13,.06), 0 30px 64px -30px rgba(10,11,13,.3);
  --glass:#FFFFFF; --r-lg:16px;
  --f-ui:'Rubik',system-ui,sans-serif; --f-body:'Assistant',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --shell:min(1240px, 100% - 44px);

  position:fixed;top:0;inset-inline:0;z-index:100;transition:all .38s var(--ease);
}

/* nav26 is fixed and therefore takes no layout space, while the .nav it replaces was
   sticky and did. Without this the first section slides under the header. */
body{padding-top:88px}

/* 🔴 And the matching half: a fixed header also swallows every #anchor jump. home26.css
   carries `html:has(.home26){scroll-padding-top:76px}`, which does NOT apply here — these
   pages have no .home26 — so "השארת פרטים" landed with the form hidden under the bar.
   88px header + 8px air. Keep the two numbers in step. */
html{scroll-padding-top:118px;scroll-behavior:smooth}
/* 118, not 96: `body{padding-top:88px}` above shifts the document, and measuring the live
   site showed a 96px setting landing the section at 69px — under the 74px stuck header.
   118 was calibrated against /about, /process and /app, which now land at ~90px. If the
   header height ever changes, re-measure rather than reasoning about it. */

.nav26::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .38s var(--ease);
  background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);box-shadow:0 1px 24px rgba(11,26,46,.05);
}
.nav26.stuck::before{opacity:1}
.nav26 .nav-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:22px;
  padding:18px 0;position:relative;transition:padding .38s var(--ease)}
.nav26.stuck .nav-in{padding:11px 0}

.nav26 .brand{display:flex;align-items:center;gap:12px;flex:none}
.nav26 .brand-tile{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:#fff;padding:7px;border:1px solid var(--line);
  box-shadow:0 6px 18px -8px rgba(46,164,160,.5);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease);
}
.nav26 .brand:hover .brand-tile{transform:translateY(-2px) rotate(-3deg);box-shadow:0 12px 28px -8px rgba(46,164,160,.6);border-color:var(--line-2)}
.nav26 .brand-tile img{width:100%;height:auto}
.nav26 .brand-txt{font-family:var(--f-ui);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.nav26 .brand-txt small{display:block;font-family:var(--f-body);font-weight:500;font-size:.72rem;color:var(--ink-3);letter-spacing:.02em;margin-top:2px}

.nav26 .nav-menu{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav26 .nav-item{position:relative}
.nav26 .nav-link{
  display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:11px;
  font-size:.95rem;font-weight:600;color:var(--ink-2);
  transition:color .26s,background .26s;
}
.nav26 .nav-link:hover,.nav26 .nav-item.open .nav-link{color:var(--teal-dk);background:var(--teal-wash)}
.nav26 .nav-link .chev{width:9px;height:9px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s var(--ease)}
.nav26 .nav-item.open .chev{transform:rotate(-135deg) translateY(-2px)}

.nav26 .mega{
  position:absolute;top:calc(100% + 12px);inset-inline-end:0;min-width:330px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav26 .nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav26 .mega a{display:flex;align-items:flex-start;gap:13px;padding:11px 13px;border-radius:14px;transition:background .24s}
.nav26 .mega a:hover{background:var(--paper-3)}
.nav26 .mega .ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(140deg,var(--teal-pale),var(--gold-pale));border:1px solid var(--line);font-size:1.05rem}
.nav26 .mega b{display:block;font-family:var(--f-ui);font-weight:700;font-size:.94rem;color:var(--ink)}
.nav26 .mega span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.5;margin-top:2px}
.nav26 .mega .cnt{margin-inline-start:auto;align-self:center;font-size:.72rem;font-weight:800;color:var(--gold-dk);
  background:var(--gold-wash);border:1px solid var(--line-gold);border-radius:999px;padding:3px 9px;flex:none}

/* .btn/.btn-gold also exist in styles.css with other values, so the CTA is restated at
   (0,2,0) here instead of inheriting whichever sheet happens to load last. */
/* Copied verbatim from `.btn` + `.btn.btn-gold` in home26.css so the header button is the
   same object on all 36 pages. It is restated here because styles.css has its own
   `a.btn.btn-gold` at (0,2,1); this sits at (0,3,1) so the outcome does not depend on
   which sheet happens to load last. Do not "fix" the dark ink — #2B1D02 on this gold is
   the homepage's own pairing, and white on the light stop fails contrast. */
.nav26 .nav-in a.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  padding:11px 22px;border-radius:999px;
  font-family:var(--f-body);font-weight:700;font-size:.93rem;
  border:0;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#F7D169,#C8931F);color:#2B1D02;
  box-shadow:0 0 0 1px rgba(200,147,31,.5), 0 16px 44px -12px rgba(224,185,74,.72);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),color .3s;
}
.nav26 .nav-in a.nav-cta:hover{
  transform:translateY(-3px);color:#2B1D02;
  box-shadow:0 0 0 1px rgba(200,147,31,.72), 0 24px 62px -14px rgba(224,185,74,.9);
}

.nav26 .burger{display:none;flex:none;width:44px;height:44px;border-radius:12px;background:var(--glass);border:1px solid var(--line-2);
  place-items:center;gap:5px;flex-direction:column;box-shadow:var(--sh-1);cursor:pointer}
.nav26 .burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .34s var(--ease),opacity .24s}
.nav26.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav26.open .burger span:nth-child(2){opacity:0}
.nav26.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:940px){
  .nav26{--shell:min(1240px, 100% - 34px)}
  .nav26 .nav-menu{
    position:fixed;top:0;inset-inline-end:0;width:min(360px,86vw);height:100dvh;
    flex-direction:column;align-items:stretch;gap:5px;padding:96px 20px 30px;overflow-y:auto;
    background:var(--paper-2);border-inline-start:1px solid var(--line);
    transform:translateX(-100%);transition:transform .44s var(--ease);margin:0;
  }
  /* shadow on the open state only — on the closed, off-screen drawer its 60px blur bled a
     grey band down the edge of every phone screen (home26.css, 17.9.26) */
  .nav26.open .nav-menu{transform:translateX(0);box-shadow:-16px 0 60px rgba(0,0,0,.7)}
  .nav26 .nav-link{padding:14px 16px;font-size:1.02rem}
  .nav26 .mega{position:static;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;
    background:transparent;border:0;border-inline-start:2px solid var(--line-2);border-radius:0;
    padding:0 12px;margin:2px 12px 8px;display:none}
  .nav26 .nav-item.open .mega{display:block}
  .nav26 .burger{display:grid;margin-inline-start:auto}
  .nav26 .nav-in a.nav-cta{margin-top:18px;width:100%;justify-content:center;padding:15px 22px;font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  .nav26,.nav26 *{transition-duration:.01ms !important}
}