/* ==========================================================================
   Przyjazna Szkoła - makieta R1
   System komponentów. Podstawa: 04-makiety/WYTYCZNE-MAKIET.md punkt 4.
   Kolory wyprowadzone z logo programu, kontrasty policzone i opisane niżej.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------------------- */
:root {
  /* Kolory z makiety R1 (etechnologie.pl/doc/makieta-lodzkie-9fc8f3a1c045/),
     zdjęte wprost z jej :root i ze zmierzonych elementów (2026-09-09).
     Kontrast podany względem bieli, liczony wzorem WCAG 2.1.

     Poprzednia wersja tego pliku (2026-09-08) trzymała granat zachodniopomorski
     (#002C37, teal) i pomarańcz z dokumentu propozycji logo (#F2994A) - żadna
     z tych wartości nie jest tym, co faktycznie jest w makiecie. Makieta ma
     WŁASNY "granat": ciemny brąz #431407, nie odcień niebieskiego. Zmienna
     nazywa się dalej --navy tylko dlatego, że tak nazywa się w makiecie -
     to odziedziczona nazwa po zachodniopomorskim, nie opis koloru.
     Mapowanie nazw wobec tamtego repozytorium (bez zmian):
     mint -> brand, mint-light -> brand-light, mint-pale -> brand-pale,
     mint-deep -> brand-deep, green-dark -> brand-ink. */
  --brand:       #FFD54D;  /* 1,41:1 - TYLKO tło, nigdy pod biały tekst; 11,09:1 z navy */
  --brand-light: #FFF3D1;
  --brand-pale:  #FFFAEB;
  --brand-deep:  #F5A623;  /* 2,03:1 - ramki i hover; to też kolor koła w logo */
  --navy:        #431407;  /* 15,65:1 - tekst i przycisk główny */
  --navy-soft:   #7C2D12;  /* 9,37:1 */
  --brand-ink:   #9A3412;  /* 7,31:1 - odnośniki i ikony na bieli */
  --yellow:      #F9CA01;  /* 1,55:1 - TYLKO tło, nigdy pod biały tekst */
  --yellow-pale: #FFF7D9;
  --crisis:      #B3261E;  /* 6,3:1  - wyłącznie blok kryzysowy */
  --crisis-dark: #8E1D17;  /* 9,0:1  - tekst w bloku kryzysowym */
  --crisis-pale: #FDF0EE;
  --crisis-line: #F2D3CE;

  /* Tekst w tonacji chłodnego grafitu zamiast czerni - instytutep.pl i
     nvcwszkole.pl nie używają czystej czerni, stąd ich łagodniejszy odbiór. */
  --ink:         #2C3A42;  /* 11,7:1 - tekst podstawowy */
  --ink-muted:   #55666F;  /* 6,0:1  - tekst drugorzędny */
  --ink-faint:   #667079;  /* 5,1:1  - metadane */
  --line:        #EFE5D3;
  --line-soft:   #F7F1E4;
  --white:       #FFFFFF;

  /* Typografia w rodzinie stylistycznej Fundacji: instytutep.pl składa
     nagłówki szeryfowym Cormorantem, a treść Work Sansem. Przejmujemy tę parę.
     Cormorant tylko na duże nagłówki - przy 20 px jego cienkie kreski gubią
     czytelność, więc h3 i h4 zostają w Work Sansie. */
  --font:         'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Cormorant', 'Georgia', 'Times New Roman', serif;

  /* Przestrzeń */
  --wrap: 1200px;
  --pad: 24px;
  --sec: 64px;
  --r-card: 12px;
  --r-btn: 8px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, .07), 0 14px 34px rgba(16, 24, 40, .10);
}

@media (min-width: 768px) {
  :root { --pad: 40px; --sec: 80px; }
}
@media (min-width: 1024px) {
  :root { --sec: 96px; }
}

/* --------------------------------------------------------------------------
   2. RESET I PODSTAWY
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Przeglądarka rysuje fieldsetowi ramkę z wycięciem na legendę. W panelu filtrów
   fieldset jest tylko grupowaniem semantycznym, nie ma być pudełkiem. */
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 17px; } }

h1, h2, h3, h4 { color: var(--navy); }

/* Duże nagłówki: szeryfowy Cormorant, ciasna interlinia, bez ujemnego trackingu.
   Cormorant jest optycznie mniejszy od Work Sansa, więc stopnie są większe. */
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: 0; }
h1 { font-size: 38px; }
h2 { font-size: 30px; }
@media (min-width: 768px) { h1 { font-size: 52px; } h2 { font-size: 38px; } }
@media (min-width: 1024px) { h1 { font-size: 58px; } h2 { font-size: 44px; } }

/* Mniejsze nagłówki: Work Sans, bo tu liczy się czytelność, nie charakter. */
h3, h4 { font-family: var(--font); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
@media (min-width: 768px) { h3 { font-size: 20px; } }
@media (min-width: 1024px) { h3 { font-size: 21px; } h4 { font-size: 18px; } }

p, li { color: var(--ink-muted); }
p { max-width: 70ch; }

a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--navy); }
/* Adres e-mail i dlugie URL-e to jeden niepodzielny "wyraz". Przy 320 px
   lodz_ps@instytutep.pl wypychal stopke poza ekran (scrollWidth 319
   przy 301) i cala strona przewijala sie w poziomie, co lamie WCAG 1.4.10. */
a { overflow-wrap: break-word; }

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .35em; }

strong { color: var(--ink); font-weight: 600; }

/* Widoczny wskaźnik ogniska - WCAG 2.4.7. Nigdy nie usuwamy outline bez zamiennika. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :focus-visible, .footer :focus-visible {
  outline-color: var(--yellow);
}

/* Pominięcie nawigacji - WCAG 2.4.1 */
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 200;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: var(--r-btn);
  text-decoration: none; font-weight: 600;
  transition: top .15s;
}
.skip:focus { top: 8px; color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. UKŁAD
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 820px; }

.section { padding: var(--sec) 0; }
.section--alt { background: var(--brand-pale); }
.section--brand { background: var(--brand-light); }
.section--navy { background: var(--navy); }
.section--tight { padding: calc(var(--sec) * .6) 0; }

.section-head { margin-bottom: 32px; }
.section-head p { margin-top: 10px; }
@media (min-width: 768px) { .section-head { margin-bottom: 40px; } }

/* Nadnagłówek: drobny, mocno rozstrzelony - chwyt z instytutep.pl,
   który buduje kontrast skali wobec dużego nagłówka szeryfowego. */
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 14px;
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { gap: 24px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   4. PRZYCISKI  (komponent 12 obejmuje wariant zewnętrzny)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 16px;
  padding: 13px 24px; min-height: 48px;
  border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s, transform .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Przycisk główny: granat morski + biel = 14,8:1. Mięta NIGDY nie jest przyciskiem z bielą. */
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-soft); color: var(--white); }

.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--brand-light); color: var(--navy); }

/* Wariant na ciemnym tle */
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: var(--white); }

.btn--crisis { background: var(--crisis); color: var(--white); }
.btn--crisis:hover { background: #8E1D17; color: var(--white); }

.btn--sm { padding: 9px 16px; min-height: 40px; font-size: 15px; }
.btn--block { width: 100%; justify-content: center; }

.btn .ico { flex-shrink: 0; }

/* Odnośnik zewnętrzny - zawsze z ikoną i informacją dla czytnika ekranu */
.ext-note { font-size: 14px; color: var(--ink-faint); margin-top: 8px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; text-decoration: none; color: var(--brand-ink);
}
.link-arrow:hover { text-decoration: underline; color: var(--navy); }
.link-arrow .ico { transition: transform .15s; }
.link-arrow:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. ZNACZNIKI I PLAKIETKI
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--brand-light); color: var(--navy);
}
.badge--yellow { background: var(--yellow-pale); color: #5C4A00; }
.badge--ua { background: var(--yellow); color: var(--navy); }      /* 10,04:1 z navy */
.badge--type { background: var(--line-soft); color: var(--ink-muted); }
.badge--crisis { background: var(--crisis-pale); color: var(--crisis); }

/* Miejsce na treść od klienta */
.todo {
  display: inline-block;
  background: var(--yellow-pale); border: 1px dashed #C9A400;
  color: #5C4A00; font-size: 14px; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
}
.todo-block {
  background: var(--yellow-pale); border: 1px dashed #C9A400;
  color: #5C4A00; padding: 18px 20px; border-radius: var(--r-card);
  font-size: 15px;
}
.todo-block strong { color: #5C4A00; }

/* --------------------------------------------------------------------------
   6. PLACEHOLDER ZDJĘCIA  (patrz brief zdjęciowy, WYTYCZNE punkt 13)
   -------------------------------------------------------------------------- */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  background: var(--brand-light);
  border: 2px dashed var(--brand-deep);
  border-radius: var(--r-card);
  color: var(--navy); padding: 20px;
  min-height: 160px;
}
.ph svg { opacity: .55; }
.ph span { font-size: 13px; line-height: 1.45; font-weight: 600; max-width: 30ch; }
.ph em { display: block; font-style: normal; font-weight: 500; color: var(--brand-ink); font-size: 12px; margin-top: 2px; }
.ph--wide { aspect-ratio: 16 / 6; min-height: 0; }
.ph--square { aspect-ratio: 1 / 1; min-height: 0; }
.ph--news { aspect-ratio: 16 / 9; min-height: 0; }
.ph--banner { aspect-ratio: 8 / 3; min-height: 0; }

/* --------------------------------------------------------------------------
   7. NAGŁÓWEK  (komponent 1)
   -------------------------------------------------------------------------- */
/* Przyklejony tylko na telefonie, gdzie ma 77 px i trzyma pod ręką przycisk
   „Umów konsultację". Na desktopie nagłówek ma dwa rzędy i 156 px - przyklejony
   zjadałby szóstą część ekranu. */
.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
@media (min-width: 1024px) { .header { position: static; } }

.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }

/* Blok marki musi się kurczyć, inaczej przy 360 px wypycha przycisk menu
   poza ekran i strona przewija się poziomo. */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand img { width: 54px; height: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 800; font-size: 16px; color: var(--navy); letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; }
/* Miejsce na oznaczenie województwa - patrz WYTYCZNE punkt 0.1 */
.brand-region { font-size: 12px; font-weight: 600; color: var(--brand-ink); letter-spacing: .02em; white-space: nowrap; }
.brand-org { font-size: 11px; color: var(--ink-faint); line-height: 1.3; }
@media (min-width: 1024px) {
  .brand img { width: 62px; }
  .brand-name { font-size: 18px; }
  .brand-org { white-space: nowrap; }
}

/* Nawigacja w drugim rzędzie nagłówka. Sześć pozycji menu plus dwa przyciski
   plus nazwa Fundacji nie mieszczą się w jednym rzędzie nawet przy 1440 px -
   przy jednym rzędzie pozycje menu łamią się na dwie linie i nagłówek się rozjeżdża. */
.nav { display: none; }
@media (min-width: 1024px) {
  .header-bar { flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 4px; }
  .nav {
    display: flex; align-items: center; gap: 2px;
    order: 3; flex-basis: 100%;
    margin-top: 12px; padding-top: 4px;
    border-top: 1px solid var(--line-soft);
  }
  .nav a {
    text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px;
    padding: 11px 14px; border-radius: var(--r-btn); white-space: nowrap;
  }
  .nav a:hover { background: var(--brand-light); color: var(--navy); }
  .nav a[aria-current="page"] { color: var(--navy); background: var(--brand-light); }
}

.header-cta { display: none; }
@media (min-width: 1024px) { .header-cta { display: flex; align-items: center; gap: 10px; } }

.burger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white); border: 0;
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 10px 16px; min-height: 46px; border-radius: var(--r-btn); cursor: pointer;
}
@media (min-width: 1024px) { .burger { display: none; } }

/* Menu mobilne - pełnoekranowe, Esc zamyka, ognisko uwięzione */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--white); overflow-y: auto;
  display: none; flex-direction: column;
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu-close {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white); border: 0;
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 10px 16px; min-height: 46px; border-radius: var(--r-btn); cursor: pointer;
}
.mobile-menu-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad); border-bottom: 1px solid var(--line);
}
.mobile-menu nav { padding: 12px var(--pad) 0; }
.mobile-menu nav a {
  display: block; padding: 15px 0; font-size: 18px; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft);
}
.mobile-menu nav a[aria-current="page"] { color: var(--brand-ink); }
.mobile-menu-cta { padding: 24px var(--pad) 40px; display: grid; gap: 12px; }
.mobile-menu-help {
  margin-top: 8px; padding: 16px 20px; background: var(--crisis-pale);
  border-radius: var(--r-card); font-size: 15px;
}
.mobile-menu-help a { color: var(--crisis); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. SLAJDER  (WCAG 2.2.2 - bez automatyki, przełączanie ręczne)
   -------------------------------------------------------------------------- */
.hero { background: var(--brand-light); position: relative; overflow: hidden; }
[data-slide] { display: none; }
[data-slide][data-active="true"] { display: block; }

/* stretch, nie center: przy wyśrodkowaniu zdjęcie zostawiało 120 px pustki nad
   i pod sobą, co klient przekreślił na zrzucie 27.08.2026. */
.hero-inner { display: grid; gap: 28px; padding: 36px 0 28px; align-items: stretch; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0 32px; }
}

/* Nagłówek slajdu wygląda jak h1, ale semantycznie jest h2. Jedyny h1 na stronie
   to nazwa programu w sekcji pod slajderem - inaczej strona miałaby dwa h1
   (po jednym w każdym slajdzie), a przy aktywnym slajdzie 2 żadnego. */
/* UWAGA na specyficzność: selektor MUSI być zakotwiczony w .hero. Reguła
   .hero p (0,1,1) bije samo .hero-title (0,1,0), a media query specyficzności
   nie podnosi - przez to tytuł slajdu renderował się w 17 px zamiast
   zadeklarowanych stopni, w zwykłym Work Sansie. Klient zgłosił to 27.08.2026
   jako „przydałaby się bardziej widoczna czcionka". Nie skracaj tego z powrotem
   do .hero-title, bo defekt wróci po cichu.
   Krój: Work Sans 700, wybrany przez klienta zamiast szeryfowego Cormorantu -
   przy tak długim zdaniu czyta się pewniej niż cienki szeryf. */
.hero .hero-title {
  font-family: var(--font); font-weight: 700;
  line-height: 1.18; letter-spacing: -.015em;
  color: var(--navy); font-size: 32px;
}
@media (min-width: 768px)  { .hero .hero-title { font-size: 38px; } }
@media (min-width: 1200px) { .hero .hero-title { font-size: 42px; } }

/* h1 w rozmiarze h2 - dla nagłówka sekcji, który jest głównym nagłówkiem strony */
h1.as-h2 { font-size: 30px; }
@media (min-width: 768px) { h1.as-h2 { font-size: 38px; } }
@media (min-width: 1024px) { h1.as-h2 { font-size: 44px; } }
.hero p { margin-top: 16px; font-size: 17px; color: var(--navy-soft); }
.hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.hero-controls {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 20px;
}
.hero-dot {
  width: 44px; height: 8px; border-radius: var(--r-pill);
  border: 0; background: rgba(0, 44, 55, .22); cursor: pointer; padding: 0;
}
.hero-dot[aria-current="true"] { background: var(--navy); }
.hero-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--navy); background: var(--white); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hero-arrow:hover { background: var(--navy); color: var(--white); }
.hero-counter { font-size: 14px; font-weight: 600; color: var(--navy-soft); margin-left: 4px; }

/* --------------------------------------------------------------------------
   9. PASEK NABORU
   -------------------------------------------------------------------------- */
/* Pasek naboru. Zalany żółty przekrzykiwał nagłówek strony. Tak jak w bloku
   kryzysowym: spokojna powierzchnia, nasycenie tylko na ikonie. */
.notice-bar {
  background: var(--yellow-pale); color: var(--navy);
  border-top: 1px solid #F0DFA6; border-bottom: 1px solid #F0DFA6;
}
.notice-bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-top: 16px; padding-bottom: 16px;
}
.notice-bar-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.notice-bar strong { color: var(--navy); font-weight: 700; }
.notice-bar p { color: var(--ink-muted); max-width: none; font-size: 15px; }
.notice-bar a { color: var(--navy); font-weight: 700; text-underline-offset: .25em; }
.notice-bar .todo { background: var(--white); border-color: #D9C67A; }

/* --------------------------------------------------------------------------
   10. BLOK LICZB  (komponent 7)
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.stat-num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: 0; }
@media (min-width: 768px) { .stat-num { font-size: 54px; } }
.stat-label { font-size: 15px; color: var(--ink-muted); margin-top: 6px; }

/* --------------------------------------------------------------------------
   11. KAFEL ODBIORCY - rozwijany  (komponent 2)
   -------------------------------------------------------------------------- */
.tile {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: var(--brand-deep); box-shadow: var(--shadow); }
.tile[data-open="true"] { border-color: var(--brand-deep); box-shadow: var(--shadow); }

.tile-btn {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: none; border: 0; font: inherit; text-align: left;
  padding: 20px; cursor: pointer; color: var(--navy);
}
.tile-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: var(--brand-light); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.tile-title { flex: 1; font-size: 18px; font-weight: 700; line-height: 1.3; }
.tile-chevron { flex-shrink: 0; color: var(--brand-ink); transition: transform .2s; }
.tile-btn[aria-expanded="true"] .tile-chevron { transform: rotate(180deg); }

.tile-panel { padding: 0 20px 22px; }
.tile-panel[hidden] { display: none; }
.tile-panel ul { margin: 0 0 16px; padding-left: 1.1em; }
.tile-panel li { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   12. KARTA FORMY WSPARCIA  (komponent 3)
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--brand-deep); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--brand-light); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card h3 { font-size: 18px; }
.card p { font-size: 15px; margin: 0; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.card-foot { margin-top: auto; padding-top: 4px; }

/* --------------------------------------------------------------------------
   13. OŚ KROKÓW  (komponent 6)
   -------------------------------------------------------------------------- */
/* list-style i padding trzeba wyzerowac tak samo, jak w .crisis-list,
   .benefits czy .breadcrumb ol. Makieta tego jednego komponentu nie
   wyzerowala, wiec .steps dziedziczyl domyslne wciecie listy 1.25em
   i przy 320 px wypychal tresc poza ekran (scrollWidth 339 przy 320). */
.steps { display: grid; gap: 4px; counter-reset: step; list-style: none; padding: 0; }
.step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  padding-bottom: 26px; position: relative;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 0;
  width: 2px; background: var(--line);
}
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: var(--navy);      /* 11,09:1 */
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; z-index: 1;
}
.step h3 { font-size: 18px; margin-bottom: 5px; }
.step p { font-size: 15px; }

/* Wariant poziomy na desktopie */
@media (min-width: 900px) {
  .steps--row { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  /* align-content: start jest tu konieczne. Bez niego kolumna rozciąga się do
     wysokości najwyższej, a wolna przestrzeń rozkłada się między wiersz numeru
     i wiersz tekstu - im krótszy opis, tym niżej spada nagłówek. */
  .steps--row .step { grid-template-columns: 1fr; align-content: start; padding-bottom: 0; text-align: center; }
  .steps--row .step-num { margin: 0 auto 12px; }
  .steps--row .step:not(:last-child)::before {
    left: calc(50% + 30px); right: -20px; top: 21px; bottom: auto;
    width: auto; height: 2px;
  }
  .steps--row .step h3 { font-size: 16px; }
  .steps--row .step p { font-size: 14px; }
}
@media (min-width: 900px) {
  .steps--row-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   14. KARTA MATERIAŁU  (komponent 4)
   -------------------------------------------------------------------------- */
.doc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.doc:hover { border-color: var(--brand-deep); box-shadow: var(--shadow); }
.doc-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.doc h3 { font-size: 17px; line-height: 1.35; }
.doc p { font-size: 14px; margin: 0; }
.doc-meta {
  font-size: 13px; color: var(--ink-faint); display: flex; flex-wrap: wrap;
  gap: 4px 10px; align-items: center; margin-top: auto; padding-top: 8px;
}
.doc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.doc-dl { font-size: 13px; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   15. KARTA AKTUALNOŚCI  (komponent 5)
   -------------------------------------------------------------------------- */
.news {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.news:hover { border-color: var(--brand-deep); box-shadow: var(--shadow); transform: translateY(-2px); }
.news .ph { border: 0; border-radius: 0; }
.news-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-faint); }
.news h3 { font-size: 18px; }
.news h3 a { color: var(--navy); text-decoration: none; }
.news h3 a:hover { text-decoration: underline; }
.news p { font-size: 15px; margin: 0; }
.news-foot { margin-top: auto; padding-top: 4px; }

/* --------------------------------------------------------------------------
   15b. ZDJĘCIA W MIEJSCACH PO PLACEHOLDERACH
   -------------------------------------------------------------------------- */
/* Kadry 16:6 i 16:9 są przepisane wprost z .ph--wide i .ph--news, więc podmiana
   placeholdera na zdjęcie nie zmienia wysokości sekcji i nie przesuwa układu
   w trakcie ładowania. aspect-ratio bez słowa auto nadpisuje proporcje własne
   pliku, dlatego object-fit musi kadrować - zdjęcia klienta są 3:2, nie 16:6. */
.media {
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: var(--r-card);
}
.media--wide { aspect-ratio: 16 / 6; }
/* Slajder - kompromis między wysokością sekcji a kontekstem zdjęcia.
   Zdjęcie slajdu 2 ma proporcję 1,10, a blok tekstu obok 1,60. Przy takiej parze
   nie da się mieć naraz pełnego kadru i zera pustki - albo zdjęcie wystaje poniżej
   przycisku, albo trzeba je przyciąć.
   1,3 to punkt równowagi: arkusz z pismem zajmuje dolne ~15% zdjęcia, więc przy 84%
   widocznej wysokości mieści się razem z twarzą. object-position: center bottom
   gwarantuje, że wycięcie idzie z GÓRY, gdzie nad głową jest zapas ciemnej ściany,
   a nie z dołu, gdzie jest cały sens tego zdjęcia.
   Slajd 1 (proporcja 1,50) traci przy tym po ~7% z boków, symetrycznie.
   Rozciąga się PUDEŁKO, nie <img> - `height: 100%` na samym obrazku nie działa,
   bo procent nie ma się do czego odnieść w wierszu o nieokreślonej wysokości. */
.hero-media { border-radius: var(--r-card); overflow: hidden; }
.hero .media--wide { aspect-ratio: 6 / 5; height: auto; border-radius: 0; }
@media (min-width: 900px) {
  .hero-media { position: relative; align-self: start; aspect-ratio: 13 / 10; }
  .hero .media--wide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  /* Placeholder musi wypelnic to samo pudelko co zdjecie. Bez tego trzyma sie
     wlasnej proporcji 16/6 i przy szerokosci kolumny 536 px ma 201 px zamiast 412 -
     zostaje 211 px pustki pod spodem, a slajder wyglada na rozdety, mimo ze ma
     dokladnie te sama wysokosc co na przyjaznasz.pl. Po wgraniu zdjec regula nie
     zmienia niczego, bo wtedy w srodku jest <img class="media--wide">, nie .ph. */
  .hero .hero-media .ph--wide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
.hero .media--wide { object-position: center bottom; }
.media--news { aspect-ratio: 16 / 9; }
/* Baner podstrony siedzi w kontenerze flex z align-items: flex-start, wiec bez
   align-self obrazek zwezilby sie do swojej szerokosci wlasnej i wyszedl poza kolumne. */
.media--banner { aspect-ratio: 8 / 3; align-self: stretch; }
/* Karta ma własne zaokrąglenie i overflow: hidden. Drugie, na samym zdjęciu,
   rysowałoby zaokrąglone rogi w środku karty. */
.news .media { border-radius: 0; }

/* Karta aktualności złożona z bloków pętli zapytania. Wygląd pochodzi z sekcji
   15, tutaj tylko dopasowanie do markupu, który generuje rdzeń. */
.news .wp-block-post-featured-image { margin: 0; }
.news .wp-block-post-featured-image img { display: block; width: 100%; border-radius: 0; }
.news-meta .wp-block-post-terms a {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--brand-light); color: var(--navy); text-decoration: none;
}
.news-meta .wp-block-post-terms a:hover { background: var(--brand); }
.news-meta .wp-block-post-date { font-size: 13px; color: var(--ink-faint); }
.news .wp-block-post-title { font-size: 18px; margin: 0; }
.news .wp-block-post-title a { color: var(--navy); text-decoration: none; }
.news .wp-block-post-title a:hover { text-decoration: underline; }
.news .wp-block-post-excerpt { margin: 0; }
.news .wp-block-post-excerpt p { font-size: 15px; margin: 0; }
.news .wp-block-read-more {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--brand-ink); text-decoration: none;
}
.news .wp-block-read-more::after { content: "\2192"; transition: transform .15s; }
.news .wp-block-read-more:hover { color: var(--navy); text-decoration: underline; }
.news .wp-block-read-more:hover::after { transform: translateX(3px); }

/* Siatka kart. Reguła `li { margin-bottom: .35em }` z sekcji 2 trafia też w
   pozycje pętli i rozjeżdża odstępy siatki. */
.wp-block-post-template { margin: 0; }
.wp-block-post-template > li { margin-bottom: 0; }
.news-grid .wp-block-post { height: 100%; }


/* --------------------------------------------------------------------------
   16. AKORDEON FAQ  (komponent 8)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { margin: 0; }
.faq-btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: none; border: 0; font: inherit; font-weight: 600; font-size: 17px;
  color: var(--navy); text-align: left; padding: 20px 0; cursor: pointer;
}
.faq-btn:hover { color: var(--brand-ink); }
.faq-chevron { flex-shrink: 0; color: var(--brand-ink); transition: transform .2s; margin-top: 3px; }
.faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-panel { padding: 0 0 22px; }
.faq-panel[hidden] { display: none; }
.faq-panel p { font-size: 16px; }

/* --------------------------------------------------------------------------
   17. PANEL FILTRÓW  (komponent 9)
   -------------------------------------------------------------------------- */
.library { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .library { grid-template-columns: 280px 1fr; gap: 40px; } }

.filters {
  background: var(--brand-pale); border: 0;
  border-radius: var(--r-card); padding: 22px 24px;
}
@media (min-width: 1024px) { .filters { position: sticky; top: 24px; } }

.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.filters-head h2 { font-size: 18px; }

/* Nagłówki w skali interfejsu (16-19 px) wracają do Work Sansa. Cormorant jest
   krojem do dużych stopni - przy tych rozmiarach gubi czytelność. Patrz 4.2 wytycznych. */
.filters-head h2,
.cookie h2,
.footer h2,
.footer h3,
.start-card h2 {
  font-family: var(--font); font-weight: 700; line-height: 1.3; letter-spacing: -.005em;
}

.filter-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-btn);
  font: inherit; font-weight: 600; color: var(--navy);
  padding: 13px 16px; min-height: 48px; cursor: pointer; margin-bottom: 16px;
}
@media (min-width: 1024px) { .filter-toggle { display: none; } }

.filter-group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.filter-group legend {
  font-size: 12px; font-weight: 700; color: var(--brand-ink);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px;
}

.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 15px; color: var(--ink-muted); }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.check:hover { color: var(--navy); }
.check-count { color: var(--ink-faint); font-size: 13px; margin-left: auto; padding-left: 8px; align-self: flex-start; }

.search-box { position: relative; margin-bottom: 20px; }
.search-box input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 16px 13px 46px; min-height: 50px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white);
}
.search-box input:focus { border-color: var(--navy); }
.search-box .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }

.results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.results-count { font-size: 16px; font-weight: 600; color: var(--navy); }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-light); color: var(--navy);
  border: 0; border-radius: var(--r-pill); font: inherit; font-size: 14px; font-weight: 600;
  padding: 6px 10px 6px 13px; cursor: pointer;
}
.chip:hover { background: var(--brand); }
.chip .ico { opacity: .7; }

.empty-state {
  text-align: center; padding: 56px 24px;
  background: var(--brand-pale); border: 1px dashed var(--brand-deep); border-radius: var(--r-card);
}
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { margin: 0 auto 20px; }

/* --------------------------------------------------------------------------
   18. BLOK KRYZYSOWY  (komponent 10)
   -------------------------------------------------------------------------- */
/* Blok kryzysowy. Zalana czerwień była czytelna, ale krzyczała - a to sekcja
   dla kogoś, kto już jest w napięciu. Zostaje spokojna karta z czerwoną
   krawędzią i czerwoną typografią; jedynym nasyconym elementem jest numer 112.
   Widoczność bierze się z miejsca na stronie i z krawędzi, nie z powierzchni. */
.crisis {
  background: var(--crisis-pale); color: var(--ink);
  border: 1px solid var(--crisis-line);
  border-left: 5px solid var(--crisis);
  border-radius: var(--r-card); padding: 28px 24px;
}
.crisis h2, .crisis h3 { color: var(--crisis-dark); }
.crisis p { color: var(--ink-muted); }
@media (min-width: 768px) { .crisis { padding: 36px 40px; } }

.crisis-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .crisis-list { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.crisis-item {
  background: var(--white); border: 1px solid var(--crisis-line);
  border-radius: 10px; padding: 16px 18px; margin: 0;
}
.crisis-item a {
  display: inline-block; font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  color: var(--crisis-dark); text-decoration: none;
}
.crisis-item a:hover { text-decoration: underline; }
.crisis-item .who { display: block; font-size: 15px; color: var(--ink); margin-top: 3px; }
.crisis-item .when { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 3px; }

/* 112 - jedyny nasycony element w całym bloku */
.crisis-item--emergency { background: var(--crisis); border-color: var(--crisis); }
.crisis-item--emergency a, .crisis-item--emergency .who { color: var(--white); }
.crisis-item--emergency .when { color: rgba(255,255,255,.85); }
.crisis-item--emergency :focus-visible { outline-color: var(--white); }

/* Przycisk w bloku kryzysowym - na jasnym tle wariant „ghost" byłby niewidoczny */
.crisis .btn--ghost-light { background: var(--white); color: var(--crisis-dark); border-color: var(--crisis); }
.crisis .btn--ghost-light:hover { background: var(--crisis); color: var(--white); border-color: var(--crisis); }

/* --------------------------------------------------------------------------
   19. PASEK FUNDUSZY EUROPEJSKICH  (komponent 11)
   Wymóg: widoczny na stronie głównej bez przewijania do samego dołu na telefonie,
   czyli jako osobna sekcja NAD stopką.
   -------------------------------------------------------------------------- */
.eu-bar { background: var(--white); border-top: 1px solid var(--line); padding: 32px 0; }
.eu-bar-inner { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .eu-bar-inner { grid-template-columns: minmax(0, 420px) 1fr; gap: 40px; } }
.eu-bar img { width: 100%; max-width: 420px; }
.eu-bar p { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); max-width: 75ch; }
.eu-tags { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--brand-ink); }

/* --------------------------------------------------------------------------
   20. STOPKA  (komponent 13)
   -------------------------------------------------------------------------- */
.footer { background: var(--navy); color: rgba(255,255,255,.82); padding: 56px 0 32px; }
.footer h2, .footer h3 { color: var(--white); font-size: 16px; margin-bottom: 14px; }
.footer p, .footer li { color: rgba(255,255,255,.82); font-size: 15px; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer-grid { display: grid; gap: 34px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }
.footer-grid ul { list-style: none; padding: 0; }
.footer-grid li { margin-bottom: 9px; }

.footer-help { background: rgba(255,255,255,.08); border-radius: var(--r-card); padding: 16px 18px; }
.footer-help .num { font-size: 19px; font-weight: 800; color: var(--white); display: block; text-decoration: none; }
.footer-help .num:hover { text-decoration: underline; }
.footer-help small { display: block; font-size: 13px; color: rgba(255,255,255,.72); }
.footer-help li + li { margin-top: 10px; }

/* Dane rejestrowe. Ten sam panel co blok pomocowy, ktory tu wczesniej stal -
   czwarta kolumna stopki zachowuje przez to swoj ciezar wizualny. */
.footer-reg { background: rgba(255,255,255,.08); border-radius: var(--r-card); padding: 16px 18px; }
.footer-reg-list { margin: 0; font-size: 14px; }
.footer-reg-list > div { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer-reg-list > div + div { margin-top: 8px; }
.footer-reg-list dt { color: rgba(255,255,255,.72); }
/* Dwukropek tylko przy pozycjach jednoliniowych. Przy adresie „Siedziba" jest
   etykieta nad trescia, a nie poczatkiem zdania - dwukropek bylby tam zbedny. */
.footer-reg-list > div:not(.footer-reg-adres) dt::after { content: ":"; }
/* Adres lamie sie na wlasne linie: etykieta u gory, pod nia ulica i miasto.
   Twarde spacje w tresci pilnuja, zeby nie odrywalo „ul." od nazwy ani kodu
   pocztowego od miasta. */
.footer-reg-list > div.footer-reg-adres { display: block; }
.footer-reg-list > div.footer-reg-adres dd { margin-top: 3px; line-height: 1.5; }
/* Cyfry o stalej szerokosci - numery ustawiaja sie w kolumne, latwiej je porownac. */
.footer-reg-list dd { margin: 0; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }

.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 14px;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; }
.footer-bottom li { margin: 0; font-size: 14px; }

/* --------------------------------------------------------------------------
   20b. MAPA STRONY
   -------------------------------------------------------------------------- */
.sitemap-group h2 { font-size: 20px; margin-bottom: 12px; }
.sitemap-group ul { list-style: none; padding: 0; margin: 0; }
.sitemap-group li {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sitemap-group li:last-child { border-bottom: 0; }
.sitemap-group a { font-weight: 600; }
/* Dopisek przy pozycji ma być wyraźnie słabszy od samego odnośnika,
   inaczej czyta się jak druga, konkurencyjna etykieta. */
.sitemap-note {
  display: block;
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   20c. DOKUMENT TEKSTOWY (deklaracja dostepnosci i podobne)
   -------------------------------------------------------------------------- */
/* Reset na gorze pliku zeruje marginesy WSZYSTKIEGO, wiec dlugi dokument
   zlozony w surowym wp:html sklejalby sie w jeden blok tekstu. Komponenty
   makiety ustawiaja odstepy same, ale dokument prawny zadnego komponentu
   nie uzywa - stad wlasny rytm pionowy. */
.legal-doc h2 {
  font-size: 26px;
  margin-top: 44px;
  margin-bottom: 14px;
}
.legal-doc > h2:first-child { margin-top: 0; }
@media (min-width: 768px) { .legal-doc h2 { font-size: 30px; } }
.legal-doc p { margin-bottom: 14px; }
.legal-doc ul { margin: 0 0 18px; padding-left: 24px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc .panel { margin: 18px 0 22px; }
.legal-doc .panel p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   20d. PASEK DOSTEPNOSCI: POWIEKSZENIE TEKSTU
   -------------------------------------------------------------------------- */
/* Wtyczka WP Accessibility po wcisnieciu „Przelacz rozmiar tekstu" nadaje
   <html> klase .fontsize i ustawia na niej font-size: 150%. U nas to NIC
   nie dawalo, bo cala typografia makiety jest w pikselach, wiec skalowanie
   korzenia jej nie dotyka (zmierzone: h1 pozostawal 58 px w obu stanach).
   Przycisk, ktory nic nie robi, jest gorszy niz jego brak, wiec podnosimy
   rozmiary jawnie.

   Skalujemy TYLKO tekst do czytania. Przyciski, plakietki i liczniki
   zostaja, bo maja stale wysokosci z makiety i rozjechalyby sie, a ich
   powiekszenie niczego nie wnosi. Kto potrzebuje powiekszyc absolutnie
   wszystko, uzywa powiekszania przegladarki, ktore dziala rownolegle. */
html.fontsize body,
html.fontsize p,
html.fontsize li,
html.fontsize dd,
html.fontsize dt { font-size: 20px; }
html.fontsize h1 { font-size: 46px; }
html.fontsize h2 { font-size: 36px; }
html.fontsize h3 { font-size: 23px; }
html.fontsize h4 { font-size: 21px; }
html.fontsize h1.as-h2 { font-size: 36px; }

@media (min-width: 768px) {
  html.fontsize h1 { font-size: 62px; }
  html.fontsize h2 { font-size: 46px; }
  html.fontsize h1.as-h2 { font-size: 46px; }
}
@media (min-width: 1024px) {
  html.fontsize body,
  html.fontsize p,
  html.fontsize li,
  html.fontsize dd,
  html.fontsize dt { font-size: 21px; }
  html.fontsize h1 { font-size: 70px; }
  html.fontsize h2 { font-size: 53px; }
  html.fontsize h3 { font-size: 25px; }
  html.fontsize h4 { font-size: 22px; }
  html.fontsize h1.as-h2 { font-size: 53px; }
}

/* --------------------------------------------------------------------------
   21. BANER COOKIES  (bez ciemnych wzorców - przyciski równorzędne)
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 180;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  padding: 22px; max-width: 720px; margin: 0 auto;
}
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 18px; margin-bottom: 8px; }
.cookie p { font-size: 15px; margin-bottom: 16px; }
.cookie-actions { display: grid; gap: 10px; }
@media (min-width: 560px) { .cookie-actions { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.cookie-actions .btn { justify-content: center; }
.cookie-more { margin-top: 12px; font-size: 14px; text-align: center; }

/* --------------------------------------------------------------------------
   22. BANER PODSTRONY
   -------------------------------------------------------------------------- */
.page-hero { background: var(--brand-light); padding: 36px 0 44px; }
@media (min-width: 768px) { .page-hero { padding: 48px 0 56px; } }
.page-hero-inner { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .page-hero-inner { grid-template-columns: 1.15fr 1fr; gap: 44px; } }
.page-hero p { font-size: 17px; color: var(--navy-soft); margin-top: 14px; }
.page-hero .hero-actions { margin-top: 24px; }

.breadcrumb { font-size: 14px; margin-bottom: 14px; }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { margin: 0; color: var(--ink-faint); font-size: 14px; }
.breadcrumb a { color: var(--brand-ink); }
/* W makiecie okruszki bez separatora "sklejały się" wizualnie w jeden
   ciąg tekstu (podkreślony link + szary tekst, tylko 6px odstępu) -
   dodany separator "/" przed każdą kolejną pozycją. */
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   23. LISTA KORZYŚCI
   -------------------------------------------------------------------------- */
.benefits { list-style: none; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .benefits { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.benefits li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.benefits .ico { flex-shrink: 0; color: var(--brand-ink); margin-top: 2px; }
.benefits strong { display: block; color: var(--navy); margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   24. PANEL WYRÓŻNIONY / SEKCJA UKRAIŃSKA
   -------------------------------------------------------------------------- */
.panel {
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--brand-deep);
  border-radius: var(--r-card); padding: 24px;
}
.panel--yellow { border-left-color: var(--yellow); background: var(--yellow-pale); }
.panel--yellow p, .panel--yellow li { color: #5C4A00; }
.panel--yellow h2, .panel--yellow h3 { color: #3D3100; }
/* Panel bywa uzywany zarowno pod h1 (wtedy jego naglowek to h2), jak
   i glebiej w sekcji (wtedy h3). Wyglad ma byc ten sam w obu wypadkach. */
.panel h2, .panel h3 { font-size: 19px; font-family: var(--font); font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
@media (min-width: 768px) { .panel { padding: 30px 32px; } }

/* Blok w języku ukraińskim - lang="uk" na elemencie, patrz WYTYCZNE punkt 7 */
.uk-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   25. INFOGRAFIKA - alternatywa tekstowa widoczna, nie ukryta w alt
   -------------------------------------------------------------------------- */
.figure-pair { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .figure-pair { grid-template-columns: 1.1fr 1fr; gap: 44px; } }
.figure-pair figcaption { font-size: 14px; color: var(--ink-faint); margin-top: 12px; }


/* --------------------------------------------------------------------------
   25b. STRONA WPISU AKTUALNOŚCI
   -------------------------------------------------------------------------- */
/* Kolumna tekstu jedzie w .wrap-narrow (820 px), bo globalne p { max-width: 70ch }
   samo nie wystarcza - przy .wrap 1200 px zdjęcie i nagłówek rozjeżdżałyby się
   szerzej niż akapity i tekst gubiłby oś. */

/* Powrót do listy nad tytułem: orientacja „gdzie jestem" zanim zacznie się
   czytanie. Strzałka w lewo to lustrzane odbicie .link-arrow z sekcji 4. */
.article-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600;
  color: var(--brand-ink); text-decoration: none;
  margin-bottom: 22px;
}
.article-back:hover { color: var(--navy); text-decoration: underline; }
.article-back .ico { transition: transform .15s; }
.article-back:hover .ico { transform: translateX(-3px); }

/* Kategoria przed datą i przed tytułem - najpierw „co to za rzecz", potem
   „kiedy", na końcu treść. Autora nie pokazujemy: nadawcą jest Fundacja,
   nie konto redakcyjne, a podpis konta wprowadzałby w błąd. */
.article-meta { gap: 10px 14px; align-items: center; margin-bottom: 18px; }
.article-meta .wp-block-post-terms a {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--white); color: var(--navy); text-decoration: none;
}
.article-meta .wp-block-post-terms a:hover { background: var(--brand); }
.article-meta .wp-block-post-date { font-size: 14px; color: var(--navy-soft); }

.article-hero .wp-block-post-title { margin: 0; font-size: 34px; line-height: 1.1; }
@media (min-width: 768px)  { .article-hero .wp-block-post-title { font-size: 44px; } }
@media (min-width: 1200px) { .article-hero .wp-block-post-title { font-size: 50px; } }

.article-media { margin: 0 0 34px; }
.article-media img { display: block; width: 100%; border-radius: var(--r-card); }
.article-media figcaption {
  margin-top: 10px; font-size: 14px; color: var(--ink-faint); text-align: center;
}

/* Treść wpisu. Stopień pisma o 1 px większy niż w interfejsie i luźniejsza
   interlinia - to jedyne miejsce w serwisie z dłuższym tekstem ciągłym. */
.article-body { font-size: 17px; line-height: 1.75; }
.article-body > * { margin-top: 22px; }
.article-body > *:first-child { margin-top: 0; }

/* Akapit wiodący wchodzi w tekst mocniejszym stopniem i ciemniejszym kolorem. */
.article-body > p:first-child { font-size: 19px; line-height: 1.65; color: var(--ink); }

.article-body h2 { margin-top: 46px; font-size: 26px; }
.article-body h3 { margin-top: 36px; }
@media (min-width: 768px) { .article-body h2 { font-size: 30px; } }

.article-body ul, .article-body ol { padding-left: 1.35em; }
.article-body li { margin-bottom: .5em; }
.article-body img { border-radius: var(--r-card); }
.article-body figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-faint); }

.article-body blockquote {
  margin-left: 0; margin-right: 0; padding: 18px 24px;
  background: var(--brand-pale);
  border-left: 4px solid var(--brand-deep);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.article-body blockquote p { font-size: 18px; color: var(--navy-soft); }
.article-body blockquote > *:first-child { margin-top: 0; }

.article-body hr {
  border: 0; border-top: 1px solid var(--line); margin-top: 40px;
}

/* Domknięcie tekstu: wyraźna krawędź i droga powrotna, żeby koniec wpisu nie
   był ślepym zaułkiem. */
.article-end {
  margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* Sąsiednie wpisy jako dwie karty, nie dwa gołe odnośniki - większy cel
   dotknięcia i widoczne, że to para. */
.post-nav { display: grid; gap: 14px; margin-top: 34px; }
/* Przy pierwszym i ostatnim wpisie rdzen renderuje pusty <div> dla brakujacego
   sasiada. Z ramka i paddingiem wygladal jak zepsuty kafelek. */
.post-nav .wp-block-post-navigation-link:empty { display: none; }
@media (min-width: 700px) {
  .post-nav { grid-template-columns: 1fr 1fr; }
  /* Kolumny przypisane na sztywno, zeby samotny „nastepny” nie przeskakiwal
     na lewa strone, gdzie jego wyrownanie do prawej nie mialoby sensu. */
  .post-nav .post-navigation-link-previous { grid-column: 1; }
  .post-nav .post-navigation-link-next { grid-column: 2; }
}
.post-nav .wp-block-post-navigation-link {
  position: relative;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.post-nav .wp-block-post-navigation-link:hover {
  border-color: var(--brand-deep); box-shadow: var(--shadow); transform: translateY(-2px);
}
/* Przy showTitle rdzeń zostawia etykietę POZA <a>, a w linku ląduje sam tytuł.
   Stąd etykieta i tytuł to dwa osobne elementy, nie zagnieżdżone. */
.post-nav .post-navigation-link__label {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-faint);
}
.post-nav .wp-block-post-navigation-link a {
  display: block; margin-top: 6px;
  font-size: 16px; line-height: 1.35; font-weight: 600;
  color: var(--navy); text-decoration: none;
}
.post-nav .wp-block-post-navigation-link a:hover { text-decoration: underline; }
/* Klikalna cała karta, nie sam tytuł - większy cel dotknięcia bez linii JS.
   Ognisko zostaje na tytule, więc obrys nadal pokazuje, co się aktywuje. */
.post-nav .wp-block-post-navigation-link a::after { content: ""; position: absolute; inset: 0; }
.post-nav .post-navigation-link-previous .post-navigation-link__label::before { content: "\2190\00a0"; }
.post-nav .post-navigation-link-next { text-align: right; }
.post-nav .post-navigation-link-next .post-navigation-link__label::after { content: "\00a0\2192"; }

/* --------------------------------------------------------------------------
   27. FORMULARZ KONTAKTOWY
   -------------------------------------------------------------------------- */
/* Sekcja 26 zdejmuje ograniczenie szerokosci ze wszystkich dzieci .wrap
   (`.wp-block-group.wrap.is-layout-flow > *`), a ta regula ma wyzsza specyficznosc
   niz samo .form - formularz rozlewal sie na cala szerokosc kolumny. Stad selektor
   dopasowany do tamtego wzorca, nie zwykle .form. */
.form,
.wp-block-group.wrap.is-layout-flow > .form,
.wp-block-group.wrap.is-layout-constrained > .form { max-width: 640px; }
.form-pole { margin-bottom: 20px; }
.form-pole label {
  display: block; margin-bottom: 7px;
  font-weight: 600; font-size: 15px; color: var(--navy);
}
.form-wymagane { font-weight: 500; color: var(--ink-faint); font-size: 13px; }

.form-pole input[type="text"],
.form-pole input[type="email"],
.form-pole textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; min-height: 48px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-btn);
}
.form-pole textarea { min-height: 0; resize: vertical; line-height: 1.6; }
.form-pole input:focus-visible,
.form-pole textarea:focus-visible { border-color: var(--navy); }

/* Pole z błędem dostaje ramkę I komunikat pod spodem - sam kolor nie wystarcza,
   bo nie każdy go rozróżni (WCAG 1.4.1). */
.form-pole [aria-invalid="true"] { border-color: var(--crisis); border-width: 2px; }
.form-blad { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--crisis-dark); }

.form-pole--zgoda label {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; font-weight: 500; font-size: 15px; color: var(--ink-muted);
}
.form-pole--zgoda input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); }

.form-nota { font-size: 14px; color: var(--ink-faint); margin: 0 0 22px; max-width: 640px; }

/* Komunikat po wysyłce. Ikona byłaby ozdobą - liczy się to, że blok jest ogłaszany
   przez czytnik ekranu (role="status" i role="alert" w markupie). */
.form-status {
  padding: 16px 20px; border-radius: var(--r-card);
  margin-bottom: 24px; max-width: 640px;
}
.form-status strong { display: block; margin-bottom: 4px; color: var(--navy); }
.form-status p { margin: 0; font-size: 15px; }
.form-status ul { margin: 8px 0 0; padding-left: 1.2em; }
.form-status li { font-size: 15px; margin-bottom: 4px; }
.form-status--ok { background: var(--brand-light); border-left: 4px solid var(--brand-deep); }
.form-status--blad { background: var(--crisis-pale); border-left: 4px solid var(--crisis); }
.form-status--blad strong, .form-status--blad a { color: var(--crisis-dark); }

/* Widget Turnstile. Cloudflare rysuje go w ramce o własnej wysokości,
   my dajemy tylko odstęp od reszty formularza. */
.form-turnstile { margin-bottom: 22px; }

/* Pułapka na boty. Nie display:none - część automatów pomija pola ukryte w ten
   sposób. Wyprowadzamy je poza ekran, a przed czytnikiem i klawiaturą chronią
   aria-hidden i tabindex w markupie. */
.form-pulapka {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   28. STRONA KONTAKTU - dane obok formularza
   -------------------------------------------------------------------------- */
/* Podział na pół zamiast danych nad formularzem: obie rzeczy widać na jednym
   ekranie, bez przewijania od adresu do pola „napisz do nas". Kolumna danych jest
   węższa, bo to krótkie wiersze; formularz dostaje więcej miejsca, bo pola
   potrzebują szerokości. align-items: start, żeby krótsza kolumna nie rozciągała
   się na wysokość dłuższej. */
.kontakt-uklad { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) {
  .kontakt-uklad { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 56px; }
}

.kontakt-dane h2 { margin-bottom: 10px; }
.kontakt-lead { margin-bottom: 28px; }

.kontakt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.kontakt-lista li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: start; margin: 0;
}
.kontakt-ikona {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--brand-light); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kontakt-lista h3 { font-size: 16px; margin-bottom: 4px; }
.kontakt-lista p { font-size: 15px; margin: 0; line-height: 1.55; }

/* Formularz w miękkim panelu - wyodrębnia część, w której coś się robi,
   od części, którą się tylko czyta. */
.kontakt-formularz {
  background: var(--brand-pale);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px 22px;
}
@media (min-width: 700px) { .kontakt-formularz { padding: 32px; } }
.kontakt-formularz h2 { font-size: 24px; margin-bottom: 22px; }

/* W panelu formularz ma wypełnić kolumnę - ograniczenie do 640 px dotyczy tylko
   układu, w którym formularz stoi samotnie na pełnej szerokości strony. */
.kontakt-formularz .form,
.kontakt-formularz .form-nota,
.kontakt-formularz .form-status { max-width: none; }

/* --------------------------------------------------------------------------
   26. WARSTWA ZGODNOŚCI Z EDYTOREM BLOKÓW
   WordPress opakowuje sekcje we własne kontenery (.wp-block-group i klasy
   układu). Poniższe reguły pilnują, żeby te kontenery nie nadpisywały układu
   przeniesionego z makiety. Nie zmieniaj tu wyglądu - tylko zgodność.
   -------------------------------------------------------------------------- */

/* Grupy bloków niosące nasze klasy nie mogą dostawać własnych marginesów
   ani ograniczeń szerokości od układu rdzenia. */
.wp-block-group.section,
.wp-block-group.wrap,
.wp-block-group.hero,
.wp-block-group.eu-bar {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Rdzeń ustawia .is-layout-constrained > * na contentSize; nasze wrappery
   mają własną szerokość i wyśrodkowanie z makiety. */
.wp-block-group.wrap.is-layout-constrained > *,
.wp-block-group.wrap.is-layout-flow > * {
  max-width: none;
}

/* Treść strony wstawiona blokiem post-content nie dokłada własnego pudełka. */
main > .entry-content > *,
main > .wp-block-post-content > * {
  margin-block-start: 0;
}

/* Strony złożone ze wzorców (dla-ucznia, materialy...) wstawiają własne
   pełnoszerokie sekcje <section class="section">, każda z własnym .wrap
   i odstępami - .page-content nie może im niczego narzucać. Strony bez
   wzorca (polityka prywatności, kontakt...) wstawiają gołe bloki rdzenia
   (akapit/lista/nagłówek) wprost do post-content - te trzeba samemu
   wyśrodkować i ograniczyć do czytelnej szerokości, inaczej tekst
   rozlewa się od krawędzi do krawędzi ekranu bez żadnego marginesu. */
/* UWAGA na selektor: NIE wolno tu użyć :not(section). Wzorce owinięte
   w wp:group renderują się jako <div class="section">, czyli element DIV
   z klasą "section" - :not(section) to selektor ELEMENTU, więc taki div
   przechodzi przez niego i dostaje 760px, ściskając całą sekcję
   (zdarzyło się: 9 wzorców na kilku stronach, karty zwężone do 177px).
   Dlatego wymieniamy wprost gołe bloki rdzenia, których szukamy. */
.page-content > .wp-block-post-content > p,
.page-content > .wp-block-post-content > h1,
.page-content > .wp-block-post-content > h2,
.page-content > .wp-block-post-content > h3,
.page-content > .wp-block-post-content > h4,
.page-content > .wp-block-post-content > h5,
.page-content > .wp-block-post-content > h6,
.page-content > .wp-block-post-content > ul,
.page-content > .wp-block-post-content > ol,
.page-content > .wp-block-post-content > hr,
.page-content > .wp-block-post-content > table,
.page-content > .wp-block-post-content > blockquote,
.page-content > .wp-block-post-content > figure,
.page-content > .wp-block-post-content > .wp-block-table,
.page-content > .wp-block-post-content > .wp-block-quote,
.page-content > .wp-block-post-content > .wp-block-image,
.page-content > .wp-block-post-content > .wp-block-separator {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.page-content > .wp-block-post-content > p + p,
.page-content > .wp-block-post-content > p + ul,
.page-content > .wp-block-post-content > p + ol,
.page-content > .wp-block-post-content > ul + p,
.page-content > .wp-block-post-content > ol + p,
.page-content > .wp-block-post-content > ul + ul,
.page-content > .wp-block-post-content > ol + ol {
  margin-top: 20px;
}
.page-content > .wp-block-post-content > h1,
.page-content > .wp-block-post-content > h2,
.page-content > .wp-block-post-content > h3,
.page-content > .wp-block-post-content > h4 {
  margin-top: 36px;
}
/* Odstęp od góry i dołu dostają WYŁĄCZNIE gołe bloki rdzenia. Wcześniej
   reguła siedziała na samym :first-child i łapała też <section class="page-hero">
   na stronach złożonych ze wzorców - stąd biała dziura między menu a nagłówkiem
   podstrony (zgłoszone przez klienta 27.08.2026). Lista jest ta sama co przy
   regułach szerokości wyżej; nie skracaj jej do :not(section), bo wzorce
   renderują się też jako DIV z klasą section. */
.page-content > .wp-block-post-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, hr, table, blockquote, figure, .wp-block-table, .wp-block-quote, .wp-block-image, .wp-block-separator):first-child {
  margin-top: var(--sec);
}
.page-content > .wp-block-post-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, hr, table, blockquote, figure, .wp-block-table, .wp-block-quote, .wp-block-image, .wp-block-separator):last-child {
  margin-bottom: var(--sec);
}
/* Te dwie reguly TEZ musza byc zakotwiczone na bezposrednim potomku.
   Bez ">" lapaly kazda liste w komponentach wzorcow: okruszki dostawaly
   wciecie 24 px i 8 px marginesu na drugiej pozycji (przez co pierwsza
   pozycja wypadala z jednej linii z reszta), a .steps i .panel wciecie,
   ktorego makieta nie ma. */
.page-content > .wp-block-post-content > ol > li + li,
.page-content > .wp-block-post-content > ul > li + li { margin-top: 8px; }
.page-content > .wp-block-post-content > ol,
.page-content > .wp-block-post-content > ul { padding-left: 24px; }

/* Bloki listy i akapitu w naszych komponentach nie mają dziedziczyć
   domyślnych marginesów rdzenia, bo komponenty ustawiają własne odstępy. */
.crisis-list,
.footer-help,
.footer-links,
.steps,
.tiles {
  margin: 0;
}

/* Przyciski rdzenia w naszych komponentach mają wyglądać jak .btn z makiety. */
.wp-block-button__link.btn,
.hero-actions .wp-block-button__link {
  border-radius: var(--r-btn);
}

/* Reset ramki fieldsetu. W makiecie jej brak był realnym defektem: domyślna
   ramka przeglądarki rysowała pudełko w pudełku w panelu filtrów.
   Uwaga: .filter-group fieldset NIE trafia w <fieldset class="filter-group">. */
fieldset { border: 0; min-width: 0; padding: 0; margin: 0; }
legend { padding: 0; }

/* Rdzeń generuje dla każdej grupy własną regułę układu (np.
   .wp-container-core-group-is-layout-xxxx{display:grid}) o specyficzności 0,1,0,
   która bije [data-slide]{display:none} z sekcji 8 i pokazywała OBA slajdy naraz.
   Zmierzone: slajd z data-active="false" miał getComputedStyle().display === "grid".
   Podnosimy specyficzność zamiast sięgać po !important. */
.wp-block-group[data-slide]:not([data-active="true"]),
[data-slide]:not([data-active="true"]) { display: none; }
.wp-block-group[data-slide][data-active="true"] { display: block; }

/* Arkusz bloków rdzenia (wp-block-library) ładuje się PO stylach motywu, a jego
   .wp-block-navigation{display:flex} i .wp-block-buttons{display:flex} mają tę samą
   specyficzność co .nav i .header-cta z sekcji 7. Wygrywa więc kolejność, nie zamiar,
   i menu desktopowe pokazywało się na telefonie obok hamburgera.
   Zmierzone przy 390 px: getComputedStyle('.nav').display === 'flex'.
   Powtarzamy reguły responsywne nagłówka z wyższą specyficznością. */
.wp-block-navigation.nav { display: none; }
.wp-block-buttons.header-cta { display: none; }
@media (min-width: 1024px) {
  .wp-block-navigation.nav { display: flex; align-items: center; gap: 2px; }
  .wp-block-buttons.header-cta { display: flex; align-items: center; gap: 10px; }
}

.przyjazna-sr-only, a[target="_blank"]::after { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a[target="_blank"]::after { content: " (otwiera nowe okno)"; }

/* --------------------------------------------------------------------------
   PRZEŁĄCZNIK JĘZYKA PL / UA
   Style przeniesione z instalacji zachodniopomorskiej (2026-09-08). Nie było ich
   w repozytorium motywu - powstały tam po naszym punkcie odcięcia, razem
   z mu-pluginem językowym. Zmienna tła zmieniona z --mint-light na --brand-light.
   -------------------------------------------------------------------------- */
.przelacznik-jezyka {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: auto; margin-right: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
@media (min-width: 1024px) { .przelacznik-jezyka { margin-right: 14px; } }

.przelacznik-jezyka a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 8px;
  color: var(--ink-muted); text-decoration: none;
  border-radius: var(--r-btn);
}
.przelacznik-jezyka a:hover { color: var(--navy); background: var(--brand-light); }

/* Aktywny język poznaje się po tle i kolorze, a nie po samym kolorze -
   sam kolor nie wystarcza (WCAG 1.4.1). W markupie niesie też aria-current. */
.przelacznik-jezyka a[aria-current="true"] {
  color: var(--navy); background: var(--brand-light);
}
.przelacznik-jezyka-sep { color: var(--line); }