/*
Theme Name: Koło PSONI w Tczewie
Theme URI: https://psonitczew.pl
Description: Motyw potomny Divi dla Koła PSONI w Tczewie. Paleta wyprowadzona z logo, poprawki dostępności WCAG 2.1 AA, przełącznik wysokiego kontrastu i wielkości tekstu.
Author: Agencja Latem
Author URI: https://agencjalatem.pl
Template: Divi
Version: 1.13.0
Text Domain: psoni-tczew
*/

/* 1.0.1 — skip link przenosi fokus do treści, nie tylko przewija stronę      */
/* 1.13.0 — nazwa zastępcza na kafelku wpisu bez tytułu (import ze starej  */
/*          strony zostawił sporo wpisów-grafik bez tytułu)               */
/* 1.12.0 — własne kafelki wpisów zamiast modułu bloga Divi: tytuł, zdjęcie  */
/*          wyróżniające, siatka 3/2/1, filtry po kategoriach, stronicowanie;*/
/*          typ wpisu „galeria"; niższy pasek tytułu; większe loga partnerów */
/* 1.11.0 — równa siatka galerii zdjęć w pracowniach (blok galerii edytora) */
/* 1.10.0 — miara wiersza 71% zamiast 55%, jednolicie dla list i akapitów;  */
/*          pasek spisu wyłączony w pracowniach; menu bez podświetlenia    */
/* 1.9.0 — podświetlenie zamiast podkreśleń, płynne kotwice, bez pustego    */
/*         pola na stronie głównej, odsiew akapitów przebranych za nagłówki */
/* 1.8.0 — skrócone etykiety na pasku (jeden rząd), ciasne odstępy akapitów */
/*         i list, wycinanie pustych akapitów z treści                     */
/* 1.7.0 — bursztynowy pasek spisu treści pod menu, kotwice przy nagłówkach */
/* 1.6.0 — oprawa stron treściowych: nagłówek z okruszkami, miara wiersza, */
/*         listy, tabele, pliki do pobrania; autoskalowanie zdjęć przy     */
/*         wgrywaniu do 1600 px                                            */
/* 1.5.0 — jedna ramka kafla, oddech w kafelkach wpisów, trzy kolumny      */
/* 1.4.0 — submenu nie przelewa tła, powiększanie tekstu działa na Divi,   */
/*         cofnięta błędna siatka wpisów z 1.3.0                            */
/* 1.3.0 — równa siatka galerii, logotypy partnerów w kolorze               */
/* 1.2.0 — NAPRAWA: arkusz nie był wypisywany, bo zależał od uchwytu        */
/*         „divi-style”, który Divi 5 zdejmuje w trakcie ładowania.         */
/*         Pasek dostępności wstawia się teraz sam, bez Theme Buildera.     */

/* ==========================================================================
   1. PALETA — wyprowadzona z logo Koła
   Amber na białym daje 2,03:1 i NIE NADAJE SIĘ NA TEKST.
   Do tekstu i linków służy --psoni-amber-tekst (5,9:1 na białym).
   ========================================================================== */

:root {
  --psoni-grafit:       #231F20;  /* tekst podstawowy — 14,2:1 na białym */
  --psoni-amber:        #F9A33E;  /* TYLKO tła, obramowania, akcenty */
  --psoni-amber-jasny:  #FDBB4C;  /* hover na tłach */
  --psoni-amber-tekst:  #8A5A00;  /* linki i tekst — 5,9:1 na białym */
  --psoni-amber-ciemny: #7A4E00;  /* hover linków — 7,2:1 */
  --psoni-szary:        #55575C;  /* podpisy, metadane — 7,2:1 */
  --psoni-linia:        #E5E1DC;
  --psoni-tlo:          #FFFFFF;
  --psoni-tlo-alt:      #FDF8F0;  /* delikatny odcień amber na sekcje */

  --psoni-passe:        #F4F1EC;  /* podkład kafelka galerii — jak passe-partout */

  --psoni-focus:        #7A4E00;
  --psoni-radius:       4px;
}

/* ==========================================================================
   2. DOSTĘPNOŚĆ — fokus klawiatury
   Divi domyślnie kasuje obrys fokusu. Przywracamy go z podwójnym obrysem,
   żeby był widoczny i na jasnym, i na ciemnym tle.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.et_pb_button:focus-visible,
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible {
  outline: 3px solid var(--psoni-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #FFFFFF !important;
  border-radius: var(--psoni-radius);
}

/* Fokus na ciemnych sekcjach */
.et_pb_section_dark a:focus-visible,
.et_pb_section_dark button:focus-visible,
#main-footer a:focus-visible {
  outline-color: var(--psoni-amber-jasny) !important;
  box-shadow: 0 0 0 5px var(--psoni-grafit) !important;
}

/* ==========================================================================
   3. LINK DO POMINIĘCIA NAWIGACJI
   ========================================================================== */

.psoni-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  padding: 14px 22px;
  background: var(--psoni-grafit);
  color: #FFFFFF !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--psoni-radius) 0;
}

.psoni-skip-link:focus {
  left: 0;
  outline: 3px solid var(--psoni-amber) !important;
  outline-offset: -3px;
}

/* ==========================================================================
   4. LINKI W TREŚCI
   WCAG 1.4.1: kolor nie może być jedynym wyróżnikiem linku.
   W blokach treści linki są podkreślone. W menu i przyciskach nie muszą.
   ========================================================================== */

.et_pb_text a,
.entry-content a,
.et_pb_post_content a,
.psoni-tresc a {
  color: var(--psoni-amber-tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.et_pb_text a:hover,
.entry-content a:hover,
.et_pb_post_content a:hover,
.psoni-tresc a:hover {
  color: var(--psoni-amber-ciemny);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   5. CELE DOTYKOWE
   WCAG 2.5.5 — minimum 44x44 px dla elementów klikalnych na dotyku.
   ========================================================================== */

@media (pointer: coarse) {
  .et_pb_button,
  #top-menu a,
  .et_mobile_menu a,
  .psoni-a11y-btn,
  button[type="submit"],
  input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   6. PASEK DOSTĘPNOŚCI
   Dwa przyciski: wysoki kontrast i wielkość tekstu.
   Nie jest to "nakładka dostępnościowa" — to sterowanie klasami na <html>,
   bez przechwytywania strony i bez ingerencji w treść.
   ========================================================================== */

.psoni-a11y {
  display: flex;
  gap: 6px;
  align-items: center;
}

.psoni-a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--psoni-linia);
  border-radius: var(--psoni-radius);
  color: var(--psoni-grafit);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.psoni-a11y-btn:hover {
  background: var(--psoni-amber);
  border-color: var(--psoni-amber);
  color: var(--psoni-grafit);
}

.psoni-a11y-btn[aria-pressed="true"] {
  background: var(--psoni-grafit);
  border-color: var(--psoni-grafit);
  color: #FFFFFF;
}

/* --- Panel pływający przy lewej krawędzi -------------------------------- */

.psoni-a11y--panel {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99998;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--psoni-grafit);
  border-radius: 0 var(--psoni-radius) var(--psoni-radius) 0;
  box-shadow: 0 2px 14px rgba(35, 31, 32, .22);
}

.psoni-a11y--panel .psoni-a11y-btn {
  flex-direction: column;
  gap: 3px;
  width: 62px;
  padding: 9px 4px;
  border-color: transparent;
  background: transparent;
  color: #FFFFFF;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.psoni-a11y--panel .psoni-a11y-btn span[aria-hidden],
.psoni-a11y--panel .psoni-a11y-label {
  font-size: 19px;
  line-height: 1;
  color: var(--psoni-amber);
}

.psoni-a11y--panel .psoni-a11y-btn:hover,
.psoni-a11y--panel .psoni-a11y-btn[aria-pressed="true"] {
  background: var(--psoni-amber);
  border-color: var(--psoni-amber);
  color: var(--psoni-grafit);
}

.psoni-a11y--panel .psoni-a11y-btn:hover span[aria-hidden],
.psoni-a11y--panel .psoni-a11y-btn:hover .psoni-a11y-label,
.psoni-a11y--panel .psoni-a11y-btn[aria-pressed="true"] span[aria-hidden],
.psoni-a11y--panel .psoni-a11y-btn[aria-pressed="true"] .psoni-a11y-label {
  color: var(--psoni-grafit);
}

/* Pasek admina WordPressa zasłaniałby panel przy górnej krawędzi — na
   telefonie panel i tak idzie na dół, więc kolizji nie ma. */
@media (max-width: 980px) {
  .psoni-a11y--panel {
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    flex-direction: row;
    border-radius: var(--psoni-radius) var(--psoni-radius) 0 0;
  }
  .psoni-a11y--panel .psoni-a11y-btn {
    width: auto;
    min-width: 74px;
  }
}

/* Tryb wysokiego kontrastu — panel też musi się przełączyć, inaczej zostaje
   jedynym kolorowym elementem na czarno-żółtej stronie. */
html.psoni-kontrast .psoni-a11y--panel {
  background: #000000;
  border: 2px solid #FFFF00;
  border-left: 0;
}

html.psoni-kontrast .psoni-a11y--panel .psoni-a11y-btn,
html.psoni-kontrast .psoni-a11y--panel .psoni-a11y-btn span {
  color: #FFFF00 !important;
}

html.psoni-kontrast .psoni-a11y--panel .psoni-a11y-btn:hover,
html.psoni-kontrast .psoni-a11y--panel .psoni-a11y-btn[aria-pressed="true"] {
  background: #FFFF00;
}

html.psoni-kontrast .psoni-a11y--panel .psoni-a11y-btn:hover span,
html.psoni-kontrast .psoni-a11y--panel .psoni-a11y-btn[aria-pressed="true"] span {
  color: #000000 !important;
}

/* ==========================================================================
   7. WIELKOŚĆ TEKSTU — trzy kroki
   ========================================================================== */

/* DLACZEGO NIE font-size NA <html>

   Pierwotnie było tu html.psoni-fs-2{font-size:112.5%}. Nie działało i nie
   miało prawa zadziałać: skalowanie korzenia rusza tylko to, co wyrażono
   w rem albo w procentach, a Divi ustawia rozmiary w pikselach — w swoim
   arkuszu i w CSS generowanym z atrybutów modułów. Sam to pogłębiłem,
   wpisując na stronie głównej text_font_size="20px" i podobne. Piksel nie
   reaguje na rem, więc przycisk się przełączał, klasa siadała na <html>,
   etykieta zmieniała się na A+ i A++, a na stronie nic.

   zoom skaluje wyliczone wartości niezależnie od jednostki, więc działa na
   piksele Divi. Przy okazji skaluje też odstępy i zdjęcia, czyli zachowuje
   się jak powiększenie strony — i o to chodzi osobie słabowidzącej, bo sam
   większy krój w niezmienionej kolumnie daje ciasny, gorzej czytelny blok.

   Nagłówek zostaje w oryginalnej skali celowo: powiększone menu na wąskim
   ekranie zaczyna się łamać, a nawigacja ma pozostać przewidywalna. */

html.psoni-fs-2 #et-main-area { zoom: 1.15; }
html.psoni-fs-3 #et-main-area { zoom: 1.30; }

/* Firefox do wersji 126 nie znał zoom. Rezerwowo skalujemy to, co i tak
   dziedziczy rozmiar po rodzicu — mniej dokładnie, ale lepiej niż nic. */
@supports not (zoom: 1) {
  html.psoni-fs-2 #et-main-area { font-size: 115%; }
  html.psoni-fs-3 #et-main-area { font-size: 130%; }
  html.psoni-fs-2 #et-main-area p,
  html.psoni-fs-2 #et-main-area li,
  html.psoni-fs-3 #et-main-area p,
  html.psoni-fs-3 #et-main-area li {
    font-size: 1.15em !important;
  }
}

html.psoni-fs-2 body,
html.psoni-fs-3 body {
  line-height: 1.7;
}

/* ==========================================================================
   8. WYSOKI KONTRAST
   Czarne tło, żółty tekst — konwencja polskich serwisów publicznych.
   #FFFF00 na #000000 daje 19,6:1.
   ========================================================================== */

html.psoni-kontrast,
html.psoni-kontrast body,
html.psoni-kontrast #page-container,
html.psoni-kontrast .et_pb_section,
html.psoni-kontrast .et_pb_row,
html.psoni-kontrast #main-header,
html.psoni-kontrast #main-footer,
html.psoni-kontrast .et_pb_module,
html.psoni-kontrast .et_mobile_menu,
html.psoni-kontrast #top-menu li ul {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFF00 !important;
}

html.psoni-kontrast h1,
html.psoni-kontrast h2,
html.psoni-kontrast h3,
html.psoni-kontrast h4,
html.psoni-kontrast h5,
html.psoni-kontrast h6,
html.psoni-kontrast p,
html.psoni-kontrast li,
html.psoni-kontrast td,
html.psoni-kontrast th,
html.psoni-kontrast span,
html.psoni-kontrast strong {
  color: #FFFF00 !important;
}

html.psoni-kontrast a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

html.psoni-kontrast a:hover,
html.psoni-kontrast a:focus-visible {
  color: #000000 !important;
  background: #FFFF00 !important;
}

html.psoni-kontrast .et_pb_button,
html.psoni-kontrast button,
html.psoni-kontrast input,
html.psoni-kontrast textarea,
html.psoni-kontrast select {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
}

html.psoni-kontrast table,
html.psoni-kontrast th,
html.psoni-kontrast td {
  border: 1px solid #FFFF00 !important;
}

/* Zdjęcia w wysokim kontraście: przygaszone, ale nie ukryte —
   dla osób słabowidzących obraz nadal niesie informację. */
html.psoni-kontrast img {
  filter: grayscale(100%) contrast(120%);
}

html.psoni-kontrast .psoni-a11y-btn {
  border-color: #FFFF00 !important;
}

/* ==========================================================================
   9. OGRANICZENIE ANIMACJI
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   10. TYPOGRAFIA I CZYTELNOŚĆ
   ========================================================================== */

.et_pb_text p,
.entry-content p,
.et_pb_post_content p {
  max-width: 62ch;
}

.et_pb_text h2,
.entry-content h2 {
  text-wrap: balance;
}

/* Tabele — na wąskim ekranie przewijamy tabelę, nie całą stronę */
.wp-block-table {
  overflow-x: auto;
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--psoni-linia);
  padding: 10px 14px;
  text-align: left;
}

.wp-block-table th {
  background: var(--psoni-tlo-alt);
  font-weight: 700;
}

/* ==========================================================================
   11. ELEMENTY MARKI
   ========================================================================== */

.psoni-blok-amber {
  background: var(--psoni-amber);
  color: var(--psoni-grafit);
}

.psoni-blok-amber a {
  color: var(--psoni-grafit);
  text-decoration: underline;
}

.psoni-blok-grafit {
  background: var(--psoni-grafit);
  color: #FFFFFF;
}

.psoni-blok-grafit a {
  color: var(--psoni-amber-jasny);
}

.psoni-sekcja-alt {
  background: var(--psoni-tlo-alt);
}

/* ==========================================================================
   12. DRUK
   ========================================================================== */

@media print {
  .psoni-a11y,
  .psoni-skip-link,
  #main-header,
  #main-footer,
  .et_pb_widget_area {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 12pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #444444;
  }
}

/* ==========================================================================
   13. CEL SKIP LINKU
   #main-content dostaje fokus programowo po kliknięciu "Przejdź do treści".
   Obrys wokół całego kontenera treści byłby mylący — fokus i tak jest
   sygnalizowany przewinięciem i kolejnym Tabem wewnątrz treści.
   ========================================================================== */

#main-content:focus,
#main-content:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   14. TYPOGRAFIA CAŁEGO SERWISU
   Divi domyślnie daje wąską, bladą typografię. Ustawiamy skalę raz, tutaj.
   ========================================================================== */

body,
#page-container,
.et_pb_text,
.entry-content {
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--psoni-grafit);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.entry-title {
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  color: var(--psoni-grafit);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1, .entry-title, .et_pb_title_container h1 {
  font-size: clamp(32px, 4.6vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}

h2 {
  font-size: clamp(25px, 3.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding-bottom: 0 !important;
  margin-top: 44px !important;
  margin-bottom: 16px !important;
}

h3 {
  font-size: 21px !important;
  font-weight: 600 !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
}

.entry-content p,
.et_pb_text p {
  margin-bottom: 18px;
}

.entry-content ul,
.et_pb_text ul {
  margin-bottom: 20px;
  padding-left: 22px;
}

.entry-content li {
  margin-bottom: 8px;
}

/* ==========================================================================
   15. NAGŁÓWEK — wygląd zanim powstanie szablon w Theme Builderze
   ========================================================================== */

#main-header {
  background: var(--psoni-tlo) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--psoni-linia);
}

#main-header .container {
  padding-top: 6px;
  padding-bottom: 6px;
}

#logo {
  max-height: 62px !important;
  width: auto !important;
}

#top-menu li a {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: var(--psoni-grafit) !important;
  padding-bottom: 20px !important;
  opacity: 1 !important;
}

#top-menu li a:hover {
  color: var(--psoni-amber-tekst) !important;
  opacity: 1 !important;
}

/* Aktywna pozycja menu — podświetlenie, nie kreska.
   Kreska pod pozycją zjadała też pion tekstu, bo doliczała się do wysokości. */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_ancestor > a {
  color: var(--psoni-amber-ciemny) !important;
}

/* Rozwijane menu.

   BŁĄD, KTÓRY TU BYŁ: odnośnikom dawałem width:240px i do tego padding 18px
   z każdej strony. Bez border-box to jest 240 + 36 = 276 px wewnątrz listy
   szerokiej na 240 px, więc tło pozycji wychodziło poza obrys po prawej.
   Divi robi to inaczej — ma a{width:200px} i padding 20px, co daje równo 240.
   Skopiowałem szerokość listy zamiast szerokości odnośnika.

   Teraz lista dopasowuje się do najdłuższej pozycji w rozsądnych granicach,
   a odnośnik jest blokowy i liczony razem z paddingiem, więc nie ma jak wystać. */
#top-menu li ul {
  width: auto !important;
  min-width: 250px;
  max-width: 330px;
  background: var(--psoni-tlo) !important;
  border: 1px solid var(--psoni-linia);
  border-top: 3px solid var(--psoni-amber) !important;
  box-shadow: 0 10px 30px rgba(35, 31, 32, .10) !important;
  padding: 8px 0 !important;
}

#top-menu li ul li {
  width: 100%;
}

#top-menu li ul li a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 9px 18px !important;
  white-space: normal;
  line-height: 1.35;
}

#top-menu li ul li a:hover {
  background: var(--psoni-tlo-alt);
}

/* Trzeci poziom (Zamówienia publiczne → Zapytania ofertowe) wysuwa się w bok.
   Musi mieć własne pozycjonowanie, bo dziedziczy left od rodzica. */
#top-menu li ul li ul {
  left: 100%;
  top: -9px;
}

/* Wyróżniony odnośnik 1,5% — dodaj klasę CSS "menu-15" pozycji menu */
#top-menu li.menu-15 > a {
  background: var(--psoni-amber);
  color: var(--psoni-grafit) !important;
  border-radius: var(--psoni-radius);
  padding: 9px 16px !important;
  margin-left: 8px;
}

#top-menu li.menu-15 > a:hover {
  background: var(--psoni-amber-jasny);
  color: var(--psoni-grafit) !important;
}

.et_mobile_menu {
  border-top: 3px solid var(--psoni-amber) !important;
}

.et_mobile_menu li a {
  font-weight: 600;
  color: var(--psoni-grafit) !important;
  border-bottom: 1px solid var(--psoni-linia) !important;
}

/* ==========================================================================
   16. UKŁAD TREŚCI
   ========================================================================== */

#main-content .container {
  padding-top: 54px;
}

#left-area {
  padding-bottom: 40px;
}

.single #left-area,
.page #left-area {
  padding-right: 46px;
}

/* Panel boczny */
#sidebar .widget_title,
#sidebar h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: none;
  color: var(--psoni-grafit) !important;
  padding-bottom: 10px;
  margin-bottom: 14px !important;
  border-bottom: 3px solid var(--psoni-amber);
}

#sidebar .et_pb_widget {
  margin-bottom: 34px;
  font-size: 16px;
}

#sidebar ul li {
  padding: 6px 0;
  border-bottom: 1px solid var(--psoni-linia);
}

#sidebar a {
  color: var(--psoni-grafit);
}

#sidebar a:hover {
  color: var(--psoni-amber-tekst);
}

/* ==========================================================================
   17. STOPKA — wygląd zanim powstanie szablon w Theme Builderze
   ========================================================================== */

#main-footer {
  background: var(--psoni-grafit) !important;
}

#footer-widgets {
  padding: 56px 0 20px !important;
}

#footer-widgets .footer-widget h4,
#footer-widgets .title {
  font-family: 'Archivo', system-ui, sans-serif;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  margin-bottom: 14px !important;
}

#footer-widgets .footer-widget,
#footer-widgets li,
#footer-widgets p {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 15.5px;
}

#footer-widgets a {
  color: var(--psoni-amber-jasny) !important;
}

#footer-widgets li {
  border: 0 !important;
  padding: 5px 0 !important;
}

#footer-widgets li:before {
  display: none !important;
}

#footer-bottom {
  background: #000000 !important;
  padding: 16px 0 !important;
}

#footer-info,
#footer-info a {
  color: rgba(255, 255, 255, .7) !important;
  font-size: 14px;
}

/* ==========================================================================
   18. STRONA GŁÓWNA — klasy używane przez układ w Divi
   ========================================================================== */

.psoni-hero {
  background: var(--psoni-tlo-alt) !important;
  position: relative;
  overflow: hidden;
}

/* Motyw słońca z logo, rysowany w CSS — bez dodatkowych plików.
   Ośmiokąt przycięty przez overflow:hidden dawał w rogu ostrą przekątną, która
   czytała się jak błąd renderowania, a nie jak element graficzny. Miękkie koło
   z wygaszeniem do przezroczystości nie ma krawędzi, więc nie ma czego przyciąć. */
.psoni-hero::after {
  content: "";
  position: absolute;
  right: -150px;
  top: -170px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 163, 62, .30) 0%, rgba(249, 163, 62, .10) 55%, rgba(249, 163, 62, 0) 72%);
  pointer-events: none;
}

@media (max-width: 980px) {
  .psoni-hero::after { display: none; }
}

.psoni-hero h1 {
  margin-bottom: 18px !important;
}

.psoni-hero .psoni-lead p {
  font-size: clamp(18px, 2.1vw, 22px) !important;
  line-height: 1.55 !important;
  color: var(--psoni-szary) !important;
  max-width: 30ch;
}

/* Kafle */
/* Kafel — SAMA TYPOGRAFIA, ramki tu nie ma.

   Ramka, tło, zaokrąglenie i wewnętrzny odstęp siedzą w atrybutach kolumny
   Divi, żeby klient mógł je zmienić w builderze. Miałem to tutaj drugi raz
   i stąd „ramka w ramce": obrys rysowała kolumna i rysował go jeszcze raz
   moduł tekstowy w środku. Jedna własność — jedno miejsce. */
.psoni-kafel {
  height: 100%;
}

.psoni-kafel h3 {
  margin-top: 0 !important;
  font-size: 22px !important;
}

.psoni-kafel p {
  color: var(--psoni-szary);
  font-size: 16px;
}

/* Liczby */
.psoni-liczba {
  border-left: 4px solid var(--psoni-amber);
  padding-left: 18px !important;
}

.psoni-liczba h3 {
  font-size: 40px !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  line-height: 1 !important;
}

.psoni-liczba p {
  color: var(--psoni-szary);
  font-size: 15px;
  margin: 0 !important;
}

/* Sekcja wyróżnika */
.psoni-wyroznik {
  background: var(--psoni-grafit) !important;
}

.psoni-wyroznik h2,
.psoni-wyroznik p,
.psoni-wyroznik strong {
  color: #FFFFFF !important;
}

.psoni-wyroznik .psoni-eyebrow p {
  color: var(--psoni-amber) !important;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}

/* Pasek 1,5% */
.psoni-cta {
  background: var(--psoni-amber) !important;
}

.psoni-cta h2,
.psoni-cta p,
.psoni-cta strong {
  color: var(--psoni-grafit) !important;
}

.psoni-cta .psoni-krs p {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em;
}

/* Sekcja jasna alternatywna */
.psoni-jasna {
  background: var(--psoni-tlo-alt) !important;
}

/* Wpisy na stronie głównej i w aktualnościach — patrz sekcja 21.
   Reguły pod moduł bloga Divi (salvattore, .et_pb_post) zostały stąd usunięte
   w 1.12.0 razem z samym modułem. Nie pilnujemy martwych selektorów: dwa razy
   w tym projekcie ta sama własność ustawiona w dwóch miejscach dała usterkę. */

/* Partnerzy
   Bez odbarwiania. Wyszarzony logotyp do najechania myszą to maniera z portfolio
   agencyjnych, a tu jest odwrotny problem: umowy o dofinansowanie zwykle wymagają
   oznaczenia w barwach firmowych. PFRON i Miasto Tczew mają być kolorowe i czytelne. */
.psoni-partnerzy .et_pb_image,
.psoni-partnerzy .et_pb_image .et_pb_image_wrap {
  max-width: none !important;
}

.psoni-partnerzy img {
  max-height: 112px;
  width: auto !important;
  max-width: 100%;
}

/* --- Belka partnerów na podstronie --------------------------------------
   Ta sama belka co na stronie głównej, ale złożona z bloków edytora, bo
   /o-nas/partnerzy/ jest zwykłą stroną i ma taka zostać. Klasa na bloku
   kolumn; obrazki trzymają tę samą maksymalną wysokość co na głównej. */

.psoni-belka-partnerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 48px;
  margin: 2em 0 0;
  padding: 30px 24px;
  background: var(--psoni-tlo-alt);
  border: 1px solid var(--psoni-linia);
  border-radius: var(--psoni-radius);
}

.psoni-belka-partnerow figure,
.psoni-belka-partnerow .wp-block-image {
  margin: 0;
  flex: 0 0 auto;
}

.psoni-belka-partnerow img {
  max-height: 112px;
  width: auto;
  max-width: 100%;
  height: auto;
}

@media (max-width: 620px) {
  .psoni-belka-partnerow { gap: 22px 28px; padding: 22px 16px; }
  .psoni-belka-partnerow img { max-height: 84px; }
}

/* ==========================================================================
   19. GALERIA DIVI — równa siatka niezależnie od proporcji zdjęć

   Divi układa kafelki galerii na floatach o stałej szerokości, ale zmiennej
   wysokości, i co czwarty czyści wiersz. Wystarczy jedno zdjęcie pionowe, żeby
   cały wiersz urósł i zrobiła się dziura pod niższymi sąsiadami. Prace
   uczestników są raz poziome, raz pionowe, więc to nie jest przypadek brzegowy,
   tylko stan normalny tej galerii.

   Rozwiązanie: siatka CSS zamiast floatów plus stałe proporcje kafelka.
   Zdjęcia skalujemy przez object-fit: contain, a nie cover — misy i linoryty
   mają być widoczne w całości, przycięcie połowy pracy uczestnika to nie jest
   ustępstwo, które wolno zrobić dla równego rządka.
   ========================================================================== */

.et_pb_gallery_items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.et_pb_gallery_items::before,
.et_pb_gallery_items::after {
  content: none;
}

.et_pb_gallery_item {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Kafelek kwadratowy, nie 4:3.
   Sprawdzone na komplecie trzynastu prac: przy 4:3 linoryt i obraz — jedyne
   prace pionowe — kurczyły się do połowy wielkości sąsiadów, co w galerii
   uczestników wygląda jak hierarchia, której nikt nie zamierzał. Kwadrat
   traktuje poziome i pionowe tak samo.
   Podkład jest ciepły, wyraźnie jaśniejszy od szarych teł zdjęć. Próba
   dopasowania się do nich wyszłaby jak nieudane dopasowanie; wyraźna różnica
   czyta się jak passe-partout w ramie. */
.et_pb_gallery_item .et_pb_gallery_image {
  aspect-ratio: 1 / 1;
  background: var(--psoni-passe);
  border: 1px solid var(--psoni-linia);
  border-radius: var(--psoni-radius);
  overflow: hidden;
}

.et_pb_gallery_item .et_pb_gallery_image a {
  display: block;
  width: 100%;
  height: 100%;
}

.et_pb_gallery_item .et_pb_gallery_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Nakładka z lupką ma zakrywać cały kafelek, nie tylko obszar zdjęcia. */
.et_pb_gallery_item .et_pb_gallery_image .et_overlay {
  border-radius: var(--psoni-radius);
}

@media (max-width: 1100px) {
  .et_pb_gallery_items { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .et_pb_gallery_items { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* --- Galerie pracowni (blok galerii edytora, nie Divi) -------------------

   Strony pracowni klient edytuje sam w edytorze bloków, więc galeria jest
   blokiem, a nie modułem Divi. Blok galerii rozkłada zdjęcia flexem
   i rozciąga je proporcjonalnie do formatu — przy zdjęciach z telefonu, gdzie
   w jednym rzędzie trafia się pion obok poziomu, wychodzą rzędy różnej
   wysokości i rwany prawy margines. Ta sama usterka, którą naprawialiśmy
   w galerii prac; to samo lekarstwo.

   Różnica wobec „Naszych prac": tam object-fit: contain, bo przycięcie misy
   to zniszczenie pracy uczestnika. Tu cover — to fotografie reportażowe
   z zajęć, kadr 4:3 nic z nich nie zabiera, a równa siatka czyta się lepiej
   niż komplet zdjęć w pięciu formatach. */

.psoni-galeria-pracowni.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 1.4em 0 0;
}

.psoni-galeria-pracowni.has-nested-images figure.wp-block-image {
  width: auto !important;
  max-width: none !important;
  flex-grow: 0 !important;
  margin: 0;
}

.psoni-galeria-pracowni.has-nested-images figure.wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--psoni-radius);
  border: 1px solid var(--psoni-linia);
  display: block;
}

/* Kursor mówi, że w zdjęcie można kliknąć — lightbox jest wbudowany
   w edytor, ale sam z siebie nie daje żadnego sygnału. */
.psoni-galeria-pracowni.has-nested-images figure.wp-block-image {
  cursor: zoom-in;
}

.psoni-galeria-pracowni.has-nested-images figure.wp-block-image img:hover {
  filter: brightness(1.05);
}

/* Blok galerii lubi dokładać podpisy z nazwą pliku — w tym zestawie
   podpisów nie ma, ale gdyby klient jakiś wpisał, ma się mieścić. */
.psoni-galeria-pracowni figcaption {
  font-size: 14px;
  color: var(--psoni-szary);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .psoni-galeria-pracowni.wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .psoni-galeria-pracowni.wp-block-gallery.has-nested-images {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   19b. KAFELKI — aktualności, kategorie, galerie, strona główna

   Jeden wygląd kafelka i jedna siatka dla czterech miejsc. Markup wypisuje
   inc/kafelki.php, więc nie ma tu walki z cudzymi klasami — każdy selektor
   odnosi się do czegoś, co sami wypisaliśmy.
   ========================================================================== */

.psoni-kontener {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

.psoni-archiwum {
  padding: 34px 0 70px;
}

/* --- Pasek filtrów ------------------------------------------------------
   Pigułki, nie zakładki. Zakładka sugeruje, że treść pod spodem się podmienia
   bez przeładowania; te odnośniki prowadzą na osobne adresy i lepiej, żeby
   wyglądały jak odnośniki. */

.psoni-filtry {
  margin: 0 0 30px;
}

.psoni-filtry ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psoni-filtry li::before { content: none; }

.psoni-filtry a {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--psoni-linia);
  border-radius: 999px;
  background: var(--psoni-tlo);
  color: var(--psoni-grafit);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.psoni-filtry a:hover,
.psoni-filtry a:focus-visible {
  background: var(--psoni-tlo-alt);
  border-color: var(--psoni-amber);
}

.psoni-filtry a[aria-current="true"] {
  background: var(--psoni-amber);
  border-color: var(--psoni-amber);
  color: var(--psoni-grafit);
}

/* --- Siatka -------------------------------------------------------------
   Grid, nie flex. Przy flexie ostatni niepełny wiersz rozciąga kafelki na
   całą szerokość i dwa wpisy wyglądają jak inny komponent niż trzy. */

.psoni-kafelki {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
}

@media (max-width: 980px) {
  .psoni-kafelki { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 620px) {
  .psoni-kafelki { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Kafelek ------------------------------------------------------------ */

.psoni-kafelek {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--psoni-tlo);
  border: 1px solid var(--psoni-linia);
  border-radius: var(--psoni-radius);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}

.psoni-kafelek:hover {
  border-color: var(--psoni-amber);
  transform: translateY(-2px);
}

/* Zdjęcie w stałych proporcjach poziomego prostokąta. Bez tego jedno zdjęcie
   pionowe rozpycha swój wiersz i siatka przestaje być siatką. */
.psoni-kafelek-foto {
  aspect-ratio: 3 / 2;
  background: var(--psoni-passe);
  overflow: hidden;
}

.psoni-kafelek-foto img,
.psoni-kafelek-pusto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kafelek bez zdjęcia dostaje motyw słońca z logo zamiast pustego prostokąta.
   Pusty prostokąt czyta się jak obrazek, który się nie wczytał; znak z logo
   czyta się jak decyzja. Rysowany w CSS, żeby nie dokładać żądania do pliku. */
.psoni-kafelek-pusto {
  position: relative;
  background: var(--psoni-tlo-alt);
}

.psoni-kafelek-pusto::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--psoni-amber);
  opacity: .28;
}

.psoni-kafelek-tresc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.psoni-kafelek-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  color: var(--psoni-szary);
}

.psoni-kafelek-kat {
  padding: 2px 9px;
  border-radius: 3px;
  background: var(--psoni-tlo-alt);
  color: var(--psoni-amber-ciemny);
  font-size: 13px;
  font-weight: 600;
}

/* Tytuł: trochę większy od tekstu ciągłego i pogrubiony — nie nagłówek
   sekcji. Domyślny H2 miałby tu 29 px i przy tytułach po 90 znaków, jakich
   w tym archiwum jest sporo, kafelek byłby w połowie tytułem.
   Trzy wiersze to twarda granica; czwarty i tak nikt nie czyta, a rozjeżdża
   wysokości w rzędzie. */
.psoni-kafelek-tytul {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.35;
  color: var(--psoni-grafit);
  overflow-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.psoni-kafelek-tytul a {
  color: inherit;
  text-decoration: none;
}

/* Nazwa zastępcza wpisu bez tytułu — czytelna, ale wyraźnie nie tytuł.
   Kursywa i kolor tekstu pomocniczego mówią „tu brakuje nazwy", zamiast
   udawać, że ktoś to tak nazwał. */
.psoni-kafelek-tytul-zastepczy {
  font-style: italic;
  font-weight: 600;
  color: var(--psoni-szary);
}

/* Klikalny jest cały kafelek, ale nazwą odnośnika dla czytnika ekranu
   zostaje sam tytuł — dlatego powiększamy pole kliknięcia pseudoelementem,
   a nie owijamy kafelka w <a>. */
.psoni-kafelek-tytul a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.psoni-kafelek:hover .psoni-kafelek-tytul a,
.psoni-kafelek-tytul a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.psoni-kafelek-zajawka {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--psoni-szary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Obrys fokusa musi obejmować kafelek, a nie sam tekst tytułu. */
.psoni-kafelek:has(a:focus-visible) {
  outline: 3px solid var(--psoni-focus);
  outline-offset: 2px;
}

/* --- Stronicowanie ------------------------------------------------------ */

.psoni-stronicowanie {
  margin: 40px 0 0;
}

.psoni-stronicowanie ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psoni-stronicowanie li::before { content: none; }

.psoni-stronicowanie .page-numbers {
  display: block;
  min-width: 42px;
  padding: 9px 14px;
  border: 1px solid var(--psoni-linia);
  border-radius: var(--psoni-radius);
  background: var(--psoni-tlo);
  color: var(--psoni-grafit);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.psoni-stronicowanie .page-numbers:hover {
  border-color: var(--psoni-amber);
  background: var(--psoni-tlo-alt);
}

.psoni-stronicowanie .page-numbers.current {
  background: var(--psoni-amber);
  border-color: var(--psoni-amber);
}

.psoni-stronicowanie .page-numbers.dots {
  border-color: transparent;
  background: none;
}

.psoni-pusto {
  padding: 26px 0;
  color: var(--psoni-szary);
}

/* Pojedyncza galeria — miara wiersza obowiązuje tekst wstępu, ale nie siatkę
   zdjęć; tu jest osobny kontener, więc reguła z sekcji 20 tu nie sięga. */
.psoni-galeria-tresc .entry-content > p,
.psoni-galeria-tresc .entry-content > ul,
.psoni-galeria-tresc .entry-content > ol {
  max-width: 80ch;
}

.psoni-powrot {
  margin: 34px 0 0;
  font-weight: 600;
}

.psoni-powrot a {
  color: var(--psoni-amber-tekst);
  text-decoration: none;
}

.psoni-powrot a:hover {
  text-decoration: underline;
}

/* Sekcja aktualności na stronie głównej — siatka siedzi w module kodu Divi,
   więc trzeba jej oddać pełną szerokość kolumny i odstęp nad przyciskiem. */
.psoni-aktualnosci .psoni-kafelki {
  margin: 6px 0 0;
}

/* ==========================================================================
   20. STRONY TREŚCIOWE — jedna oprawa dla trzydziestu trzech podstron

   Te strony nie wyglądały źle dlatego, że każda jest źle zrobiona. Wyglądały
   źle, bo żadna nie miała oprawy: tytuł tonął w treści, akapit ciągnął się
   przez 1180 px, listy i tabele zostawały w domyślnym Divi, a PDF-y były
   gołymi linkami. To jeden problem widziany trzydzieści trzy razy.
   ========================================================================== */

/* --- Spis treści: bursztynowy pasek pod menu ------------------------------

   Przykleja się pod nagłówkiem Divi, którego wysokość mierzy skrypt i podaje
   w zmiennej --psoni-naglowek-h. Nagłówek potrafi się kurczyć przy przewijaniu,
   więc wartość wpisana w CSS na sztywno rozjechałaby się po pierwszym ruchu.

   Na wąskim ekranie pasek przewija się w poziomie jak zakładki, zamiast łamać
   się na trzy rzędy i zjadać pół ekranu. */

.psoni-spis {
  position: sticky;
  top: var(--psoni-naglowek-h, 0px);
  z-index: 99;
  background: var(--psoni-amber);
  border-bottom: 1px solid rgba(35, 31, 32, .14);
}

.psoni-spis-srodek {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Pozycje zawijają się do kolejnego rzędu, NIE przewijają w poziomie.

   Przy ośmiu sekcjach „O nas" etykiety potrzebują 1367 px, więc na typowym
   1280 i 1440 pasek przewijany chowałby ostatnie pozycje za krawędzią. Przy
   tej grupie odbiorców nawigacja schowana za gestem poziomego przewijania to
   zła decyzja — nie ma jej czym zasygnalizować i łatwo jej nie znaleźć.
   Drugi rząd jest brzydszy niż jeden, ale niczego nie ukrywa. */
.psoni-spis ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psoni-spis li {
  margin: 0;
  padding: 0;
}

.psoni-spis li::before {
  content: none;
}

.psoni-spis a {
  display: block;
  padding: 9px 12px;
  color: var(--psoni-grafit);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.psoni-spis a:hover {
  background: var(--psoni-amber-jasny);
  text-decoration: none;
}

.psoni-spis a[aria-current="true"] {
  background: var(--psoni-amber-jasny);
  font-weight: 700;
}

/* Płynne przewijanie do kotwicy. Pod warunkiem, że użytkownik nie poprosił
   systemowo o ograniczenie animacji — przy tej grupie odbiorców to nie jest
   teoretyczne ustawienie. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Kotwica nie może wylądować pod przyklejonym paskiem. */
.page .entry-content h2[id] {
  scroll-margin-top: var(--psoni-offset-kotwicy, 120px);
}

.page .entry-content h2[id]:focus {
  outline: none;
}

.page .entry-content h2[id]:focus-visible {
  outline: 3px solid var(--psoni-focus);
  outline-offset: 6px;
}

html.psoni-kontrast .psoni-spis {
  background: #000000;
  border-bottom: 2px solid #FFFF00;
}

html.psoni-kontrast .psoni-spis a {
  color: #FFFF00;
}

html.psoni-kontrast .psoni-spis a:hover {
  background: #FFFF00;
  color: #000000;
}

/* Na telefonie pasek NIE jest przyklejony. Zawinięty do trzech–czterech rzędów
   zjadałby jedną czwartą ekranu przez całe przewijanie. Stoi raz na górze,
   użytkownik go widzi i zjeżdża dalej. */
@media (max-width: 780px) {
  .psoni-spis {
    position: static;
  }
  .psoni-spis-srodek {
    width: 100%;
    padding: 4px 16px;
  }
  .psoni-spis a {
    /* 14px x 1,3 + 2x12 + 3px kreska = 45 px, czyli ponad próg 44 px
       z WCAG 2.5.5 dla celu dotykowego. */
    padding: 12px;
    font-size: 14px;
  }
}

@media print {
  .psoni-spis { display: none; }
}

/* --- Pasek nagłówka ----------------------------------------------------- */

/* Wysokość paska: było 46/40, jest 34/30 — o 26% niżej.
   Pasek ma nazywać stronę, a nie zajmować pierwszego ekranu na telefonie. */
.psoni-naglowek-strony {
  background: var(--psoni-tlo-alt);
  border-bottom: 1px solid var(--psoni-linia);
  padding: 34px 0 30px;
}

.psoni-naglowek-srodek {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

.psoni-naglowek-strony h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  color: var(--psoni-grafit);
}

.psoni-naglowek-lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--psoni-szary);
}

.psoni-okruszki {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--psoni-szary);
}

.psoni-okruszki a {
  color: var(--psoni-szary);
  text-decoration: none;
}

.psoni-okruszki a:hover {
  color: var(--psoni-amber-ciemny);
  text-decoration: underline;
}

.psoni-okruszki span {
  margin: 0 7px;
  color: var(--psoni-linia);
}

/* Tytuł od Divi, gdyby jednak gdzieś wyszedł — jeden H1 na stronę i koniec. */
.page #main-content .entry-title,
.page #main-content .main_title {
  display: none;
}

/* Gdy pasek i nagłówek wchodzą awaryjnie przez treść, muszą wyjść poza jej
   kolumnę na pełną szerokość okna. */
.entry-content > .psoni-naglowek-strony,
.entry-content > .psoni-spis {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- Miara wiersza -------------------------------------------------------
   WCAG 1.4.8 mówi o maksimum 80 znaków. Przy 1180 px i 16 px foncie wychodzi
   około 144, czyli oko gubi początek następnego wiersza. 62ch daje circa 72
   znaki — w klasycznym przedziale czytelności 45–75.
   sam tekst, nie tabele i nie zdjęcia — te mają prawo być szersze. */

/* Miara obowiązuje KAŻDY blok treści, nie wyliczankę znaczników.

   Poprzednia wersja wymieniała p, ul, ol, h2, h3, h4 i blockquote — i listy
   i tak z niej uciekały, bo edytor bloków opakowuje je inaczej, niż zakładałem.
   Efekt był gorszy niż brak reguły: akapit na 630 px obok listy na 1180 px
   wygląda jak usterka, a nie jak decyzja. Teraz ograniczenie dostaje wszystko,
   a wyjątki wypisujemy wprost. */
.page:not(.home) #main-content .entry-content > * {
  max-width: 80ch;
}

/* Zdjęcia, tabele i elementy oprawy mają prawo być szersze niż kolumna tekstu. */
.page:not(.home) #main-content .entry-content > figure,
.page:not(.home) #main-content .entry-content > .wp-block-image,
.page:not(.home) #main-content .entry-content > .wp-block-gallery,
.page:not(.home) #main-content .entry-content > .wp-block-table,
.page:not(.home) #main-content .entry-content > .wp-block-embed,
.page:not(.home) #main-content .entry-content > .psoni-naglowek-strony,
.page:not(.home) #main-content .entry-content > .psoni-spis,
.page:not(.home) #main-content .entry-content > .psoni-kafelki,
.page:not(.home) #main-content .entry-content > .psoni-belka-partnerow,
.page:not(.home) #main-content .entry-content > .psoni-pusto {
  max-width: none;
}

/* --- Rytm nagłówków ------------------------------------------------------
   Odstęp nad nagłówkiem większy niż pod nim — nagłówek ma się kleić do tego,
   co opisuje, a nie wisieć pośrodku między dwiema sekcjami. */

/* Dlaczego tu wszędzie #main-content i !important

   Divi dokłada akapitom `padding-bottom: 1em` osobno od marginesu, a nagłówkom
   i listom nadaje własne odstępy w arkuszu ładowanym po naszym. Sam margines
   przegrywał i między akapitami robiły się dziury na kilka wierszy. Podnosimy
   specyficzność i zerujemy padding, zamiast licytować się na wartości. */

.page #main-content .entry-content h2 {
  margin: 1.9em 0 .45em !important;
  padding: 0 !important;
  font-size: clamp(23px, 2.4vw, 29px);
  line-height: 1.25;
  color: var(--psoni-grafit);
}

.page #main-content .entry-content h2:first-child {
  margin-top: 0 !important;
}

.page #main-content .entry-content h3 {
  margin: 1.5em 0 .35em !important;
  padding: 0 !important;
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.3;
  color: var(--psoni-grafit);
}

.page #main-content .entry-content p {
  margin: 0 0 1em !important;
  padding-bottom: 0 !important;
  line-height: 1.65;
}

.page #main-content .entry-content p:last-child {
  margin-bottom: 0 !important;
}

/* Stray <br> po wklejaniu treści potrafi udawać pusty akapit. */
.page #main-content .entry-content > br {
  display: none;
}

/* --- Listy ---------------------------------------------------------------
   Nagrody i wyróżnienia na „O nas" to siedem pozycji, które w domyślnym
   Divi zlewają się w jeden blok. */

.page #main-content .entry-content ul,
.page #main-content .entry-content ol {
  margin: 0 0 1.2em !important;
  padding: 0 !important;
  list-style: none;
}

/* Punkty listy stoją ciasno.

   Przy krótkich pozycjach odstęp międzypunktowy jest zbędny — lista ma się
   czytać jako jedna całość, nie jako rozsypane zdania. Przy pozycjach na kilka
   wierszy odstęp jest potrzebny i wtedy daje go reguła niżej, oparta na tym,
   że taka pozycja zawiera własny akapit. */
.page #main-content .entry-content ul > li,
.page #main-content .entry-content ol > li {
  position: relative;
  margin: 0 0 .3em !important;
  padding: 0 0 0 26px !important;
  line-height: 1.65;
}

.page #main-content .entry-content li > p {
  margin-bottom: .45em !important;
}

.page #main-content .entry-content li:last-child {
  margin-bottom: 0 !important;
}

/* Lista zagnieżdżona nie zaczyna się od pustego wiersza. */
.page #main-content .entry-content li > ul,
.page #main-content .entry-content li > ol {
  margin: .35em 0 0 !important;
}

.page .entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--psoni-amber);
  border-radius: 50%;
}

.page .entry-content ol {
  counter-reset: psoni-lista;
}

.page .entry-content ol > li {
  counter-increment: psoni-lista;
}

.page .entry-content ol > li::before {
  content: counter(psoni-lista) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--psoni-amber-tekst);
}

/* --- Tabele --------------------------------------------------------------
   Godziny zajęć DCA. Na wąskim ekranie tabela przewija się w swoim pudełku,
   zamiast rozpychać całą stronę. */

.page .entry-content .wp-block-table,
.page .entry-content figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1.6em;
}

.page .entry-content table {
  border-collapse: collapse;
  width: auto;
  min-width: 320px;
  font-size: 16px;
}

.page .entry-content th,
.page .entry-content td {
  padding: 11px 18px;
  border: 1px solid var(--psoni-linia);
  text-align: left;
}

.page .entry-content thead th,
.page .entry-content tr:first-child th {
  background: var(--psoni-tlo-alt);
  font-weight: 700;
  color: var(--psoni-grafit);
}

/* --- Pliki do pobrania ---------------------------------------------------
   Statut, regulaminy, sprawozdania i zamówienia publiczne to w sumie cztery
   strony zbudowane z list odnośników do PDF-ów. Jako gołe linki wyglądają
   jak przypis; jako kafelki z ikoną czyta się je jak dokumenty. */

.page .entry-content a[href$=".pdf"],
.page .entry-content a[href$=".PDF"],
.page .entry-content a[href$=".doc"],
.page .entry-content a[href$=".docx"],
.page .entry-content a[href$=".odt"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 4px 0;
  padding: 13px 18px 13px 14px;
  background: var(--psoni-tlo-alt);
  border: 1px solid var(--psoni-linia);
  border-left: 3px solid var(--psoni-amber);
  border-radius: var(--psoni-radius);
  color: var(--psoni-grafit);
  font-weight: 600;
  text-decoration: none;
}

.page .entry-content a[href$=".pdf"]::before,
.page .entry-content a[href$=".PDF"]::before,
.page .entry-content a[href$=".doc"]::before,
.page .entry-content a[href$=".docx"]::before,
.page .entry-content a[href$=".odt"]::before {
  content: "↓";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--psoni-amber);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}

.page .entry-content a[href$=".pdf"]:hover,
.page .entry-content a[href$=".PDF"]:hover,
.page .entry-content a[href$=".doc"]:hover,
.page .entry-content a[href$=".docx"]:hover,
.page .entry-content a[href$=".odt"]:hover {
  background: #FFFFFF;
  border-color: var(--psoni-amber);
  text-decoration: none;
}

/* Lista złożona wyłącznie z plików nie potrzebuje jeszcze kropek obok kafelków. */
.page .entry-content li > a[href$=".pdf"]:only-child,
.page .entry-content li > a[href$=".PDF"]:only-child {
  margin: 0;
}

.page .entry-content li:has(> a[href$=".pdf"]:only-child)::before,
.page .entry-content li:has(> a[href$=".PDF"]:only-child)::before {
  display: none;
}

.page .entry-content li:has(> a[href$=".pdf"]:only-child),
.page .entry-content li:has(> a[href$=".PDF"]:only-child) {
  padding-left: 0;
}

/* --- Zdjęcia i podpisy --------------------------------------------------- */

.page .entry-content figure {
  margin: 0 0 1.6em;
}

.page .entry-content img {
  border-radius: var(--psoni-radius);
}

.page .entry-content figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--psoni-szary);
}

/* --- Cytat --------------------------------------------------------------- */

.page .entry-content blockquote {
  margin: 0 0 1.6em;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--psoni-amber);
  font-style: normal;
  color: var(--psoni-grafit);
}

/* --- Oddech nad i pod treścią -------------------------------------------- */

/* Oprawa stron treściowych NIE dotyczy strony głównej — ta ma własne sekcje
   Divi z własnymi odstępami. Bez tego wyłączenia nad sekcją hero robiło się
   46 px pustego białego pola. */
.page:not(.home) #main-content .entry-content {
  padding-top: 46px;
  padding-bottom: 60px;
}

@media (max-width: 780px) {
  .psoni-naglowek-strony { padding: 30px 0 26px; }
  .page:not(.home) #main-content .entry-content { padding-top: 30px; padding-bottom: 40px; }
}

/* Przyciski hero obok siebie, nie jeden pod drugim.
   Divi opakowuje każdy przycisk w blokowy div, więc same z siebie się nie ustawią. */
.psoni-hero .et_pb_button_module_wrapper {
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}

/* Odstępy sekcji na telefonie */
@media (max-width: 780px) {
  .et_pb_section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .single #left-area,
  .page #left-area {
    padding-right: 0;
  }
}