/* ═══ BARWY DZIEŁA — DWA REJESTRY ══════════════════════════════════════════
   Ks. Andrzej, 1.09.2026: „stwórz kolorystykę maryjną taką, która będzie
   wszystkim jasno o tym mówić, że to jest ten kierunek, oraz drugi wizerunek
   to patriotyczne".

   ── CO BYŁO ──────────────────────────────────────────────────────────────
   Strony dzieła stały na granacie nocy (#04101f) i złocie. To jest dobre
   i zostaje — pielgrzymka nazywa się „Światła na Jasną Górę", więc noc
   z lampionami niesie znaczenie, nie jest ozdobą.
   Brakowało natomiast SAMEGO BŁĘKITU. Jedyny błękit na stronie, #a8cbf3,
   ma na nocy kontrast 11,37 : 1 — jest tak jasny, że oko czyta go jako
   biel z odcieniem, a nie jako barwę maryjną. Kierunek był w treści
   („Idziemy do Matki"), a nie było go w barwie.

   ── DWA REJESTRY, NIE DWIE PALETY ────────────────────────────────────────
   Rejestr maryjny jest domyślny i obowiązuje wszędzie. Rejestr patriotyczny
   włącza się klasą `.reg-patriotyczny` TYLKO tam, gdzie treść jest narodowa:
   Jasna Góra jako sanktuarium narodu, rocznice, hymn. Barwy flagi rozsypane
   po całej stronie przestają cokolwiek znaczyć — a mają znaczyć.

   ── KAŻDA BARWA ZMIERZONA, NIE DOBRANA NA OKO ────────────────────────────
   Wartości niżej to kontrast wobec gruntu, na którym ta barwa NAPRAWDĘ leży.
   Próg: 4,5 : 1 dla pisma zwykłego, 3,0 : 1 dla dużego.
   ══════════════════════════════════════════════════════════════════════════ */

:root,
.reg-maryjny {
  /* ── GRUNT ─────────────────────────────────────────────────────────────
     Noc i lampiony. Zostaje bez zmian — to jest treść, nie tło. */
  --dz-noc:        #04101f;
  --dz-panel:      #071d38;

  /* ── BŁĘKIT MARYJNY ────────────────────────────────────────────────────
     Wiodący. 7,21 : 1 na nocy, 6,38 : 1 na panelu — przechodzi dla pisma
     zwykłego z zapasem, więc nadaje się i na nagłówki, i na zdania. */
  --dz-blekit:     #6ba3de;
  /* Jaśniejszy — do drobnego pisma i podpisów. 9,76 : 1 na nocy. */
  --dz-blekit-jas: #8fbeea;
  /* Nasycony — do PŁASZCZYZN, ramek i dużych napisów. 3,53 : 1 na nocy,
     czyli poniżej progu dla zwykłego pisma. NIE UŻYWAĆ do zdań. */
  --dz-blekit-mocny: #4e8fd6;

  /* ── ZŁOTO I BIEL ──────────────────────────────────────────────────────
     Złoto to światło i korona: 12,31 : 1. Biel to płaszcz: 19,11 : 1. */
  --dz-zloto:      #fdc845;
  --dz-biel:       #ffffff;

  /* ── BARWA WIODĄCA REJESTRU ────────────────────────────────────────────
     Tego używają wszystkie reguły niżej. Zmiana rejestru to zmiana tych
     trzech wierszy, a nie przepisywanie całego arkusza. */
  --dz-wiodaca:    var(--dz-blekit);
  --dz-wiodaca-mocna: var(--dz-blekit-mocny);
  --dz-wiodaca-jas: var(--dz-blekit-jas);
}

/* ── REJESTR PATRIOTYCZNY ───────────────────────────────────────────────────
   Biel i czerwień. Czerwień jest JEDNA — flagowa #ce1126, ta sama, którą
   dzieło ma już w motywie „biało-czerwonym" w `pielgrzymka.css`. Zmieniają
   się tylko jej odcienie zależnie od gruntu, bo ta sama czerwień na bieli
   daje 5,63 : 1 (czytelna), a na nocy 3,40 : 1 (za mało dla pisma) — więc
   na ciemnym gruncie rozjaśniamy ją do #ff8fa1 (8,82 : 1).
   Udawanie, że jeden odcień wystarczy na oba grunty, kończy się napisem,
   którego nie widać — i nikt tego nie zauważy, bo „przecież jest czerwony". */
.reg-patriotyczny {
  /* CZERWIEŃ JEST JUŻ W DZIELE i nie wolno dokładać drugiej.
     Arkusz `pielgrzymka.css` ma dopracowany motyw „biało-czerwony"
     z czerwienią #ce1126 — biel czystą, bez domieszki różu, i jedną
     czerwienią flagową. Napisałem najpierw własną (#c8102e), po czym
     zobaczyłem tamtą: dwie czerwienie różniące się o kilka procent to
     nie jest bogactwo, tylko rozjazd, którego nikt później nie posprząta.
     Biorę tamte wartości.
     Zmierzone (deklaracje w tamtym arkuszu były o włos zawyżone):
       #ce1126 na bieli 5,63 : 1 — czytelna jako pismo,
       #b30e20 na bieli 7,00 : 1 — do pisma drobnego,
       #ce1126 na nocy  3,40 : 1 — TYLKO duże pismo i płaszczyzny,
       #ff8fa1 na nocy  8,82 : 1 — to jest czerwień do ciemnego gruntu. */
  --dz-czerwien:      #ce1126;
  --dz-czerwien-ciemna: #b30e20;
  --dz-czerwien-jas:  #ff8fa1;
  --dz-wiodaca:       var(--dz-czerwien-jas);
  --dz-wiodaca-mocna: var(--dz-czerwien);
  --dz-wiodaca-jas:   #ffc2cb;
}
/* Na jasnym gruncie rejestr patriotyczny odwraca się: czerwień ciemnieje,
   bo to ona ma być czytana, a nie tło. */
.reg-patriotyczny.na-bieli {
  --dz-wiodaca:       var(--dz-czerwien);
  --dz-wiodaca-mocna: var(--dz-czerwien-ciemna);
}

/* ═══ ZASTOSOWANIE ════════════════════════════════════════════════════════
   Barwa wiodąca wchodzi tam, gdzie prowadzi oko, i TYLKO tam. Nie zamalowuje
   wielkich płaszczyzn — noc zostaje nocą, bo to ona niesie „światła na Jasną
   Górę". Selektory są prawdziwymi klasami tych stron; sprawdzone w znacznikach,
   nie zgadnięte.
   ═══════════════════════════════════════════════════════════════════════ */

/* NADTYTUŁ „10 października 2026 · Jasna Góra".
   To jest pierwsze miejsce, w którym oko szuka, o czym jest strona — i to
   ono ma powiedzieć, dokąd idziemy. Dotąd było złote, tak samo jak świeca
   i światło; teraz jest błękitne, bo mówi o CELU drogi, a nie o świetle,
   które się niesie. Złoto zostaje przy tym, co jest światłem. */
/* SZCZEGÓŁOWOŚĆ MA TU ZNACZENIE i pierwsza wersja o tym zapomniała.
   Nadtytuł jest akapitem wewnątrz `.czolo`, a arkusz dzieła ma regułę
   `.czolo p { color: var(--przygaszony) }` — bardziej szczegółową niż samo
   `.czolo-etykieta`. Skutek: barwa nie zmieniała się ani na złotą, ani na
   błękitną, tylko zostawała przygaszona. Zapytałem przeglądarkę, która reguła
   wygrywa, zamiast zgadywać po arkuszu. */
.czolo .czolo-etykieta {
  color: var(--dz-wiodaca);
  /* ROZMIAR TEŻ. Ta sama pułapka szczegółowości co przy barwie i ten sam
     skutek: `.czolo p` (0,1,1) bije `.czolo-etykieta` (0,1,0), a nadtytuł
     jest akapitem — więc zamiast zapowiedzianych .74em dostawał 1.06em.
     Zmierzone w przeglądarce: 18,02 px zamiast 12,58 px. Wielkimi literami
     z odstępem .2em nie mieścił się w wierszu i łamał się na dwa. */
  font-size: .74em;
}

/* Nawigacja — odnośnik czynny prowadzi błękitem. */
.ped-nav-a.tu, .ped-nav-a[aria-current="page"] { color: var(--dz-wiodaca); }

/* Znacznik i plakietka. */
.ped-znacznik {
  color: var(--dz-wiodaca);
  border: 1px solid var(--dz-wiodaca-mocna);
  border-radius: 999px; padding: 3px 11px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
}

/* Panel, który mówi o DRODZE (a nie o świetle) — ramka błękitna.
   Klasę dokłada się świadomie, przy konkretnym panelu; nie zamalowujemy
   wszystkich naraz, bo wtedy barwa przestaje cokolwiek rozróżniać. */
.ped-pole.droga { border-left-color: var(--dz-wiodaca-mocna); }

/* Odnośnik w treści — podkreślenie zostaje, żeby dało się go rozpoznać
   także wtedy, gdy ktoś nie rozróżnia barw. */
.ped-tresc a, a.wiodacy {
  color: var(--dz-wiodaca);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── PASEK NARODOWY ────────────────────────────────────────────────────────
   Biel i czerwień jako dwa pola, nie jako przejście tonalne — flaga nie jest
   gradientem. Do treści narodowych: Jasna Góra jako sanktuarium narodu,
   rocznice, hymn. */
.pas-narodowy {
  display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(to bottom,
              var(--dz-biel) 0 50%, #ce1126 50% 100%);
}

/* ── GRUNT JASNY ───────────────────────────────────────────────────────────
   TU BYŁ BŁĄD I WART JEST ZAPAMIĘTANIA. Pierwsza wersja ściemniała błękit
   przy `prefers-color-scheme: light` — czyli wedle ustawienia SYSTEMU
   odwiedzającego. Ale strony dzieła mają grunt ciemny niezależnie od tego
   ustawienia, więc na czyimś jasnym systemie błękit ściemniał do #2c6cb0
   i lądował na nocy z kontrastem 3,53 : 1, poniżej progu. Zmierzone
   w przeglądarce, nie wydedukowane.
   O barwie rozstrzyga GRUNT, na którym napis leży, a nie ustawienie systemu.
   Dlatego jasna wersja włącza się klasą `.na-bieli`, dokładaną tam, gdzie
   grunt naprawdę jest jasny. */
.na-bieli {
  --dz-blekit:       #2c6cb0;   /* 5,41 : 1 na bieli */
  --dz-blekit-mocny: #1d5085;   /* 8,27 : 1 na bieli */
  --dz-blekit-jas:   #4e8fd6;
  --dz-wiodaca:      var(--dz-blekit);
  --dz-wiodaca-mocna: var(--dz-blekit-mocny);
}


/* ═══ TRZY DROGI — WIDOCZNE JAKO DZIAŁANIA ════════════════════════════════
   Audyt z 1.09.2026: nad zgięciem strony głównej nie było ANI JEDNEGO
   wyraźnego wezwania do zapisu. Trzy drogi istniały, ale jako odnośniki
   wplecione w zdanie — a odnośnik w zdaniu czyta ten, kto już czyta.
   Przy 6 zapisanych osobach na 500 i 39 dniach to jest strata, na którą
   dzieła nie stać.

   CZEGO NIE ZROBIŁEM: nie wysunąłem zapisu przed dwie pozostałe drogi.
   Kolejność w tym miejscu jest przemyślana i opisana w samej stronie —
   od najniższego progu do najwyższego, „kto nie zapisze się dziś, ma
   zostawić przynajmniej intencję". Promowanie zapisu ponad modlitwę
   odwróciłoby sens tej strony. Trzy drogi zostają równe; różni je tylko
   to, że ostatnia jest pełnią decyzji — i dlatego jedna ma wypełnienie.

   Zmierzone: pismo błękitne na nocy 7,21 : 1, pismo nocne na złocie
   12,31 : 1. Pola dotykowe mają 46 px wysokości, powyżej progu 44 px. */
.trzy-drogi {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 22px 0 4px;
}
/* SZCZEGÓŁOWOŚĆ — trzeci raz tego samego dnia i trzeci raz ta sama nauka.
   `.szept a { color: var(--zloto) }` ma 0,1,1 i wygrywa z samym `.droga-btn`
   (0,1,0). Skutek: wszystkie trzy przyciski wychodziły złote, więc znikała
   różnica między drogą a pełnią decyzji — czyli jedyna rzecz, którą te barwy
   miały tu powiedzieć. Zmierzone w przeglądarce: 10,89 : 1 zamiast 6,38 : 1
   nie jest problemem czytelności, tylko problemem znaczenia.
   Prefiks `.trzy-drogi` daje 0,2,0 i rozstrzyga. */
.trzy-drogi .droga-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 11px 20px;
  border-radius: 999px; text-decoration: none;
  font-weight: 650; font-size: .96rem; line-height: 1.2;
  border: 1.5px solid var(--dz-wiodaca-mocna);
  color: var(--dz-wiodaca);
  background: transparent;
}
.trzy-drogi .droga-btn:hover, .trzy-drogi .droga-btn:focus-visible {
  border-color: var(--dz-blekit-jas); color: var(--dz-blekit-jas);
}
/* Pełnia decyzji — jedyny przycisk z wypełnieniem. Złoto, bo to jest
   światło, do którego idziemy, a nie kolejny odnośnik. */
.trzy-drogi .droga-btn.pelnia {
  background: var(--dz-zloto); border-color: var(--dz-zloto);
  color: #04101f;
}
.trzy-drogi .droga-btn.pelnia:hover,
.trzy-drogi .droga-btn.pelnia:focus-visible {
  background: #ffd873; border-color: #ffd873; color: #04101f;
}
/* NA TELEFONIE TRZY DROGI MUSZĄ ZMIEŚCIĆ SIĘ RAZEM.
   Zmierzone przy 390 px: w układzie pionowym z pełnymi odstępami dwie z trzech
   spadały poniżej zgięcia — czyli człowiek widział tylko pierwszą i o dwóch
   pozostałych nie wiedział. Odstępy i wysokości zejdź do minimum, które nadal
   trzyma próg 44 px dla pola dotykowego. */
@media (max-width: 620px) {
  /* CZOŁO USTĘPUJE MIEJSCA. Zmierzone przy 390 px przed poprawką: nagłówek
     kończył się na 765 px przy zgięciu 844 px, więc na trzy drogi zostawało
     79 px — czyli nie mieściła się ani jedna. Nic tu nie znika; wszystko
     zjeżdża do rozmiarów, w jakich nadal się to czyta. */
  .czolo { padding: 24px 0 14px; }
  .plomyk { height: 28px; margin: 0 auto 12px; }
  .czolo-znak { height: 68px; width: auto; margin-bottom: 10px; }
  .czolo h1 { font-size: clamp(1.62rem, 6.6vw, 2rem); margin-bottom: 12px; }
  .czolo p { font-size: 1em; }

  .trzy-drogi { flex-direction: column; gap: 7px; margin: 14px 0 2px; }
  .trzy-drogi .droga-btn {
    justify-content: center; text-align: center;
    min-height: 46px; padding: 10px 16px; font-size: .93rem;
  }
}