/* =============================================================================
   Pan Busowski — Chrome: TopBar, Header, Footer, FAB
   Loaded globally on all pages.
   ============================================================================= */

/* ============================================================
   TOP BAR (navy strip)
   ============================================================ */
.pb-topbar {
  background: var(--pb-ink-2);
  color: rgba(255,255,255,.9);
  font-family: var(--pb-font-body);
  font-size: 13px;
}
.pb-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.pb-topbar-left,
.pb-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pb-topbar a {
  color: rgba(255,255,255,.9);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--pb-dur-fast);
}
.pb-topbar a:hover { color: var(--pb-yellow); text-decoration: none; }
.pb-topbar .hours { color: var(--pb-green); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.pb-topbar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pb-topbar-right svg { width: 16px; height: 16px; }

/* ============================================================
   HEADER
   ============================================================ */
.pb-header {
  background: #fff;
  border-bottom: 1px solid var(--pb-line-soft);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--pb-shadow-xs);
}
.pb-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 72px;
}
.pb-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.pb-logo img { width: 42px; height: 42px; object-fit: contain; }
.pb-logo:hover { text-decoration: none; }
.pb-logo .wm {
  display: flex;
  flex-direction: column;
  font-family: var(--pb-font-display);
  font-weight: 800;
  color: var(--pb-ink);
  letter-spacing: var(--pb-tracking-tight);
  line-height: 1.05;
}
.pb-logo .wm-line1 { font-size: 13px; opacity: .7; }
.pb-logo .wm-line2 { font-size: 19px; }

.pb-nav {
  display: flex;
  gap: 2px;
  margin-left: 20px;
}
.pb-nav a {
  padding: 7px 12px;
  border-radius: var(--pb-r-pill);
  font-family: var(--pb-font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--pb-text);
  text-decoration: none;
  transition: background var(--pb-dur-fast), color var(--pb-dur-fast);
  white-space: nowrap;
}
.pb-nav a:hover { background: var(--pb-surface-2); color: var(--pb-ink); }
.pb-nav a.active { background: var(--pb-green-50); color: var(--pb-green-700); font-weight: 600; }

.pb-header-spacer { flex: 1; }

.pb-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pb-header-actions .pb-btn { font-size: 13px; padding: 9px 18px; }

/* Services mega-dropdown */
.pb-nav-item { position: relative; }
.pb-nav-has-drop > a { display: inline-flex; align-items: center; }
.pb-nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--pb-line-soft);
  border-radius: var(--pb-r-lg);
  box-shadow: var(--pb-shadow-md);
  padding: 16px;
  min-width: 780px;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms var(--pb-ease-out), transform 180ms var(--pb-ease-out), visibility 0s linear 180ms;
}
/* Kompaktowy wariant — krótkie etykiety (np. nazwy miast w "Obszar działania").
   Auto-szerokość kolumn pod treść + ciaśniejsze odstępy. Otwiera się w prawo od trigger'a. */
.pb-nav-drop.pb-nav-drop-tight {
  min-width: 0;
  width: max-content;
  grid-template-columns: repeat(4, max-content);
  gap: 4px 8px;
  left: 0;
  right: auto;
}
/* Wyrównanie nagłówków kolumn — wszystkie zajmują 2 wiersze, żeby miasta
   zaczynały się na tej samej wysokości (najdłuższy nagłówek "Wyburzenia i Rozbiórki" jest 2-liniowy).
   box-sizing: border-box jest globalny — min-height musi mieścić 2 linie + padding (4+8=12px). */
.pb-nav-drop.pb-nav-drop-tight .pb-nav-drop-head {
  min-height: calc(2.5em + 12px);
  line-height: 1.25;
}
.pb-nav-has-drop:hover .pb-nav-drop,
.pb-nav-has-drop:focus-within .pb-nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms var(--pb-ease-out), transform 180ms var(--pb-ease-out), visibility 0s;
}
.pb-nav-drop-head {
  font-family: var(--pb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--pb-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px 8px;
}
.pb-nav-drop-col { display: flex; flex-direction: column; }
.pb-nav-drop a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--pb-r-sm);
  font-size: 13.5px;
  color: var(--pb-text);
  font-weight: 500;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.pb-nav-drop a:hover { background: var(--pb-green-50); color: var(--pb-green-700); text-decoration: none; }

/* Desktop/mobile-only przełączniki dla nawigacji.
   Desktop: jedna mega-dropdown "Usługi" (4 kolumny).
   Mobile: rozbite na "Główna" + 4 osobne rozwijane bloki (Opróżnianie / Wywóz / Rozbiórki / Kontenery). */
.pb-nav-mobile-only { display: none !important; }
@media (max-width: 1024px) {
  .pb-nav-desktop-only { display: none !important; }
  .pb-nav-mobile-only { display: block !important; }
}

/* Mobile toggle */
.pb-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--pb-r-sm);
}
.pb-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pb-ink);
  border-radius: 2px;
  transition: var(--pb-dur-base);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pb-footer {
  background: var(--pb-ink);
  color: rgba(255,255,255,.75);
  padding: 56px 0 24px;
  font-family: var(--pb-font-body);
}
.pb-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}
.pb-footer h4 {
  font-family: var(--pb-font-display);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pb-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.pb-footer a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--pb-dur-fast);
}
.pb-footer a:hover { color: var(--pb-green); text-decoration: none; }

.pb-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.pb-footer-brand .lockup { display: flex; align-items: center; gap: 10px; }
.pb-footer-brand .lockup img { width: 40px; height: 40px; object-fit: contain; }
.pb-footer-brand .lockup .wm {
  color: #fff;
  font-family: var(--pb-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: var(--pb-tracking-tight);
}
.pb-footer-brand p { font-size: 13px; line-height: 1.55; margin: 0; }
.pb-footer-brand .small { color: rgba(255,255,255,.45); font-size: 12px; margin-top: 4px; }

.pb-footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  color: rgba(255,255,255,.45);
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   CTA BAND (pre-footer)
   ============================================================ */
.pb-cta-band {
  background: var(--pb-ink-2);
  color: #fff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.pb-cta-band::before {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  width: 320px;
  height: 320px;
  transform: translateY(-50%);
  border-radius: 56% 44% 52% 48% / 58% 50% 50% 42%;
  background: var(--pb-green);
  opacity: .15;
  pointer-events: none;
}
.pb-cta-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  position: relative;
}
.pb-cta-band h2 {
  font-family: var(--pb-font-display);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: var(--pb-tracking-tight);
  margin: 0;
}
.pb-cta-band p { color: rgba(255,255,255,.75); margin-top: 8px; font-size: 15px; }
.pb-cta-band .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ============================================================
   PARTNERS STRIP
   ============================================================ */
.pb-partners {
  padding: 32px 0;
  border-top: 1px solid var(--pb-line-soft);
  border-bottom: 1px solid var(--pb-line-soft);
  background: #fff;
}
.pb-partners-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pb-partners-label {
  font-family: var(--pb-font-body);
  font-size: 11px;
  color: var(--pb-text-soft);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.pb-partner {
  font-family: var(--pb-font-display);
  font-weight: 700;
  color: var(--pb-text-soft);
  font-size: 16px;
  letter-spacing: var(--pb-tracking-tight);
  opacity: .65;
}
.pb-partner.box {
  padding: 5px 10px;
  border: 1.5px solid var(--pb-text-soft);
  border-radius: 4px;
  font-size: 13px;
}

/* ============================================================
   CONTACT WIDGET (FAB + popup)
   ============================================================ */
/* Widget kontaktowy — kontener przezroczysty na klikalność, klikalna tylko
   sama kulka FAB i otwarty popup. Inaczej duży bounding box popupa zasłania
   przyciski na stronie nawet gdy popup jest zamknięty. */
.pb-widget { pointer-events: none; }
.pb-fab { pointer-events: auto; }
.pb-widget.open .pb-widget-popup { pointer-events: auto; }

.pb-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* GPU layer — position updated via JS visualViewport API */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pb-widget-popup {
  background: #fff;
  border-radius: var(--pb-r-xl);
  box-shadow: var(--pb-shadow-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 230px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 230ms var(--pb-ease-out), transform 230ms var(--pb-ease-spring), visibility 0s linear 230ms;
}
.pb-widget.open .pb-widget-popup {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity 230ms var(--pb-ease-out), transform 230ms var(--pb-ease-spring), visibility 0s;
}
.pb-widget-popup-title {
  font-family: var(--pb-font-display); font-size: 12px; font-weight: 700;
  color: var(--pb-text-soft); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px 8px; border-bottom: 1px solid var(--pb-line-soft); margin-bottom: 4px;
}
.pb-widget-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--pb-r-md); text-decoration: none; color: var(--pb-text); transition: background 120ms;
}
.pb-widget-link:hover { background: var(--pb-surface-2); text-decoration: none; color: var(--pb-ink); }
.pb-widget-link .pw-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.pb-widget-link .pw-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-phone .pw-icon    { background: #e3f4e0; color: #50b848; }
.pw-whatsapp .pw-icon { background: #d8f5e1; color: #25d366; }
.pw-whatsapp .pw-icon svg { fill: #25d366; stroke: none; }
.pw-email .pw-icon    { background: #e0eeff; color: #2a7fdb; }
.pw-telegram .pw-icon { background: #daf0ff; color: #0088cc; }
.pw-telegram .pw-icon svg { fill: #0088cc; stroke: none; }
.pb-widget-link strong { display: block; font-size: 14px; font-family: var(--pb-font-display); }
.pb-widget-link small  { display: block; font-size: 11px; color: var(--pb-text-muted); margin-top: 1px; }

/* FAB button */
.pb-fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--pb-green); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--pb-shadow-green);
  transition: background var(--pb-dur-fast);
  flex-shrink: 0;
  position: relative;
}
.pb-fab:hover { background: var(--pb-green-600); }
.pb-widget.open .pb-fab { background: var(--pb-ink-2); }
.pb-fab svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Pulse ring — only when widget is closed */
.pb-widget:not(.open) .pb-fab::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--pb-green);
  opacity: .4;
  animation: pb-pulse 2.2s infinite var(--pb-ease-out);
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE CHROME
   ============================================================ */

/* Overlay for mobile drawer — z-index BELOW header (100) so header stays visible */
.pb-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,29,34,.5);
  z-index: 50;
  backdrop-filter: blur(2px);
}
.pb-nav-overlay.active { display: block; }

@media (max-width: 1024px) {
  .pb-nav-toggle { display: flex; }
  .pb-header-actions { display: none; } /* hide all header action buttons on mobile */
  .pb-header-inner { gap: 8px; }

  /* Side drawer */
  .pb-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 78%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0 0 24px;
    box-shadow: var(--pb-shadow-lg);
    z-index: 300;
    transition: right 300ms var(--pb-ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;   /* nie rozprasza scrolla na body / rubber-band */
    margin-left: 0;
  }
  .pb-nav.open { display: flex; right: 0; }
  .pb-nav a {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 0;
    border-bottom: 1px solid var(--pb-line-soft);
  }
  .pb-nav a:last-child { border-bottom: none; }

  /* Full-width separators dla triggerów dropdownów (były inline-flex → linia kończyła się na chevronie) */
  .pb-nav-has-drop > a {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  /* Mobile top bar inside drawer — only show close button */
  .pb-nav-mobile-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pb-line-soft);
    margin-bottom: 4px;
  }
  .pb-nav-mobile-top .pb-logo { display: none; }
  .pb-nav-close {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--pb-surface-2);
    border: none; cursor: pointer;
    display: grid; place-items: center;
    color: var(--pb-text);
  }
  .pb-nav-close:hover { background: var(--pb-line); }

  /* Services dropdown inside drawer */
  .pb-nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: auto;
    grid-template-columns: 1fr;
    gap: 0;
    display: none;
    background: var(--pb-surface-2);
    transition: none;
  }
  /* Tylko bezpośredni dropdown rozwija się — wsparcie zagnieżdżonego accordionu (Obszar działania) */
  .pb-nav-has-drop.mobile-open > .pb-nav-drop { display: grid; }
  .pb-nav-drop a { padding: 10px 20px 10px 32px; font-size: 14px; color: var(--pb-text-muted); }
  .pb-nav-drop-head { padding: 8px 20px 4px 20px; margin-top: 4px; }
  .pb-nav-drop-col { padding: 0; }
  .pb-nav-has-drop > a { border-bottom: 1px solid var(--pb-line-soft); }

  /* Zagnieżdżony accordion (np. Obszar działania → grupy usług → miasta).
     Trigger drugiego poziomu: pełna szerokość, mniejszy padding, lekki tint. */
  .pb-nav-drop .pb-nav-has-drop > a {
    padding: 10px 20px 10px 32px;
    font-size: 14px;
    color: var(--pb-text-muted);
    font-weight: 600;
    background: transparent;
  }
  .pb-nav-drop .pb-nav-has-drop.mobile-open > a {
    color: var(--pb-text);
    background: var(--pb-surface-3, #f0f2f5);
  }
  /* Miasta wewnątrz zagnieżdżonego dropdown'a — głębszy padding */
  .pb-nav-drop .pb-nav-drop a {
    padding-left: 48px;
    background: var(--pb-surface-2);
  }

  /* Footer actions at bottom of drawer */
  .pb-nav-mobile-footer {
    margin-top: auto;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--pb-line-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Override nav link styles for buttons in footer */
  .pb-nav-mobile-footer .pb-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: var(--pb-r-pill) !important;
    border-bottom: none !important;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
  }
  /* Phone button in footer — white bg, green border, looks solid */
  .pb-nav-mobile-footer .pb-btn-ghost {
    background: #fff !important;
    border: 2px solid var(--pb-green) !important;
    color: var(--pb-green-700) !important;
    font-weight: 600;
  }
  .pb-nav-mobile-footer .pb-btn-ghost:hover {
    background: var(--pb-green-50) !important;
  }
}

/* Adaptacyjne ukrywanie przycisków CTA w mobile drawer w zależności od wysokości viewport.
   Logika: najpierw chowamy "Bezpłatna wycena" (CTA mniej krytyczne — telefon ważniejszy),
   potem jeszcze numer telefonu. Linki w nawigacji już prowadzą do /kontakt/ i tel:. */
@media (max-width: 1024px) and (max-height: 720px) {
  .pb-nav-mobile-footer .pb-btn-primary { display: none; }
}
@media (max-width: 1024px) and (max-height: 600px) {
  .pb-nav-mobile-footer { display: none; }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 1025px) {
  .pb-nav-mobile-top  { display: none; }
  .pb-nav-mobile-footer { display: none; }
  .pb-nav-close { display: none; }
  .pb-nav-overlay { display: none !important; }
}

@media (max-width: 768px) {
  .pb-topbar-left .topbar-email,
  .pb-topbar-left .topbar-hours { display: none; }
  .pb-footer-grid { grid-template-columns: 1fr 1fr; }
  .pb-cta-band-inner { grid-template-columns: 1fr; }
  .pb-cta-band .actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .pb-footer-grid { grid-template-columns: 1fr 1fr; } /* keep 2 cols */
  .pb-partners-inner { justify-content: center; gap: 16px; }
  .pb-footer-brand { grid-column: 1 / span 2; } /* brand spans full width */
}