/* ==========================================================================
   SYSTEM – wspólna warstwa wyglądu strony osiedla Ołtarzew
   --------------------------------------------------------------------------
   Ten plik wczytywany jest na każdej podstronie (z assets/components/head.php),
   przed arkuszami poszczególnych stron. Działa na istniejących klasach,
   więc nie trzeba było przepisywać HTML-a czterdziestu podstron.

   Zawiera:
     1. Zmienne (kolory, odstępy, cienie, zaokrąglenia)
     2. Tryb ciemny i tryb wysokiego kontrastu
     3. Powiększanie tekstu
     4. Typografię
     5. Układ strony
     6. Wspólne elementy (karty, przyciski, linki do plików, tabele)
     7. Poprawki dla starszego kodu, który miał kolory wpisane na sztywno
   ========================================================================== */

/* ==========================================================================
   1. ZMIENNE
   ========================================================================== */

:root {
  /* Paleta bazowa – zachowana z poprzedniej wersji strony */
  --color-seasalt: #f9f7f7;
  --color-lavender: #dbe2ef;
  --color-uclaBlue: #3f72af;
  --color-prussianBlue: #112d4e;
  --color-indianRed: #f05555;

  /* Zmienne opisujące ZASTOSOWANIE, nie kolor. Dzięki nim tryb ciemny
     sprowadza się do podmiany kilku wartości poniżej. */
  --tlo: #f4f6fa;
  --tlo-karta: #ffffff;
  --tlo-podniesione: #ffffff;
  --tlo-delikatne: #eef2f8;
  --tekst: #112d4e;
  --tekst-przygaszony: #52657f;
  --tekst-odwrocony: #ffffff;
  --akcent: #2f5f96;
  --akcent-jasny: #3f72af;
  --akcent-tlo: #e6edf7;
  --obwodka: #dbe2ef;
  --obwodka-mocna: #c2cfe4;
  --ostrzezenie: #a8641a;
  --sukces: #1f7a5a;
  --blad: #b3403a;

  /* Czerwień --color-indianRed na białym tle daje kontrast 3,42:1 przy
     wymaganych 4,5:1. Do obramowań jest w porządku, do tekstu nie – stąd
     osobny, ciemniejszy odcień (5,9:1) używany w etykiecie "wywóz śmieci". */
  --alert-tekst: #c62828;

  /* Uporządkowana kolejność warstw. Wcześniej było 99, 100, 110, 120,
     200, 9998, 9999, 10000 – bez żadnej logiki. */
  --z-uparrow: 100;
  --z-navbar: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-cookie: 600;

  --cien-1: 0 1px 2px rgba(17, 45, 78, 0.06);
  --cien-2: 0 2px 8px rgba(17, 45, 78, 0.08);
  --cien-3: 0 12px 30px rgba(17, 45, 78, 0.14);

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 18px;
  --s5: 26px;
  --s6: 38px;
  --s7: 56px;
  --s8: 80px;

  --szerokosc-tresci: 1240px;

  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;

  color-scheme: light;
}

/* ==========================================================================
   2. TRYB CIEMNY I WYSOKI KONTRAST
   ==========================================================================
   Kolor tekstu w całej starej wersji strony brał się z --color-prussianBlue,
   a tło z --color-seasalt. Podmieniając te dwie zmienne, przestawiamy
   na ciemny motyw także podstrony, których arkuszy w ogóle nie ruszaliśmy.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  html:not([data-motyw="jasny"]) {
    --alert-tekst: #ff8a80;
    --color-seasalt: #0f151d;
    --color-lavender: #24334a;
    --color-uclaBlue: #7dabe4;
    --color-prussianBlue: #e6edf7;

    --tlo: #0f151d;
    --tlo-karta: #18212e;
    --tlo-podniesione: #1e2937;
    --tlo-delikatne: #1a2431;
    --tekst: #e6edf7;
    --tekst-przygaszony: #9fb2c9;
    --tekst-odwrocony: #0f151d;
    --akcent: #7dabe4;
    --akcent-jasny: #9cc2f0;
    --akcent-tlo: #1e2c3f;
    --obwodka: #29384c;
    --obwodka-mocna: #3a4d67;
    --ostrzezenie: #e0a34f;
    --sukces: #5cc9a0;
    --blad: #f08a84;

    --cien-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cien-2: 0 2px 10px rgba(0, 0, 0, 0.45);
    --cien-3: 0 12px 30px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

html[data-motyw="ciemny"] {
  --alert-tekst: #ff8a80;
  --color-seasalt: #0f151d;
  --color-lavender: #24334a;
  --color-uclaBlue: #7dabe4;
  --color-prussianBlue: #e6edf7;

  --tlo: #0f151d;
  --tlo-karta: #18212e;
  --tlo-podniesione: #1e2937;
  --tlo-delikatne: #1a2431;
  --tekst: #e6edf7;
  --tekst-przygaszony: #9fb2c9;
  --tekst-odwrocony: #0f151d;
  --akcent: #7dabe4;
  --akcent-jasny: #9cc2f0;
  --akcent-tlo: #1e2c3f;
  --obwodka: #29384c;
  --obwodka-mocna: #3a4d67;
  --ostrzezenie: #e0a34f;
  --sukces: #5cc9a0;
  --blad: #f08a84;

  --cien-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cien-2: 0 2px 10px rgba(0, 0, 0, 0.45);
  --cien-3: 0 12px 30px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Wysoki kontrast – dla osób słabiej widzących. Czysta biel i czerń,
   grubsze obwódki, brak przezroczystości. */
html[data-kontrast="wysoki"] {
  --color-seasalt: #ffffff;
  --color-lavender: #e8e8e8;
  --color-uclaBlue: #00378f;
  --color-prussianBlue: #000000;

  --tlo: #ffffff;
  --tlo-karta: #ffffff;
  --tlo-podniesione: #ffffff;
  --tlo-delikatne: #f2f2f2;
  --tekst: #000000;
  --tekst-przygaszony: #1c1c1c;
  --tekst-odwrocony: #ffffff;
  --akcent: #00378f;
  --akcent-jasny: #00378f;
  --akcent-tlo: #e8eefb;
  --obwodka: #000000;
  --obwodka-mocna: #000000;

  --cien-1: none;
  --cien-2: none;
  --cien-3: none;
}

html[data-kontrast="wysoki"] * {
  text-shadow: none !important;
  box-shadow: none !important;
}

html[data-kontrast="wysoki"] a {
  text-decoration: underline !important;
}

html[data-kontrast="wysoki"] .gmina__karta,
html[data-kontrast="wysoki"] .sesje__link,
html[data-kontrast="wysoki"] #blog .blog__entry,
html[data-kontrast="wysoki"] .kafel {
  border: 2px solid #000 !important;
}

/* ==========================================================================
   3. POWIĘKSZANIE TEKSTU
   ==========================================================================
   Starsze arkusze strony podają rozmiary w pikselach, więc zmiana
   font-size na <html> nic by nie dała. Powiększamy więc całą stronę.
   -------------------------------------------------------------------------- */

html[data-tekst="duzy"] body {
  zoom: 1.15;
}

html[data-tekst="bardzo-duzy"] body {
  zoom: 1.3;
}

/* ==========================================================================
   4. TYPOGRAFIA
   ========================================================================== */

body {
  background-color: var(--tlo);
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(27px, 2.4vw + 17px, 42px);
  font-weight: var(--weight-bold);
  margin-bottom: var(--s4);
}

h2 {
  font-size: clamp(21px, 1.3vw + 15px, 29px);
  font-weight: var(--weight-bold);
  margin-top: var(--s5);
  margin-bottom: var(--s3);
}

h3 {
  font-size: clamp(18px, 0.7vw + 14px, 22px);
  font-weight: var(--weight-semi-bold);
  margin-bottom: var(--s2);
}

p, li {
  line-height: 1.68;
  max-width: 78ch;
}

a {
  color: var(--akcent);
}

/* Widoczne obramowanie przy nawigacji klawiaturą – wymóg dostępności.
   Pojawia się tylko przy klawiaturze, nie po kliknięciu myszą. */
:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background-color: var(--akcent);
  color: var(--tekst-odwrocony);
}

/* Osoby, które ustawiły w systemie ograniczenie animacji, nie powinny
   ich oglądać także tutaj. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   mixins.css ustawia kolor tekstu na KAŻDYM elemencie strony regułą
   "* { color: ... }". Skutek uboczny: tekst zagnieżdżony w komponencie
   nie dziedziczy jego koloru – biały napis na ciemnym pasku wychodził
   granatowy na granatowym, czyli niewidoczny.
   Poniżej przywracamy dziedziczenie tam, gdzie komponent sam ustala kolor.
   -------------------------------------------------------------------------- */

.navbar__top-bar *,
.dostepnosc__btn *,
.przycisk *,
.hero__tresc *,
.hero__liczby *,
.kafel *,
.gmina__karta *,
#home .home__event-card-red * {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Ikony w plikach SVG mają kolor wpisany na sztywno (stroke="#112D4E").
   W trybie ciemnym stawały się granatowe na granatowym tle, czyli niewidoczne.
   Właściwość CSS ma pierwszeństwo przed atrybutem w kodzie SVG, więc
   wystarczy poniższa reguła – bez edytowania 38 plików z ikonami.
   Kolorowe znaczki serwisów społecznościowych celowo pomijamy.
   -------------------------------------------------------------------------- */

.navbar__list-link svg,
.navbar__list-link svg [stroke],
.navbar__menu-close-btn svg [stroke],
.navbar__hamburger svg [stroke],
.navbar__narzedzie svg [stroke],
.navbar__info-link svg [stroke],
.navbar__kontakt-link svg [stroke],
.breadcrumb svg [stroke],
.cookie svg [stroke],
.cookie__content svg [stroke],
.cookie__content-title svg [stroke],
.popup svg [stroke],
.kafel svg [stroke],
.przycisk svg [stroke],
.sesja svg [stroke],
.gmina__karta svg [stroke],
.footer__socjal-link svg [stroke],
#home .home__read-more svg [stroke],
.faq svg [stroke],
#uparrow svg [stroke],
#myBtn svg [stroke] {
  stroke: currentColor;
}

/* To samo dotyczy ikon rysowanych wypełnieniem, a nie obrysem – na przykład
   domku w ścieżce nawigacyjnej (fill="#212121") czy ikon w menu
   (fill="#112D4E"). W trybie ciemnym były praktycznie niewidoczne.
   Herb gminy w logo jest tu celowo pominięty – ma zachować własne kolory. */
.navbar__list-link svg [fill]:not([fill="none"]),
.navbar__menu-close-btn svg [fill]:not([fill="none"]),
.navbar__hamburger svg [fill]:not([fill="none"]),
.navbar__narzedzie svg [fill]:not([fill="none"]),
.navbar__info-link svg [fill]:not([fill="none"]),
.navbar__kontakt-link svg [fill]:not([fill="none"]),
.breadcrumb svg [fill]:not([fill="none"]),
.cookie svg [fill]:not([fill="none"]),
.cookie__content svg [fill]:not([fill="none"]),
.cookie__content-title svg [fill]:not([fill="none"]),
.popup svg [fill]:not([fill="none"]),
.kafel svg [fill]:not([fill="none"]),
.przycisk svg [fill]:not([fill="none"]),
.sesja svg [fill]:not([fill="none"]),
.gmina__karta svg [fill]:not([fill="none"]),
.footer__socjal-link svg [fill]:not([fill="none"]),
#home .home__read-more svg [fill]:not([fill="none"]),
.faq svg [fill]:not([fill="none"]),
#uparrow svg [fill]:not([fill="none"]),
#myBtn svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

/* Przycisk „do góry”. Wcześniej tło brało kolor --color-prussianBlue, który
   w trybie ciemnym jest jasny – biała strzałka znikała na jasnym tle. */
#myBtn {
  background-color: var(--tekst) !important;
  color: var(--tlo) !important;
  border-radius: var(--r-s) !important;
  box-shadow: var(--cien-2);
}

#myBtn:hover {
  background-color: var(--akcent) !important;
  color: var(--tekst-odwrocony) !important;
}

/* ==========================================================================
   5. UKŁAD
   ========================================================================== */

/* Stare arkusze rozpychały treść ogromnymi marginesami bocznymi
   (padding: 0 350px przy szerokim ekranie), przez co na dużym monitorze
   kolumna z treścią była węższa niż na laptopie. Zastępujemy to
   normalnym ograniczeniem szerokości i wyśrodkowaniem.
   !important jest potrzebne, bo arkusze podstron wczytują się później. */
.main__container,
#home .home__container {
  width: 100% !important;
  max-width: var(--szerokosc-tresci) !important;
  margin: 0 auto !important;
  padding: var(--s5) var(--s4) var(--s7) !important;
}

@media (max-width: 640px) {
  .main__container,
  #home .home__container {
    padding: var(--s4) var(--s3) var(--s6) !important;
  }
}

/* Link „przejdź do treści” – widoczny dopiero po naciśnięciu Tab */
.pomijanie {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 22px;
  background-color: var(--akcent);
  color: var(--tekst-odwrocony);
  font-weight: var(--weight-bold);
  border-radius: 0 0 var(--r-s) 0;
  text-decoration: none;
}

.pomijanie:focus {
  left: 0;
}

/* ==========================================================================
   6. WSPÓLNE ELEMENTY
   ========================================================================== */

/* --- Okruszki (ścieżka nawigacyjna) --- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s5);
  padding: 0;
  background: none !important;
  border: none !important;
  font-size: 13px;
  color: var(--tekst-przygaszony);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--tekst-przygaszony);
}

.breadcrumb a:hover {
  color: var(--akcent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb svg {
  width: 14px;
  height: 14px;
}

/* --- Linki do plików (pisma, dokumenty PDF) --- */

.news__document-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background-color: var(--tlo-delikatne) !important;
  border: 1px solid var(--obwodka);
  border-left: 5px solid var(--akcent) !important;
  border-radius: var(--r-s) !important;
  padding: var(--s3) var(--s4) !important;
  margin: var(--s2) 0 var(--s4) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--tekst) !important;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.news__document-link:hover {
  background-color: var(--akcent-tlo) !important;
  transform: translateX(3px);
}

.news__document-link img,
.news__document-link-img {
  width: 26px !important;
  height: auto;
  flex: 0 0 auto;
}

/* --- Kafle informacyjne (strona główna) --- */

.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--s3);
}

.kafel {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  background-color: var(--tlo-karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  box-shadow: var(--cien-1);
  text-decoration: none;
  color: var(--tekst);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.kafel:hover {
  transform: translateY(-3px);
  box-shadow: var(--cien-3);
  border-color: var(--akcent);
}

.kafel__etykieta {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--akcent);
}

.kafel__glowna {
  font-size: clamp(19px, 1vw + 15px, 24px);
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.kafel__opis {
  font-size: 13.5px;
  color: var(--tekst-przygaszony);
  line-height: 1.5;
  margin: 0;
}

.kafel__stopka {
  margin-top: auto;
  padding-top: var(--s2);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  color: var(--akcent);
}

/* Kafel, który otwiera okienko zamiast prowadzić na inną stronę.
   Musi być przyciskiem (dostępność), więc zerujemy domyślne style przycisku. */
button.kafel--przycisk {
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

button.kafel--przycisk:hover {
  transform: translateY(-3px);
  box-shadow: var(--cien-3);
  border-color: var(--akcent);
}

/* Kafel wyróżniony – np. najbliższy wywóz śmieci */
.kafel--pilne {
  border-left: 5px solid var(--color-indianRed);
}

.kafel--pilne .kafel__etykieta {
  color: var(--color-indianRed);
}

/* --- Nagłówek sekcji --- */

.sekcja__naglowek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.sekcja__tytul {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tekst-przygaszony);
  margin: 0;
}

.sekcja__wiecej {
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-decoration: none;
  color: var(--akcent);
  white-space: nowrap;
}

.sekcja__wiecej:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Obrazki --- */

img {
  max-width: 100%;
}

/* --- Ramki z mapami --- */

iframe {
  width: 100%;
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
}

/* ==========================================================================
   7. POPRAWKI DLA STARSZEGO KODU
   --------------------------------------------------------------------------
   Kilka arkuszy ma kolory wpisane na sztywno (#fff, grey, #333). W trybie
   jasnym wyglądają dobrze, ale w ciemnym byłyby nieczytelne. Poniżej
   punktowo je przestawiamy.
   ========================================================================== */

html[data-motyw="ciemny"] .home__event,
html[data-motyw="ciemny"] .home__event-content,
html[data-motyw="ciemny"] .popup,
html[data-motyw="ciemny"] .popup__content,
html[data-motyw="ciemny"] #blog .blog__entry,
html[data-motyw="ciemny"] .gmina__karta,
html[data-motyw="ciemny"] .sesje__link,
html[data-motyw="ciemny"] .cookie {
  background-color: var(--tlo-karta) !important;
}

html[data-motyw="ciemny"] .sessions__content-heading,
html[data-motyw="ciemny"] #blog .blog__category {
  color: var(--tekst) !important;
}

html[data-motyw="ciemny"] img:not([src$=".svg"]):not(.bez-przygaszenia) {
  /* Delikatne przygaszenie zdjęć, żeby nie raziły na ciemnym tle.
     Herb gminy i kody QR celowo pomijamy - muszą zostać wierne. */
  filter: brightness(0.92) contrast(1.02);
}

html[data-motyw="ciemny"] .contact__code-img,
html[data-motyw="ciemny"] .navbar__logo image,
html[data-motyw="ciemny"] .footer__logo image {
  filter: none !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-motyw="jasny"]) .home__event,
  html:not([data-motyw="jasny"]) .home__event-content,
  html:not([data-motyw="jasny"]) .popup,
  html:not([data-motyw="jasny"]) .popup__content,
  html:not([data-motyw="jasny"]) #blog .blog__entry,
  html:not([data-motyw="jasny"]) .gmina__karta,
  html:not([data-motyw="jasny"]) .sesje__link,
  html:not([data-motyw="jasny"]) .cookie {
    background-color: var(--tlo-karta) !important;
  }

  html:not([data-motyw="jasny"]) img:not([src$=".svg"]):not(.bez-przygaszenia) {
    filter: brightness(0.92) contrast(1.02);
  }

  html:not([data-motyw="jasny"]) .contact__code-img,
  html:not([data-motyw="jasny"]) .navbar__logo image,
  html:not([data-motyw="jasny"]) .footer__logo image {
    filter: none !important;
  }
}

/* Karty w nowych arkuszach – zamiast twardej bieli używamy zmiennej */
.gmina__karta,
#blog .blog__entry,
.sesje__link {
  background-color: var(--tlo-karta);
  border-color: var(--obwodka);
}


/* ==========================================================================
   8. POPRAWKI Z AUDYTU
   ========================================================================== */

/* Etykieta "WYWÓZ ŚMIECI" była czerwienią o kontraście 3,42:1 – poniżej progu
   WCAG AA. Akurat ta informacja jest najczęściej czytana na stronie. */
.kafel--pilne .kafel__etykieta {
  color: var(--alert-tekst);
}

/* Kafel w dniu odbioru – mocniejsze wyróżnienie */
.kafel--dzis {
  background-color: #fff5f5;
  border-color: var(--color-indianRed);
}

html[data-motyw="ciemny"] .kafel--dzis {
  background-color: #2a1a1c;
}

/* Nigdzie w treści nie schodzimy poniżej 12 px. W starych arkuszach
   zostały rozmiary 8 px i 10 px – nieczytelne i odrzucane przez audyty. */
#home .home__event-read-more,
.__read-more-container {
  font-size: 13px !important;
}

/* Landmark treści.
   Kontener treści dostaje role="main" ze skryptu (assets: scripts/navbar.js),
   bo znaczniki <div class="main__container"> są w czterdziestu plikach.
   Poniżej tylko upewniamy się, że fokus na nim nie rysuje ramki. */
[role="main"]:focus {
  outline: none;
}

/* Obrazy nie mogą powodować przeskoków układu przy wczytywaniu */
img {
  max-width: 100%;
  height: auto;
}

/* Pusty atrybut src powoduje w części przeglądarek ponowne żądanie
   do adresu bieżącej strony. Takich obrazów po prostu nie pokazujemy. */
img[src=""],
img:not([src]) {
  display: none;
}