/* Jedyny pasek nawigacji: serwis, cennik i wybrana kategoria. */
html { scrollbar-gutter:stable; }
body { margin:0; padding-top:0; }
body > .wrap { width:100%; max-width:1240px; margin:0 auto; padding:0; }
header.nav.pg-nav { position:sticky; top:calc(env(safe-area-inset-top,0px) + 14px); width:100%; margin:14px 0 0; padding:0; border:0; background:none; z-index:100; }
header.pg-nav .nav-in { box-sizing:border-box; width:100%; max-width:1240px; height:72px; min-height:72px; margin:0 auto; padding:0 26px; gap:18px; }
header.pg-nav .brand { flex:none; margin:0; padding:0; font:900 30px/1 var(--font-display); letter-spacing:0; }
header.pg-nav .brand > img { width:40px; height:40px; }
header.pg-nav ul { align-items:center; margin:0; padding:0; }
header.pg-nav li a { font:600 17px/1 var(--font-display); letter-spacing:.03em; padding:10px 2px; }
header.pg-nav .nav-in > .btn { margin-left:auto; min-height:44px; padding:12px 18px; font:700 18px/1 var(--font-display); background:var(--accent)!important; color:var(--on-accent)!important; }
.pg-nav ul { gap:18px; }
.rp-menu-toggle { display:none; }
@media(max-width:900px) {
 header.pg-nav .nav-in { position:relative; gap:10px; height:64px; min-height:64px; padding:0 12px; }
 header.pg-nav .brand { font-size:26px; gap:8px; }
 header.pg-nav .brand > img { width:32px; height:32px; }
 .pg-nav .rp-menu-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; margin-left:auto; border:1px solid var(--line-2); border-radius:8px; background:none; color:var(--text); font:700 18px/1 var(--font-display); cursor:pointer; }
 .pg-nav .nav-in > .btn { margin-left:0; }
 .pg-nav .nav-in > ul { display:none; }
 .pg-nav .nav-in.menu-open > ul { display:flex; position:absolute; left:0; right:0; top:calc(100% + 8px); flex-direction:column; gap:0; margin:0; padding:12px 20px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); box-shadow:0 14px 24px #0006; }
 .pg-nav .nav-in.menu-open > ul a { padding:13px 0; }
}

/* telefon: 3 kreski po lewej od logo (menu rozwijane), przyciski telefon i WhatsApp przy rezerwacji */
.nav-act { display: none; }
.rp-burger, .rp-burger::before, .rp-burger::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
.rp-burger { position: relative; }
.rp-burger::before, .rp-burger::after { content: ""; position: absolute; left: 0; }
.rp-burger::before { top: -7px; }
.rp-burger::after { top: 7px; }
.rp-menu-toggle[aria-expanded="true"] .rp-burger { background: transparent; }
.rp-menu-toggle[aria-expanded="true"] .rp-burger::before { transform: translateY(7px) rotate(45deg); }
.rp-menu-toggle[aria-expanded="true"] .rp-burger::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .pg-nav .nav-in { gap: 8px; }
  .pg-nav .rp-menu-toggle { order: -1; flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; color: #f4f2ee; }
  .pg-nav .rp-menu-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .pg-nav .nav-in > .brand { margin-right: auto; }
  .nav-act { display: flex; flex: none; gap: 8px; }
  .nav-ico { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2, rgba(255,255,255,.14)); border-radius: 10px; background: rgba(255,255,255,.04); transition: border-color .2s ease, background-color .2s ease; }
  .nav-ico svg { width: 22px; height: 22px; fill: currentColor; }
  .nav-tel { color: #29b6f6; }
  .nav-wa { color: #43a047; }
  .nav-ico:hover, .nav-ico:focus-visible { border-color: var(--accent); background: rgba(232,89,12,.14); color: var(--accent); }
  .pg-nav .nav-in > .btn { margin-left: 0; flex: none; }
}
@media (max-width: 400px) {
  .pg-nav .brand > span { display: none; }
  .pg-nav .nav-in { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rp-burger, .rp-burger::before, .rp-burger::after, .nav-ico { transition: none; } }
/* komputer: zakładki dokładnie na środku banera */
@media(min-width:901px) {
 header.pg-nav .nav-in { position:relative; }
 header.pg-nav .nav-in > ul { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; }
}
/* telefon: cztery przyciski tej samej wielkości; telefon i WhatsApp wypełnione swoim kolorem */
@media (max-width: 900px) {
  .pg-nav .rp-menu-toggle, .nav-ico, header.pg-nav .nav-in > .btn { box-sizing: border-box; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; border-radius: 10px; display: grid; place-items: center; }
  header.pg-nav .nav-in > .btn svg, header.pg-nav .nav-in > .btn .i { width: 24px; height: 24px; margin: 0; }
  .nav-ico svg { width: 24px; height: 24px; }
  .nav-ico.nav-tel { background: #29b6f6; border-color: #29b6f6; color: #0d0f13; }
  .nav-ico.nav-wa { background: #25d366; border-color: #25d366; color: #0d0f13; }
  .nav-ico.nav-tel:hover, .nav-ico.nav-tel:focus-visible { background: #5ccbff; border-color: #5ccbff; color: #0d0f13; }
  .nav-ico.nav-wa:hover, .nav-ico.nav-wa:focus-visible { background: #5ff08f; border-color: #5ff08f; color: #0d0f13; }
}
/* komputer: większe logo i nazwy podstron, logo na środku między krawędzią a zakładkami */
@media (min-width: 901px) {
  header.pg-nav .brand { font-size: 38px; gap: 12px; }
  header.pg-nav .brand > img { width: 54px; height: 54px; }
  header.pg-nav li a { font-size: 20px; }
  header.pg-nav .pg-nav-spacer { display: none; }
}
@media (min-width: 1180px) {
  header.pg-nav .nav-in > .brand { position: absolute; left: var(--brand-left, 40px); top: 50%; transform: translateY(-50%); }
}
/* telefon: ikony jak na stronie (obrazki bez kolorowych kafelków) */
@media (max-width: 900px) {
  html body .pg-nav .nav-ico, html body header.pg-nav .nav-in > .btn { background-color: transparent !important; border: 0 !important; box-shadow: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 40px 40px !important; }
  html body .pg-nav .nav-ico svg, html body header.pg-nav .nav-in > .btn svg { display: none !important; }
  html body .pg-nav .nav-ico.nav-tel { background-image: url(../images/Phone.webp) !important; }
  html body .pg-nav .nav-ico.nav-wa { background-image: url(../images/WhatsApp.webp) !important; }
  html body header.pg-nav .nav-in > .btn { background-image: url(../images/Kalendarz-pomaranczowy.webp) !important; }
  html body .pg-nav .nav-ico:hover, html body .pg-nav .nav-ico:focus-visible, html body header.pg-nav .nav-in > .btn:hover { background-color: rgba(255,255,255,.07) !important; }
}

/* nowe logo: znak z kołem + napis */
html body header.pg-nav .brand { gap: 0; }
html body header.pg-nav .brand > img { object-fit: contain; flex: none; }
html body header.pg-nav .brand > .bl-mark { display: none; width: 44px; height: 44px; }
html body header.pg-nav .brand > .bl-full { display: block; width: auto; height: 28px; }
@media (min-width: 701px) { html body header.pg-nav .brand > .bl-full { height: 42px; } }
@media (min-width: 1180px) { html body header.pg-nav .brand > .bl-full { height: 54px; } }
@media (max-width: 400px) {
  html body header.pg-nav .brand > .bl-full { display: none; }
  html body header.pg-nav .brand > .bl-mark { display: block; }
}

/* logo w nagłówku: tarcza + żywy napis, środek liter na środku tarczy */
html body header.pg-nav .brand > .bl-lock { --d: 30px; display: flex; align-items: center; gap: 6px; }
html body header.pg-nav .brand > .bl-lock > img { display: block; width: var(--d); height: var(--d); flex: none; }
html body header.pg-nav .brand > .bl-lock .bl-name { position: relative; top: -.038em; font: 700 calc(var(--d) * .84)/.72 'Barlow Condensed', sans-serif; letter-spacing: .07em; color: #f4f2ee; text-transform: uppercase; white-space: nowrap; }
html body header.pg-nav .brand > .bl-lock .bl-name b { color: #e8590c; font-weight: 700; }
/* napis logo zmienia się litera po literze (js/nav-brand.js): stała szerokość, żeby zakładki nie skakały */
html body header.pg-nav .brand > .bl-lock .bl-name.mw { display: inline-flex; line-height: 1; }
html body header.pg-nav .bl-name .mw-slot { position: relative; display: inline-block; height: 1em; overflow-x: clip; overflow-y: visible; flex: none; }
html body header.pg-nav .bl-name .mw-g { position: absolute; left: 0; top: 0; line-height: 1; }
html body header.pg-nav .bl-name .mw-acc { color: #e8590c; }
html body header.pg-nav .bl-name .mw-probe { position: absolute; visibility: hidden; white-space: pre; line-height: 1; }
html body header.pg-nav .bl-name .mw-blade { position: absolute; left: -1px; right: calc(.07em - 1px); height: 2px; border-radius: 1px; background: #e8590c; pointer-events: none; }
@media (min-width: 701px) { html body header.pg-nav .brand > .bl-lock { --d: 44px; gap: 8px; } }
@media (min-width: 1180px) { html body header.pg-nav .brand > .bl-lock { --d: 56px; gap: 10px; } }
@media (max-width: 400px) { html body header.pg-nav .brand > .bl-lock { display: none; } }
/* tarcza w logo powoli się obraca (jeden obrót na 12 s); bez ruchu przy ograniczonym ruchu */
@keyframes bl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  html body header.pg-nav .brand > .bl-lock > img,
  html body header.pg-nav .brand > .bl-mark { animation: bl-spin 12s linear infinite; will-change: transform; }
}
/* desktop: większe białe linki wyśrodkowane między logo a przyciskiem; biały napis i ikona na przycisku */
@media (min-width: 901px) {
  html body header.pg-nav .nav-in > .brand { position: static !important; transform: none !important; margin-left: 14px !important; }
  html body header.pg-nav .nav-in > ul { position: static !important; transform: none !important; margin: 0 auto !important; gap: clamp(14px, 1.9vw, 28px) !important; }
  html body header.pg-nav .nav-in > ul li a { font: 700 clamp(16px, 1.6vw, 21px)/1 'Barlow Condensed', sans-serif !important; color: #f4f2ee !important; }
  html body header.pg-nav .nav-in > ul li a:hover, html body header.pg-nav .nav-in > ul li a:focus-visible { color: #e8590c !important; }
  html body header.pg-nav .nav-in > .btn { margin-left: 0 !important; color: #fff !important; font-size: clamp(17px, 1.55vw, 20px) !important; font-weight: 700 !important; }
  html body header.pg-nav .nav-in > .btn svg, html body header.pg-nav .nav-in > .btn span { color: #fff !important; fill: #fff !important; stroke: #fff; }
}
/* desktop: przycisk rezerwacji z tą samą ikoną kalendarza w jasnej wersji, większą */
@media (min-width: 901px) {
  html body header.pg-nav .nav-in > .btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 18px 6px 14px !important; }
  html body header.pg-nav .nav-in > .btn > svg { display: none !important; }
  html body header.pg-nav .nav-in > .btn::before { content: none; }
  html body header.pg-nav .nav-in > .btn { gap: 10px; padding: 0 20px 0 8px !important; min-height: 46px; }
  html body header.pg-nav .nav-in > .btn { background: #f4f2ee !important; border-color: #f4f2ee !important; padding: 0 20px 0 10px !important; }
  html body header.pg-nav .nav-in > .btn span { color: #0d0f13 !important; }
  html body header.pg-nav .nav-in > .btn:hover { background: #fff !important; }
  html body header.pg-nav .nav-in > .btn .btn-cal { display: block; flex: none; width: 34px; height: 34px; padding: 0; background: none; box-shadow: none; }
}
@media (max-width: 900px) { html body header.pg-nav .nav-in > .btn .btn-cal { display: none; } }