/* =============================================================
   DATARIS — Site navigation (single shared component)
   Linked by every page so the menu is IDENTICAL site-wide.
   Requires colors_and_type.css (design tokens) to be loaded first.
   The page only provides the markup + the small toggle script.
   ============================================================= */

/* ---------- Bar ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--grey-200);
}
.nav .nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:80px;max-width:1320px;margin:0 auto;padding:0 32px;
}
.nav-left{display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo svg{height:39px;width:auto;display:block;max-width:none;flex-shrink:0}

/* ---------- Links ---------- */
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:14px;font-weight:500;color:var(--grey-700);transition:color .15s ease}
.nav-links a:hover,.nav-links a.active{color:var(--deep-navy)}

/* ---------- Right cluster ---------- */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lang{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--grey-500);display:flex;align-items:center;gap:6px;
  padding-right:16px;border-right:1px solid var(--grey-200);
}
.lang span{padding:4px 6px;border-radius:4px;cursor:pointer}
.lang span.active{background:var(--deep-navy);color:#fff}

/* ---------- Nav buttons (identical across all pages) ---------- */
.nav .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:all .15s ease;white-space:nowrap;
  letter-spacing:-.005em;text-decoration:none;
}
.nav .btn-ghost{background:transparent;color:var(--grey-700);border-color:transparent}
.nav .btn-ghost:hover{background:var(--grey-100)}
.nav .btn-primary{
  background:var(--data-blue);color:#fff;
  box-shadow:0 1px 2px rgba(15,26,46,.08), inset 0 1px 0 rgba(255,255,255,.15);
}
.nav .btn-primary:hover{
  background:#3B7DC4;transform:translateY(-1px);
  box-shadow:0 4px 10px -2px rgba(74,144,217,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.nav .btn-arrow{display:inline-block;transition:transform .15s ease}
.nav .btn:hover .btn-arrow{transform:translateX(2px)}

/* ---------- Hamburger ---------- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:transparent;border:none;cursor:pointer;
  padding:0;border-radius:8px;transition:background .15s;margin-left:auto;
}
.nav-toggle:hover{background:rgba(15,26,46,.06)}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--deep-navy);border-radius:1px;margin:0 auto;transition:all .25s cubic-bezier(.16,1,.3,1)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Scrim (mobile only) ---------- */
.nav-scrim{display:none}

/* =====================================================
   Mobile (≤960px): single dropdown panel
   menu items + language + buttons, anchored to viewport top
   ===================================================== */
@media (max-width:1300px){
  .nav .nav-inner{height:60px;padding:0 16px}
  .nav-left{flex:1;gap:0}
  .nav-toggle{display:flex}

  .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:60px;left:0;right:0;
    background:#fff;margin:0;padding:8px 20px 0;
    transform:translateY(-130%);opacity:0;pointer-events:none;
    transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .2s;
    z-index:48;
  }
  body.nav-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{
    font-size:16px;font-weight:600;color:var(--deep-navy);
    padding:15px 4px;border-bottom:1px solid var(--grey-100);
  }
  .nav-links a.active{color:var(--data-blue)}

  .nav-right{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
    position:fixed;top:60px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--border);
    box-shadow:0 18px 30px -18px rgba(15,26,46,.28);
    padding:16px 20px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(-130%);opacity:0;pointer-events:none;
    transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .2s;
    z-index:48;
  }
  body.nav-open .nav-right{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-right .lang{
    display:flex;order:-1;justify-content:center;gap:8px;
    margin:0 0 4px;padding:0 0 14px;border-right:none;
    border-bottom:1px solid var(--grey-100);font-size:13px;
  }
  .nav-right .btn{width:100%;justify-content:center;padding:13px 18px;font-size:15px}

  html:has(body.nav-open){overflow:hidden}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(15,26,46,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:47}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
}