/* ============================================================
   SPIS TREŚCI - custom.css (style projektowe, ostateczność po Tailwindzie)
   1. PAGINACJA
   2. SLIDERY SWIPER (pagination bullets + marquee + opinieSlider: szerokości, easing)
   3. FORMULARZ KONTAKTOWY (telefon, checkbox/input focus)
   4. AKTYWNE MENU (wzorzec wariantu TW, bez reguły)
   5. SCROLL HEADER (pełne ciemne tło po przewinięciu)
   6. CZCIONKI LOKALNE (wzorzec @font-face, zakomentowany)
   7. TREŚCI PRAWNE (.legalContent - typografia bloków core w legal-section, styl akapitu Wstęp)
   8. OBRAZY Z BIBLIOTEKI WP (h-full na obrazach wp-image-*)
   9. BAZA (kursor, poziomy scroll, focus, przewijanie do kotwic, margines figure z WP)
   10. EMOJI WP (img.emoji przy wyłączonym skrypcie emoji)
   11. HERO: KEN BURNS (bloki home-hero i city-hero, przenikanie i przybliżanie zdjęć tła)
   12. TREŚĆ WPISU BLOGA (.postContent - typografia bloków core w single.html, 1:1 z rich textu Webflow)
   ------------------------------------------------------------
   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.
   Warstwy: utility Tailwinda ZAWSZE wygrywa z naszym CSS. Nasze reguły siedzą
   w @layer components (baza pól w @layer base). Bez warstwy tylko nadpisania
   cudzego CSS bez warstwy (Swiper, WordPress, wtyczki), każde z komentarzem.
   Pierwsza linia pliku ustala kolejność warstw jak w tailwind.css (w edytorze
   ten plik ładuje się przed tailwind.css).
   Kontener strony: klasa „max-w-site" (1284px, kontener Webflow) to NATYWNA klasa Tailwinda -
   zdefiniowana w custom config kompilatora PG (--container-site), nie tutaj.
   Więcej: CLAUDE.md.
   ============================================================ */
@layer theme, base, components, utilities;

/* === 1. PAGINACJA === */
/* Bez warstwy: klasę .disabled nadaje paginacja PG i ten stan ma wygrać z klasami
   koloru/ramki na linku. */
.paginationBttn.disabled {
  color: var(--color-ink-200);
  border-color: var(--color-ink-200);
  pointer-events: none;
}

.paginationBttn.disabled svg path {
  stroke: var(--color-ink-200);
}


/* === 2. SLIDERY SWIPER (pagination bullets + marquee + opinieSlider) === */
/* Bez warstwy: nadpisuje niewarstwowy arkusz Swipera ładowany po Tailwindzie. */
.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. */
.autoSlider .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;
}

/* Opinie (blok reviews-slider): stała szerokość slajdu z projektu i równa wysokość kart.
   Bez warstwy, bo arkusz Swipera ustawia .swiper-slide { width: 100%; height: 100% }
   i też jest bez warstwy. Karta w slajdzie ma h-full, minimalną wysokość daje klasa TW. */
.opinieSlider .swiper-slide {
  width: 300px;
  height: auto;
}

@media (min-width: 48rem) {
  .opinieSlider .swiper-slide {
    width: 350px;
  }
}

@media (min-width: 62rem) {
  .opinieSlider .swiper-slide {
    width: 406px;
  }
}

/* Arkusz Swipera daje .swiper { margin: auto }. W rodzicu flex-col auto marginesy wyłączają
   stretch i kontener rozpycha się do szerokości wszystkich kart, a Swiper liczy wymiary
   od złej szerokości. Szerokość ustawiamy wprost. */
.opinieSlider {
  width: 100%;
  min-width: 0;
}

/* Easing przesuwu z Webflow (ease-out-quad), czas 500 ms ustawia sliders.js. */
.opinieSlider .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* === 3. FORMULARZ KONTAKTOWY === */
/* Telefon (wtyczka intl-tel-input): bez warstwy, nadpisuje niewarstwowy arkusz wtyczki. */
.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;
}

/* Pola ogólnie (w @layer base: klasy focus:/accent- na polu zawsze wygrywają). */
@layer base {
  textarea:focus,
  input:focus {
    border-color: currentColor;
    --tw-ring-color: currentColor;
  }

  /* Checkbox i radio natywne, kolor z tokenu (działa też na ciemnym tle).
     Zgoda CF7 ma własny wygląd w components.css (sekcja 9). */
  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--color-primary-500, currentColor);
  }
}


/* === 4. AKTYWNE MENU === */
/* Bez reguły w CSS. Aktywną pozycję stylujesz wariantem Tailwinda na linku
   w szablonie menu: in-[.current-menu-item]:text-primary-500 (WordPress daje
   klasę current-menu-item na <li>). To utility, więc nie zabija hovera.
   Na jednostronicówce z kotwicami WP oznacza KAŻDĄ pozycję jako bieżącą -
   tam wariantu aktywnego nie dajesz. */


/* === 5. SCROLL HEADER === */
/* Moduł assets/js/modules/custom.js dodaje klasę .header-scrolled na .header po
   przewinięciu > 50px. Na górze strony header zostaje przezroczysty z gradientem (1:1 z Webflow),
   po przewinięciu dostaje pełne ciemne tło, żeby białe menu nie wchodziło na jasną treść
   (decyzja 2026-11-04). Tło na pseudo-elemencie: gradient z klas TW na headerze zostaje,
   a krycie da się płynnie przejść. Header ma z-[999], więc z-index -1 zostaje w jego kontekście. */
@layer components {
  .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-ink-950);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .header.header-scrolled::before {
    opacity: 1;
  }
}


/* === 6. CZCIONKI LOKALNE === */
/* Font z pliku (woff2) zamiast Google Fonts. Dwa kroki:
   1) zadeklaruj @font-face tutaj (plik w assets/fonts/),
   2) dodaj rodzinę jako token w panelu Design PG (font family) - inaczej klasa
      `font-nazwa` w Tailwindzie nie istnieje i nie zadziała.
   Wzorzec:
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-variable.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
*/


/* === 7. TREŚCI PRAWNE (.legalContent) === */
@layer components {
  /* Blok legal-section (Komunikat RODO, regulaminy, polityki). 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. Wartości 1:1 z Webflow
     (.rodo-* na /komunikat-rodo), font Inter zamiast Ariala. Kolor tekstu dziedziczony
     z sekcji (text-ink-700). W edytorze to samo daje lustro w editor.css, sekcja 3,
     bo neutralizacja edytora zeruje marginesy nagłówków, akapitów i list. */
  .legalContent h2 {
    margin: 44px 0 14px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
  }

  /* Webflow nie ma h3, zostaje skala domowa. */
  .legalContent h3 {
    margin: 32px 0 12px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .legalContent p {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.7;
  }

  /* Styl akapitu Wstęp (inc/custom.php, sekcja 9e): pierwszy akapit dokumentu. */
  .legalContent .is-style-lead {
    margin-bottom: 16px;
    font-size: 19px;
    line-height: 1.6;
  }

  .legalContent ul,
  .legalContent ol {
    margin: 0 0 12px;
    padding-left: 22px;
  }

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

  .legalContent li {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.7;
  }

  .legalContent strong { font-weight: 700; }

  /* Linki w kolorze tekstu z podkreśleniem, bez hovera (1:1 z Webflow). */
  .legalContent a {
    color: inherit;
    text-decoration: underline;
  }
}


/* === 8. OBRAZY Z BIBLIOTEKI WP === */
/* Bez warstwy: WordPress wstrzykuje niewarstwowe img:where([class*=wp-image-]) { height: auto },
   które bije klasę h-full na obrazie z pola bloku (obraz nie wypełnia kontenera). */
img[class*="wp-image-"].h-full {
  height: 100%;
}


/* === 9. BAZA === */
@layer base {
  /* Tailwind 4 nie daje kursora na przyciskach. */
  button:not(:disabled),
  [role="button"],
  summary {
    cursor: pointer;
  }

  /* clip zamiast hidden: hidden psuje position: sticky i piny ScrollTriggera. */
  body {
    overflow-x: clip;
  }

  :focus-visible {
    outline: 2px solid var(--color-primary-500, currentColor);
    outline-offset: 2px;
  }

  /* Kotwice nie chowają się pod headerem (fixed i sticky); --header-height liczy custom.js. */
  html {
    scroll-padding-top: var(--header-height, 4.25rem);
  }
}

/* Poza warstwą celowo: wp-block-library ma niewarstwowe :where(figure){margin:0 0 1em},
   które bije każdą utility marginesu na <figure> (blok founder-quote: mt-20 dawało 0).
   revert-layer oddaje margines warstwom, czyli klasom Tailwinda i preflightowi. */
figure {
  margin: revert-layer;
}


/* === 10. EMOJI WP === */
/* Emoji wpisane w treść przed wyłączeniem skryptu emoji (inc/custom.php, sekcja 4) zostają
   w bazie jako <img class="emoji">. Bez warstwy: wygrywa z img { max-width; height } preflightu
   i trzyma emoji w rozmiarze tekstu. */
img.emoji {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0 0.07em;
  vertical-align: -0.1em;
  border: none;
  box-shadow: none;
}


/* === 11. HERO: KEN BURNS (bloki home-hero i city-hero) === */
/* Port interakcji Webflow: zdjęcie 1 przybliża się 10 s, przez 1 s przenika w zdjęcie 2,
   to przybliża się 10 s i przenika z powrotem (cykl 22 s). Tylko od 768 px, jak w Webflow.
   Przy ograniczonym ruchu stoi zdjęcie 1 (leży nad zdjęciem 2). */
@layer components {
  @media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .heroKenBurns1 {
      animation: pn-hero-kenburns-1 22s linear infinite;
    }

    .heroKenBurns2 {
      animation: pn-hero-kenburns-2 22s linear infinite;
    }
  }
}

@keyframes pn-hero-kenburns-1 {
  0% { opacity: 1; transform: scale(1); }
  45.45% { opacity: 1; transform: scale(1.15); }
  50% { opacity: 0; transform: scale(1.15); }
  95.45% { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pn-hero-kenburns-2 {
  0% { opacity: 0; transform: scale(1); }
  45.45% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1); }
  95.45% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.15); }
}


/* === 12. TREŚĆ WPISU BLOGA (.postContent) === */
/* Szablon single.html: kontener treści wpisu (cms-post-content). Wartości 1:1 z domyślnego rich textu
   Webflow, bez zmian na progach; font, rozmiar 14/20 i kolor bazowy dają klasy TW na kontenerze.
   Klasy postH1 i postSubheading nadaje import (narzedzia\wp\import-blog.php): powtórzony tytuł
   (w Webflow h1) i śródtytuły starszych wpisów (w Webflow pogrubiony akapit) są h2 z dawnym wyglądem.
   Lustro w edytorze wpisu: editor.css, sekcja „Treść wpisu bloga". */
@layer components {
  .postContent p {
    margin: 0 0 0.625rem;
  }

  .postContent h2,
  .postContent h3,
  .postContent h4 {
    margin: 1.25rem 0 0.625rem;
    font-weight: 700;
    color: inherit;
    /* Długie słowo w nagłówku 32 px („natychmiastowym:”) wypychało stronę na 320 px. */
    overflow-wrap: break-word;
  }

  .postContent h2 { font-size: 2rem; line-height: 2.25rem; }
  .postContent h3 { font-size: 1.5rem; line-height: 1.875rem; }
  .postContent h4 { margin-top: 0.625rem; font-size: 1.125rem; line-height: 1.5rem; }

  .postContent .postH1 { font-size: 2.375rem; line-height: 2.75rem; }

  .postContent .postSubheading {
    margin: 0 0 0.625rem;
    font-size: inherit;
    line-height: inherit;
  }

  .postContent strong,
  .postContent b { font-weight: 700; }
  .postContent em { font-style: italic; }

  /* Webflow bez hovera; stały wzorzec linku w treści projektu (FAQ): kolor marki po najechaniu. */
  .postContent a {
    color: var(--color-ink-900);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s;
  }

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

  .postContent ul,
  .postContent ol {
    margin: 0 0 0.625rem;
    padding-left: 2.5rem;
    overflow: hidden;
  }

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

/* Poza warstwą celowo: wp-block-library (bez warstwy) daje tabelom ramkę currentColor, padding .5em,
   3 px pod thead i margines figure, a obrazom wyśrodkowanym display:table i marginesy; reguły
   w @layer by przegrały. Szeroka tabela przewija się w swojej ramce, nie cała strona (Webflow
   dawał tu poziomy scroll na telefonie); overflow-x powtórzony za WP na wypadek innego zestawu stylów. */
.postContent .wp-block-table {
  margin: 0 0 1.25rem;
  overflow-x: auto;
}

.postContent .wp-block-table thead {
  border: 0;
}

.postContent .wp-block-table th,
.postContent .wp-block-table td {
  border: 1px solid var(--color-ink-200);
  padding: 0.625rem;
  text-align: left;
}

.postContent .wp-block-table th {
  background-color: var(--color-ink-50);
  font-weight: 700;
}

.postContent .wp-block-image {
  max-width: 60%;
  margin: 0 auto 0.625rem;
}

.postContent .wp-block-image img {
  width: 100%;
  height: auto;
}