/* modules/topbar/topbar.css */
/* ==== TOPBAR (3 kolumny; ring + lekki cień; bez underline; subtelny gradient) == */

.topbar {
  position: relative;
  isolation: isolate;
  /* subtelny, „powietrzny” gradient tła (bardzo delikatny) */
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  color: #111827;
  border-bottom: 1px solid #E5E7EB;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Stabilizacja układu w trakcie swapu CSS (redukcja CLS) */
  min-height: 40px;
  contain: layout paint; /* brak przecieków layoutu, szybsze malowanie */
  will-change: transform;
}

/* GRID: auto | 1fr | auto — lewa do lewej, środek centrowany, prawa do prawej */
.container.topbar-inner.topbar-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 40px;   /* stabilna wysokość */
  gap: 12px;
}

/* LEWA / ŚRODEK / PRAWA */
.topbar-left  { justify-self: start;  display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-center{ justify-self: center; }
.topbar-right { justify-self: end;    display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Skip-link */
.skip-link {
  position: absolute; left: 8px; top: 8px;
  transform: translateY(-200%); z-index: 200;
  background: #0A84FF; color: #fff;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: transform 150ms ease;
}
.skip-link:focus { outline: none; }
.skip-link:focus-visible { transform: translateY(0); }

/* Anty „mgła” po LEWEJ */
.topbar .topbar-left,
.topbar .topbar-left * {
  opacity: 1; filter: none; mix-blend-mode: normal;
  backdrop-filter: none; text-shadow: none; color: #111827;
}

/* Typografia i linki kontaktowe */
.topbar, .topbar a, .topbar .label { font-size: 14px; line-height: 1.3; }
@media (min-width: 768px){ .topbar, .topbar a, .topbar .label { font-size: 15px; } }
.topbar a { color: inherit; text-decoration: none; }

/* --- Wspólny zestaw dla wszystkich elementów klikalnych (Lewa/Środek/Prawa) */
.topbar-link,
.topbar-badge,
.topbar-icon {
  border-radius: 8px;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

/* HOVER — delikatny „pill” + LEKKI CIEŃ (wszędzie tak samo) */
.topbar-link:hover,
.topbar-badge:hover,
.topbar-icon:hover {
  background-color: rgba(2,6,23,0.04);
  box-shadow:
    0 1px 3px rgba(2, 6, 23, 0.12),
    0 2px 6px rgba(2, 6, 23, 0.08);
  border-color: #E5E7EB;
}

/* FOCUS (WCAG) — ring + delikatnie mocniejsze wypełnienie */
.topbar a:focus { outline: none; }
.topbar a:focus-visible {
  outline: 2px solid #0A84FF;
  outline-offset: 2px;
  border-radius: 8px;
}
.topbar-link:focus-visible,
.topbar-badge:focus-visible,
.topbar-icon:focus-visible {
  background-color: rgba(2,6,23,0.05);
  box-shadow:
    0 0 0 2px rgba(10,132,255,0.35),
    0 1px 3px rgba(2, 6, 23, 0.10);
}

/* --- Lewa: linki kontaktowe (szczegóły układu) */
.topbar-link {
  display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 8px;
  white-space: nowrap; font-weight: 600; letter-spacing: 0.005em;
}
.topbar-link:hover { text-decoration: none; }

.topbar-link__icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; }
.topbar-left .topbar-link__icon img { display: block; width: 18px; height: 18px; image-rendering: auto; }

/* Separator tel | mail od ≥640px */
.topbar-left .topbar-link + .topbar-link { position: relative; }
@media (min-width: 640px){
  .topbar-left .topbar-link + .topbar-link::before{
    content:""; position:absolute; left:-12px; top:50%; width:1px; height:16px; transform:translateY(-50%); background:#E5E7EB;
  }
}

/* --- Środek: klikalne badge’y (linki) */
.topbar-badges { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.topbar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid #E5E7EB; font-size: 13px; line-height: 1; color: #111827;
}

/* --- Prawa: social (oryginalne SVG jako <img>) */
.topbar-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  background: transparent; box-shadow: none;
}
.topbar-icon img { display: block; width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1024px){
  .topbar-left { gap: 12px; }
  .topbar-badges { gap: 6px; }
}
@media (max-width: 480px){
  .container.topbar-inner.topbar-grid { grid-template-columns: 1fr; gap: 8px; padding: 8px 12px; }
  .topbar-right { display: none; }                 /* social off na mobile */
  .topbar-center { justify-self: center; }
  .topbar-left {
    justify-self: center; display:flex; justify-content:center; flex-wrap: wrap; row-gap: 6px; text-align: center;
  }
  .topbar-link { white-space: normal; }
  .topbar-badge { height: 26px; padding: 0 8px; font-size: 12.5px; }
}

/* Reset pseudo-elementów */
.topbar::before, .topbar::after, .container.topbar-inner::before, .container.topbar-inner::after { content: none !important; }

/* === PATCH: krystaliczny tekst po lewej (tel / e-mail) — ZOSTAW NA KOŃCU == */
.topbar.topbar .topbar-left.topbar-left .topbar-link.topbar-link,
.topbar.topbar .topbar-left.topbar-left .topbar-link.topbar-link .label,
.topbar.topbar .topbar-left.topbar-left .topbar-link.topbar-link .label * {
  color:#0B1220; -webkit-text-fill-color:#0B1220; opacity:1; filter:none; mix-blend-mode:normal; backdrop-filter:none; text-shadow:none;
}
.topbar.topbar .topbar-left.topbar-left .topbar-link.topbar-link .label {
  display:inline-block; font-weight:600; letter-spacing:0.003em; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.topbar.topbar .topbar-left.topbar-left .topbar-link.topbar-link .topbar-link__icon { transform:translateY(0.5px); backface-visibility:hidden; will-change:transform; }