/* Wspólne menu z grupami (narzedzia/menu.py wstawia znaczniki, ten plik je stylizuje).
   Selektory zaczynają się od .nav ul.mm, żeby wygrać ze starymi regułami .nav ul w stronach. */

.nav ul.mm{display:flex;flex-direction:row;align-items:center;gap:clamp(18px,2.2vw,38px);list-style:none;margin:0 auto;padding:0;
  position:static;width:auto;background:none;border:0;box-shadow:none}
.nav ul.mm>li{position:relative;list-style:none;margin:0;padding:0;border:0}
.nav ul.mm>li>a,.nav ul.mm .mm-top{display:inline-flex;align-items:center;gap:7px;padding:10px 0;background:none;border:0;border-left:0;
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:color .15s}
.nav ul.mm>li>a:hover,.nav ul.mm .mm-top:hover,.nav ul.mm>li.is-open>.mm-top{color:var(--bone);background:none}
.nav ul.mm>li>a.cur,.nav ul.mm>li.cur>.mm-top{color:var(--bone);box-shadow:0 2px 0 var(--accent)}
.nav ul.mm .mm-top:focus-visible,.nav ul.mm a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.mm-caret{width:11px;height:11px;flex:none;transition:transform .2s}
.nav ul.mm>li.is-open .mm-caret{transform:rotate(180deg)}

/* rozwijana lista */
.nav ul.mm .sub{display:block;flex-direction:column;position:absolute;top:calc(100% + 12px);left:-18px;right:auto;width:300px;margin:0;
  padding:8px;gap:0;list-style:none;background:var(--bg2);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:60}
.nav ul.mm .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}  /* mostek dla myszy */
.nav ul.mm>li.is-open>.sub{opacity:1;visibility:visible;transform:none}
@media(hover:hover) and (min-width:1021px){.nav ul.mm>li.has-sub:hover>.sub{opacity:1;visibility:visible;transform:none}
  .nav ul.mm>li.has-sub:hover .mm-caret{transform:rotate(180deg)}}
.nav ul.mm .sub li{list-style:none;margin:0;padding:0;border:0}
.nav ul.mm .sub a{display:block;padding:11px 14px;border-left:2px solid transparent;text-decoration:none;white-space:normal;
  text-transform:none;letter-spacing:0;font-size:14px;line-height:1.35;color:var(--muted);background:none;box-shadow:none;transition:background .15s,border-color .15s}
.nav ul.mm .sub a b{display:block;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.03em;text-transform:uppercase;line-height:1.05;color:var(--bone)}
.nav ul.mm .sub a span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.nav ul.mm .sub a:hover{background:var(--card);border-left-color:var(--accent)}
.nav ul.mm .sub a.cur{background:#21160f;border-left-color:var(--accent)}
.nav ul.mm .sub a.cur b,.nav ul.mm .sub a:hover b{color:var(--accent)}

/* Zaloguj */
.nav ul.mm>li.login{margin-left:4px}
.nav ul.mm>li.login>a{color:var(--accent)}
.nav ul.mm>li.login>a:hover{color:var(--accent2)}
.nav ul.mm>li.login svg{width:14px;height:14px;flex:none}

/* desktop: menu w pasku, przycisk akcji widoczny, bez burgera */
@media(min-width:1021px){
  .nav .burger{display:none}
  .nav .wrap>a.btn{display:inline-flex}
}

/* telefon i tablet: burger, grupy jako rozwijane sekcje */
@media(max-width:1020px){
  .nav ul.mm{display:none}
  .nav .burger{display:block}
  .nav .wrap>a.btn{display:none}
  .nav.open ul.mm{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:76px;left:0;right:0;width:auto;
    max-height:calc(100vh - 76px);overflow:auto;padding:8px 16px 22px;background:var(--bg);border:0;border-bottom:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55)}
  .nav.open ul.mm>li{border-bottom:1px solid var(--line)}
  .nav.open ul.mm>li>a,.nav.open ul.mm .mm-top{width:100%;justify-content:space-between;padding:18px 4px;font-size:15px;box-shadow:none}
  .nav.open ul.mm>li>a.cur,.nav.open ul.mm>li.cur>.mm-top{color:var(--accent);box-shadow:none}
  /* aktywna jest tylko jedna karta: rozwinięta grupa przejmuje wyróżnienie od grupy bieżącej strony */
  .nav.open ul.mm>li.is-open>.mm-top{color:var(--accent)}
  .nav.open ul.mm:has(>li.is-open)>li:not(.is-open)>a.cur,
  .nav.open ul.mm:has(>li.is-open)>li.cur:not(.is-open)>.mm-top{color:var(--muted)}
  .nav.open ul.mm .sub{position:static;width:auto;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:none;padding:0 0 12px}
  .nav.open ul.mm .sub::before{display:none}
  .nav.open ul.mm>li.is-open>.sub{display:block}
  .nav.open ul.mm .sub a{padding:10px 12px}
  .nav.open ul.mm>li.login{border-bottom:0;margin:8px 0 0}
  .nav.open ul.mm>li.login>a{justify-content:flex-start}
}
@media(min-width:761px) and (max-width:1020px){
  .nav.open ul.mm{left:auto;right:clamp(16px,2.4vw,40px);top:72px;width:360px;border:1px solid var(--line);background:var(--bg2)}
}
@media (prefers-reduced-motion:reduce){.nav ul.mm .sub,.mm-caret{transition:none}}

/* rozwijana lista w kolumnach (grupa z nagłówkami) */
.nav ul.mm .sub.cols{display:grid;grid-template-columns:repeat(var(--n,3),230px);gap:6px 10px;width:auto;padding:14px 12px 12px;left:-24px}
.nav ul.mm .sub.cols .col{display:flex;flex-direction:column;min-width:0}
.nav ul.mm .sub .col-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  padding:4px 14px 8px;margin:0 0 4px;border-bottom:1px solid var(--line)}
@media(max-width:1020px){
  .nav.open ul.mm .sub.cols{display:none;grid-template-columns:1fr;padding:0 0 12px}
  .nav.open ul.mm>li.is-open>.sub.cols{display:grid}
  .nav.open ul.mm .sub .col-h{padding:12px 12px 6px;border-bottom:0}
}