/* =========================================================================
   Strony prawne — zamow-kontener.pl
   Wspólny szablon /polityka-prywatnosci/, /regulamin-serwisu-internetowego/
   i kolejnych stron prawnych (page template strona-prawna.php).
   Zgodne z „Wytyczne designu". Tokeny --zk-* z globalnego :root (zk-ui.css) —
   tu KONSUMOWANE przez var() z fallbackami. Prefiks klas .zk-lg__.

   Korekta 04.08 — WYRÓWNANIE UKŁADU I TYPOGRAFII DO KANONU SERWISU
   (wzór: o-firmie.css / .zk-af, potwierdzone z Wojtkiem):
   - Kontener stron prawnych używa --zk-max (1240px), jak każda inna podstrona
     (było: własne 840px → strona wyglądała na węższą od reszty serwisu).
   - Hero (breadcrumb + H1 + data) jako sekcja z linią oddzielającą — 1:1
     wzorzec .zk-af__hero.
   - Skala nagłówków, lead, line-height i rytm sekcji zrównane z .zk-af
     (H1 do 2.35rem, H2 do 1.85rem, body line-height 1.6).
   - Sama PROZA prawna zostaje w węższej kolumnie czytelniczej — realizuje to
     siatka „treść + panel boczny" (.zk-lg__grid, wzór .zk-blog__grid). Bez
     panelu (dokument < 2 nagłówków H2) proza dostaje --zklg-measure.

   Iteracja 04.08 (uwagi Wojtka):
   - Lepki spis treści w panelu bocznym — wzorzec i styl 1:1 z „W tym artykule"
     na blogu (.zk-blog__toc): biała karta, aktywna pozycja = lewa zielona
     belka + tło --zk-bg-soft. Scrollspy = wspólny zk-scrollspy.js
     (hak `data-zk-scrollspy`), offset 120px.
   - FIX niewidocznych nagłówków tabel RODO: reset motywu Hello Elementor
     (`table tbody>tr:nth-child(odd)>th`, specyficzność 0,1,3) wygrywał
     z `.zk-lg__table th` (0,1,1) i zabierał `th` zielone tło — biały tekst
     lądował na jasnoszarym pasku. Reguły niżej mają (0,2,3) i domykają temat;
     przy okazji wyłączona zebra i szary hover motywu (tabele RODO są
     definicyjne, nie danymi tabelarycznymi).

   Zasady kluczowe:
   - #84BF2A (--zk-green) = tylko akcent graficzny (kreska pod H2); NIGDY kolor
     tekstu ani tło pod biały tekst.
   - Zieleń tekstowa/linki = --zk-green-dark (#487214).
   - Nagłówki tabel = --zk-green-dark (kanon tabel, th zielone). Kontrast ≥ 4,5:1.
   - Kotwice spisu treści: scroll-margin-top 120px (sticky header).
   ========================================================================= */

/* ------------------------------------------------------------------- Baza */
.zk-lg {
	--zklg-measure: 74ch;   /* kolumna czytelnicza prozy prawnej */
	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist) */
	color: var(--zk-ink, #23291c);
	font-size: 1.02rem;
	line-height: 1.6;
	background: var(--zk-bg, #fff);
}
.zk-lg, .zk-lg *, .zk-lg *::before, .zk-lg *::after { box-sizing: border-box; }

/* Kontenery poziomu strony — identyczne z .zk-af > section (kanon). */
.zk-lg > section {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 20px);
	padding-block: clamp(2rem, 4.5vw, 3.5rem);
}

/* Kotwice (id na nagłówkach §-ów) — odsłonięte spod sticky headera. */
.zk-lg [id] { scroll-margin-top: 120px; }

/* Fokus (dostępność). */
.zk-lg a:focus-visible,
.zk-lg summary:focus-visible,
.zk-lg [tabindex]:focus-visible {
	outline: 2px solid var(--zk-green-dark, #487214);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- Hero
   Kompaktowy: breadcrumb + H1 + data aktualizacji (wzór .zk-af__hero). */
.zk-lg__hero {
	background: #fff;
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
	border-bottom: 1px solid var(--zk-line, #e6e8e1);
}
.zk-lg__h1 {
	font-size: clamp(1.6rem, 3.6vw, 2.35rem);
	line-height: 1.15;
	font-weight: 800;
	margin: .35rem 0 .6rem;
	color: var(--zk-ink, #23291c);
	max-width: 24ch;
}
.zk-lg__updated {
	margin: 0;
	font-size: .92rem;
	color: var(--zk-muted, #5b6152);
}

/* ------------------------------------------------------------ Sekcja treści */
.zk-lg__body {
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4.5vw, 3.5rem);
}

/* Siatka treść + panel boczny (wzór .zk-blog__grid). */
.zk-lg__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--zklg-side-w, 320px);
	gap: var(--zklg-gap, 56px);
	align-items: start;
}
/* Dokument bez spisu (< 2 nagłówków H2) — jedna kolumna czytelnicza. */
.zk-lg__grid--solo { grid-template-columns: minmax(0, var(--zklg-measure, 74ch)); }

.zk-lg__prose { min-width: 0; }

.zk-lg__sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 120px;            /* sticky header + luz (wytyczne §9) */
	align-self: start;
}
.zk-lg__side-inner { display: grid; gap: 22px; }

/* ---------------------------------------------------------- Typografia prose */
/* Lead pod H1 (podtytuł dokumentu) — skala .zk-af__lead. */
.zk-lg__subtitle {
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--zk-ink, #23291c);
	margin: 0 0 1.25rem;
}
.zk-lg__prose h2 {
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	line-height: 1.2;
	font-weight: 800;
	margin: 2.75rem 0 1.25rem;
	color: var(--zk-ink, #23291c);
}
/* Akcent marki pod H2: krótka gruba zielona kreska (kanon: .zk-ui-h2::after). */
.zk-lg__prose h2::after {
	content: ""; display: block;
	width: 34px; height: 4px; margin-top: .7rem;
	border-radius: 2px; background: var(--zk-green, #84bf2a);
}
.zk-lg__prose h3 {
	font-size: clamp(1.08rem, 1.9vw, 1.28rem);
	line-height: 1.25;
	font-weight: 700;
	margin: 2rem 0 .85rem;
	color: var(--zk-ink, #23291c);
}
.zk-lg__prose p {
	margin: 0 0 1rem;
	color: var(--zk-ink, #23291c);
	line-height: 1.6;
}
.zk-lg__prose p:last-child { margin-bottom: 0; }
.zk-lg__prose a {
	color: var(--zk-green-dark, #487214);
	text-underline-offset: 2px;
}
.zk-lg__prose a:hover { text-decoration: underline; }

.zk-lg__prose ul,
.zk-lg__prose ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}
.zk-lg__prose li {
	margin-bottom: .5rem;
	line-height: 1.6;
	color: var(--zk-ink, #23291c);
}
.zk-lg__prose li:last-child { margin-bottom: 0; }
.zk-lg__prose ul ul,
.zk-lg__prose ol ol {
	margin: .5rem 0 0;
}

/* Przypis (gwiazdka pod tabelami RODO). */
.zk-lg__note {
	font-size: .88rem;
	color: var(--zk-muted, #5b6152);
	margin: .6rem 0 1rem;
}

/* Podpis końcowy (nazwa spółki pod listą odbiorców danych). */
.zk-lg__signature {
	margin-top: 1.5rem;
	font-weight: 700;
	color: var(--zk-ink, #23291c);
}

/* ------------------------------------------------------ Lista definicji §1 */
.zk-lg__defs {
	margin: 0 0 1rem;
	padding: 1.25rem 1.4rem;
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
}
.zk-lg__defs dt {
	font-weight: 700;
	color: var(--zk-ink, #23291c);
}
.zk-lg__defs dd {
	margin: .2rem 0 1rem;
	color: var(--zk-ink, #23291c);
	line-height: 1.6;
}
.zk-lg__defs dd:last-child { margin-bottom: 0; }

/* ------------------------------------------- Spis treści (panel boczny)
   Wzór: .zk-blog__toc — biała karta, etykieta UPPERCASE, aktywna pozycja
   z lewą zieloną belką. Aktywność ustawia wspólny zk-scrollspy.js. */
.zk-lg__toc {
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 18px 18px 14px;
	background: var(--zk-bg, #fff);
}
/* Tytuł spisu to <p>, nie nagłówek (design system §5). */
.zk-lg__toc-title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--zk-muted, #5b6152);
	margin: 0 0 12px;
}
.zk-lg__toc ul { list-style: none; margin: 0; padding: 0; }
.zk-lg__toc li { margin: 0; }
.zk-lg__toc a {
	display: block;
	padding: 8px 12px;
	border-left: 3px solid transparent;
	border-radius: 0 var(--zk-r-control, 8px) var(--zk-r-control, 8px) 0;
	color: var(--zk-ink, #23291c);
	text-decoration: none;
	font-size: .9rem;
	line-height: 1.35;
	transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.zk-lg__toc a:hover { background: var(--zk-bg-soft, #f2f4ec); }
.zk-lg__toc a.is-active {
	background: var(--zk-bg-soft, #f2f4ec);
	color: var(--zk-green-dark, #487214);
	border-left-color: var(--zk-green, #84BF2A);
	font-weight: 700;
}
/* Długi spis (regulamin: 15 pozycji) nie może być wyższy niż ekran — inaczej
   sticky przestaje działać i końcówka listy jest nieosiągalna. */
.zk-lg__toc ul {
	max-height: calc(100vh - 220px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* --------------------------------------------------------------- Tabele
   Kanon tabel serwisu: nagłówek = ciemna zieleń marki, uppercase; biała karta,
   1px --zk-line, radius 12px, cień; wrapper z overflow-x.
   Tabele wychodzą poza kolumnę czytelniczą do pełnej szerokości kontenera —
   dane w wierszach czytają się lepiej szerzej niż proza.
   .zk-lg__table--rodo: definicyjne tabele RODO (nagłówki pełnej szerokości).
   .zk-lg__table--recipients: pierwsza kolumna = nagłówki wierszy (th scope=row). */
.zk-lg__tablewrap {
	overflow-x: auto;
	margin: 0 0 1.25rem;
	max-width: min(100%, 980px);
}
.zk-lg__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--zk-bg, #fff);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20, 32, 4, .06);
	font-size: .95rem;
}
/* Specyficzność (0,2,3): motyw Hello Elementor (reset.css) ma
   `table tbody>tr:nth-child(odd)>th{background:hsla(0,0%,50%,.071)}` (0,1,3)
   i bez tego zabierał nagłówkom zielone tło → biały tekst na jasnym pasku
   (zgłoszenie Wojtka 04.08). Ta sama zasada dla `td` i hovera. */
.zk-lg .zk-lg__table > thead > tr > th,
.zk-lg .zk-lg__table > tbody > tr > th {
	background: var(--zk-green-dark, #487214);
	color: #fff;
	text-align: left;
	padding: .8rem 1rem;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: top;
}
/* Zebra i szary hover motywu OFF — tabele RODO są definicyjne, nie danymi. */
.zk-lg .zk-lg__table > tbody > tr > td { background: var(--zk-bg, #fff); }
.zk-lg .zk-lg__table > tbody > tr:hover > td { background: #f8fbf2; }
.zk-lg .zk-lg__table > tbody > tr:hover > th { background: var(--zk-green-dark, #487214); }
.zk-lg__table thead th {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.zk-lg__table td {
	padding: .8rem 1rem;
	border-top: 1px solid var(--zk-line, #e6e8e1);
	vertical-align: top;
	line-height: 1.55;
	color: var(--zk-ink, #23291c);
}
.zk-lg__table td + td {
	border-left: 1px solid var(--zk-line, #e6e8e1);
}

/* Tabele RODO: etykiety-pytania (th scope=colgroup) jako zielone pasy pełnej
   szerokości; wiersze danych bez zebry (mała, definicyjna struktura). */
.zk-lg__table--rodo th[scope="colgroup"] {
	font-size: .92rem;
	text-transform: none;
	letter-spacing: 0;
	border-top: 1px solid var(--zk-line, #e6e8e1);
}
.zk-lg__table--rodo tbody tr:first-child th { border-top: 0; }

/* Tabela odbiorców danych: nagłówki wierszy w pierwszej kolumnie (miękki styl,
   NIE zielony — zieleń zostaje dla nagłówka kolumn). */
.zk-lg .zk-lg__table--recipients > tbody > tr > th[scope="row"],
.zk-lg .zk-lg__table--recipients > tbody > tr:hover > th[scope="row"] {
	background: var(--zk-bg-soft, #f2f4ec);
	color: var(--zk-ink, #23291c);
	font-weight: 700;
	border-top: 1px solid var(--zk-line, #e6e8e1);
	border-right: 1px solid var(--zk-line, #e6e8e1);
	text-transform: none;
	letter-spacing: 0;
}

/* ------------------------------------------------------------ Breakpointy */
/* Tablet: węższy panel boczny (wzór blogu: 340 → 300px). */
@media (max-width: 1100px) {
	.zk-lg { --zklg-side-w: 280px; --zklg-gap: 40px; }
}
/* ≤900px: jedna kolumna. Spisu NIE ukrywamy (blog to robi, ale dokument
   prawny ma kilkanaście §-ów i nawigacja jest tu realnie potrzebna) —
   ląduje nad treścią jako zwykła karta, bez sticky i bez limitu wysokości. */
@media (max-width: 900px) {
	.zk-lg__grid { grid-template-columns: minmax(0, 1fr); }
	.zk-lg__prose { max-width: var(--zklg-measure, 74ch); }
	.zk-lg__sidebar { position: static; order: -1; }
	.zk-lg__side-inner { gap: 18px; }
	.zk-lg__toc ul { max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
	.zk-lg__table { font-size: .9rem; }
	.zk-lg__table th,
	.zk-lg__table td { padding: .65rem .75rem; }
}