/* ═══════════════════════════════════════════════════════════════
   Kolory nawigacji = kolory kafelków działów (2026-09-29)
   milo: "pelne tlo, tak jak przy pierwszym podejsciu,
          i moze byc wyzsze i delikatnie szersze"

   KLUCZ: ujemny margines kompensuje padding co do piksela,
   więc układ nagłówka zostaje IDENTYCZNY (zmierzone: bar 76px,
   nav 15px, y=31 — bez zmian).
   ═══════════════════════════════════════════════════════════════ */

.nav a {
  border-radius: 5px;
  padding: 4px 8px;          /* wyższe + delikatnie szersze */
  margin: -4px -8px;         /* pełna kompensacja — zero wpływu na układ */
  line-height: 15px;         /* tekst na tej samej wysokości co przedtem */
  transition: filter .15s;
}

/* pełne kolory — 1:1 z kafelkami działów */
.nav a:nth-child(1) { background: #e5efd4; }   /* Dziki świat — zielony */
.nav a:nth-child(2) { background: #dce9f0; }   /* Technologia — niebieski */
.nav a:nth-child(3) { background: #f2ddd0; }   /* Zdrowie — brzoskwinia */
.nav a:nth-child(4) { background: #e7e0d5; }   /* Historia — beż */
.nav a:nth-child(5) { background: #dce8df; }   /* Podróże — szałwia */
.nav a:nth-child(6) { background: #eee9f5; }   /* Dobre wiadomości — lawenda */
.nav a:nth-child(7) { background: #c9e8a0; }   /* Wydarzenia — limonka */
.nav a:nth-child(8) { background: #eef3f0; }   /* Wszystkie artykuły — neutralny */

.nav a:hover { filter: brightness(.93); color: #18221f; }

/* kafelki 06 i 07 — style.css ma kolory tylko dla 1-5 */
.topic:nth-child(6) { background: #eee9f5; }
.topic:nth-child(7) { background: #c9e8a0; }


/* Button "Wydarzenia" w HERO (obok "Przejdź do działów" i "Najnowsze teksty") */
.btn-wydarzenia-hero {
  background: #d5e8b5 !important;   /* var(--lime) — kolor strony */
  color: #1d3a20 !important;
  border: 1px solid #bcd99a !important;
}
.btn-wydarzenia-hero:hover {
  background: #c9e2a0 !important;
}