/* ═══════════════════════════════════════════════════════════════════════
   WNC — KAFELKI NAWIGACJI Z GRADIENTOWYM ŚWIATŁEM
   2026-09-29
   milo: "one byly dobre, takie gradientowe, jakby swiatlo im sie zmienialo"

   IDEE:
   - Each link = kafelek z gradientem (nie płaski kolor)
   - Hover = światło przesuwa się po kafelku + kafelek się unosi
   - Efekt "żywego światła": gradient liniowy pod kątem, animowany
     background-position + jaśniejszy stopień na hover
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ 1. TŁO NA CAŁĄ SZEROKOŚĆ ══ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1400px 900px at 8% -8%,  rgba(213,232,181,.62), transparent 58%),
    radial-gradient(1200px 800px at 96% 6%,  rgba(127,157,183,.34), transparent 56%),
    radial-gradient(1300px 900px at 50% 108%, rgba(43,107,82,.16), transparent 62%),
    radial-gradient(1000px 700px at 88% 62%, rgba(214,120,67,.13), transparent 58%),
    linear-gradient(178deg, #fcfaf4 0%, var(--paper) 38%, #efe9dc 100%);
}
.hero, .ticker, section, main{background:transparent}

/* ══ 2. PASEK ══ */
.bar{
  height:auto;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  position:relative;
  z-index:20;
  overflow:visible;
}
.bar, .shell{overflow:visible}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  flex-wrap:nowrap;
}

/* ══ 3. KAFELEK — GRADIENT + ŚWIATŁO ══
   Każdy kafelek ma gradient 135° z dwóch odcieni swojego koloru.
   Warstwa ::before to "refleks światła" — rozjaśnienie w prawym górnym
   rogu, które przy hoverze przesuwa się i zwiększa intensywność. */
.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--ink);
  text-decoration:none;
  padding:10px 15px;
  margin:0;
  line-height:1.25;
  border-radius:999px;
  overflow:hidden;                  /* refleks nie wychodzi za kafelek */
  border:1px solid rgba(24,34,31,.06);
  background:var(--card);
  /* bez cienia — kafelki są płaskie, "nieodbijające" */
  box-shadow:none;
  transition:
    background .26s ease,
    color .26s ease,
    border-color .26s ease;
}

/* refleks światła — WYŁĄCZONY */
.nav a::before{display:none}

/* odbicie/skos — WYŁĄCZONE (milo: "kolory bez poswiaty, nieodbijajace") */
.nav a::after{display:none}

/* ══ 4. GRADIENTY DZIAŁÓW — 1:1 z kafelkami, ale z głębią ══ */
.nav a:nth-child(1){                       /* Dziki świat — zielony */
  background:linear-gradient(135deg, #eef7dd 0%, #e5efd4 45%, #d6e5bd 100%);
  border-color:rgba(140,175,110,.28);
}
.nav a:nth-child(2){                       /* Technologia — błękit */
  background:linear-gradient(135deg, #e8f2f8 0%, #dce9f0 45%, #c9dceb 100%);
  border-color:rgba(120,155,185,.28);
}
.nav a:nth-child(3){                       /* Zdrowie — brzoskwinia */
  background:linear-gradient(135deg, #fbeade 0%, #f2ddd0 45%, #e8cbb8 100%);
  border-color:rgba(200,150,120,.28);
}
.nav a:nth-child(4){                       /* Historia — beż */
  background:linear-gradient(135deg, #f2ece2 0%, #e7e0d5 45%, #d9cfc0 100%);
  border-color:rgba(170,155,130,.28);
}
.nav a:nth-child(5){                       /* Podróże — szałwia */
  background:linear-gradient(135deg, #e9f3ec 0%, #dce8df 45%, #c8dccf 100%);
  border-color:rgba(130,165,145,.28);
}
.nav a:nth-child(6){                       /* Dobre wiadomości — lawenda */
  background:linear-gradient(135deg, #f5f2fa 0%, #eee9f5 45%, #ddd4ec 100%);
  border-color:rgba(160,145,190,.28);
}
.nav a:nth-child(7){                       /* Wydarzenia — limonka */
  background:linear-gradient(135deg, #dff5bd 0%, #c9e8a0 45%, #b3da85 100%);
  border-color:rgba(150,190,110,.32);
  font-weight:700;
}

/* ══ 5. HOVER — TYLKO ZIELONY HIGHLIGHT (bez podnoszenia, bez cienia) ══ */
.nav a:hover{
  color:#f7f5ef;
  border-color:var(--green);
  background:linear-gradient(135deg, #3a8266 0%, #2b6b52 55%, #1f5340 100%);
  filter:none;
  box-shadow:none;
  transform:none;
}

/* tekst ponad refleksami */
.nav a > *{position:relative;z-index:1}

/* fallback: gdyby link nie miał dzieci (sam tekst) */
.nav a{z-index:1}

.nav a:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .bar{flex-wrap:wrap;gap:10px}
  .nav{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:5px;
    padding-bottom:6px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .nav a{font-size:13px;padding:8px 12px}
  .nav a:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   WCAG
   ═══════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .nav a{transition:none}
  .nav a::before{transition:none}
  .nav a:hover{transform:none}
}