/* Policz Pomysł — system wizualny „papier i atrament” (26.08.2026)
   Papier #FBFAF7, atrament #1C1E21, akcent atramentowy błękit #1B4FA0,
   żółty marker #F7D154 WYŁĄCZNIE dla boxów „Krótka odpowiedź”.
   Typografia: Source Serif 4 (nagłówki) + Source Sans 3 (treść), latin-ext.
   Serwis celowo jednotematyczny kolorystycznie (papier) — bez dark mode. */

:root {
  --papier: #FBFAF7;
  --karta: #FFFFFF;
  --atrament: #1C1E21;
  --szary: #575C63;
  --slaby: #6E747C;   /* AA na papierze przy 13px (4,6:1); #8B9097 dawało 3,08 */
  --linia: #E5E2DA;
  --akcent: #1B4FA0;
  --akcent-tlo: #EEF3FB;
  --marker: #F7D154;
  --marker-tlo: #FDF6DC;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  /* sticky footer: krótkie strony (hub bez artykułów, kontakt) nie zostawiają pasa pod stopką */
  min-height: 100vh;
  min-height: 100dvh;   /* mobile: bez zawyżenia przez chowający się pasek przeglądarki */
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; }

h1, h2, h3 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(28px, 5.5vw, 40px); margin: 0 0 12px; }
h2 { font-size: 24px; margin: 40px 0 12px; }
h3 { font-size: 19px; margin: 28px 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 600; }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.wrap-szeroki { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ── Nagłówek serwisu ─────────────────────────────────────────── */
.naglowek { border-bottom: 1px solid var(--linia); background: var(--karta); }
.naglowek-in { max-width: 880px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--atrament); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.logo .znak { width: 26px; height: 26px; border-radius: 6px; background: var(--akcent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; font-family: 'Source Sans 3', sans-serif; }
.logo em { font-style: normal; color: var(--akcent); }
nav.menu { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 15px; }
nav.menu a { color: var(--szary); text-decoration: none; padding: 4px 2px; }
nav.menu a:hover, nav.menu a[aria-current="true"] { color: var(--akcent); text-decoration: underline; text-underline-offset: 4px; }

/* ── Strona główna / listy ────────────────────────────────────── */
.hero { padding: 44px 0 8px; }
.hero .misja { font-size: 19px; color: var(--szary); max-width: 56ch; }
.sekcja-tytul { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--atrament); padding-bottom: 6px; margin: 40px 0 4px; }
.sekcja-tytul h2 { margin: 0; font-size: 21px; }
.sekcja-tytul a { font-size: 14px; color: var(--szary); margin-left: auto; white-space: nowrap; }
.lista-art { list-style: none; margin: 0; padding: 0; }
.lista-art li { border-bottom: 1px solid var(--linia); padding: 16px 0; }
.lista-art h3 { margin: 0 0 4px; font-size: 19px; }
.lista-art h3 a { color: var(--atrament); text-decoration: none; }
.lista-art h3 a:hover { color: var(--akcent); text-decoration: underline; }
.lista-art .zajawka { color: var(--szary); font-size: 15.5px; margin: 0 0 6px; }
.meta-art { font-size: 13.5px; color: var(--slaby); display: flex; gap: 10px; flex-wrap: wrap; }
.meta-art .hub { color: var(--akcent); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }

/* ── Artykuł ──────────────────────────────────────────────────── */
article.tekst { padding: 40px 0 24px; }
.okruszki { font-size: 13.5px; color: var(--slaby); margin-bottom: 14px; }
.okruszki a { color: var(--slaby); }
.dane-art { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; color: var(--szary); border-bottom: 1px solid var(--linia); padding-bottom: 14px; margin-bottom: 22px; }

.krotka {
  background: var(--marker-tlo);
  border-left: 4px solid var(--marker);
  padding: 16px 18px;
  margin: 0 0 26px;
  border-radius: 0 8px 8px 0;
  font-size: 17px;
}
.krotka .etykieta { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6d0c; margin-bottom: 6px; }
.krotka p { margin: 0; }
.krotka p + p { margin-top: 8px; }

.tabela-zwij {
  overflow-x: auto; margin: 18px 0; border: 1px solid var(--linia); border-radius: 8px; -webkit-overflow-scrolling: touch;
  /* afordancja scrolla bez JS („scroll shadows”): cień przy krawędzi, przy której jest
     jeszcze treść; znika po doscrollowaniu (warstwy `local` przesuwają się z zawartością) */
  background:
    linear-gradient(to right, var(--karta) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left,  var(--karta) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    linear-gradient(to right, rgba(28,30,33,.14), rgba(28,30,33,0)) left / 16px 100% no-repeat,
    linear-gradient(to left,  rgba(28,30,33,.14), rgba(28,30,33,0)) right / 16px 100% no-repeat,
    var(--karta);
  background-attachment: local, local, scroll, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; font-size: 15px; }
/* min-width = scroll poziomy zamiast miażdżenia kolumn na 390px (bez niego overflow-x jest martwy) */
.tabela-zwij table { min-width: 560px; }
th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--szary); padding: 10px 12px; border-bottom: 2px solid var(--linia); background: transparent; }
td { padding: 9px 12px; border-bottom: 1px solid var(--linia); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num, th.num { text-align: right; }

ul, ol { padding-left: 24px; margin: 0 0 16px; }
li { margin: 5px 0; }
li::marker { color: var(--akcent); }

.zrodlo { font-size: 13.5px; color: var(--slaby); }
.przypisy { border-top: 1px solid var(--linia); margin-top: 36px; padding-top: 14px; font-size: 14px; color: var(--szary); }
.przypisy h2 { font-size: 16px; margin: 0 0 10px; }
.przypisy ol { padding-left: 20px; }
.przypisy li { margin: 4px 0; overflow-wrap: anywhere; }

/* Autopromocja — jawnie oznaczona (UOKiK) */
.autopromocja {
  border: 1px solid var(--akcent);
  background: var(--akcent-tlo);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 30px 0;
  font-size: 15.5px;
}
.autopromocja .etykieta { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--akcent); margin-bottom: 6px; }
.autopromocja p { margin: 0; }

.nota-redakcyjna { background: var(--karta); border: 1px solid var(--linia); border-radius: 8px; padding: 12px 16px; font-size: 13.5px; color: var(--szary); margin-top: 26px; }

/* FAQ w artykule */
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--akcent); font-weight: 700; }
.faq details[open] summary::after { content: '–'; }
.faq .odp { padding: 0 0 14px; color: var(--szary); }

/* ── Stopka ───────────────────────────────────────────────────── */
footer.stopka { border-top: 1px solid var(--linia); margin-top: 56px; background: var(--karta); }
.stopka-in { max-width: 880px; margin: 0 auto; padding: 26px 20px 34px; font-size: 14px; color: var(--szary); }
.stopka-in .kolumny { display: flex; gap: 20px 48px; flex-wrap: wrap; margin-bottom: 18px; }
.stopka-in nav { display: flex; flex-direction: column; gap: 6px; }
.stopka-in a { color: var(--szary); }
.stopka-in .disclosure { border-top: 1px solid var(--linia); padding-top: 14px; font-size: 13px; color: var(--slaby); max-width: 72ch; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 30px 0 4px; }
  th, td { padding: 8px 8px; }
  nav.menu { font-size: 14px; gap: 2px 8px; }   /* 6 pozycji w jednym rzędzie do 360 px (z etykietą „O nas”) */
}