/* ============================================================
   SPIS TREŚCI - custom.css (style projektowe, ostateczność po Tailwindzie)
   1. PAGINACJA
   2. SLIDERY SWIPER (pagination bullets + marquee + pasek statystyk + slider opinii)
   3. FORMULARZ KONTAKTOWY (telefon, checkbox/input focus)
   4. AKTYWNE MENU
   5. SCROLL HEADER (wzorzec, zakomentowany)
   6. CZCIONKI LOKALNE (deklaracje w assets/css/fonts.css)
   7. TREŚCI PRAWNE (.legalContent - typografia bloków core w legal-section)
   8. TREŚĆ WPISU (.postContent - typografia bloków core w single.html)
   9. COOKIEYES (kolory banera zgód - wtyczka nie pozwala ich zmienić w panelu)
   ------------------------------------------------------------
   Kolory: to STARTER - nie hardcodujemy tu barw klienta. Miejsca oznaczone
   „TODO kolor projektu" podmień na token z panelu Design PG (albo klasę TW
   na elemencie). Domyślnie zostawiamy neutralny czarny / currentColor.
   Tailwind-first: jeśli styl da się zapisać klasą TW - rób to na elemencie,
   nie tutaj. custom.css jest dla Swiper, pseudo-elementów i styli wtyczek.
   Kontener strony: klasa „max-w-site" (1324px) to NATYWNA klasa Tailwinda -
   zdefiniowana w custom config kompilatora PG (--container-site), nie tutaj.
   Więcej: CLAUDE.md.
   ============================================================ */

/* === 1. PAGINACJA === */
/* Strzałka na skraju zakresu stron. W makiecie wygaszona strzałka to ten sam
   krążek co aktywny, tylko w szarości accent_tertiary przy 25% krycia. */
.paginationBttn.disabled{
    color: color-mix(in srgb, var(--color-accent_tertiary-500) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-accent_tertiary-500) 24%, transparent);
    background-color: #fff;
    pointer-events: none;
}
/* Ikona strzałki rysuje się na currentColor, więc samo `color` wyżej ją wygasza. */


/* === 2. SLIDERY SWIPER (pagination bullets, marquee, pasek statystyk, slider opinii) === */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #000;
  opacity: 0.3;
}

.swiper-pagination-bullet-active {
  background: #000;   /* TODO kolor projektu (akcent aktywnej kropki) */
  opacity: 1;
}

/* Ciągły marquee (.autoSlider) - liniowy ruch bez easingu.
   Nowa instancja z własną klasą (np. .logosSlider) potrzebuje analogicznej reguły
   timing-function na SWOJEJ klasie, nie polega na dziedziczeniu po innej.
   Selektor MUSI być trójczłonowy: Swiper ma .swiper-free-mode > .swiper-wrapper
   z ease-out o tej samej wadze, a jego arkusz bywa ładowany po custom.css. */
.autoSlider.swiper .swiper-wrapper {
  transition-timing-function: linear;
}

/* Przy slidesPerView: 'auto' slajd bez tej reguły spada do 100% szerokości
   kontenera (jeden slajd na ekran zamiast paska). */
.autoSlider .swiper-slide {
  width: auto;
}

/* Pasek statystyk (.statsSlider) - marquee poniżej 1024px, wyżej Swiper wyłączony
   breakpointem i układ robi CSS z markupu (lg:gap-0 lg:justify-between). */
.statsSlider.swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.statsSlider .swiper-slide {
  width: auto;
}

/* Odstęp pozycji (gap-14 w markupie) trzyma układ tam, gdzie Swiper nie działa:
   kanwa PG, edytor Gutenberga, front bez JS. Po inicjalizacji odstęp przejmuje
   spaceBetween Swipera i flex gap musi zniknąć - Swiper nie wlicza gapa do swojej
   siatki, więc pętla zawijałaby się ze skokiem o sumę przerw. */
.statsSlider.swiper-initialized .swiper-wrapper {
  gap: 0;
}

/* Klony pasa marquee (dokłada je sliders.js, żeby loop miał zapas) są potrzebne
   tylko na mobile: w statycznych kolumnach ma zostać komplet oryginałów.
   Translate wrappera zdejmuje sliders.js - reguła z !important byłaby tu pułapką,
   bo blokuje inline'owe zerowanie ze skryptu i pas dojeżdża resztą animacji. */
@media (min-width: 1024px) {
  .statsSlider .statsSliderClone {
    display: none;
  }
}

/* Pasek bez działającego marquee (brak JS, ograniczony ruch, kanwa PG, edytor
   Gutenberga) zawija się do rzędów i pokazuje komplet pozycji. Bez tego cztery
   pozycje z whitespace-nowrap wychodzą poza .swiper { overflow: hidden } i na
   telefonie widać tylko pierwszą z kawałkiem drugiej. Od 1024px układ robi
   lg:justify-between, więc reguła kończy się na 1023.98px. */
@media (max-width: 1023.98px) {
  .statsSlider:not(.swiper-initialized) .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
  }
}


/* Slider opinii jest elementem gridu rozpiętym na dwie kolumny, z których druga
   ma szerokość auto. Swiper nadaje slajdom szerokości inline, więc max-content
   pasa slajdów wpada do algorytmu układania ścieżek gridu, ścieżka rośnie,
   Swiper przelicza slajdy od nowa i pętla nakręca się w nieskończoność (na
   froncie kontener dobijał do kilkuset tysięcy pikseli). Samo min-width: 0 tego
   nie zatrzymuje - ono ogranicza minimum elementu, a ścieżkę auto rozpycha jego
   maksimum. Para width: 0 + min-width: 100% odcina wkład max-content od
   liczenia ścieżek, a realną szerokość ustala dopiero minimum liczone od
   gotowej ścieżki. */
.opinieSlider {
  width: 0;
  min-width: 100%;
}

/* Slider opinii (.opinieSlider) - Swiper pracuje dopiero od 1024px, niżej karty
   leżą jedna pod drugą zwykłym flex-colem z markupu.
   Odstęp między kartami trzyma gap z markupu (kanwa PG, edytor, front bez JS).
   Od 1024px przejmuje go spaceBetween Swipera, więc flex gap musi zniknąć -
   inaczej Swiper liczy szerokość slajdów bez przerw i pas się rozjeżdża.
   Media query jest tu konieczna: poniżej 1024px slider bywa zainicjowany, ale
   wyłączony breakpointem, a wtedy odstęp kart nadal robi gap. */
@media (min-width: 1024px) {
  .opinieSlider.swiper-initialized .swiper-wrapper {
    gap: 0;
  }

  /* Bez działającego Swipera (kanwa PG, front bez JS) slajdy zostają na
     swiperowym width: 100% i z rzędu robi się jedna karta. Reguła działa tylko
     do momentu inicjalizacji, więc nie wchodzi w drogę szerokościom inline.
     Podział 2 karty (1024px) / 3 karty (1280px) ma odpowiadać slidesPerView
     w konfiguracji Swipera. */
  .opinieSlider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 20px) / 2);
  }
}

@media (min-width: 1280px) {
  .opinieSlider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 40px) / 3);
  }
}

/* Swiper daje slajdom height: 100%. Poniżej 1024px karty leżą w kolumnie, więc
   każda rozciąga się na wysokość całego stosu i wychodzi poza .swiper (overflow
   hidden przycina resztę). Wysokość ma wynikać z treści, a równe karty w rzędzie
   i tak robi align-items: stretch. */
.opinieSlider .swiper-slide {
  /* display:flex, bo arkusz Swipera ma niewarstwowe .swiper-slide { display: block },
     ktore wygrywa z utility .flex z @layer utilities. Bez tego flex-col i mt-auto
     na karcie sa martwe na froncie, a w edytorze dzialaja (CSS Swipera leci tylko
     na froncie) - czyli blad widac dopiero na produkcji. */
  display: flex;
  flex-direction: column;
  height: auto;
}

/* Strzałki i kropki siedzą w statycznym pasku pod sliderem, nie na jego bokach.
   Selektory MUSZĄ być dwuczłonowe: reguły Swipera (position: absolute, własna
   szerokość, margin-top, ::after z ikoną fontową) są niewarstwowe i przy tej
   samej wadze wygrywają kolejnością ładowania. */
.opinieSlider.swiper .swiper-button-prev,
.opinieSlider.swiper .swiper-button-next {
  position: static;
  width: 40px;
  height: 40px;
  margin: 0;
  /* Kolor musi paść tutaj, a nie klasą text-primary-500: Swiper ustawia własny
     --swiper-navigation-color regułą spoza @layer i bije utility Tailwinda. */
  color: var(--color-primary-500);
}

.opinieSlider.swiper .swiper-button-prev::after,
.opinieSlider.swiper .swiper-button-next::after {
  content: none;
}

/* Rozmiar chevronu musi paść tutaj, bo arkusz Swipera ma niewarstwowe
   `.swiper-button-prev svg { width: 100%; height: 100% }` - dwuczłonowy selektor
   bije każdą klasę szerokości z @layer utilities i ikona rozlewa się na całe
   40 x 40 px przycisku. 16,5 x 9 px to naturalny rozmiar glifu z makiety;
   obrót o 90 stopni robi klasa rotate w markupie. */
.opinieSlider.swiper .swiper-button-prev svg,
.opinieSlider.swiper .swiper-button-next svg {
  width: 16.5px;
  height: 9px;
}

.opinieSlider.swiper .swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  transform: none;
  /* Odstęp kropek robi flex gap, ale Swiper dokłada im jeszcze margin 0 4px
     regułą `.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet`
     o tej samej wadze co nasza - przy remisie decyduje kolejność arkuszy, a ta na
     froncie wypada po stronie Swipera i przerwa rośnie z 12 do 20 px. Zerowanie
     jego własnej zmiennej jest odporne na kolejność ładowania. */
  --swiper-pagination-bullet-horizontal-gap: 0px;
}

.opinieSlider.swiper .swiper-pagination-bullet {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 9999px;
  background: #fff;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Kolorowa pigułka siedzi na KAŻDEJ kropce, nie tylko na aktywnej, i na
   nieaktywnej jest po prostu wygaszona. Gdyby istniała wyłącznie na aktywnej,
   w klatce zmiany slajdu znikałaby z poprzedniej kropki natychmiast, podczas gdy
   sam slot zjeżdża z 40 do 10 px przez 300 ms - kolor teleportował się wtedy na
   kolejną kropkę i cała animacja czytała się jak skok.

   Pasek NIE rośnie szerokością, tylko odsłanianiem gotowej pigułki przez
   clip-path. Animowana szerokość tła jest przy paincie zaokrąglana do pełnych
   pikseli urządzenia, a przy 30 px drogi na 6 s daje to około 30 widocznych
   stopni, czyli skok mniej więcej co 0,2 s. Krawędź clip-path rasteruje się z
   antyaliasingiem i idzie podpikselowo, do tego nie rusza layoutu. Krótkie
   przejście 120 ms wygładza odstępy między klatkami, a przy 6 s przebiegu jego
   opóźnienie jest niewidoczne. `round 5px` trzyma oba końce zaokrąglone na
   każdej szerokości, więc stan spoczynku to nadal kropka, nie ścięty prostokąt. */
.opinieSlider.swiper .swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 16px;
  background: var(--color-primary-500);
  opacity: 0;
  clip-path: inset(0 calc(100% - (10px + 30px * var(--opinie-progress, 1))) 0 0 round 5px);
  transition: clip-path 0.12s linear, opacity 0.3s ease;
}

/* Aktywna kropka jest wskaźnikiem czasu do zmiany slajdu. Slot ma na stałe 40px,
   a pigułka odsłania się od kropki do pełnej belki - dzięki temu sąsiednie kropki
   stoją w miejscu przez cały przebieg, a wysokość paska nie drgnie. Tło slotu
   jest przezroczyste, kolor niesie pigułka. */
.opinieSlider.swiper .swiper-pagination-bullet-active {
  width: 40px;
  border-radius: 16px;
  background: transparent;
}

/* --opinie-progress (0-1) ustawia sliders.js ze zdarzenia autoplayTimeLeft.
   Domyślne 1 w var() pilnuje, żeby bez JS-u, przy prefers-reduced-motion i przy
   sliderze zablokowanym breakpointem albo watchOverflow aktywna kropka była po
   prostu wydłużoną belką. */
.opinieSlider.swiper .swiper-pagination-bullet-active::before {
  opacity: 1;
}


/* === 3. FORMULARZ KONTAKTOWY === */
/* Telefon (wtyczka intl-tel-input) */
.selected-flag{
  border-radius: 12px 0 0 12px;
  background-color: #fff !important;
  border-right: 1px solid #000;
}
.flag-container{
  top: 15px !important;
  bottom: 15px !important;
}
.selected-dial-code{
  font-size: 14px;
}

/* Checkbox, input, textarea - [checked] [focus].
   currentColor = element dziedziczy kolor akcentu (ustaw klasą TW text-[...] na formularzu
   albo podmień na token projektu). */
textarea:focus,
input:focus {
  border: 1px solid currentColor !important;       /* TODO kolor projektu */
  --tw-ring-color: currentColor !important;
  --tw-ring-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2) !important;
}

input[type="checkbox"] {
  color: currentColor;                             /* TODO kolor projektu */
}

input[type="checkbox"]:focus {
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
}

input[type="checkbox"]:checked {
  background-color: currentColor;                  /* TODO kolor projektu */
  border: 1px solid currentColor;
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}


/* === 4. AKTYWNE MENU === */
/* Kolor aktywnej pozycji robią warianty in-[.current-menu-item] na linkach w index.html,
   a klasę na pozycjach sekcji dokłada filtr w inc/custom.php (sekcja 12). Nie dopisuj tu
   reguły z kolorem: CSS spoza @layer wygrywa z klasami Tailwinda i zgasi podświetlenie. */


/* === 5. SCROLL HEADER === */
/* Moduł assets/js/modules/custom.js dodaje klasę .header-scrolled na .header po
   przewinięciu > 50px. Efekt stylujesz per projekt (mniejszy padding, cień, tło).
   Wzorzec (odkomentuj i dopasuj albo zrób klasami TW na elemencie):
.header.header-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
*/


/* === 6. CZCIONKI LOKALNE === */
/* Deklaracje @font-face siedzą w osobnym assets/css/fonts.css, nie tutaj.
   Powód: ścieżkę arkusza z fontem podaje się Pinegrow (Local web font), a PG
   wstawia go jako @import do tailwind.css. Gdyby wskazać custom.css, cały ten
   plik ładowałby się dwa razy - raz przez @import, raz przez inc/enqueue.php. */

/* === 7. TREŚCI PRAWNE (.legalContent) === */
/* Blok legal-section (regulamin, polityka prywatności, obowiązek informacyjny).
   Klient wkleja w strefę InnerContent zwykłe bloki core (nagłówki, akapity, listy),
   a te nie mają własnych styli (preflight je zeruje) - typografię daje ta sekcja.
   Kolory przez tokeny palety (po podmianie palety w projekcie sekcja sama
   wpada w kolorystykę), bez hexów konkretnego projektu. */
.legalContent h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.legalContent h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.legalContent p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
}

.legalContent ul,
.legalContent ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  line-height: 1.7;
}

.legalContent ul { list-style: disc; }
.legalContent ol { list-style: decimal; }

.legalContent li { margin-bottom: 0.375rem; }

.legalContent a {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s;
}

.legalContent a:hover {
  color: var(--color-primary-600);
}


/* === 8. TREŚĆ WPISU (.postContent) === */
/* Szablon single.html: treść artykułu pisze klient blokami core Gutenberga,
   a te nie mają własnych klas ani styli (preflight je zeruje). Rozmiar bazowy
   i kolor akapitów siedzą klasami TW na wrapperze, tu zostaje tylko to, czego
   nie da się przypiąć do elementu bez klasy: nagłówki, listy, cytat i marginesy.
   Kolejność marginesów jest policzona pod makietę: sąsiadujące marginesy się
   zlewają, więc akapit (24 px) przed nagłówkiem daje dokładnie odstęp nagłówka. */
.postContent > *:first-child { margin-top: 0; }
.postContent > *:last-child { margin-bottom: 0; }

.postContent h2 {
  margin: 2.5rem 0 0.625rem;
  font-family: var(--font-SchibstedGrotesk);
  font-size: 1.3125rem;
  font-weight: 900;
  line-height: 1.75rem;
  color: var(--color-accent-500);
}

.postContent h3 {
  margin: 2rem 0 0.5rem;
  font-family: var(--font-SchibstedGrotesk);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.625rem;
  color: var(--color-accent-500);
}

.postContent p { margin: 0 0 1rem; }

.postContent ul,
.postContent ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.postContent ul { list-style: disc; }
.postContent ol { list-style: decimal; }
.postContent li { margin-bottom: 0.375rem; }

.postContent strong { font-weight: 700; color: var(--color-accent-500); }

.postContent a {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s;
}

.postContent a:hover { color: var(--color-primary-600); }

.postContent figure { margin: 1.5rem 0; }
.postContent img { border-radius: 1rem; }

.postContent figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--color-accent_tertiary-500);
}

/* Wyróżniony box „W skrócie" z makiety. Klient wstawia blok Cytat (albo Grupę
   z tłem z palety) - oba warianty dostają ten sam niebieski kafelek, bo blok
   core nie niesie żadnej klasy, po której dałoby się je rozróżnić na froncie. */
.postContent blockquote,
.postContent .wp-block-group.has-background {
  margin: 1.5rem 0;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  background-color: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
  color: var(--color-accent-500);
}

.postContent blockquote p,
.postContent .wp-block-group.has-background p { margin: 0 0 0.75rem; }

.postContent blockquote p:last-child,
.postContent .wp-block-group.has-background p:last-child { margin-bottom: 0; }

.postContent blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--color-accent_tertiary-500);
}

@media (min-width: 1024px) {
  .postContent h2 {
    margin-top: 3.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .postContent h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .postContent p,
  .postContent ul,
  .postContent ol { margin-bottom: 1.5rem; }

  .postContent blockquote,
  .postContent .wp-block-group.has-background {
    margin: 2rem 0;
    padding: 1.1875rem 1.5rem;
  }
}


/* === 9. COOKIEYES (baner zgód) === */
/* Darmowa wersja wtyczki blokuje zmianę kolorów w panelu i wpisuje swoje kolory inline
   (style="..."), dlatego !important. Wzór jak w projekcie Coral: przyciski obrysowe
   w kolorze marki, "Akceptuj wszystko" wypełniony. */
.cky-btn-revisit-wrapper {
  background: var(--color-primary-500) !important;
}

.cky-btn {
  border-color: var(--color-primary-500) !important;
  background: transparent !important;
  color: var(--color-primary-500) !important;
}

.cky-btn-accept {
  border-color: var(--color-primary-500) !important;
  background: var(--color-primary-500) !important;
  color: #fff !important;
}

/* Link do polityki i "Pokaż więcej" w banerze oraz w centrum preferencji. */
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy,
.cky-show-desc-btn {
  color: var(--color-primary-500) !important;
}

/* Włączony przełącznik kategorii (widać go w "Dostosuj", gdy kategoria ma przypisane ciasteczka). */
.cky-switch input[type="checkbox"]:checked {
  background-color: var(--color-primary-500) !important;
}

/* Obrys fokusu z klawiatury - arkusz wtyczki daje tu swój niebieski. */
.cky-notice-des a.cky-policy:focus-visible,
.cky-notice-des button.cky-policy:focus-visible,
.cky-preference-content-wrapper .cky-show-desc-btn:focus-visible,
.cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-preference-header .cky-btn-close:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible,
.cky-footer-wrapper a:focus-visible,
.cky-btn:focus-visible {
  outline-color: var(--color-primary-500) !important;
}