/* Header / navbar */
.hdr{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid #e6e6e6;padding-top:env(safe-area-inset-top,0px)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo svg{height:32px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:8px}
.nav > a{text-decoration:none;font-weight:700;font-size:14.5px;padding:10px 16px;border-radius:999px;border:2px solid transparent;transition:border-color .2s,transform .2s}
.nav > a:hover{border-color:var(--line);transform:rotate(-3deg)}
.nav > a[aria-current="page"]{border-color:var(--ink)}

/* Language switch (server-side: each option is a link that sets ?lang=) */
.lang{display:inline-flex;padding:4px;gap:2px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,.06);margin-left:6px}
.lang a{display:inline-flex;align-items:center;gap:7px;font:700 13.5px var(--body);padding:7px 13px;border-radius:999px;text-decoration:none;color:var(--ink-2);transition:background .2s,color .2s}
.lang a:hover{background:#f3f3f3}
.lang a[aria-current="true"]{background:var(--ink);color:var(--white)}
.lang svg{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px #ddd;flex:none}

/* Mobile menu button */
.menu-btn{display:none;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer}
.menu-btn span{display:block;width:18px;height:2.5px;background:var(--ink);margin:4px auto;transition:.2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:820px){
  .menu-btn{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 22px;border-bottom:1px solid #e6e6e6;display:none}
  .nav.open{display:flex}
  .nav > a{font-size:18px;padding:14px 4px}
  .lang{align-self:flex-start;margin-top:8px}
}