/* Poprawki hostingu do paczki v52 (§265).
   🖐️ Pliki paczki są NIETYKALNE (§254), więc usterki jej własnego CSS-a naprawiamy TUTAJ, a arkusz
   dokłada Nginx (`sub_filter`) na końcu <head> każdej strony. Wszystko poniżej jest opisane: co było
   zepsute, jak to wyglądało i dlaczego akurat tak naprawione. Gdy wykonawca poprawi u źródła —
   kasujemy odpowiedni blok, a nie cały plik.
   ⚠️ Adres arkusza ma w Nginksie parametr `?v=` — po każdej zmianie PODBIJ go, bo `/assets/` jest
      serwowane z roczną, niezmienną pamięcią podręczną i inaczej nikt tej poprawki nie zobaczy. */

/* ─── 1. HAMBURGER: trzy kreski leżały OBOK SIEBIE (— — —), nie jedna pod drugą ───────────────
   Przyczyna: `.mobile-menu summary` ma `display:flex`, a paski to trzy <span>. Bez ustawionego
   kierunku flex układa je w RZĄD. Objaw widać na każdym telefonie, nie tylko w Safari.
   📌 Naprawiamy kierunkiem, a nie zmianą `display` — `<summary>` jest wrażliwy na zmiany `display`
      (w Safari potrafi wtedy wrócić domyślny trójkąt rozwijania). */
.mobile-menu summary { flex-direction: column; }

/* ─── 2. MENU MOBILNE: linki BIAŁE NA BIAŁYM TLE ──────────────────────────────────────────────
   Panel menu ma jasne tło (#fffcf9), ale leży wewnątrz CIEMNEGO nagłówka i dziedziczy z niego
   biały kolor tekstu. Zmierzone: tekst rgb(255,255,255) na tle rgb(255,252,250) — kontrast 1,0,
   czyli napisy niewidoczne. Nagłówki grup (PARAFIA+, SANKTUS) mają własny kolor, więc były widać
   tylko je — stąd wrażenie „menu się nie wyświetla". */
.mobile-menu nav > a { color: var(--ink); }
.mobile-menu nav > a:hover,
.mobile-menu nav > a:focus-visible { color: var(--wine); }
.mobile-menu nav .button { color: #fff; }   /* przycisk „Otwórz SANKTUS" zostaje biały na bordowym */

/* ─── 3. PODŚWIETLENIE BIEŻĄCEJ ZAKŁADKI ──────────────────────────────────────────────────────
   Paczka stylizuje `.desktop-nav [aria-current=page]` (bordowy tekst + podkreślenie), ale sam
   znacznik `aria-current` ustawia TYLKO na stronie instrukcji dla rodziców. Atrybut dokłada teraz
   `poprawki-hostingu.js`; tutaj dopisujemy brakujące style dla dwóch pozostałych nawigacji.
   📌 W górnym pasku NIE używamy bordowego: pasek ma tło #120f11 i bordowy byłby na nim nieczytelny.
      Bierzemy biel + podkreślenie w złocie paska (#e7c59d), czyli kolor, którym pasek już się posługuje. */
.project-nav [aria-current="page"] { color: #fff; position: relative; }
.project-nav [aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: #e7c59d; border-radius: 2px;
}
.mobile-menu nav > a[aria-current="page"] {
  color: var(--wine); background: var(--blush); font-weight: 700;
}


/* ─── 4. (§267) EKRAN LOGOWANIA U RODZICÓW: czysty zrzut zamiast kadru z czarną ramką emulatora ────
   Nginx podmienia źródło obrazka (`sub_filter` w www.conf) na `mobile-login-czysty.webp` — prosty
   zrzut ekranu bez ramki urządzenia. Sam obrazek ma proste rogi i kremowe tło niemal w kolorze karty,
   więc bez tej reguły zlewałby się z tłem. Zaokrąglenie jak przy sąsiednich telefonach paczki (22 px),
   obwódka ledwie widoczna — ma zaznaczyć krawędź, nie udawać ramki telefonu. */
.parent-guide-cta-phone img { border-radius: 22px; box-shadow: 0 0 0 1px rgba(47, 20, 27, .10); }


/* ─── 5. (§270) ODRĘCZNE NAPISY WJEŻDŻAŁY NA WIEŻĘ KOŚCIOŁA ────────────────────────────────────
   Objaw: „Wspólnota zaczyna się od relacji" na pierwszym ekranie strony głównej i strony SANKTUSA
   nachodziło na rysunek wieży i stawało się nieczytelne. Widać to TYLKO na części ekranów — na
   szerokich monitorach układ jest poprawny, więc usterka łatwo umyka.
   Przyczyna: napis jest ustawiony `right:` WEWNĄTRZ kolumny wyśrodkowanego kontenera (`.shell`,
   min(100%,1320px)), a zdjęcie kościoła `right:0` względem CAŁEJ sekcji i w jednostkach `vw`.
   Dwa różne punkty odniesienia: gdy okno się zwęża, zdjęcie sunie w lewo szybciej niż napis, aż
   wieża wchodzi pod litery. Zmierzone: przy 1440 px napis zachodził na wieżę o 77 px, a udział
   ciemnych pikseli pod napisem sięgał 17 % (strona główna) i 26 % (strona SANKTUSA).
   Naprawa: napis też liczymy OD PRAWEJ KRAWĘDZI OKNA — tym samym punktem odniesienia co zdjęcie.
   `--luka`  = odstęp od prawej krawędzi okna do prawej krawędzi kontenera (stąd wzór z 1320 px
               i wewnętrznym marginesem `.shell`: 42 px, a od 1200 px — 34 px),
   `--odsun` = gdzie ma stać PRAWY koniec napisu, licząc od krawędzi okna. Wartości dobrane
               pomiarem: prawy koniec napisu ma wyprzedzać lewą krawędź wieży o ok. 30–45 px.
   ⚠️ `100vw` liczy razem z paskiem przewijania, więc napis bywa o ~8 px bliżej wieży niż z rachunku
      — zapas jest na to przygotowany. Poniżej 761 px układ przechodzi w jedną kolumnę i napis stoi
      dobrze: tam CELOWO nic nie ruszamy. */
@media (min-width: 761px) {
  .m-hero .m-scene > .m-hand-hero,
  .hero .hero-art > .handwritten {
    --luka: max(42px, calc((100vw - 1320px) / 2 + 42px));
    --odsun: 300px;
    right: calc(var(--odsun) - var(--luka));
    left: auto;
  }
  @media (max-width: 1399.98px) {
    .m-hero .m-scene > .m-hand-hero,
    .hero .hero-art > .handwritten { --odsun: 288px; }
  }
  @media (max-width: 1200px) {
    .m-hero .m-scene > .m-hand-hero,
    .hero .hero-art > .handwritten { --luka: 34px; --odsun: 252px; }
  }
  @media (max-width: 1100px) {
    .m-hero .m-scene > .m-hand-hero { --odsun: 240px; width: 112px; }
    .hero .hero-art > .handwritten { --odsun: 244px; }
  }
  @media (max-width: 1000px) {
    .m-hero .m-scene > .m-hand-hero { --odsun: 205px; width: 95px; }
    .hero .hero-art > .handwritten { --odsun: 248px; }
  }
  /* 761–900 px na stronie głównej: między makietą telefonu a wieżą zostaje ok. 30 px, a napis ma 95 px
     — nie ma tam MIEJSCA, w którym stanąłby czysto. Chowamy go, tak jak paczka chowa drugi odręczny
     napis (przy rolach) poniżej 760 px. Strony SANKTUSA to nie dotyczy: tam miejsce jest. */
  @media (max-width: 900px) { .m-hero .m-scene > .m-hand-hero { display: none; } }
}