/* 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:
       granat  #0e417c   nagłówki, pasek, akcenty
       złoto   #fac647   podkreślenia, przyciski, znak szczególny
       tekst   #3f3f3f   pismo bieżące
       tło     #ffffff

   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:#0e417c;
  --granat-ciemny:#092d57;
  --zloto:#fac647;
  --zloto-ciemne:#e0ab2c;
  --tekst:#3f3f3f;
  --przygas:#6b6b6b;
  --tlo:#ffffff;
  --tlo-cien:#f7f8fb;
  --linia:#dde3ed;
  --cien:rgba(14,65,124,.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);
  }
}
:root[data-theme="dark"], :root[data-motyw="ciemny"] {
  --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);
}
/* 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:not([data-theme="light"]) .ped-nav { background:#0e417c; }
}
:root[data-theme="dark"] .ped-nav, :root[data-motyw="ciemny"] .ped-nav { background:#0e417c; }

/* 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:#1e2c40 !important; color:#cfe0f7 !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:#1e2c40 !important; color:#cfe0f7 !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:var(--granat);
  font:600 14px/1.4 var(--tekstowy)}
.ped-nav a{color:#e8eef7;text-decoration:none;padding:6px 13px;border-radius:4px;white-space:nowrap}
.ped-nav a:hover{background:var(--granat-ciemny);color:#fff}
.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(--granat)}
.ped-nav .ped-nav-teraz:hover{background:var(--zloto-ciemne);color:var(--granat)}
@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:#eef3fa;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(--granat);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:#fff}

.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)}
.ramka p{margin:0 0 9px}.ramka p:last-child{margin:0}

.stopka{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)}