/* ==========================================================================
   NAV-MOBILE: hamburger + panel nawigacji dla telefonow (<=768px)
   --------------------------------------------------------------------------
   Zasada: na szerokosci >768px ten plik NIE ROBI NIC. Menu desktopowe
   (6 linkow .nav-link-sm + przycisk "Nasz agent AI") zostaje bez zmian.
   Ponizej 768px .nav-link-sm jest ukrywane przez styles.css:190, a w jego
   miejsce wchodzi przycisk hamburgera i rozwijany panel.

   Bez !important tam, gdzie nie trzeba — arkusze sa ladowane po tym pliku,
   ale selektory sa wystarczajaco specyficzne (.navbar .nav-burger).
   ========================================================================== */

/* --- Przycisk hamburgera: domyslnie ukryty (desktop) --- */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(139, 92, 246, .22);
  border-radius: 10px;
  background: transparent;
  color: var(--a1-text, #1e1b4b);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease;
}

.nav-burger:hover { background: rgba(139, 92, 246, .08); }
.nav-burger:focus-visible { outline: 2px solid var(--a1-accent, #8b5cf6); outline-offset: 2px; }

/* Trzy kreski rysowane w SVG — brak zaleznosci od fontow */
.nav-burger svg { display: block; width: 22px; height: 22px; }
.nav-burger .burger-line {
  transition: transform .25s ease, opacity .18s ease;
  transform-origin: 12px 12px;
}

/* Stan otwarty: kreski tworza X */
.nav-burger[aria-expanded="true"] .burger-top    { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-mid    { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-bottom { transform: translateY(-5px) rotate(-45deg); }

/* --- Panel nawigacji mobilnej: domyslnie ukryty --- */
.nav-mobile-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(250, 245, 255, .98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139, 92, 246, .16);
  box-shadow: 0 12px 32px rgba(30, 27, 75, .10);
  padding: 8px 0 14px;
}

.nav-mobile-panel.is-open { display: block; }

.nav-mobile-panel a {
  display: block;
  padding: 14px 18px;
  color: var(--a1-text, #1e1b4b);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 92, 246, .08);
  -webkit-tap-highlight-color: transparent;
}

.nav-mobile-panel a:last-child { border-bottom: none; }

.nav-mobile-panel a:hover,
.nav-mobile-panel a:active,
.nav-mobile-panel a.active {
  background: rgba(139, 92, 246, .08);
  color: var(--a1-accent-hover, #7c3aed);
}

/* Blokada przewijania tla przy otwartym panelu */
body.nav-mobile-open { overflow: hidden; }

/* --- Wlaczenie hamburgera TYLKO na telefonach/tabletach --- */
@media (max-width: 768px) {
  .navbar .nav-burger { display: inline-flex; }
  /* navbar musi byc kotwica dla absolutnego panelu */
  .navbar { position: fixed; }
  .navbar .container { position: relative; }
}

/* Na szerokich ekranach panel nie istnieje wizualnie, nawet jesli ma klase */
@media (min-width: 769px) {
  .nav-mobile-panel { display: none !important; }
  .nav-burger { display: none !important; }
}