/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY PRAWNE — /regulamin i /polityka-prywatnosci

   Osobny arkusz, nie `lejek.css`. Dokumenty prawne mają żyć dłużej niż
   kolejne wersje lejka i nie mogą się rozjechać, gdy ktoś przestawi kafle
   w kreatorze rezerwacji. Wspólna jest wyłącznie paleta — zdefiniowana raz
   w /assets/skora.css (podpiętym w <head> przed tym arkuszem); wolno tu
   używać tylko var(--…).

   Cały układ jest pisany pod czytanie długiego tekstu na telefonie:
   jedna kolumna, miara wiersza około 65 znaków, odstęp międzywierszowy 1.75
   i wyraźny odstęp między akapitami. Regulaminu nikt nie czyta dla
   przyjemności — ale musi dać się przeczytać bez powiększania i bez
   przewijania w bok.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Płynne przewijanie tylko dla tych, którzy go nie wyłączyli. Skok do
   paragrafu z regulaminu potrafi być długi, a animowany przy ustawieniu
   „ogranicz ruch" wywołuje zawroty głowy. */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;background:var(--tlo);color:var(--tekst);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--akcent);outline-offset:3px;border-radius:2px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Nagłówek ──────────────────────────────────────────────────────────
   Ten sam znak i ten sam krój co na stronie głównej. Podstrona prawna
   otwierana z checkboxa przy płatności musi od pierwszego spojrzenia
   wyglądać jak ta sama firma — inaczej wygląda jak przekierowanie
   gdzie indziej, akurat w chwili podawania numeru karty. */
.prawne-header{
  border-bottom:1px solid var(--linia);background:var(--tlo);
  position:sticky;top:0;z-index:10;
}
.prawne-header__in{
  max-width:1180px;margin:0 auto;padding:.7rem 20px;
  display:flex;align-items:center;justify-content:space-between;gap:.4rem 1rem;
  /* `wrap` jest tu OBOWIĄZKOWE. Przy powiększeniu tekstu do 200% znak
     firmowy i link powrotu przestają się mieścić obok siebie; bez zawijania
     pasek rozpycha stronę i obie podstrony dostają poziomy suwak — czyli
     dokładnie to, czego ten układ miał nie robić. */
  flex-wrap:wrap;
}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.brand__mark{width:30px;height:30px;flex:0 0 30px}
.brand__word{font-family:var(--serif);font-size:1.15rem;font-weight:700;letter-spacing:.04em}
.prawne-header__powrot{font-size:.82rem;color:var(--tekst-cichy);text-decoration:none;white-space:nowrap}
.prawne-header__powrot:hover{color:var(--tekst)}

/* ── Dokument ──────────────────────────────────────────────────────────
   `76ch` z paddingiem daje około 65 znaków samego tekstu w tym kroju —
   miara, przy której oko trafia w początek kolejnego wiersza bez wysiłku. */
.dokument{
  max-width:76ch;margin:0 auto;padding:32px 20px 64px;
}
@media(min-width:768px){.dokument{padding:56px 20px 80px}}

.dokument__nadtytul{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;
  color:var(--tekst-cichy);font-weight:600;
}
.dokument h1{
  font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.01em;
  font-size:clamp(1.7rem,5.5vw,2.4rem);margin:.7rem 0 0;
}
/* Polskie słowa bywają dłuższe niż wąski ekran przy powiększonym tekście.
   „fotograficznych" przy 200% zajmowało 428 px na 350 px dostępnych i to ONO,
   a nie układ strony, dawało poziomy suwak — dolna granica `clamp` jest
   w remach, więc rośnie razem z ustawieniem przeglądarki.
   `hyphens:auto` dzieli po polsku (strona ma lang="pl"), a `break-word`
   jest wyjściem awaryjnym tam, gdzie przeglądarka wzorców nie zna. */
.dokument h1,.dokument h2{
  overflow-wrap:break-word;
  hyphens:auto;
}
.dokument__data{
  margin-top:1rem;font-size:.86rem;color:var(--tekst-cichy);
  padding-bottom:1.6rem;border-bottom:1px solid var(--linia);
}

/* Spis treści. Przy jedenastu paragrafach szukanie „tego o odwołaniu"
   przewijaniem na telefonie to minuta zgadywania. */
.spis{
  margin:1.8rem 0 2.4rem;padding:1.1rem 1.2rem;
  background:var(--powierzchnia);border:1px solid var(--linia);border-radius:var(--radius);
}
/* Zapis przez `.dokument .spis`, a nie samo `.spis`, jest tu KONIECZNY.
   Reguły `.dokument h2` i `.dokument a` niżej w tym pliku mają dokładnie tę
   samą wagę co `.spis h2` i `.spis a`, więc przy równej wadze wygrywa ta
   późniejsza — spis dostawał wtedy szeryfowy nagłówek i podkreślenia
   przeznaczone dla odsyłaczy w treści. Spis ma być cichy: to nawigacja,
   nie tekst do czytania. */
.dokument .spis h2{
  font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tekst-cichy);font-weight:600;margin:0 0 .7rem;
}
.dokument .spis ol{
  margin:0;padding:0;list-style:none;
  display:grid;gap:.4rem;font-size:.9rem;
}
@media(min-width:640px){
  .dokument .spis ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.4rem}
}
.dokument .spis a{color:var(--tekst-cichy);text-decoration:none}
.dokument .spis a:hover{color:var(--tekst);text-decoration:underline}

/* W REMACH, nie w pikselach. Wysokość przyklejonego nagłówka jest złożona
   z jednostek rem, więc rośnie razem z ustawieniem stopnia pisma
   w przeglądarce. Sztywne 70px wystarczało tylko przy domyślnych 16px —
   przy większym tekście nagłówek paragrafu lądował pod paskiem, i to
   akurat po kliknięciu w spis treści. */
.dokument section{margin-top:2.2rem;scroll-margin-top:4.5rem}
.dokument h2{
  font-family:var(--serif);font-weight:600;line-height:1.25;
  font-size:1.25rem;margin:0 0 .8rem;
}
.dokument p{
  font-size:1rem;line-height:1.75;color:var(--tekst-cichy);
  /* Adresy e-mail i domeny nie mogą rozpychać kolumny na wąskim ekranie. */
  overflow-wrap:anywhere;
}
/* Akapity oddychają — to długie dokumenty do czytania, nie gęsty zapis
   ustawy. Odstęp jest wyraźnie większy niż pół wiersza. */
.dokument p + p{margin-top:1.15rem}
.dokument strong{color:var(--tekst);font-weight:600}
/* Odsyłacze: tekst zostaje w kolorze tekstu (drobnego tekstu nie piszemy
   złotem), akcent niesie podkreślenie. */
.dokument a{
  color:var(--tekst);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--akcent-linia);
}
.dokument a:hover{text-decoration-color:var(--akcent)}

.dokument ol,.dokument ul{
  margin:.9rem 0 0;padding-left:1.3rem;
  font-size:1rem;line-height:1.75;color:var(--tekst-cichy);
  overflow-wrap:anywhere;
}
.dokument li + li{margin-top:.6rem}
.dokument li::marker{color:color-mix(in srgb, var(--tekst-cichy) 55%, transparent)}

/* Definicje w §2 — układ „hasło + wyjaśnienie" czyta się szybciej niż
   ten sam tekst wciśnięty w jeden akapit z myślnikami.
   Przedrostek `.dokument` z tego samego powodu co przy spisie treści. */
.dokument .definicje{list-style:none;padding-left:0;margin-top:1rem}
.dokument .definicje li{
  border-left:2px solid var(--linia);padding:.15rem 0 .15rem .9rem;
}
.dokument .definicje li + li{margin-top:.8rem}
.dokument .definicje dfn{font-style:normal;font-weight:600;color:var(--tekst)}

/* Blok wyróżniony — używany tam, gdzie treść dotyczy pieniędzy klienta. */
.dokument .uwaga{
  margin-top:1.1rem;padding:.95rem 1.1rem;
  background:var(--powierzchnia);border:1px solid var(--linia);
  border-left:3px solid var(--akcent);border-radius:var(--radius);
  font-size:.94rem;line-height:1.7;color:var(--tekst-cichy);
}

/* ── Stopka ────────────────────────────────────────────────────────── */
.prawne-stopka{
  border-top:1px solid var(--linia);background:var(--powierzchnia);
  padding:1.8rem 20px;
}
.prawne-stopka__in{
  max-width:76ch;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;
  font-size:.85rem;color:var(--tekst-cichy);
}
.prawne-stopka a{color:var(--tekst-cichy);text-decoration:none}
.prawne-stopka a:hover{color:var(--tekst);text-decoration:underline}