/* =========================================================
   header.css — sticky nav bar, logo lockup, language toggle,
   CTA button, and the mobile hamburger menu.
   Used by: index.html
   ========================================================= */

header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e7e9ee;
  backdrop-filter:blur(6px);
}
nav.wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;padding-top:10px;padding-bottom:10px;
  flex-wrap:wrap;
  position:relative;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--blue-800);cursor:pointer;}
.logo small{display:block;font-size:10px;font-weight:500;color:var(--gray-400);letter-spacing:.05em;}

/* nav-links is a semantic <ul>; reset list defaults and lay out as a row */
.nav-links{
  display:flex;gap:30px;font-size:14.5px;font-weight:600;color:var(--blue-800);
  list-style:none;margin:0;padding:0;
}
.nav-links li{display:flex;}
.nav-links a:hover{color:var(--orange-dark);}

.nav-right{display:flex;align-items:center;gap:16px;}
.lang-toggle{
  display:flex;border:1px solid var(--blue-800);border-radius:20px;overflow:hidden;font-size:12.5px;font-weight:700;
}
.lang-toggle button{
  border:none;background:transparent;padding:6px 14px;cursor:pointer;color:var(--blue-800);
}
.lang-toggle button.active{background:var(--blue-800);color:#fff;}
.cta-btn{
  background:var(--orange);color:#fff;padding:9px 20px;border-radius:24px;font-size:14px;font-weight:700;
  box-shadow:0 4px 14px rgba(227,123,38,.35);
}

/* ---------- hamburger menu toggle (mobile only) ---------- */
.nav-toggle{
  display:none; /* shown only under the mobile breakpoint, see responsive.css */
  flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;border:1px solid #e0e4ea;border-radius:8px;
  background:#fff;cursor:pointer;padding:0;
}
.nav-toggle span{
  display:block;width:20px;height:2px;margin:0 auto;background:var(--blue-800);
  border-radius:2px;transition:transform .2s ease, opacity .2s ease;
}
/* animate into an "X" when the menu is open */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}