.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ===== DESKTOP NAV ===== */
.desktop-nav{
        display:block;
        position: relative;
        z-index: 1000;
        justify-self:center;
        align-self: center;
        
}    
.desktop-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
 
}
.desktop-menu > li{position:relative}
.desktop-menu > li > a{
  display:block;
  padding:10px 10px;
  
}
.desktop-menu > li > a:hover{background:#f2f2f2}

/* Dropdown */
.has-sub > a::after{
  content:" ▾";
  font-size:12px;
}
.desktop-sub{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:#fff;
  border:1px solid #eee;
  text-align: left; 
  
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  display:none;
}

.desktop-sub a{
  display:block;
  padding:5px 0 5px  0;
  
}
.desktop-sub li{
    padding: 0px 6px 0px 6px;;
}
.desktop-sub a:hover{background:#f3f3f3}

/* Hover + keyboard (focus-within) */
.has-sub:hover .desktop-sub{display:block}
.has-sub:focus-within .desktop-sub{display:block}

/* Active link example */
a[aria-current="page"]{
  background:#e9e9e9;
  font-weight:700;
}

/* ===== HAMBURGER (mobile only) ===== */
.hamburger{
  font-size:26px;
  background:none;
  border:0;
  cursor:pointer;
  display:none; /* desktop hidden */
}

/* ===== MOBILE OFF-CANVAS ===== */
.menu-overlay{
  position:fixed;
  inset:0;
  background:transparent; /* bez przyciemniania tła */
  z-index:1000;
}
.mobile-menu{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(100vw,420px);
  background:#f5f5f5; /* delikatnie szare menu */
  z-index:1001;

  transform:translateX(100%);
  transition:transform .3s ease;

  display:flex;
  flex-direction:column;
  box-shadow:-8px 0 20px rgba(0,0,0,.15);
}
body.menu-open .mobile-menu{transform:translateX(0)}
body.menu-open{overflow:hidden}

.mobile-menu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #ddd;
  background:#eee;
}
.mobile-menu__close{
  font-size:22px;
  background:none;
  border:0;
  cursor:pointer;
}

.mobile-menu__list{
  list-style:none;
  padding:14px 12px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mobile-menu__list > li > a{
  display:block;
  padding:12px 12px;
  
}
.mobile-menu__list > li > a:hover{background:#e7e7e7}

/* Accordion */
.menu-group{
  
  overflow:hidden;
  background:#fff;
  border:1px solid #e2e2e2;
}
.menu-group summary{
  list-style:none;
  cursor:pointer;
  padding:12px 12px;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary:hover{background:#f2f2f2}
.menu-group .chev{transition:transform .2s ease}
.menu-group[open] .chev{transform:rotate(180deg)}

.submenu{
  list-style:none;
  margin:0;
  padding:6px 8px 10px 8px;
  border-top:1px solid #eee;
}
.submenu a{
  display:block;
  padding:10px 10px;
  
  margin:2px 0;
}
.submenu a:hover{background:#f0f0f0}
.menu-group-btn{
  background:none;
  border:0;
  padding:10px 10px;
  font:inherit;
  cursor:pointer;
}
.menu-group-btn::after{ content:" ▾"; font-size:12px; }
/* ===== MAIN ===== */
main{padding:22px}
.box{max-width:900px;margin:0 auto}

/* ===== RESPONSIVE BREAKPOINT ===== */
@media (max-width: 980px){
  .desktop-nav{display:none}
  .hamburger{display:block}
}