/* Blog CSS — artykuły poradnika. Paleta jak na stronie głównej:
   biel, czerń, żółć maszyn (#ffd400), zero zaokrągleń. */

:root{
  --bg:#ffffff; --bg-alt:#f2f2ef; --ink:#111111; --muted:#5a5a55;
  --line:#d6d6cf; --acc:#ffd400; --danger:#c0392b;
}

*, *::before, *::after { box-sizing: border-box; }

body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.7; margin:0; padding:0;
}

/* NAV */
nav{
  background:var(--bg); border-bottom:2px solid var(--ink);
  padding:14px 26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
nav a{
  color:var(--ink); text-decoration:none; font-size:.82rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
nav a:hover{ background:var(--acc); }
nav .nav-logo{
  font-weight:800; font-size:1.05rem; margin-right:auto;
  letter-spacing:-.02em; text-transform:none;
}
nav .nav-logo:hover{ background:none; color:var(--ink); }

/* ARTYKUŁ */
.article-wrapper{ max-width:750px; margin:48px auto; padding:0 24px 64px; }

.article-meta{
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;
  font-size:.76rem; color:var(--muted); align-items:center;
}
.article-meta .tag{
  background:var(--acc); color:var(--ink); padding:5px 10px; border:2px solid var(--ink);
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.68rem;
}

/* NAGŁÓWKI */
h1{
  font-size:clamp(1.7rem,4vw,2.3rem); font-weight:800; color:var(--ink);
  line-height:1.1; letter-spacing:-.03em; text-transform:uppercase;
  margin:0 0 14px; text-wrap:balance;
}
h2{
  font-size:1.3rem; font-weight:800; color:var(--ink); text-transform:uppercase;
  letter-spacing:-.02em; margin:44px 0 12px; padding-bottom:8px;
  border-bottom:2px solid var(--ink);
}
h3{
  font-size:1.04rem; font-weight:800; color:var(--ink); text-transform:uppercase;
  letter-spacing:-.01em; margin:26px 0 8px;
}

p{ margin-bottom:18px; color:var(--ink); }

.lead{
  font-size:1.08rem; color:var(--ink); border-left:6px solid var(--acc);
  padding-left:16px; margin-bottom:32px;
}

ul, ol{ padding-left:22px; margin-bottom:18px; color:var(--ink); }
li{ margin-bottom:6px; }

/* TABELE */
table{ width:100%; border-collapse:collapse; margin:24px 0 32px; font-size:.9rem;
  border:2px solid var(--ink); }
thead{ background:var(--ink); }
thead th{
  color:var(--acc); font-weight:800; padding:11px 14px; text-align:left;
  text-transform:uppercase; letter-spacing:.08em; font-size:.74rem;
}
tbody tr{ border-bottom:1px solid var(--line); }
tbody tr:hover{ background:var(--bg-alt); }
tbody td{ padding:10px 14px; color:var(--ink); vertical-align:top;
  font-variant-numeric:tabular-nums; }

/* RAMKI */
.highlight-box{
  background:var(--bg-alt); border:2px solid var(--ink); border-left:6px solid var(--acc);
  padding:18px 22px; margin:24px 0;
}
.highlight-box p{ margin-bottom:0; }

.warning-box{
  background:var(--bg); border:2px solid var(--ink); border-left:6px solid var(--danger);
  padding:18px 22px; margin:24px 0;
}
.warning-box p{ color:var(--ink); margin-bottom:0; }

/* WEZWANIE */
.cta-box{
  background:var(--ink); border:2px solid var(--ink);
  padding:32px; margin:48px 0 32px; text-align:center;
}
.cta-box h3{ color:var(--acc); font-size:1.3rem; margin:0 0 10px; }
.cta-box p{ color:#d6d6cf; margin-bottom:22px; }

.cta-button{
  display:inline-block; background:var(--acc); color:var(--ink);
  font-weight:800; font-size:.92rem; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 30px; text-decoration:none; border:2px solid var(--acc);
}
.cta-button:hover{ background:var(--bg); border-color:var(--bg); }

.price-table th{ background:var(--ink); color:var(--acc); }
.price-highlight{ color:var(--ink); font-weight:800; background:var(--acc); padding:1px 6px; }

/* STOPKA */
footer{
  background:var(--bg); border-top:2px solid var(--ink); padding:32px 26px;
  text-align:center; color:var(--muted); font-size:.85rem;
}
footer a{ color:var(--ink); text-decoration:underline; }

@media (max-width:600px){
  .article-wrapper{ padding:0 16px 48px; }
  table{ font-size:.8rem; }
  thead th, tbody td{ padding:8px 10px; }
}