/* ═══════════════════════════════════════════════════════════════════════
   WNC — MENU MOBILNE (burger) + FILTRY ROZWIJANE
   2026-09-29
   milo: "na mobile w ogole brakuje menu... ale zeby nie zajmowalo 30 procent ekranu"
   ═══════════════════════════════════════════════════════════════════════ */

/* ── burger: ukryty na desktopie ── */
.nav-burger{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line, #dfe4dc);
  border-radius:11px;
  background:var(--card, #fffdf9);
  cursor:pointer;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transition:background .18s, border-color .18s;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger:hover{border-color:#2b6b52}
.nav-burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--ink, #18221f);
  transition:transform .22s ease, opacity .16s ease;
}
/* X po otwarciu */
.nav-burger[aria-expanded="true"]{background:#2b6b52; border-color:#2b6b52}
.nav-burger[aria-expanded="true"] span{background:#fff}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── desktop: nic się nie zmienia ── */
@media(min-width:761px){
  .nav-burger{display:none !important}
  .nav{display:flex}
}

/* ══════════ MOBILE ══════════ */
@media(max-width:760px){
  .nav-burger{display:flex}

  /* nav = panel z boku, domyślnie schowany */
  .nav{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(78vw, 320px);
    background:var(--card, #fffdf9);
    border-left:1px solid var(--line, #dfe4dc);
    box-shadow:-14px 0 40px rgba(24,34,31,.18);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:76px 14px 20px;
    overflow-y:auto;
    transform:translateX(102%);
    transition:transform .26s cubic-bezier(.2,.8,.3,1);
    z-index:9998;
  }
  .nav.otwarte{transform:translateX(0)}

  .nav a{
    border-radius:11px !important;
    padding:13px 16px !important;
    font-size:15.5px !important;
    margin:0 !important;
    background:transparent !important;
    border:1px solid transparent !important;
    color:var(--ink, #18221f) !important;
    white-space:normal !important;
  }
  .nav a:hover,.nav a:focus{background:#f2f9f5 !important;color:#2b6b52 !important}

  /* zasłona */
  .nav-zaslona{
    position:fixed; inset:0;
    background:rgba(24,34,31,.34);
    backdrop-filter:blur(2px);
    opacity:0; pointer-events:none;
    transition:opacity .24s ease;
    z-index:9997;
  }
  .nav-zaslona.widoczna{opacity:1; pointer-events:auto}
}

/* WCAG */
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav-zaslona{transition:none}
}