/*
 * Czytelność wpisów — zlecenie A, 10.10.2026.
 * Jedyne miejsce na reguły czytelności treści wpisu. Dołączany tylko we wpisach,
 * po arkuszu motywu (inc-czytelnosc.php). Opakowanie tabel .lh-tabela i klasę .lh-liczba
 * dokłada filtr the_content w inc-czytelnosc.php; treść w bazie zostaje bez zmian.
 */

/* ============ CZĘŚĆ 1: TYPOGRAFIA ============ */

/* Kolumna treści 720 px zamiast 780 px: ok. 70 znaków w wierszu przy 18 px, oko nie gubi początku wiersza. */
.lh-tresc {
  max-width: 720px;
}

/* Akapit i punkt listy: interlinia 1,7 — na ciemnym tle jaśniejsze litery potrzebują więcej powietrza.
   Rozmiar 18 px już daje style.css. Potrójna klasa i !important, bo style.css wymusza 1,65
   regułą „p:not(.lead):not(.lh-lead):not(.font-lead)” z !important i specyficznością (0,3,1). */
.lh-tresc.lh-tresc.lh-tresc p,
.lh-tresc li {
  line-height: 1.7 !important;
}

/* Pogrubienie: waga 700 i kolor jaśniejszy niż akapit, żeby wyróżnienie było widać na pierwszy rzut oka. */
.lh-tresc strong,
.lh-tresc b {
  font-weight: 700;
  color: var(--wp--preset--color--tekst);
}

/* H2 oddzielony od poprzedniej sekcji większym światłem niż od własnego tekstu (56 px nad, 20 px pod). */
.lh-tresc h2 {
  margin-top: 56px;
  margin-bottom: 20px;
}

/* H3 wyraźnie mniejszy od H2, ale nadal większy od treści (24 px wobec 18 px).
   !important, bo style.css wymusza „h3 { font-size: 28px !important }” dla całej strony. */
.lh-tresc h3 {
  font-size: 1.5rem !important;
  line-height: 1.3;
  margin-top: 40px;
  margin-bottom: 12px;
}

/* Nagłówek bezpośrednio pod nagłówkiem nie dostaje podwójnego światła. */
.lh-tresc h2 + h3 {
  margin-top: 16px;
}

/* Listy: punkty z odstępem 10 px, cała lista odsunięta od akapitów jak akapit od akapitu. */
.lh-tresc ul,
.lh-tresc ol {
  margin: 1.25em 0;
}
.lh-tresc ul > li,
.lh-tresc ol > li {
  margin-bottom: 10px;
}

/* Telefon: H2 30 px i H3 20 px — wcześniej oba miały po 28 px i nie było widać, co jest nad czym.
   !important z tego samego powodu co wyżej (style.css: h2 na telefonie 28 px !important). */
@media (max-width: 640px) {
  .lh-tresc h2 {
    font-size: 1.875rem !important;
    line-height: 1.2;
    margin-top: 44px;
  }
  .lh-tresc h3 {
    font-size: 1.25rem !important;
    margin-top: 32px;
  }
}

/* ============ CZĘŚĆ 1: TABELE ============ */

/* Opakowanie: ramka z zaokrągleniem i przewijanie w bok, gdy tabela nie mieści się w kolumnie (telefon). */
.lh-tresc .lh-tabela {
  margin: 32px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--wp--preset--color--obwodka-jasna);
  border-radius: 12px;
  /* Cień przy prawej krawędzi podpowiada, że tabela ciągnie się dalej; znika po dojechaniu do końca. */
  background:
    linear-gradient(
        to right,
        var(--wp--preset--color--tlo) 30%,
        rgba(8, 11, 17, 0)
      )
      left center / 32px 100% no-repeat local,
    linear-gradient(
        to left,
        var(--wp--preset--color--tlo) 30%,
        rgba(8, 11, 17, 0)
      )
      right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.6), transparent)
      left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.6), transparent)
      right center / 14px 100% no-repeat scroll;
}

/* Fokus z klawiatury na przewijanym opakowaniu jest widoczny. */
.lh-tresc .lh-tabela:focus-visible {
  outline: 2px solid var(--wp--preset--color--limonka-jasna);
  outline-offset: 2px;
}

/* Tabela na całą szerokość kolumny, 16 px (próg ≥ 15 px), interlinia 1,5 — komórki to krótkie frazy. */
.lh-tresc .lh-tabela table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.5;
}

/* Komórki: padding 12/16 px, linia między wierszami, tekst od góry (wiersze bywają różnej wysokości). */
.lh-tresc .lh-tabela th,
.lh-tresc .lh-tabela td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-top: 1px solid var(--wp--preset--color--obwodka);
  color: var(--wp--preset--color--tekst-akapit);
  font-size: 1rem;
}

/* Nagłówek: ciemnogranatowe tło, biały pogrubiony tekst i limonkowa linia pod spodem. */
.lh-tresc .lh-tabela thead th,
.lh-tresc .lh-tabela thead td,
.lh-tresc .lh-tabela tr:first-child > th {
  background: var(--wp--preset--color--powierzchnia-2);
  color: var(--wp--preset--color--tekst);
  font-weight: 700;
  border-top: 0;
  border-bottom: 2px solid var(--wp--preset--color--limonka);
  vertical-align: bottom;
}

/* Naprzemienne tło wierszy: oko nie przeskakuje do sąsiedniego wiersza przy długich tabelach. */
.lh-tresc .lh-tabela tbody tr:nth-child(even) > td,
.lh-tresc .lh-tabela tbody tr:nth-child(even) > th {
  background: rgba(255, 255, 255, 0.045);
}

/* Najechanie na wiersz podświetla go delikatnie limonką — łatwiej porównać wartości w jednym wierszu. */
.lh-tresc .lh-tabela tbody tr:hover > td,
.lh-tresc .lh-tabela tbody tr:hover > th {
  background: var(--wp--preset--color--limonka-tlo);
}

/* Pierwsza kolumna to etykiety wierszy: pogrubione i białe. */
.lh-tresc .lh-tabela tbody td:first-child,
.lh-tresc .lh-tabela tbody th:first-child {
  font-weight: 600;
  color: var(--wp--preset--color--tekst);
}

/* Kolumny z liczbami: do prawej, cyfry o stałej szerokości. Nagłówek kolumny łamie się normalnie,
   wartość w komórce nie („około 78 zł” w jednym wierszu). */
.lh-tresc .lh-tabela .lh-liczba {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lh-tresc .lh-tabela td.lh-liczba {
  white-space: nowrap;
}

/* Pogrubienie w komórce nie zlewa się z pogrubioną pierwszą kolumną. */
.lh-tresc .lh-tabela strong {
  color: var(--wp--preset--color--limonka-gleboka);
}

/* Telefon: komórki nie ściskają się poniżej 8,5 rem — tabela wtedy przewija się w opakowaniu. */
@media (max-width: 640px) {
  .lh-tresc .lh-tabela th,
  .lh-tresc .lh-tabela td {
    min-width: 8.5rem;
    padding: 10px 12px;
    font-size: 0.9375rem;
  }
  .lh-tresc .lh-tabela .lh-liczba {
    min-width: 0;
  }
}

/* ============ CZĘŚĆ 1: OKŁADKI BEZ PRZYCINANIA ============ */
/* Okładki automatu mają 1200×630 z tytułem na obrazie. Ramka dostaje dokładnie tę proporcję,
   a obraz object-fit: contain — okładka 1200×630 wypełnia ją w całości, starsze zdjęcia
   w innej proporcji dostają ciemne pasy zamiast uciętych krawędzi. Bez powiększenia po najechaniu,
   bo powiększenie w ramce z overflow: hidden obcina brzegi tytułu. */

/* Nagłówek wpisu: było 420 px wysokości z object-fit: cover (desktop ucinał górę i dół, telefon boki). */
body.single-post img.h-\[420px\].object-cover {
  height: auto !important;
  aspect-ratio: 1200 / 630;
  object-fit: contain !important;
  background: var(--wp--preset--color--powierzchnia);
  transform: none !important;
}

/* Karty wpisów na /blog/, w archiwach i wynikach wyszukiwania: WordPress wpisuje w obraz
   style="aspect-ratio:16/9; object-fit:cover", stąd !important. */
.lh-karta-foto img {
  aspect-ratio: 1200 / 630 !important;
  height: auto !important;
  object-fit: contain !important;
  background: var(--wp--preset--color--powierzchnia);
}

/* Kafle wpisów na stronie głównej: ramka 16/10 → 1200/630, obraz w całości, bez powiększenia. */
.kafel-ciemny > a.aspect-\[16\/10\] {
  aspect-ratio: 1200 / 630;
}
.kafel-ciemny > a.aspect-\[16\/10\] > img {
  object-fit: contain !important;
  transform: none !important;
}

/* ============ CZĘŚĆ 2: ODNOŚNIKI Z ANIMACJĄ ZAKREŚLACZA ============ */
/* Tylko odnośniki w treści wpisu (.lh-tresc), więc menu i stopka zostają bez zmian. Czysty CSS:
   pasek to tło (linear-gradient) pod literami, a animacja to zmiana background-size od 0 do 100%
   szerokości — nie zmienia układu, nie przesuwa tekstu.
   Wyjątki są w selektorze (:where nie podnosi specyficzności): przyciski, spis treści (nawigacja
   z własnym stylem w style.css) i odnośniki z obrazkiem. */

/* Spoczynek: limonkowy tekst z cienkim podkreśleniem (odnośnik nie może różnić się od tekstu samym kolorem),
   pasek zakreślacza zwinięty do zera przy lewej krawędzi, na wysokości 38% wiersza od dołu. */
.lh-tresc a:where(:not(.wp-element-button, .wp-block-button__link, .lh-spis a, :has(img))) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(163, 230, 53, 0.55);
  background-image: linear-gradient(rgba(163, 230, 53, 0.45), rgba(163, 230, 53, 0.45));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 38%;
  transition: background-size 200ms ease-out, color 200ms ease-out, text-decoration-color 200ms ease-out;
}

/* Najechanie i fokus z klawiatury: pasek rozwija się od lewej na całą szerokość, tekst bieleje
   (biały na pasku 5,7:1; limonka na limonkowym pasku miałaby tylko 3,7:1), podkreślenie znika pod paskiem. */
.lh-tresc a:where(:not(.wp-element-button, .wp-block-button__link, .lh-spis a, :has(img))):hover,
.lh-tresc a:where(:not(.wp-element-button, .wp-block-button__link, .lh-spis a, :has(img))):focus-visible {
  background-size: 100% 38%;
  color: var(--wp--preset--color--tekst);
  text-decoration-color: transparent;
}

/* Użytkownik z włączonym ograniczeniem ruchu dostaje pasek od razu, bez animacji. */
@media (prefers-reduced-motion: reduce) {
  .lh-tresc a { transition: none; }
}

/* ============ CZĘŚĆ 3: FAQ JAKO AKORDEON ============ */
/* Klasę .lh-faq, przycisk i opakowanie .lh-faq-wnetrze dokłada skrypt z inc-czytelnosc.php.
   Bez skryptu te reguły nic nie zwijają: wszystkie odpowiedzi zostają widoczne. */

/* Pytania jako lista oddzielona liniami, bez odstępów między pozycjami. */
.lh-tresc .lh-faq .rank-math-list-item {
  border-top: 1px solid var(--wp--preset--color--obwodka-jasna);
  margin: 0;
}
.lh-tresc .lh-faq .rank-math-list-item:last-child {
  border-bottom: 1px solid var(--wp--preset--color--obwodka-jasna);
}

/* Nagłówek pytania zostaje nagłówkiem h3 (struktura dla Google i czytników), bez własnych marginesów. */
.lh-tresc .lh-faq .rank-math-question {
  margin: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.35;
}

/* Przycisk na całą szerokość: klikalne całe pytanie, tekst po lewej, znak plus po prawej. */
.lh-tresc .lh-faq .lh-faq-przycisk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  color: var(--wp--preset--color--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lh-tresc .lh-faq .lh-faq-przycisk:hover { color: var(--wp--preset--color--limonka-jasna); }
.lh-tresc .lh-faq .lh-faq-przycisk:focus-visible {
  outline: 2px solid var(--wp--preset--color--limonka-jasna);
  outline-offset: 4px;
}

/* Znak plus w kółku; po otwarciu obraca się o 45° w znak „×”. */
.lh-tresc .lh-faq .lh-faq-przycisk::after {
  content: "+";
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--limonka-jasna);
  color: var(--wp--preset--color--limonka-jasna);
  font-size: 22px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  transition: transform 220ms ease-out;
}
.lh-tresc .lh-faq .is-open .lh-faq-przycisk::after { transform: rotate(45deg); }

/* Zwijanie: siatka z jednym wierszem 0fr ↔ 1fr animuje wysokość bez liczenia pikseli w JS.
   Zwinięta odpowiedź jest w HTML, ale visibility: hidden zdejmuje ją z kolejności klawisza Tab. */
.lh-tresc .lh-faq .rank-math-answer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms ease-out, visibility 0s linear 0s;
}
.lh-tresc .lh-faq .rank-math-list-item:not(.is-open) .rank-math-answer {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 220ms ease-out, visibility 0s linear 220ms;
}
.lh-tresc .lh-faq .lh-faq-wnetrze { overflow: hidden; min-height: 0; }
.lh-tresc .lh-faq .lh-faq-wnetrze > :last-child { margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .lh-tresc .lh-faq .rank-math-answer,
  .lh-tresc .lh-faq .lh-faq-przycisk::after { transition: none; }
}