/* Pielgrzymka Edukacji Domowej — identyfikacja wizualna
   ────────────────────────────────────────────────────────────────────────────
   Kolory i proporcje wzięte wprost z pielgrzymkaed.pl, żeby strony wyglądały
   jak jedno dzieło, a nie jak dwa osobne przedsięwzięcia:
       Navy    #25276B   nagłówki, pasek, akcenty
       Mustard #E2B354   podkreślenia, przyciski, znak szczególny
       Steel   #2E4473   pismo bieżące
       papier  #F7F3E8   panele (zmierzony na pielgrzymkaed.pl)
       biel    #ffffff   grunt
   Wartości ze skryptu social media dzieła; 18.09.2026 zastąpiły „granat
   pomostu" #0e417c i neutralną szarość #3f3f3f, dobrane pod KSM, nie pod
   skrypt.

   KROJE PISMA. Tamta strona używa Bricolage Grotesque i DM Sans z Google Fonts.
   Nie wpinamy ich stąd: pobranie kroju z serwera Google oznacza przekazanie
   adresu IP odwiedzającego stronie trzeciej, a Fundacja Gotów — administrator
   danych — ma w polityce prywatności deklarację, której nie chcemy podważać
   jednym odnośnikiem do fontu. Bierzemy więc kroje systemowe o zbliżonym
   charakterze: humanistyczny bezszeryfowy do tekstu, mocniejszy do nagłówków.
   Różnica jest widoczna dla projektanta, nie dla odwiedzającego. */

:root{
  --granat:#25276B;
  --granat-ciemny:#1B1D46;
  --zloto:#E2B354;
  --zloto-ciemne:#e0ab2c;
  --tekst:#2E4473;
  --przygas:#4A5578;
  --tlo:#ffffff;
  --tlo-cien:#F7F3E8;
  --linia:#E3DCCB;
  --na-zlocie:#1A1A1A;   /* Antracyt — 9,54 : 1 na złocie marki */
  --cien:rgba(27,29,70,.08);
  --naglowki:"Segoe UI Semibold","Helvetica Neue",Arial,system-ui,sans-serif;
  --tekstowy:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ── motyw ciemny ────────────────────────────────────────────────────────────
 * Ten moduł nie miał barw nocnych w ogóle: jedna paleta jasna i tyle. Na
 * telefonie z ciemnym motywem dawało to granatowe pismo na ciemnym tle —
 * zmierzone 1,66:1 przy wymaganych 4,5:1, ponad dwieście miejsc na samej
 * stronie szkół.
 *
 * GRANAT ROZJAŚNIA SIĘ, BO W TYM MODULE JEST GŁÓWNIE PISMEM: trzynaście razy
 * jako kolor tekstu, dwa razy jako tło. Te dwa tła (pasek działu, przyciski)
 * dostają własną, stałą barwę niżej — inaczej pasek zrobiłby się jasny.
 *
 * Trzy stany, jak w całym GOTÓW: wybór jasny wygrywa nad systemem,
 * wybór ciemny wygrywa nad wszystkim, a bez wyboru idziemy za systemem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-motyw="jasny"]) {
    --granat:#9dc0ef;
    --granat-ciemny:#c3d7f4;
    --zloto:#ffd75e;
    --zloto-ciemne:#e0ab2c;
    --tekst:#e9edf4;
    --przygas:#aab4c4;
    --tlo:#131a26;
    --tlo-cien:#1b2433;
    --linia:#2b3648;
    --cien:rgba(0,0,0,.45);
  }
}
/* NOC TYLKO Z WYBORU BARW DZIEŁA — 18.09.2026.
   Ten blok łapał też `data-theme="dark"` i `data-motyw="ciemny"`, czyli noc
   ustawioną w SYSTEMIE, a nawet `data-barwy="maryjny"`, czyli wersję domyślną.
   Grunt tych stron robił się wtedy ciemny, a ich własne arkusze wewnętrzne
   (`<style>` w każdej podstronie) zostawały jasne. Zmierzone tego dnia na
   stronie dokumentów: nagłówek „Dokumenty" 1,80 : 1 na ciemnym gruncie.
   Zasada zapisana wyżej w tym pliku mówi wprost: o gruncie rozstrzyga wybór
   człowieka na stronie, nie ustawienie telefonu. Teraz tak jest. */
:root[data-barwy="ciemny"] {
  --granat:#AEB6DC;
  --granat-ciemny:#DCDFF2;
  --zloto:#E2B354;
  --zloto-ciemne:#e0ab2c;
  --tekst:#ECEEF8;
  --przygas:#AEB6DC;
  --tlo:#101230;
  --tlo-cien:#1B1D46;
  --linia:#333A6B;
  --na-zlocie:#1A1A1A;   /* na złocie antracyt także w nocy */
  --cien:rgba(0,0,0,.45);
}

/* Wersje stojące na bieli — wracają do palety jasnej także wtedy, gdy
   system prosi o ciemny. O gruncie rozstrzyga wybór człowieka na stronie,
   nie ustawienie telefonu. */
:root[data-barwy="jasny"], :root[data-barwy="patriotyczny"] {
  --granat:#25276B;
  --granat-ciemny:#1B1D46;
  --zloto:#E2B354;
  --zloto-ciemne:#e0ab2c;
  --tekst:#2E4473;
  --przygas:#4A5578;
  --tlo:#ffffff;
  --tlo-cien:#F7F3E8;
  --linia:#E3DCCB;
  --na-zlocie:#1A1A1A;   /* Antracyt — 9,54 : 1 na złocie marki */
  --cien:rgba(27,29,70,.08);
}
/* Powierzchnie marki zostają granatowe w obu motywach — pasek działu i kafle,
   w których granat jest tłem, a nie pismem. */
@media (prefers-color-scheme: dark) {
  :root .ped-nav { background:#1B1D46; }
}
:root[data-barwy="ciemny"] .ped-nav { background:#1B1D46; }

/* Pigułki („szkoła podstawowa", „liceum") mają tło wpisane na sztywno jako
   jasny błękit, a pismo bierze z `--granat` — który w nocy się rozjaśnia.
   Wychodzi jasne po jasnym. W motywie ciemnym pigułka ma być ciemna. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zn,
  :root:not([data-theme="light"]) .rodzaj,
  :root:not([data-theme="light"]) .znacznik {
    background:#1B1D46 !important; color:#DCDFF2 !important;
  }
}
:root[data-theme="dark"] .zn, :root[data-motyw="ciemny"] .zn,
:root[data-theme="dark"] .rodzaj, :root[data-motyw="ciemny"] .rodzaj,
:root[data-theme="dark"] .znacznik, :root[data-motyw="ciemny"] .znacznik {
  background:#1B1D46 !important; color:#DCDFF2 !important;
}

*{box-sizing:border-box}
body{margin:0;background:var(--tlo);color:var(--tekst);font:17px/1.75 var(--tekstowy)}

/* ── Pasek działu ────────────────────────────────────────────────────────── */
.ped-nav{position:sticky;top:0;z-index:9999;display:flex;flex-wrap:wrap;align-items:center;
  gap:4px;padding:11px 20px;background:#1B1D46;
  border-bottom:2px solid #E2B354;   /* zlota kreska pod paskiem - ta sama,
     co na stronie glownej (`nav.css`). Do 18.09.2026 pasek dokumentow
     nie mial jej wcale i tym odrozmial sie od reszty dziela. */
  /* granat dziela - ta sama barwa,
     co pasek strony glownej z `nav.css`. Bylo `var(--granat)` = #25276B, przez co
     pasek dokumentow byl jasniejszy od paska strony glownej (zmierzone 18.09.2026:
     rgb(37,39,107) tu wobec rgb(27,29,70) tam). Wpisane na sztywno, bo pasek sam
     maluje sobie tlo i nie ma isc za motywem strony. */
  font:600 14px/1.4 var(--tekstowy)}
.ped-nav a{color:#F7F3E8;text-decoration:none;padding:6px 13px;border-radius:4px;white-space:nowrap}
.ped-nav a:hover{background:#2A2D60;color:#ffffff}
.ped-nav a:focus-visible{outline:2px solid var(--zloto);outline-offset:2px}
.ped-nav .ped-nav-marka{margin-right:auto;padding-left:0;font-weight:700;color:#fff;letter-spacing:-.01em}
.ped-nav .ped-nav-marka:hover{background:none;text-decoration:underline}
.ped-nav .ped-nav-teraz{background:var(--zloto);color:var(--na-zlocie)}
.ped-nav .ped-nav-teraz:hover{background:var(--zloto-ciemne);color:var(--na-zlocie)}
@media(max-width:640px){.ped-nav{font-size:13px;padding:9px 14px}
  .ped-nav .ped-nav-marka{width:100%;margin:0 0 5px}}

/* ── Układ ───────────────────────────────────────────────────────────────── */
.opr{max-width:940px;margin:0 auto;padding:0 20px 80px}
.waski{max-width:46rem}

.czolo{padding:54px 0 28px;margin-bottom:10px;border-bottom:3px solid var(--zloto)}
.nad{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--granat);
  font-weight:700;margin:0 0 14px}
h1{font-family:var(--naglowki);font-weight:500;color:var(--granat);
  font-size:clamp(2rem,5.4vw,3.2rem);line-height:1.06;margin:0 0 14px;
  letter-spacing:-.02em;text-wrap:balance}
.lid{margin:0;max-width:62ch;color:var(--przygas);font-size:1.06rem}

h2{font-family:var(--naglowki);font-weight:500;color:var(--granat);font-size:1.5rem;
  margin:44px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--linia)}
h3{font-family:var(--naglowki);font-weight:600;color:var(--granat);font-size:1.08rem;margin:0 0 6px}
p{max-width:68ch}
a{color:var(--granat)}
a:focus-visible{outline:2px solid var(--zloto);outline-offset:2px}

/* ── Karty ───────────────────────────────────────────────────────────────── */
.karty{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin:24px 0}
.karta{background:var(--tlo);border:1px solid var(--linia);border-radius:10px;padding:20px 22px;
  box-shadow:0 1px 3px var(--cien);display:flex;flex-direction:column}
.karta .rodzaj{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--granat);background:#F7F3E8;border-radius:3px;
  padding:3px 9px;margin-bottom:10px;align-self:flex-start}
.karta p{margin:0 0 14px;font-size:.94em;color:var(--przygas);flex:1}
.karta .kiedy{font-size:.8rem;color:var(--przygas);margin-bottom:12px}

.przycisk{display:inline-block;background:var(--zloto);color:var(--na-zlocie);text-decoration:none;
  font-weight:700;padding:10px 20px;border-radius:4px;font-size:.94em;border:0;cursor:pointer;
  font-family:var(--tekstowy);align-self:flex-start}
.przycisk:hover{background:var(--zloto-ciemne)}
.przycisk.obrys{background:transparent;border:2px solid var(--granat);color:var(--granat);padding:8px 18px}
.przycisk.obrys:hover{background:var(--granat);color:var(--tlo)}

.ramka{background:var(--tlo-cien);border-left:4px solid var(--zloto);border-radius:0 8px 8px 0;
  padding:16px 20px;margin:24px 0;font-size:.95em}
.ramka b{color:var(--granat)}
/* ── SZEROKOŚĆ TEKSTU W RAMKACH I W STOPCE ────────────────────────────────
   Ks. Andrzej, 18.09.2026: te pola tekstowe mają mieć szerokość żółtego pola,
   na którym stoją.

   SKĄD BRAŁO SIĘ ZWĘŻENIE. Reguła `p{max-width:68ch}` wyżej w tym arkuszu
   trzyma wiersz bieżącego tekstu w wygodnej długości. Dla akapitu w ramce
   dawało to 698 px przy ramce szerokiej na 900 - tekst kończył się 178 px
   przed prawą krawędzią kremowego pola i wyglądało to na niedokończone.
   Zmierzone 18.09.2026 przeglądarką przy oknie 1280 px.

   Ramki i stopka to noty, nie tekst do czytania stronami, więc biorą pełną
   szerokość swojego pola. Reguła `p{max-width:68ch}` zostaje nietknięta dla
   reszty strony - kafle dokumentów nadal łamią się po 68 znakach. */
.ramka p{margin:0 0 9px;max-width:none}.ramka p:last-child{margin:0}

.stopka{max-width:none;margin-top:52px;padding-top:22px;border-top:1px solid var(--linia);
  font-size:.88rem;color:var(--przygas)}
.stopka a{color:var(--granat)}

.przewin{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:.94em;min-width:520px}
th,td{border-bottom:1px solid var(--linia);padding:10px 12px;text-align:left;vertical-align:top}
th{font-size:.74em;text-transform:uppercase;letter-spacing:.07em;color:var(--granat);
  border-bottom:2px solid var(--linia)}

/* ── PLIKI DO POBRANIA (strona „Dokumenty") ────────────────────────────────
   Sekcja stoi pod nagłówkiem strony dokumentów. Kafle są jednakowe, bo pliki
   są równorzędne - żaden nie jest ważniejszy od pozostałych; różni je tylko
   format i rozmiar, i to właśnie mówią żeton po lewej i druga linia opisu.

   CAŁY KAFEL JEST ODNOŚNIKIEM, nie sam napis „Pobierz". Przy sześciu pozycjach
   i palcu na telefonie celowanie w dwa słowa jest karą, a nie ułatwieniem;
   pole dotykowe ma tu 64 px wysokości przy wymaganych 44. */
.pliki{margin:26px 0 0;text-align:left}
.pliki h2{margin:0 0 6px;font:600 1.12rem/1.3 var(--naglowki);color:var(--granat)}
.pliki-wstep{margin:0 0 16px;color:var(--przygas);font-size:.95em;max-width:64ch}
.pliki-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.plik{display:flex;align-items:center;gap:14px;min-height:64px;
  padding:13px 16px;border:1px solid var(--linia);border-radius:12px;
  background:var(--tlo-cien);text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s}
.plik:hover{border-color:var(--zloto);background:var(--tlo)}
.plik:focus-visible{outline:2px solid var(--zloto);outline-offset:2px}

/* Żeton formatu. Litery na złocie piszemy antracytem - 9,54 : 1. */
.plik-format{flex:0 0 auto;min-width:52px;text-align:center;
  padding:5px 9px;border-radius:7px;background:var(--zloto);color:var(--na-zlocie);
  font:700 11.5px/1.35 var(--tekstowy);letter-spacing:.06em}

.plik-tresc{flex:1 1 auto;min-width:0;display:block}
.plik-tresc b{display:block;color:var(--granat);font-weight:600;font-size:.99em;
  line-height:1.35}
.plik-tresc i{display:block;font-style:normal;color:var(--przygas);
  font-size:.82em;line-height:1.45;margin-top:2px}

.plik-pobierz{flex:0 0 auto;color:var(--granat);font-weight:600;font-size:.88em;
  white-space:nowrap;border-bottom:1px solid var(--zloto);padding-bottom:1px}
.plik:hover .plik-pobierz{color:var(--granat-ciemny)}

@media(max-width:520px){
  .pliki-lista{grid-template-columns:1fr}
  .plik-pobierz{display:none}   /* na wąskim ekranie kafel i tak jest odnośnikiem */
}