/*
Theme Name: Żłobek
Description: Prosty, dostępny (WCAG 2.1 AA) motyw strony żłobka. Dane kontaktowe edytujesz w Wygląd → Dostosuj → Dane żłobka.
Version: 0.0.1-podglad-1794568334
Requires PHP: 8.0
Text Domain: zlobek
*/
/* Wygląd „Słonecznie” (paczka grafik wybrana z dyrektorką 28.10.2026), kolory „Beż z kroplą różu”: różana śmietanka w hero (#FFF1EF), różowawy beż (#FCEEE8) i ciepła biel, jasna morela jako dodatek, granatowe tytuły; żółty tylko w drobnych detalach słońca i tęczy.
   --sky: pas nagłówka, --leaf: jasne różowe kółka, panele i puste pola zdjęć, --blekit: pastelowy błękit (taśma na naklejce), --morela: przyciski (z granatowym tekstem),
   --wanilia i --morela-jasna: kółka atutów i jasne kafelki, --plama: beżowa plama za zdjęciem, --accent: linki i drobne znaczniki, --granat: tytuły i obwódka fokusu, --wzor i --wzor-krycie: kreski rysunków w tle (krycie ustawiane tylko tu, nie w plikach SVG), --rys-*: kontur i wypełnienia ozdób z assets/rysunki/ (bez krycia), --kolory-krycie: kolorowe rysunki w hero, --tlo-*: tła kolejnych sekcji na całą szerokość (--tlo-strona: treść podstron), --tlo-pasek, --tekst-naglowka i --linia-naglowka: górny pasek, teksty i linie nagłówka. */
:root{
  color-scheme:light;
  --bg:#FFFDFA; --surface:#FFFDFA; --ink:#24394F; --muted:#4A5361; --line:#EDD9CE;
  --accent:#A4441A; --accent-ink:#FFFFFF; --granat:#24394F;
  --morela:#FFC09A; --morela-hover:#FFAD7F; --morela-ink:#24394F;
  --sky:#FFFDFA; --leaf:#FFF1EF; --blekit:#BBDDE9; --wzor:#D8B8A6; --wzor-krycie:.8;
  --wanilia:#FCEEE8; --morela-jasna:#FFE6D6; --plama:#F9E3DA; --kolory-krycie:1;
  --tlo-hero:#FFF1EF; --tlo-atuty:#FFFDFA; --tlo-aktualnosci:#FFF7F3; --tlo-zapisy:#FCEEE8;
  --tlo-galeria:#FFFDFA; --tlo-kontakt:#FCEEE8; --tlo-stopka:#F6E4DB; --tlo-strona:#FFFDFA;
  --tlo-pasek:#FFF6F1; --tekst-naglowka:#203D53; --linia-naglowka:#EEDBD0;
  --rys-kontur:#D8B8A6; --rys-m:#F7C9A9; --rys-b:#BBDDE9; --rys-z:#FFE3A0;
  --cien:0 8px 24px rgb(36 57 79 / .06);
  --fs:16px;
  --display:"Baloo 2",system-ui,sans-serif;
  --body:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#18212C; --surface:#212C39; --ink:#F5EEE2; --muted:#C8C0B2; --line:#364352;
  --accent:#F5B48A; --accent-ink:#18212C; --granat:#FFE2C2;
  --morela:#FFC09A; --morela-hover:#FFD2B5; --morela-ink:#24394F;
  --sky:#1D2733; --leaf:#2A3543; --blekit:#3A5363; --wzor:#334050; --wzor-krycie:1; --kolory-krycie:.35;
  --wanilia:#33363A; --morela-jasna:#3C302B; --plama:#2A3543;
  --tlo-hero:#1F2833; --tlo-atuty:#1A222D; --tlo-aktualnosci:#222C38; --tlo-zapisy:#262F3A;
  --tlo-galeria:#1A222D; --tlo-kontakt:#1F2833; --tlo-stopka:#222C38; --tlo-strona:#1A222D;
  --tlo-pasek:#1D2733; --tekst-naglowka:#F5EEE2; --linia-naglowka:#364352;
  --rys-kontur:#6E6A6C; --rys-m:#4E3F40; --rys-b:#2E4656; --rys-z:#4F4A3A;
  --cien:none;
}
:root[data-contrast="high"]{
  color-scheme:dark;
  --bg:#000; --surface:#000; --ink:#FFF; --muted:#FFF; --line:#FFF;
  --accent:#FFE600; --accent-ink:#000; --granat:#FFE600;
  --morela:#FFE600; --morela-hover:#FFF; --morela-ink:#000;
  --sky:#000; --leaf:#000; --blekit:#000; --wzor:transparent; --wzor-krycie:1; --kolory-krycie:0;
  --wanilia:#000; --morela-jasna:#000; --plama:#000;
  --tlo-hero:#000; --tlo-atuty:#000; --tlo-aktualnosci:#000; --tlo-zapisy:#000;
  --tlo-galeria:#000; --tlo-kontakt:#000; --tlo-stopka:#000; --tlo-strona:#000;
  --tlo-pasek:#000; --tekst-naglowka:#FFF; --linia-naglowka:#FFF;
  --cien:none;
}
html{font-size:var(--fs)}
/* Element z fokusem (klawisz Tab) nie chowa się pod przypiętym menu */
html{scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font:1rem/1.6 var(--body);}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--granat);outline-offset:2px;border-radius:4px}
/* Nagłówki: zaokrąglony Baloo 2, jak z bajki; tytuły granatowe */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0}
h1,h2{font-weight:800;color:var(--granat)}
h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0}
p,li{text-wrap:pretty}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;z-index:100000}
/* Zalogowani mają u góry pasek WordPressa (32 px, na telefonie 46 px): link pojawia się pod nim */
.admin-bar .skip:focus{top:40px}
@media (max-width:782px){.admin-bar .skip:focus{top:54px}}


/* Górny pasek: po lewej samo logo BIP (wymóg), po prawej zawsze widoczne ułatwienia dostępu */
.util{background:var(--tlo-pasek);border-bottom:1px solid var(--linia-naglowka);font-size:.85rem;color:var(--tekst-naglowka)}
.util .wrap{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between;padding-block:6px}
.bip{display:block;padding:2px 0}
.bip-logo{display:block;width:56px;height:auto}
.a11y{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.a11y span{font-weight:700;margin-right:2px}
.a11y button{font:inherit;font-weight:700;min-height:30px;background:var(--bg);color:var(--tekst-naglowka);border:1px solid var(--linia-naglowka);border-radius:999px;padding:2px 12px;cursor:pointer}
.a11y button:hover{border-color:var(--tekst-naglowka)}
.a11y button[aria-pressed="true"]{background:var(--tekst-naglowka);border-color:var(--tekst-naglowka);color:var(--bg)}
.a11y [data-hc]{margin-left:8px}

/* Główny wiersz: logo z nazwą, po prawej cała grafika FERS (widoczna bez przewijania, wymóg dofinansowania); pod spodem przypięte menu */
header.main{background:var(--bg);color:var(--tekst-naglowka)}
header.main .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 48px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
/* Pełna nazwa w dwóch wierszach, żeby znaki FERS zostały w tym samym wierszu nagłówka */
header.main .brand{flex:1 1 0;min-width:0}
.brand strong{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;line-height:1.1;color:var(--granat);text-wrap:balance}
header.main .brand strong{color:var(--tekst-naglowka)}
/* Znaki FERS bez karty i cienia, tak duże, jak pozwala wysokość logo z nazwą (obrazek przycięty do znaków, bez białych marginesów).
   Białe tło samego obrazka zostaje także w trybie ciemnym (wymóg księgi znaku). */
.ue{display:block;flex:none}
.ue img{display:block;height:55px;width:auto}
.pasek-menu{background:var(--surface);border-block:1px solid var(--linia-naglowka);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.pasek-menu .wrap{display:flex;flex-wrap:wrap;align-items:center}
/* Domek przed menu: zawsze widoczny skrót do strony głównej, także na telefonie obok przycisku „Menu”; na stronie głównej morelowy */
.dom{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:6px 32px 6px 0;border-radius:12px;background:var(--morela-jasna);color:var(--tekst-naglowka)}
/* Kreska domku grubsza niż w innych ikonach (2.2 z 64 to przy 24 px ułamek piksela), żeby był widoczny także bez podświetlenia */
.dom svg{stroke-width:5}
.dom:hover,.dom[aria-current]{background:var(--morela);color:var(--morela-ink)}
/* Menu „Szczyt”: zwykłe linki rozłożone na całą szerokość; pod bieżącą zakładką mały szczyt stoi na linii menu */
.site-nav{flex:1}
.menu{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;list-style:none;margin:0;padding:0}
.menu a,.ma-podmenu > button{text-transform:uppercase;position:relative;color:var(--tekst-naglowka);text-decoration:none;padding:14px 0 13px;font-family:var(--display);font-size:1rem;font-weight:600}
.menu a:hover,.ma-podmenu > button:hover{color:var(--accent);text-decoration:underline;text-underline-offset:6px}
.menu .current-menu-item > :is(a,button){color:var(--accent)}
.menu .current-menu-item > :is(a,button)::after{content:"";position:absolute;left:50%;bottom:-1px;width:22px;height:11px;transform:translateX(-50%);background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%)}
/* Zakładka z podmenu: przycisk ze strzałką, lista pod nim (pierwsza pozycja to strona nadrzędna) */
.ma-podmenu{position:relative}
.ma-podmenu > button{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer}
.ma-podmenu > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.podmenu{display:none;position:absolute;top:100%;left:-14px;z-index:6;min-width:220px;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--linia-naglowka);border-radius:14px;box-shadow:var(--cien)}
.ma-podmenu > button[aria-expanded="true"] + .podmenu{display:grid}
.menu .podmenu a{padding:8px 10px;border-radius:10px;font-size:1.05rem}
.menu .podmenu a:hover{background:var(--leaf)}
.menu .podmenu a[aria-current]{color:var(--accent);background:var(--leaf)}
/* Wyszukiwarka na końcu paska menu (ta sama co w stopce); na telefonie w rozwiniętym panelu „Menu” */
/* Lupa jest klikalną ikoną wewnątrz pola, po prawej (pole ma z tej strony miejsce na nią) */
.pasek-menu .search-form{flex:none;position:relative;margin-left:24px}
.pasek-menu .search-form .search-field{width:200px;min-height:40px;box-sizing:border-box;border-radius:999px;padding:6px 42px 6px 16px}
.pasek-menu .search-form .search-submit{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;background:none;color:var(--ink);border-radius:999px}
.pasek-menu .search-form .search-submit svg{display:block;width:20px;height:20px;stroke-width:5}
.pasek-menu .search-form .search-submit span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pasek-menu .search-form .search-submit:hover{background:var(--morela-jasna);color:var(--morela-ink)}
.pasek-menu .search-form .search-submit:focus-visible{outline-offset:0}
/* Między tabletem a dużym ekranem ciaśniej, żeby menu z wyszukiwarką zostało w jednym wierszu */
@media (min-width:1001px) and (max-width:1100px){
  .dom{margin-right:18px}
  .menu{gap:4px 10px}
  .menu a,.ma-podmenu > button{font-size:.9rem}
  .pasek-menu .search-form{margin-left:16px}
  .pasek-menu .search-form .search-field{width:140px}
}

/* Rysunki w tle (słońca, chmurki, zabawki): gotowa kompozycja z pustym środkiem jako maska, kreski w kolorze --wzor */
.hero,.zapisy,.tytul-strony{position:relative;isolation:isolate}
.hero::before,.zapisy::before,.tytul-strony::before{content:"";position:absolute;inset:0 max(0px,calc(50% - 720px));z-index:-1;pointer-events:none;background:var(--wzor);opacity:var(--wzor-krycie);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero::before{-webkit-mask-image:url("assets/tlo-hero.svg");mask-image:url("assets/tlo-hero.svg")}
/* Cztery rysunki z tej samej kompozycji w pastelach (słońce, autko, klocki, chmurka): osobny obrazek w tym samym miejscu i skali co maska, pod plamą */
.hero::after{content:"";position:absolute;inset:0 max(0px,calc(50% - 720px));z-index:-2;pointer-events:none;background:url("assets/tlo-hero-kolory.svg") center/contain no-repeat;opacity:var(--kolory-krycie)}
:root[data-contrast="high"] .hero::after{display:none}
/* Niski pas tytułu podstrony: powtarzalny kafelek zamiast kompozycji (żeby rysunki nie wyszły za drobne), tylko przy brzegach:
   środek pod tytułem zostaje spokojny */
/* Ozdoby: nieruchome, poza tekstem; w wysokim kontraście znikają, na telefonie zostają nieliczne */
.ozdoba{position:absolute;display:block;height:auto;pointer-events:none;z-index:-1}
/* Rysunki z assets/rysunki/ wstawione w HTML: jedna grubość kreski w każdym rozmiarze, kolory z --rys-*, bez krycia (nie przygaszamy ich drugi raz) */
.rys{display:block;pointer-events:none}
.rys svg{display:block;width:100%;height:auto;overflow:visible;stroke:var(--rys-kontur)}
.rys svg *{vector-effect:non-scaling-stroke;stroke-width:2.2px}
.rys .m{fill:var(--rys-m)}
.rys .b{fill:var(--rys-b)}
.rys .z{fill:var(--rys-z)}
:root[data-contrast="high"] .rys{display:none}
/* Kształty-kontury z rysunków tła (łódka, serce, tort…): maska z pliku, kolor --wzor; większość stoi przy brzegach ekranu */
.ksztalt{position:absolute;z-index:-1;width:58px;pointer-events:none}
.atuty-pas,#aktualnosci,.galeria-podglad{position:relative;isolation:isolate;overflow-x:clip}
.atuty-pas .k-lodka{top:8px;left:max(6px,calc(50% - 700px));transform:rotate(-10deg)}
.atuty-pas .k-pilka{bottom:40px;right:max(6px,calc(50% - 700px));width:50px}
#aktualnosci .k-gwiazdka{top:48px;left:max(6px,calc(50% - 690px));width:40px;transform:rotate(12deg)}
#aktualnosci .k-autko{top:46%;right:max(6px,calc(50% - 705px));transform:rotate(8deg)}
#aktualnosci .k-klocki{bottom:36px;left:max(6px,calc(50% - 700px));width:50px}
.galeria-podglad .k-tort{top:40%;left:max(6px,calc(50% - 705px));transform:rotate(-8deg)}
.galeria-podglad .k-chmurka{top:44px;right:max(6px,calc(50% - 705px));width:70px}
.galeria-podglad .k-serce{bottom:56px;right:max(6px,calc(50% - 690px));width:38px;transform:rotate(14deg)}
/* W kontakcie obok słońca pod tekstem: tam jest wolne miejsce na każdym ekranie */
.kontakt-wstep .k-lodka{left:96px;bottom:4px;width:62px;transform:rotate(-6deg)}
.kontakt-wstep .k-serce{left:184px;bottom:26px;width:30px;transform:rotate(12deg)}
/* Przy brzegach mieszczą się dopiero na szerokim ekranie */
@media (max-width:1359px){:is(.atuty-pas,#aktualnosci,.galeria-podglad) .ksztalt,.o-lalka,.o-slonce{display:none}}

/* Strona główna: kremowy nagłówek, po lewej duży budynek w białej chmurce, po prawej hasło i przycisk.
   Zdjęcie na szerokim ekranie wychodzi w lewo poza kontener, żeby było jak największe, a napis na budynku czytelny. */
.hero{background:var(--tlo-hero);padding-block:48px 40px;overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.hero h1{font-size:clamp(2.4rem,4.2vw,3.5rem);line-height:1.02}
/* Odręczna morelowa kreska pod hasłem i pod tytułem podstrony */
:is(.hero,.tytul-strony) h1::after{content:"";display:block;width:min(240px,60%);height:16px;margin-top:10px;background:var(--morela);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'><path d='M4 10c26-7 44 4 70-1s42-6 66 0 50 3 96-5' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'><path d='M4 10c26-7 44 4 70-1s42-6 66 0 50 3 96-5' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/></svg>") center/100% 100% no-repeat}
/* Beżowa plama wystająca zza chmurki */
.hero-foto{position:relative;margin-left:clamp(-96px,calc((1200px - 100vw) / 2),0px)}
.plama{position:absolute;z-index:-1;width:44%;aspect-ratio:1;top:-10%;right:-5%;background:var(--plama);border-radius:56% 44% 52% 48% / 48% 56% 44% 52%}
.hero p.lead{font-size:1.15rem;margin-top:20px;max-width:42ch;color:var(--muted)}
/* Budynek w chmurce: gotowa grafika z przezroczystym tłem, cała i w naturalnych proporcjach; cień idzie za kształtem chmurki */
.hero-chmurka{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgb(164 68 26 / .07))}
.hero-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:28px}
.o-lalka{width:104px;top:40px;right:max(0px,calc(50% - 650px))}
.o-slonce{width:92px;top:42px;right:calc(max(0px,calc(50% - 650px)) + 40px)}
/* Iskierki wokół hasła */
.hero-tekst{position:relative}
.o-iskra1{width:26px;top:-34px;left:-30px}
.o-iskra2{width:16px;top:-6px;right:14%}
.o-iskra3{width:14px;bottom:30%;left:-26px}
.o-serce{width:38px;top:50%;right:max(12px,calc(50% - 650px))}
.o-chmurka1{width:100px;top:28px;left:max(8px,calc(50% - 690px))}
.o-chmurka2{width:120px;bottom:20px;left:calc(50% + 40px)}
/* Promyczki przy przycisku */
.hero .btn{position:relative}
.hero .btn:first-child::before{content:"";position:absolute;left:-30px;top:-30px;width:42px;height:42px;background:url("assets/rysunki/promyczki.svg") center/contain no-repeat;pointer-events:none}
:root[data-contrast="high"] .hero .btn:first-child::before{display:none}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.cta.srodek{justify-content:center;margin-top:32px}
/* Węższa kolumna hero (tablet poziomo): ciaśniejsze przyciski, żeby oba zmieściły się w jednym wierszu */
@media (min-width:861px) and (max-width:1100px){.hero .cta{column-gap:12px}.hero .btn{padding-inline:16px;gap:8px}}
/* Przyciski-pastylki: morelowe z granatowym tekstem i strzałką (kolor strzałki = kolor tekstu) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;box-sizing:border-box;padding:10px 24px;border-radius:999px;font-weight:800;text-decoration:none;background:var(--morela);color:var(--morela-ink);border:2px solid var(--morela);transition:background-color .15s,border-color .15s}
.btn::after,.dalej::after{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 32h40M38 19l13 13-13 13'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 32h40M38 19l13 13-13 13'/></svg>") center/contain no-repeat}
.btn:hover{background:var(--morela-hover);border-color:var(--morela-hover)}
.btn.obrys{background:transparent;color:var(--accent);border-color:currentColor}
.btn.obrys:hover{background:var(--surface)}
/* Link ze strzałką obok przycisku */
.dalej{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink);text-underline-offset:4px}
.dalej::after{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
/* Przejścia między sekcjami: fala albo puchaty brzeg, kolory z --tlo-* sąsiednich sekcji */
.przejscie{display:block;width:100%;height:clamp(28px,5vw,64px)}

/* Atuty: cztery karty w ciepłej bieli z cienką obwódką, ikony w pastelowych kółkach */
.atuty-pas{background:var(--tlo-atuty);padding-block:16px 56px}
.atuty{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;text-align:center}
.atuty li{display:grid;justify-items:center;align-content:start;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px 16px 20px;box-shadow:var(--cien)}
/* Kółka pod ikonami na zmianę: waniliowe, jasnomorelowe, kremowe */
.kolko{display:grid;place-items:center;width:88px;height:88px;margin-bottom:6px;border-radius:50%;background:var(--wanilia);color:var(--ink)}
.atuty li:nth-child(3n+2) .kolko{background:var(--morela-jasna)}
.atuty li:nth-child(3n) .kolko{background:var(--leaf)}
.kolko .ikona{width:66px;height:66px}
/* Iskierka przy każdym kółku, na zmianę z prawej u góry i z lewej u dołu */
.kolko{position:relative}
.kolko::after{content:"";position:absolute;top:0;right:-6px;width:18px;height:18px;background:url("assets/rysunki/iskierka.svg") center/contain no-repeat}
.atuty li:nth-child(even) .kolko::after{top:auto;right:auto;bottom:2px;left:-8px;width:14px;height:14px}
:root[data-contrast="high"] .kolko::after{display:none}
.atuty h2{font-size:1.35rem;font-weight:700}
.atuty p{color:var(--muted);max-width:28ch}
.ikona{display:block;flex:none}
:root[data-contrast="high"] :is(.atuty li,.wpisy .wpis,.kontakt-pola li){border:1px solid var(--line)}

section{padding-block:56px}
/* Nagłówek sekcji: mała morelowa kreska nad tytułem, po prawej link do całości */
.kreska::before,.nadtytul::before{content:"";display:block;width:36px;height:4px;margin-bottom:10px;border-radius:2px;background:var(--morela)}
.nadtytul{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.naglowek-sekcji{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 24px;margin-bottom:28px}
section > .wrap > h2{margin-bottom:28px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;margin-bottom:24px}
.head p{color:var(--muted);max-width:60ch}

/* Wpisy na stronie głównej: jasny beż, trzy równe białe karty ze zdjęciem u góry */
#aktualnosci{background:var(--tlo-aktualnosci)}
.o-serduszko{position:static;display:inline-block;width:34px;margin-left:12px;vertical-align:middle;transform:rotate(12deg)}
.o-lalka-mala{position:static;display:inline-block;width:38px;margin-left:14px;vertical-align:middle}
.wpisy{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:stretch}
.wpisy .wpis{background:var(--surface);border-radius:24px;padding:12px 12px 24px;box-shadow:var(--cien)}
.wpisy .wpis > :not(.wpis-img){margin-inline:12px}
.wpis-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;margin-bottom:14px}
.wpis time{display:block;color:var(--muted);font-size:.94rem}
.wpis h3{font-size:1.35rem;margin-top:4px}
.wpis :is(h2,h3) a{color:var(--ink);text-decoration:none}
.wpis :is(h2,h3) a:hover{color:var(--accent);text-decoration:underline}
.wpis p{color:var(--muted);margin-top:6px;max-width:58ch}
.wpis-img.pusty{background:var(--leaf) url("assets/rysunki/slonko.svg") center/28% no-repeat}
:root[data-contrast="high"] .wpis-img.pusty{display:none}
.wpisy time{display:flex;align-items:center;gap:8px}
.wpisy time::before{content:"";width:18px;height:18px;flex:none;background:var(--accent);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M3 10h18M8 3v4M16 3v4'/></g><circle cx='12' cy='15' r='2.5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M3 10h18M8 3v4M16 3v4'/></g><circle cx='12' cy='15' r='2.5'/></svg>") center/contain no-repeat}

/* Pas zapisów na całą szerokość: waniliowy krem z rysunkami, tytuł ze słońcem, trzy kroki w rzędzie, przycisk w prawym dolnym rogu */
.zapisy{background:var(--tlo-zapisy);overflow-x:clip;padding-block:56px 48px}
.zapisy::before{-webkit-mask-image:url("assets/tlo-zapisy.svg");mask-image:url("assets/tlo-zapisy.svg")}
.zapisy-tresc{position:relative;display:grid;gap:8px}
.zapisy h2{display:flex;align-items:center;gap:14px;padding-right:160px}
.o-slonko{position:static;width:64px;flex:none;z-index:auto}
/* Dane naboru jako naklejki: biała karta lekko przekrzywiona, morelowa taśma u góry, rysunek w pastelowym kółku */
.zapisy-fakty{list-style:none;margin:18px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.zapisy-fakty li{position:relative;display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:22px;padding:20px 20px 18px;box-shadow:var(--cien);transform:rotate(-1.2deg)}
.zapisy-fakty li:nth-child(2){transform:rotate(1deg)}
.zapisy-fakty li:nth-child(3){transform:rotate(-.6deg)}
.zapisy-fakty li::before{content:"";position:absolute;top:-11px;left:50%;width:76px;height:22px;margin-left:-38px;background:var(--morela);opacity:.75;border-radius:3px;transform:rotate(-4deg)}
.zapisy-fakty li:nth-child(2)::before{transform:rotate(5deg);background:var(--blekit)}
.zapisy-fakty .kolko{width:72px;height:72px;margin:0;flex:none}
.zapisy-fakty li:nth-child(2) .kolko{background:var(--morela-jasna)}
.zapisy-fakty li:nth-child(3) .kolko{background:var(--leaf)}
.zapisy-fakty small{display:block;color:var(--muted);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.zapisy-fakty strong{display:block;font:700 1.25rem/1.2 var(--display);color:var(--granat);text-wrap:balance}
:root[data-contrast="high"] .zapisy-fakty li{transform:none;border:1px solid var(--line)}
:root[data-contrast="high"] .zapisy-fakty li::before{display:none}
.o-chmurka3{width:110px;top:-8px;right:112px}
.o-klocki{width:84px;top:-4px;right:16px}
/* Kroki jako ścieżka (strona główna i Rekrutacja): jeden prosty biały panel, numery nad tekstem połączone przerywaną morelową linią (na telefonie pionową) */
:is(.kroki-zapisu,.entry ol.kroki){position:relative;list-style:none;margin:28px 0 0;padding:44px 28px 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;counter-reset:k;background:var(--surface);border-radius:28px;box-shadow:var(--cien);text-align:center}
:is(.kroki-zapisu,.entry ol.kroki)::before{content:"";position:absolute;top:70px;left:calc(28px + (100% - 120px) / 6);right:calc(28px + (100% - 120px) / 6);border-top:3px dashed var(--morela)}
:is(.kroki-zapisu,.entry ol.kroki) li{position:relative;counter-increment:k;display:grid;justify-items:center;align-content:start;gap:6px;color:var(--muted)}
/* Numery kroków jak małe słońca: promyczki nad kółkiem */
:is(.kroki-zapisu,.entry ol.kroki) li::after{content:"";position:absolute;left:calc(50% - 20px);top:-26px;width:40px;height:40px;background:url("assets/rysunki/promyczki.svg") center/contain no-repeat;pointer-events:none}
:root[data-contrast="high"] :is(.kroki-zapisu,.entry ol.kroki) li::after{display:none}
:is(.kroki-zapisu,.entry ol.kroki) li::before{content:counter(k);position:relative;grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;margin-bottom:4px;box-shadow:0 0 0 6px var(--surface);border-radius:50%;background:var(--morela);color:var(--morela-ink);font:800 1.4rem/1 var(--display)}
:is(.kroki-zapisu,.entry ol.kroki) strong{font:700 1.2rem/1.2 var(--display);color:var(--granat)}
.kroki-zapisu span{color:var(--muted)}
.zapisy .btn{justify-self:end;margin-top:12px}

/* Podgląd galerii: ciepła biel, do dziewięciu równych pionowych prostokątów 3:4 (trzy w rzędzie) z zaokrąglonymi rogami */
.galeria-podglad{background:var(--tlo-galeria)}
.podglad{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.podglad a{display:block;border-radius:18px}
.podglad img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:18px}

/* Kontakt: tytuł i opis po lewej, cztery białe pola 2×2 po prawej */
#kontakt{position:relative;isolation:isolate;overflow-x:clip;background:var(--tlo-kontakt);padding-bottom:64px}
.o-chmurka4{width:110px;top:2px;right:max(8px,calc(50% - 680px))}
.kontakt{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 48px;align-items:center}
.kontakt-wstep{position:relative;padding-bottom:72px}
.kontakt-wstep h2{font-size:clamp(2.1rem,4vw,2.9rem);margin-bottom:12px}
.kontakt-wstep p{color:var(--muted);font-size:1.1rem;max-width:34ch}
.o-slonko2{width:64px;left:0;bottom:0}
/* Mapa na stronie Kontakt pod kafelkami: obrazek z pinezką na środku; na telefonie wyższy kadr, żeby etykieta była czytelna */
.mapa{margin:28px 0 48px}
.mapa > a{display:block;border-radius:20px;overflow:hidden;box-shadow:var(--cien);border:1px solid var(--line)}
.mapa img{display:block;width:100%;height:auto}
.mapa figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}
@media (max-width:767px){.mapa img{aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}}
.kontakt-pola{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kontakt-pola li{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border-radius:20px;padding:20px;box-shadow:var(--cien);color:var(--ink)}
.kontakt-pola h3{font-size:1.15rem}
.kontakt-pola p{color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.kontakt-pola .wiersz{display:block;white-space:nowrap}
.kontakt-pola a{color:var(--accent);font-weight:700}

/* Kroki na stronie Rekrutacja: ta sama ścieżka co na stronie głównej, na białej stronie z cienką ramką */
.entry ol.kroki{margin:28px 0;border:1px solid var(--line)}
.note{margin-top:20px;background:var(--wanilia);border-left:6px solid var(--morela);padding:16px 20px;border-radius:0 18px 18px 0}

.scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.94rem;color:var(--muted);font-weight:700}
td.day{font-weight:700;white-space:nowrap}
.al{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.small{font-size:.85rem;color:var(--muted);margin-top:10px}

/* Lista dokumentów do pobrania: lista z klasą „dokumenty” */
.entry ul.dokumenty{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.wp-block-file,.dokumenty li a{display:flex;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--cien);padding:14px 18px;text-decoration:none;color:var(--ink);font-weight:700}
.dokumenty li a span{color:var(--muted);font-weight:400;font-size:.85rem;white-space:nowrap}
.wp-block-file:hover,.dokumenty li a:hover{border-color:var(--accent)}
/* Karty dokumentów: jeden tytuł, pod nim osobne linki do plików. Bloki Grupa i Przyciski, więc linki podmienia się w edytorze. */
.dokumenty-karty > .wp-block-group__inner-container{display:grid;gap:16px}
.dok-karta > .wp-block-group__inner-container{display:grid;gap:14px}
.dok-karta{background:var(--surface);border:1px solid var(--morela);border-radius:20px;box-shadow:var(--cien);padding:20px 22px}
.entry .dok-karta h2{margin:0;font-size:1.2rem}
.entry .dok-karta h2::before{content:none}
.entry .dok-karta h3{margin:0;font-size:1.02rem}
.dok-podrozdzial > .wp-block-group__inner-container{display:grid;gap:10px}
.dok-podrozdzial + .dok-podrozdzial{border-top:1px solid var(--line);padding-top:14px}
.dok-karta .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.dok-karta .wp-block-button{flex:1 1 240px;min-width:0;width:auto;margin:0}
.dok-karta .wp-block-button__link{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:center;box-sizing:border-box;width:100%;min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--granat);font-size:1rem;font-weight:800;line-height:1.3;text-align:left;text-decoration:none}
.dok-karta .wp-block-button__link::before{content:"";grid-row:1 / span 2;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/></svg>") center/contain no-repeat}
.dok-karta .wp-block-button__link:hover{border-color:var(--accent);background:var(--wanilia)}
.dok-karta .dok-czytaj .wp-block-button__link{border-color:var(--morela);background:var(--morela);color:var(--morela-ink)}
.dok-karta .dok-czytaj .wp-block-button__link:hover{border-color:var(--morela-hover);background:var(--morela-hover)}
.dok-opis{grid-column:2;font-size:.85rem;font-weight:600}

.decl{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--cien);padding:8px 20px}
.decl details{border-bottom:1px solid var(--line);padding-block:12px}
.decl details:last-child{border-bottom:0}
.decl summary{cursor:pointer;font-weight:700;font-family:var(--display);font-size:1.05rem}
.decl details > div{padding-top:10px;color:var(--muted);display:grid;gap:8px;max-width:70ch}

/* Strona Kontakt: pola jak na stronie głównej, pod nimi treść strony. Tło strony jest tej samej bieli co kafelki, więc kafelki
   dostają waniliowe wypełnienie jak liczby w Dofinansowaniu (na stronie głównej stoją na różowym pasie kontaktu i zostają białe) */
/* Odstęp przy treści, nie przy kafelkach: kafelki z rysunkiem są w .z-rysunkiem, który zeruje marginesy dzieci */
.single :is(.kontakt-pola,.z-rysunkiem) + .entry{margin-top:40px}
.single .kontakt-pola li{background:var(--wanilia)}

/* Jasna stopka: trzy kolumny (dane z ikonami, dokumenty, organ prowadzący ze znakami gminy na białej kafelce, także w trybie ciemnym),
   pod kreską prawa autorskie w jednym wierszu i link „Zaloguj się” przy prawym brzegu (wyszukiwarka jest tylko w pasku menu) */
footer{background:var(--tlo-stopka);color:var(--ink);padding-block:40px 32px}
footer a{color:var(--ink)}
footer h2{font:800 1.3rem/1.2 var(--display);color:var(--granat);margin:0 0 18px}
.stopka-gora{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.stopka-dane .brand{margin-bottom:20px}
.stopka-kontakt{list-style:none;margin:0;padding:0;display:grid;gap:14px;color:var(--muted)}
.stopka-kontakt li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.stopka-kontakt .ikona{color:var(--ink);margin-top:1px}
.stopka-kontakt a{color:var(--muted)}
.foot{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot a,.stopka-kontakt a{text-decoration:none}
.stopka-bip{display:inline-flex;align-items:center;gap:10px}
.stopka-bip img{flex:none}
.foot a:hover,.stopka-kontakt a:hover,.gmina a:hover{text-decoration:underline}
/* Plakietka ze znakami gminy: 284 px z obwódką, ale nie szersza niż kolumna stopki (przy 861–1004 px kolumna ma ok. 222 px) */
.gmina-znaki{display:flex;justify-content:space-around;gap:24px;box-sizing:border-box;width:fit-content;min-width:min(284px,100%);background:#fff;border-radius:20px;padding:16px 32px}
.gmina img{display:block;height:72px;width:auto}
.gmina a{display:inline-block;margin-top:18px;font:800 1.3rem/1.2 var(--display);color:var(--granat);text-decoration:none}
.stopka-dol{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;margin-top:36px;padding-top:28px;border-top:1px solid var(--wzor)}
.stopka-dol p{margin:0;color:var(--muted);font-size:.95rem}
.stopka-dol .zaloguj{flex:none;margin-left:auto;padding-block:3px;color:var(--muted);font-size:.88rem;text-underline-offset:3px}
.stopka-dol .zaloguj:hover{color:var(--accent)}
:root[data-contrast="high"] footer{border-top:2px solid #fff}
:root[data-contrast="high"] .przejscie{display:none}

@media (max-width:860px){
  .hero{padding-block:32px 40px}
  .hero .wrap,.kontakt{grid-template-columns:1fr}
  :is(.kroki-zapisu,.entry ol.kroki){grid-template-columns:1fr;padding:32px 20px 24px;gap:0;text-align:left}
  :is(.kroki-zapisu,.entry ol.kroki)::before{content:none}
  /* Pionowa kreska od środka kółka do następnego kroku */
  :is(.kroki-zapisu,.entry ol.kroki) li:not(:last-child){padding-bottom:24px;background:repeating-linear-gradient(var(--morela) 0 6px,transparent 6px 12px) 24.5px 26px/3px 100% no-repeat}
  :is(.kroki-zapisu,.entry ol.kroki) li{grid-template-columns:52px minmax(0,1fr);justify-items:start;column-gap:14px;row-gap:2px}
  :is(.kroki-zapisu,.entry ol.kroki) li::before{margin-bottom:0}
  :is(.kroki-zapisu,.entry ol.kroki) li::after{left:6px}
  :is(.kroki-zapisu,.entry ol.kroki) li+li::after{content:none}
  /* Na telefonie zamiast kompozycji powtarzalny kafelek, tylko przy brzegach (tekst ma spokojne tło) */
  .hero::after{display:none}
  .hero::before,.zapisy::before{inset:0;-webkit-mask:url("assets/tlo-kafel.svg") 0 0/540px 420px repeat,linear-gradient(90deg,#000 0 16%,transparent 26% 74%,#000 84%);-webkit-mask-composite:source-in;mask:url("assets/tlo-kafel.svg") 0 0/540px 420px repeat,linear-gradient(90deg,#000 0 16%,transparent 26% 74%,#000 84%);mask-composite:intersect}
  .o-serce,.o-chmurka1,.o-chmurka3,.o-klocki,.o-slonko2,.o-chmurka4{display:none}
  .kontakt-wstep .ksztalt{display:none}
  .o-iskra2,.o-iskra3{display:none}
  .o-iskra1{top:-22px;left:auto;right:84px;width:18px}
  .hero .btn:first-child::before{left:auto;right:12px;top:-30px}
  .o-chmurka2{display:none}
  .plama{width:50%;top:-6%;right:-2%}
  .zapisy{padding-block:40px}
  .zapisy h2{padding-right:0}
  .o-slonko{width:48px}
  .zapisy-fakty{grid-template-columns:1fr;gap:20px}
  .zapisy .btn{justify-self:stretch}
  .podglad{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .podglad img{border-radius:12px}
  .kontakt-wstep{padding-bottom:0}
  .stopka-gora{grid-template-columns:1fr}
  .stopka-dol{flex-wrap:wrap}
  section{padding-block:48px}
}
@media (max-width:480px){
  h2{font-size:1.6rem}
}
.menu-toggle{display:none;align-items:center;gap:10px;font:inherit;font-weight:700;color:var(--ink);background:var(--leaf);border:0;border-radius:999px;padding:10px 16px;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,background .2s}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}
.bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1000px){
  /* Na telefonie ułatwienia dostępu zostają w górnym pasku (mogą zejść do drugiego wiersza), znaki FERS pod nazwą, menu w panelu „Menu” */
  .a11y{gap:5px}
  .a11y button{min-width:36px;min-height:36px;padding:2px 9px}
  .a11y [data-hc]{margin-left:4px}
  header.main .wrap{padding-block:12px}
  .ue{flex:0 1 360px;max-width:100%}
  .ue img{width:100%;height:auto}
  .menu-toggle{display:inline-flex;margin-block:8px}
  .dom{margin-right:12px}
  .site-nav{display:none;flex-basis:100%;border-top:1px solid var(--linia-naglowka);max-height:calc(100vh - 140px);overflow-y:auto}
  .site-nav.open{display:grid;gap:10px;padding-bottom:12px}
  .site-nav .menu{flex-direction:column;gap:0}
  .site-nav .menu a,.site-nav .ma-podmenu > button{display:flex;width:100%;box-sizing:border-box;padding:14px 4px;font-size:1.1rem;border-bottom:1px solid var(--linia-naglowka)}
  .site-nav .ma-podmenu > button{justify-content:space-between}
  .site-nav .menu .current-menu-item > :is(a,button){box-shadow:inset 4px 0 0 var(--accent);padding-left:14px}
  .site-nav .menu .current-menu-item > :is(a,button)::after{display:none}
  .site-nav .podmenu{position:static;min-width:0;padding:0 0 0 16px;background:none;border:0;border-radius:0;box-shadow:none}
  .site-nav .menu .podmenu a{border-radius:0}
  .pasek-menu .search-form{display:none;flex-basis:100%;margin:0 0 14px}
  .site-nav.open + .search-form{display:flex}
  .pasek-menu .search-form .search-field{flex:1;width:auto;min-height:44px}
  .pasek-menu .search-form .search-field{padding-right:48px}
  .pasek-menu .search-form .search-submit{width:38px;height:38px;min-height:38px}
}
@media (max-width:640px){.kontakt-pola{grid-template-columns:1fr}}
@media (max-width:480px){
  .brand strong{font-size:1.2rem}
  .cta .btn{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){.bars,.bars::before,.bars::after{transition:none}}
/* Przycisk menu w wierszu z logo i przycisk „Dostępność”: tylko do 767 px */
header.main .menu-toggle,.a11y-toggle,.ue-tel{display:none}
@media (max-width:767px){
  /* Górny pasek: logo BIP i przycisk „Dostępność”; ułatwienia w panelu pod nim, nad treścią (bez przesuwania strony) */
  .util .wrap{position:relative;flex-wrap:nowrap;min-height:48px;padding-block:4px;box-sizing:border-box}
  .a11y-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 10px;font:inherit;font-weight:700;color:var(--tekst-naglowka);background:none;border:0;border-radius:999px;cursor:pointer}
  .a11y-toggle svg{stroke-width:5}
  .a11y-toggle::after{content:"";width:8px;height:8px;margin:-4px 4px 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
  .a11y-toggle[aria-expanded="true"]::after{transform:translateY(4px) rotate(-135deg)}
  .a11y-toggle:hover{background:var(--morela-jasna)}
  .a11y{position:absolute;top:100%;right:16px;z-index:7;max-width:calc(100% - 32px);box-sizing:border-box;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--linia-naglowka);border-radius:16px;box-shadow:var(--cien);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility 0s .15s}
  .a11y-toggle[aria-expanded="true"] + .a11y{visibility:visible;opacity:1;transform:none;transition:opacity .15s,transform .15s}
  .a11y span{flex-basis:100%}
  .a11y button{min-width:44px;min-height:44px}
  .a11y [data-hc]{margin-left:0}
  /* Przypięty wiersz z logo: logo i nazwa (link do strony głównej), przycisk menu po prawej; znaki FERS pod nim, przewijają się z treścią */
  header.main{position:sticky;top:0;z-index:6;border-bottom:1px solid var(--linia-naglowka)}
  header.main .wrap{gap:8px 12px;padding-block:6px}
  header.main .ue{display:none}
  .ue-tel{display:block;padding-block:8px;background:var(--bg)}
  .brand{flex:1 1 0;min-width:0}
  .brand > span{min-width:0}
  header.main .menu-toggle{display:inline-flex;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border-radius:12px}
  .ue-tel .ue{max-width:360px}
  /* Pasek menu bez własnego wiersza: domek i drugi przycisk ukryte, panel menu otwiera się nad treścią pod przypiętym wierszem z logo */
  .pasek-menu{position:relative;top:auto;border:0;background:none}
  .pasek-menu .dom,.pasek-menu .menu-toggle{display:none}
  .pasek-menu .wrap{position:fixed;top:var(--menu-top,0px);left:0;right:0;z-index:5;max-height:calc(100dvh - var(--menu-top,0px));box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;background:var(--surface)}
  .pasek-menu:has(.site-nav.open) .wrap{border-bottom:1px solid var(--linia-naglowka);box-shadow:var(--cien)}
  .site-nav{max-height:none;overflow:visible}
  /* Hero: najpierw hasło, wstęp i przyciski, pod nimi zdjęcie */
  .hero{padding-block:24px 16px}
  .hero .wrap{gap:20px}
  .hero-tekst{order:-1}
  .hero p.lead{margin-top:12px}
  .hero .cta{margin-top:20px}
}
/* Najwęższe telefony: mniejsze logo, żeby nazwa mieściła się w dwóch, najwyżej trzech wierszach */
@media (max-width:399px){header.main .wrap{column-gap:8px}.brand{gap:8px}header.main .brand-logo{height:40px;width:auto}.brand strong{font-size:1.1rem}}
@media (max-width:359px){.brand strong{font-size:1rem}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.a11y,.a11y-toggle[aria-expanded="true"] + .a11y,.a11y-toggle::after{transition:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

/* Treść z edytora WordPressa */
.menu a{display:block}
/* Strona i wpis: jedna wyśrodkowana kolumna (840 px) na tytuł, tekst, kroki, galerie, liczby i kontakt, żeby nic nie było szersze od reszty;
   lista wpisów i wyniki wyszukiwania (same karty) mają pełne 1200 px. */
.entry{display:grid;gap:14px}
.entry > *{margin:0}
.wrap.narrow{max-width:calc(52.5rem + 32px)}
.entry h2{font-size:1.6rem;margin-top:12px}
.entry .z-rysunkiem:has(.wp-block-gallery) + h2{margin-top:48px}
.entry h2::before{content:"";display:block;width:36px;height:4px;margin-bottom:10px;border-radius:2px;background:var(--morela)}
.entry ul.wp-block-list:not(.dokumenty,.liczby) li::marker{color:var(--accent)}
.entry img{height:auto;border-radius:18px}
.wp-block-table{margin:0;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.wp-block-table figcaption{font-size:.85rem;color:var(--muted);padding:10px 14px}
.wp-block-file{align-items:center}
.wp-block-file a{color:var(--ink);text-decoration:none}
.wp-block-file__button{background:var(--accent);color:var(--accent-ink)!important;padding:6px 12px;border-radius:8px;font-size:.85rem}
/* Góra podstrony: kremowy pas z tytułem, echo strony głównej */
.tytul-strony{background:var(--tlo-hero);overflow-x:clip;padding-block:48px 24px}
/* Pas tytułu wyśrodkowany między rysunkami przy brzegach (ścieżka, tytuł z kreską, data); treść pod nim zostaje do lewej */
.tytul-strony .wrap{text-align:center}
.tytul-strony h1{font-size:clamp(2.1rem,4.4vw,3.2rem);letter-spacing:-.01em}
.tytul-strony h1::after{width:min(240px,100%);margin-inline:auto}
/* Tytuł, ścieżka i data szerokie jak napis, z miękką „gumką” w kolorze pasa: kontury z tła dochodzą do napisu z każdej strony, ale go nie przecinają */
.tytul-strony h1,.tytul-strony time{position:relative;width:fit-content;background:var(--tlo-hero);border-radius:999px;box-shadow:0 0 26px 26px var(--tlo-hero)}
.tytul-strony .okruszki ol{justify-content:center}
.scena{position:absolute;top:0;z-index:1;width:240px;height:100%;pointer-events:none;transform:scale(var(--s))}
.scena.lewa{left:max(8px,calc(50% - 700px));transform-origin:0 0}
.scena.prawa{right:max(8px,calc(50% - 700px));transform-origin:100% 0}
.scena .rys{position:absolute;top:var(--y);width:var(--w);transform:rotate(var(--r))}
.lewa .rys{left:var(--x)}
.prawa .rys{right:var(--x)}
/* Kompozycje przy brzegach (ZL_SCENY) zmniejszają się z ekranem; tytuł, ścieżka i data nie wchodzą na nie (--scena: zajęty pas przy brzegu) */
.tytul-strony{--s:1;--scena:280px}
/* Za kompozycjami: kontury zabawek (łódka, gwiazdka, serce, słońce, tort, piłka, autko) rozsiane równo między kompozycjami działu a tytułem (pod kompozycjami ich nie ma, --pomijaj); kafelek ma 150 px wysokości, więc nic nie jest ucięte u dołu */
.tytul-strony::before{inset:0;--l:calc(max(8px,50% - 700px) + 236px * var(--s));--p:calc(max(8px,50% - 700px) + 176px * var(--s));--pomijaj:linear-gradient(90deg,transparent var(--l),#000 calc(var(--l) + 20px) calc(100% - var(--p) - 20px),transparent calc(100% - var(--p)));-webkit-mask:url("assets/tlo-tytul.svg") center/780px 150px repeat-x,var(--pomijaj);-webkit-mask-composite:source-in;mask:url("assets/tlo-tytul.svg") center/780px 150px repeat-x,var(--pomijaj);mask-composite:intersect}
.tytul-strony .wrap > *{max-width:calc(100vw - 2 * var(--scena));margin-inline:auto}
@media (max-width:1359px){.tytul-strony{--s:.8;--scena:216px}}
@media (max-width:1100px){.tytul-strony{--s:.62;--scena:170px}}
@media (max-width:1000px){.tytul-strony{--s:.5;--scena:136px}}
.tytul-strony time{display:block;color:var(--muted);margin-top:8px}
/* Na telefonie tylko główny rysunek z każdej strony, mały, w dolnym rogu obok kreski pod tytułem */
@media (max-width:860px){
  .tytul-strony .wrap > *{max-width:none}
  .tytul-strony::before{-webkit-mask:url("assets/tlo-tytul.svg") center/520px 100px repeat-x;mask:url("assets/tlo-tytul.svg") center/520px 100px repeat-x}
  .scena{top:auto;bottom:8px;width:auto;height:auto;transform:none}
  .scena .rys{position:static;width:32px}
  .scena .rys + .rys{display:none}
}
.z-rysunkiem{position:relative}
.z-rysunkiem > :not(.rys){margin:0}
.z-rysunkiem > .rys{position:absolute;top:0;width:60px}
.z-rysunkiem > .przy-p{left:calc(100% + 32px);transform:rotate(8deg)}
.z-rysunkiem > .przy-l{right:calc(100% + 32px);transform:rotate(-8deg)}
@media (max-width:1180px){.z-rysunkiem > .rys{width:42px}.z-rysunkiem > .przy-p{left:calc(100% + 12px)}.z-rysunkiem > .przy-l{right:calc(100% + 12px)}}
@media (max-width:1000px){.z-rysunkiem > .rys{display:none}}
section.single{background:var(--tlo-strona);padding-block:24px 56px}
/* Lista wpisów i wyniki wyszukiwania: zdjęcie z boku, data słownie, tytuł w kolorze tekstu */
.lista-wpisow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.lista-wpisow .wpis{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:12px 12px 24px;box-shadow:var(--cien)}
.lista-wpisow .wpis > div{margin-inline:12px}
.lista-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;margin-bottom:14px}
.lista-img.pusty{background:var(--leaf) url("assets/rysunki/slonko.svg") center/28% no-repeat}
:root[data-contrast="high"] .lista-img.pusty{display:none}
.lista-wpisow h2{font-size:1.35rem;margin-top:4px}
.wroc{margin-top:32px;font-weight:700}
.nav-links{display:flex;gap:12px;margin-top:24px}
.entry td:first-child{font-weight:700;white-space:nowrap}
/* Tabela z edytora (Ramowy plan dnia) w łagodnych barwach strony: cienka ramka, nagłówek w jasnej moreli, wiersze na przemian z jasnoróżowym tłem,
   godziny tytułową czcionką. .entry, bo style bloków WordPressa ładują się po motywie. Dwie kolumny mieszczą się na telefonie. */
.entry .wp-block-table{border:1px solid var(--line);border-radius:20px;box-shadow:var(--cien);overflow:hidden}
.entry .wp-block-table table{min-width:0;font-size:1rem}
.entry .wp-block-table thead{border-bottom:0}
.entry .wp-block-table th{background:var(--morela-jasna);color:var(--ink);font-family:var(--display);font-size:1.05rem;font-weight:700;padding:12px 18px;border:0}
.entry .wp-block-table td{border:0;padding:12px 18px;vertical-align:baseline}
.entry .wp-block-table tbody tr:nth-child(even) td{background:var(--leaf)}
.entry .wp-block-table td:first-child{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:767px){.entry .wp-block-table :is(th,td){padding:10px 12px}}

/* Bloki z edytora. Układ kolumn, galerii i obrazu z tekstem robi CSS WordPressa; tu tylko wykończenie. */
.entry .wp-block-image,.entry .wp-block-gallery,.entry .wp-block-columns,.entry .wp-block-media-text{margin:0}
.entry .wp-block-image img,.entry .wp-block-media-text img{border-radius:16px}
.entry figcaption{font-size:.85rem;color:var(--muted)}
/* Kadra: karty po trzy w rzędzie (od 768 px), niżej jedna pod drugą jak w kolumnach WordPressa */
@media (min-width:768px){.kadra.wp-block-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.kadra .wp-block-column{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--cien);padding:18px 16px 20px;text-align:center}
.kadra .wp-block-image img{display:block;margin-inline:auto;width:140px;height:140px;object-fit:cover;border-radius:50%;border:6px solid var(--wanilia)}
.kadra .wp-block-column:nth-child(3n+2) .wp-block-image img{border-color:var(--morela-jasna)}
.kadra .wp-block-column:nth-child(3n) .wp-block-image img{border-color:var(--leaf)}
.kadra h3{font-size:1.1rem;margin-top:8px}
.kadra p{color:var(--muted);font-size:.95rem}
.wyrozniki .wp-block-column{background:var(--wanilia);border-radius:22px;padding:18px}
.wyrozniki .wp-block-column:nth-child(3n+2){background:var(--morela-jasna)}
.wyrozniki .wp-block-column:nth-child(3n){background:var(--leaf)}
/* Galerie: równa siatka kadrów 4:3 (bez dziur po wysokich zdjęciach), 3 w rzędzie w kolumnie strony (6 widocznych zdjęć = 2 pełne rzędy); kliknięcie powiększa zdjęcie */
.entry .wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.entry .wp-block-gallery.has-nested-images figure.wp-block-image{width:auto!important;margin:0!important}
.entry .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.entry .wp-block-gallery figure[hidden]{display:none!important}
/* Galeria na pełnej szerokości (strona Galeria): trzy kolumny, 9 zdjęć to równe 3×3; węższe ekrany jak w kolumnie 840 px */
@media (min-width:861px){.single .wrap:not(.narrow) .entry .wp-block-gallery.has-nested-images{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.pokaz-wszystkie{justify-self:start;font:inherit;font-weight:700;cursor:pointer}
/* Dofinansowanie: najważniejsze liczby na górze */
.entry .wstep{font-size:1.2rem}
.entry ul.liczby{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;color:var(--muted)}
.entry ul.liczby li{background:var(--wanilia);border-radius:22px;padding:16px 18px}
.entry ul.liczby li:nth-child(3n+2){background:var(--morela-jasna)}
.entry ul.liczby li:nth-child(3n){background:var(--leaf)}
.entry ul.liczby strong{display:block;font-family:var(--display);font-size:1.9rem;font-weight:800;line-height:1.1;color:var(--granat)}
/* Kafelki 2×2 (w czterech kolumnach kwota się łamała); na telefonie jeden pod drugim */
@media (max-width:480px){.entry ul.liczby{grid-template-columns:1fr}}
.brand-logo{height:68px;width:auto}
@media (max-width:767px){.brand-logo{height:48px}}
/* Dłuższe teksty wyrównane do obu krawędzi (prośba Żłobka); krótkie napisy w kafelkach i przyciskach zostają bez zmian. */
:is(.entry > p,.entry > :is(ul,ol):not(.dokumenty,.liczby,.kroki) > li,.hero p.lead,.wpis p,.kontakt-wstep p){text-align:justify}
@media (max-width:767px){:is(.entry > p,.entry > :is(ul,ol):not(.dokumenty,.liczby,.kroki) > li,.hero p.lead,.wpis p,.kontakt-wstep p){hyphens:auto}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search-form{display:flex;gap:6px;align-items:center}
/* Wyszukiwarka (zl_szukaj): zaokrąglone pole i morelowy przycisk z napisem; w pasku menu sama lupa */
.search-form .search-field{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--muted);border-radius:999px;min-height:44px;box-sizing:border-box;padding:8px 18px;min-width:0}
.search-form .search-submit{font:inherit;font-weight:800;min-height:44px;background:var(--morela);color:var(--morela-ink);border:0;border-radius:999px;padding:8px 22px;cursor:pointer}
.search-form .search-submit:hover{background:var(--morela-hover)}
.search-form .search-submit svg{display:none}
.entry .search-form .search-field{flex:1}

/* Zdjęcie wpisu pod tytułem */
.single-img{display:block;width:100%;height:auto;border-radius:16px;margin-bottom:24px}

/* Ścieżka nawigacji nad tytułem: pigułka z domkiem i strzałkami (jak w BIP) */
.okruszki{margin-bottom:16px}
.okruszki ol{list-style:none;margin:0;padding:7px 16px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;font-size:.88rem}
.okruszki li{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.okruszki li+li::before{content:"";width:12px;height:12px;flex:none;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.okruszki a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;text-decoration:none;text-underline-offset:3px}
.okruszki a:hover{color:var(--accent);text-decoration:underline}
.okruszki svg{flex:none;color:var(--accent)}
.okruszki [aria-current]{color:var(--muted)}

/* Przejście do sekcji (#rekrutacja, #kontakt): tytuł nie chowa się pod przypiętym nagłówkiem */
section[id]{scroll-margin-top:96px}