/* ═══════════════════════════════════════════════════════════════
   TYPOGRAFIA — powiększenie tekstu dla czytelności
   ═══════════════════════════════════════════════════════════════
   Serwis kierowany jest do osób starszych, więc domyślna skala
   Tailwinda była za drobna — najmniejsze napisy schodziły poniżej
   12 px, co przy dłuższym czytaniu męczy wzrok.

   Działamy dwutorowo:

   1. Podnosimy bazowy rozmiar dokumentu do 18 px (112,5%).
      Tailwind operuje w jednostkach rem, więc razem z tekstem
      skalują się odstępy, zaokrąglenia i szerokości kolumn —
      układ pozostaje proporcjonalny, tylko większy.

   2. Ustawiamy dolną granicę dla najdrobniejszych klas.
      Samo podniesienie bazy nie wystarczy: text-[0.65rem]
      urosłoby zaledwie do ~11,7 px. Tutaj żaden tekst nie
      zejdzie poniżej ok. 14,5 px.

   Selektory zaczynają się od „html body”, żeby wygrać
   pierwszeństwo z klasami Tailwinda (wyższa specyficzność),
   niezależnie od kolejności ładowania stylów z CDN.

   Chcesz większy lub mniejszy tekst? Wystarczy zmienić jedną
   wartość — font-size w regule html poniżej.
   ═══════════════════════════════════════════════════════════════ */

html {
  font-size: 112.5%;          /* 18 px zamiast domyślnych 16 px */
}

html body {
  line-height: 1.65;          /* luźniejsza interlinia = łatwiejsze śledzenie wiersza */
}

/* ── Dolna granica dla drobnych klas Tailwinda ───────────── */
html body .text-xs   { font-size: 0.82rem;  line-height: 1.55; }
html body .text-sm   { font-size: 0.95rem;  line-height: 1.65; }
html body .text-base { font-size: 1.06rem;  line-height: 1.7;  }
html body .text-lg   { font-size: 1.18rem;  line-height: 1.6;  }

/* ── Wartości zapisane wprost, np. text-[0.65rem] ─────────
   Selektor po fragmencie klasy łapie wszystkie warianty
   0.6x i 0.7x użyte w kartach, metrykach i stopkach. */
html body [class*="text-[0.6"],
html body [class*="text-[0.7"] {
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ── Elementy formularza ──────────────────────────────────
   Przeglądarki nie dziedziczą tu rozmiaru pisma z dokumentu,
   więc trzeba je ustawić osobno — inaczej pola zostałyby
   drobne mimo powiększenia reszty strony. */
html body input,
html body textarea,
html body select,
html body button {
  font-size: inherit;
}
html body .form-input { font-size: 1rem; }
html body textarea.form-input { font-size: 1.02rem; line-height: 1.8; }

/* ── Treść artykułów ──────────────────────────────────────
   Najdłuższe teksty w serwisie, więc dostają odrobinę więcej
   niż reszta i wyraźnie luźniejszą interlinię. */
html body .article-body p,
html body .article-body ul li { font-size: 1.04rem; line-height: 1.9; }
html body .article-body h2    { font-size: 1.5rem; }
html body .lead-text          { font-size: 1.14rem; line-height: 1.85; }

/* ── Własne klasy z podstron ──────────────────────────────
   Te rozmiary są zapisane w arkuszach poszczególnych stron,
   więc reguły powyżej ich nie obejmują. Poprawiamy tu tylko
   napisy do czytania — ozdobne gwiazdki i punktory zostają
   małe, bo ich rozmiar to kwestia grafiki, nie czytelności. */
html body .form-section-label span:first-child { font-size: 0.8rem; }
html body .char-pill    { font-size: 0.82rem; }
html body .trust-item   { font-size: 0.82rem; }
html body .right-card-desc  { font-size: 0.88rem; line-height: 1.55; }
html body .right-card-title { font-size: 0.92rem; }
html body .cookie-table { font-size: 0.95rem; }

/* ── Regulamin i polityka prywatności ─────────────────────
   Dokumenty prawne czyta się najtrudniej, a bywają najważniejsze. */
html body .prose-mystic p,
html body .prose-mystic ul li,
html body .prose-mystic ol li { font-size: 1.02rem; line-height: 1.9; }
html body .prose-mystic h2    { font-size: 1.5rem; }
html body .prose-mystic h3    { font-size: 1.15rem; }
html body .toc-link           { font-size: 0.9rem; }