/* Proza treści redakcyjnych (bloki core w .cp-prose) + układ strony ze spisem treści.
   Bloki core stylujemy sami — arkusze wp-block-library/global-styles są zdejmowane w inc/setup.php. */

/* układ: treść + spis treści */
.cp-doc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.cp-doc .cp-prose{max-width:none;min-width:0}
.cp-toc{position:sticky;top:var(--cp-sticky-top);order:2;min-width:0}
.cp-toc__box{border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-toc__head{display:block;padding:14px 16px;border-bottom:1px solid var(--cp-line-2);font-family:var(--cp-font-head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute);cursor:pointer;list-style:none}
.cp-toc__head::-webkit-details-marker{display:none}
.cp-toc__head::after{content:"+";float:right;color:var(--cp-text-dim)}
.cp-toc__box[open] .cp-toc__head::after{content:"–"}
.cp-toc__list{counter-reset:cp-toc}
.cp-toc__list li{counter-increment:cp-toc}
.cp-toc__list a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--cp-line-1);font-size:13px;line-height:1.4;color:var(--cp-text-2)}
.cp-toc__list li:last-child a{border-bottom:0}
.cp-toc__list a::before{content:counter(cp-toc,decimal-leading-zero);font-family:var(--cp-font-head);font-size:10px;color:var(--cp-text-dim);font-variant-numeric:tabular-nums}
.cp-toc__list a:hover{background:var(--cp-accent-tint);color:var(--cp-accent)}
.cp-toc__list a.is-active{background:var(--cp-accent-tint);color:var(--cp-accent);box-shadow:inset 2px 0 0 var(--cp-accent)}
.cp-toc__list a.is-active::before{color:var(--cp-accent)}

/* zakładki widoków (Zasady / FAQ i errata) */
.cp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cp-chip[aria-current="page"]{background:var(--cp-accent);border-color:var(--cp-accent);color:var(--cp-on-accent)}
.cp-chip[aria-current="page"]:hover{background:var(--cp-accent-hover);border-color:var(--cp-accent-hover);color:var(--cp-on-accent)}

/* proza: bloki core */
/* overflow-wrap: długi ciąg bez spacji (np. surowy URL) łamie się zamiast rozpychać stronę na 320 px (WCAG 1.4.10). */
.cp-prose{color:var(--cp-text-2);overflow-wrap:break-word}
.cp-prose>:last-child{margin-bottom:0}
.cp-prose p{margin:0 0 20px;max-width:72ch;font-size:17px;line-height:1.75;color:var(--cp-text-2)}
/* Bez scroll-margin-top: offset kotwic daje html{scroll-padding-top} z base.css (jedno miejsce). */
.cp-prose h2{margin:48px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--cp-line-2);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-prose>h2:first-child{margin-top:0}
/* Dalsza część opisu termu/kategorii — pod siatką kart albo listą wpisów (wstęp zostaje w nagłówku strony). */
/* Wyśrodkowana jest kolumna (72ch przy 17px = szerokość akapitu), tekst zostaje wyrównany do lewej. */
.cp-term-about{max-width:72ch;margin:56px auto 0;padding-top:32px;border-top:1px solid var(--cp-line-2);font-size:17px}
.cp-prose h3{margin:32px 0 12px;font-size:16px;font-weight:600;color:var(--cp-text)}
/* Linki w tekście: stałe podkreślenie — sam kolor akcentu różni się od tekstu obok o 1,1–1,9:1 (WCAG 1.4.1 wymaga 3:1).
   :where() trzyma niską specyficzność, żeby warianty niżej (.cp-cardlink — kropkowane, link-obrazek) mogły je zmienić. */
.cp-prose a:where(:not(.cp-kw,.cp-chip,.cp-btn)){text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}
.cp-prose a:not(.cp-kw):hover{text-decoration-color:currentColor}
.cp-prose a.cp-cardlink{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}
.cp-prose a.cp-cardlink:hover{text-decoration-style:solid}
.cp-prose ul,.cp-prose ol{margin:0 0 20px;padding-left:26px;max-width:72ch;font-size:17px;line-height:1.75}
.cp-prose li{position:relative;margin-bottom:10px}
.cp-prose li>ul,.cp-prose li>ol{margin:10px 0 0}
.cp-prose ul>li::before{content:"";position:absolute;left:-18px;top:.7em;width:6px;height:6px;background:var(--cp-accent)}
.cp-prose ol{counter-reset:cp-ol}
.cp-prose ol>li{counter-increment:cp-ol}
.cp-prose ol>li::before{content:counter(cp-ol) ".";position:absolute;left:-26px;font-family:var(--cp-font-head);font-size:14px;color:var(--cp-accent);font-variant-numeric:tabular-nums}
/* Ramka/tło cytatu = .cp-callout, a bloku details = .cp-panel — deklaracje w components.css. */
.cp-prose blockquote{margin:0 0 24px;max-width:72ch}
.cp-prose blockquote p{margin-bottom:12px;font-size:16px}
.cp-prose blockquote>:last-child{margin-bottom:0}
.cp-prose blockquote cite{display:block;font-family:var(--cp-font-head);font-size:11px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-prose figure{margin:0 0 24px}
.cp-prose figcaption{margin-top:8px;font-size:13px;line-height:1.6;color:var(--cp-text-mute)}
/* .cp-table-scroll: kontener dla tabel BEZ własnej figury (blok klasyczny, wklejony HTML, treść
   zapisana przez ability) — dokłada go CpCore\Domain\TableScroll (ContentEnricher::enrich()).
   Zastępuje dawne `display:block` na samej <table> (psuło jej semantykę table/row/cell w części
   czytników ekranu): teraz to DIV jest kontenerem przewijania, tabela zostaje table. */
.cp-prose .wp-block-table,.cp-prose .cp-table-scroll{overflow-x:auto}
/* Oba kontenery są regionami z tabindex="0" (CpCore TableScroll) — po fokusie przewijają się strzałkami. */
.cp-prose .wp-block-table:focus-visible,.cp-prose .cp-table-scroll:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}
.cp-prose table{width:100%;border-collapse:collapse;font-size:14px}
/* W kontenerze przewijania (figura ALBO .cp-table-scroll) tabela może być szersza niż kolumna
   tekstu — kontener sam scrolluje, więc to nie rozpycha reszty strony. */
.cp-prose .wp-block-table table,.cp-prose .cp-table-scroll table{min-width:420px}
.cp-prose .cp-table-scroll th,.cp-prose .cp-table-scroll td{white-space:nowrap}
.cp-prose th,.cp-prose td{padding:10px 12px;border:1px solid var(--cp-line-2);text-align:left;vertical-align:top}
.cp-prose th{font-family:var(--cp-font-head);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-mute);background:var(--cp-panel)}
.cp-prose details{margin:0 0 16px;max-width:72ch}
.cp-prose summary{display:block;padding:14px 16px;font-family:var(--cp-font-head);font-size:15px;font-weight:600;color:var(--cp-text);cursor:pointer;list-style:none}
.cp-prose summary::-webkit-details-marker{display:none}
.cp-prose summary::after{content:"+";float:right;color:var(--cp-accent)}
.cp-prose details[open] summary{border-bottom:1px solid var(--cp-line-2)}
.cp-prose details[open] summary::after{content:"–"}
.cp-prose details>:not(summary){margin:14px 16px;max-width:none}
.cp-prose hr{margin:32px 0;border:0;border-top:1px solid var(--cp-line-2)}
.cp-prose img{max-width:100%;height:auto}
/* obraz podlinkowany do pełnej rozdzielczości (schematy zasad) — na telefonie dotknięcie otwiera powiększenie */
.cp-prose figure>a{display:block;cursor:zoom-in;text-decoration:none}
.cp-prose figure>a:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}
/* Schematy zasad to grafiki z tekstem, na wąskim ekranie pomniejszone poniżej czytelności (WCAG 1.4.5) — podpowiedź,
   że dotknięcie otwiera pełny rozmiar; treść schematu jest też w alt, podpisie i tekście obok. */
@media (max-width:1024px){.cp-prose figure>a::after{content:"Dotknij, aby powiększyć";display:block;margin-top:6px;font-family:var(--cp-font-head);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-mute)}}
/* resztki po arkuszach core, których potrzebujemy: wyrównania z edytora */
.cp-prose .has-text-align-center{text-align:center}
.cp-prose .has-text-align-right{text-align:right}
.cp-prose .has-text-align-left{text-align:left}
.cp-prose .aligncenter{margin-left:auto;margin-right:auto}
.cp-prose .alignwide,.cp-prose .alignfull{max-width:none}

/* stronicowanie treści (<!--nextpage-->); bieżącą stronę WordPress oznacza aria-current="page" */
.cp-pages{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:36px 0 0}
.cp-pages__label{font-family:var(--cp-font-head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-pages [aria-current="page"] .cp-chip{background:var(--cp-accent);border-color:var(--cp-accent);color:var(--cp-on-accent)}
.cp-pages a:hover .cp-chip{border-color:var(--cp-accent-line);color:var(--cp-accent)}

/* lista errat */
.cp-errata{margin-top:48px}
/* lista pod nagłówkiem i wstępem z treści strony (bez własnego H2) — dosuwa się do wstępu */
.cp-errata--continued{margin-top:8px}
.cp-errata .cp-errata__list{display:grid;gap:14px;padding:0;max-width:none}
.cp-errata .cp-errata__list>li::before{content:none}
.cp-errata .cp-errata__item{margin:0;padding:18px}
.cp-errata .cp-errata__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cp-errata .cp-errata__name{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--cp-text)}
.cp-errata .cp-errata__variant{font-family:var(--cp-font-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-yellow);white-space:nowrap}
.cp-errata .cp-errata__date{margin:0;font-family:var(--cp-font-head);font-size:11px;letter-spacing:.1em;color:var(--cp-text-dim)}
.cp-errata .cp-errata__change{margin:10px 0 0;max-width:70ch;font-size:14px;line-height:1.7;color:var(--cp-text-mute)}
.cp-errata .cp-errata__empty{font-size:15px;color:var(--cp-text-mute)}

@media (max-width:1024px){
  .cp-doc{grid-template-columns:minmax(0,1fr);gap:28px}
  .cp-toc{position:static;order:-1}
}
@media (max-width:640px){
  .cp-prose p,.cp-prose ul,.cp-prose ol{font-size:16px}
  .cp-prose details>:not(summary){margin:12px 14px}
  .cp-errata .cp-errata__item{padding:14px}
}