/* Pasek górny, nagłówek, marka, hamburger i menu wielopoziomowe (3 poziomy). */
.topbar{background:var(--brown-900); color:var(--sand-200); font-size:13px}
.topbar .wrap{display:flex; justify-content:space-between; gap:16px; padding-block:8px; flex-wrap:wrap}
.topbar a{color:var(--sand-100); text-decoration:none}
.topbar a:hover{color:var(--blue-400)}
.topbar .dot{color:var(--brown-500); padding-inline:8px}

.site-header{
  position:sticky; top:0; z-index:50; background:var(--white);
  border-bottom:1px solid var(--sand-200);
}
.header-inner{display:flex; align-items:center; gap:24px; padding-block:14px}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--brown-900); flex:0 0 auto}
.brand svg{width:34px; height:34px; flex:0 0 auto}
.brand b{font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.01em; display:block; line-height:1.1}
.brand small{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brown-500)}

.burger{
  margin-left:auto; display:none; align-items:center; gap:8px;
  background:none; border:1px solid var(--sand-200); border-radius:var(--r);
  padding:9px 12px; font:500 14px var(--body); color:var(--brown-900); cursor:pointer;
}
.burger span{position:relative; width:16px; height:10px; display:block}
.burger span::before,.burger span::after,.burger span i{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--brown-900); transition:.2s;
}
.burger span::before{top:0} .burger span i{top:4.25px} .burger span::after{bottom:0}
[data-nav-open] .burger span::before{transform:translateY(4.25px) rotate(45deg)}
[data-nav-open] .burger span::after{transform:translateY(-4.25px) rotate(-45deg)}
[data-nav-open] .burger span i{opacity:0}

.nav{margin-left:auto}
.menu,.submenu{list-style:none; margin:0; padding:0}
.menu{display:flex; align-items:center; gap:2px}
.menu > li{position:relative}

.menu a,.menu .toggle{
  display:flex; align-items:center; gap:6px; width:100%;
  font:500 15px/1 var(--body); color:var(--brown-900);
  background:none; border:0; padding:12px 14px; border-radius:var(--r);
  text-decoration:none; cursor:pointer; text-align:left;
}
.menu > li > a:hover,.menu > li > .toggle:hover,
.menu > li.is-open > .toggle{background:var(--sand-100); color:var(--blue-700)}
.chev{width:9px; height:9px; flex:0 0 auto; transition:transform .2s}
.chev path{stroke:currentColor; stroke-width:1.6; fill:none}
.menu > li.is-open > .toggle .chev{transform:rotate(180deg)}

/* poziom 2 i 3 */
.submenu{
  position:absolute; top:calc(100% - 2px); left:0; min-width:262px;
  background:var(--white); border:1px solid var(--sand-200); border-top:2px solid var(--blue-600);
  border-radius:0 0 var(--r) var(--r); box-shadow:var(--shadow);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.submenu .submenu{top:-7px; left:100%; border-top:1px solid var(--sand-200); border-left:2px solid var(--blue-400); border-radius:var(--r)}
.submenu li{position:relative}
.submenu a,.submenu .toggle{padding:10px 12px; font-weight:400; font-size:15px; justify-content:space-between}
.submenu a:hover,.submenu .toggle:hover,.submenu li.is-open > .toggle{background:var(--blue-100); color:var(--blue-700)}
.submenu .chev{transform:rotate(-90deg)}
.submenu li.is-open > .toggle .chev{transform:rotate(-90deg)}
.submenu .hint{display:block; font-family:var(--mono); font-size:11px; color:var(--brown-500); margin-top:2px}
.sub-head{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brown-500); padding:10px 12px 6px;
}

@media (hover:hover) and (min-width:1024px){
  .menu li:hover > .submenu{opacity:1; visibility:visible; transform:none}
}
.menu li:focus-within > .submenu,
.menu li.is-open > .submenu{opacity:1; visibility:visible; transform:none}

.nav .btn{margin-left:12px}

/* --- nawigacja mobilna --- */
@media (max-width:1023px){
  .burger{display:inline-flex}
  .nav{
    position:absolute; left:0; right:0; top:100%; background:var(--white);
    border-bottom:1px solid var(--sand-200); box-shadow:var(--shadow);
    padding:10px 20px 22px; max-height:calc(100dvh - 100%); overflow-y:auto;
    display:none;
  }
  [data-nav-open] .nav{display:block}
  .menu{flex-direction:column; align-items:stretch; gap:0}
  .menu > li{border-bottom:1px solid var(--sand-100)}
  .menu a,.menu .toggle{justify-content:space-between; padding:14px 4px; font-size:17px}
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--blue-400); border-radius:0;
    margin:0 0 10px 4px; padding:0 0 0 12px; display:none;
  }
  .submenu .submenu{border-left:2px solid var(--sand-200); margin-bottom:6px}
  .menu li.is-open > .submenu{display:block}
  .submenu .chev,.menu > li.is-open > .toggle .chev{transform:rotate(0)}
  .menu li.is-open > .toggle .chev{transform:rotate(180deg)}
  .nav .btn{margin:16px 0 0; width:100%}
}

/* Na wąskich telefonach (≤ 419 px) długi podpis marki wypychał hamburger poza ekran.
   Podpis znika — nazwa ośrodka i przycisk menu są ważniejsze niż tagline. */
@media (max-width:419px){
  .brand small{display:none}
  .brand b{font-size:18px}
  .brand svg{width:28px; height:28px}
  .burger{padding:8px 10px}
  .topbar{font-size:12px}
}