/* ============================================================
   SPIS TREŚCI - custom.css (style projektowe, ostateczność po Tailwindzie)
   1. PAGINACJA
   2. SLIDERY SWIPER (pagination bullets + marquee)
   3. FORMULARZ KONTAKTOWY (telefon, checkbox/input focus)
   4. AKTYWNE MENU
   5. SCROLL HEADER (wzorzec, zakomentowany)
   6. CZCIONKI LOKALNE (wzorzec @font-face, zakomentowany)
   7. SMOOTH SCROLL (kotwice menu, offset pod fixed header)
   8. STRONA PRAWNA (typografia treści regulaminu/polityki)
   ------------------------------------------------------------
   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.
   ============================================================ */

/* === 7. SMOOTH SCROLL (kotwice menu, offset pod fixed header) ===
   Płynne przewijanie do kotwic sekcji (#okursie, #program itd.). scroll-padding-top
   odsuwa cel spod fixed headera - wysokość bierzemy z --header-height (ustawia ją
   custom.js na realną wysokość headera), plus mały zapas. Reduced-motion wyłącza
   płynność. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height, 72px) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* === 1. PAGINACJA === */
.paginationBttn.disabled{
    color: #E2E2E2;
    border-color: #E2E2E2;
    pointer-events: none;
}

.paginationBttn.disabled svg path{
    stroke: #E2E2E2;
}


/* === 2. SLIDERY SWIPER (pagination bullets + marquee) === */
.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 auto-scroll (.autoSlider) - liniowy ruch bez easingu */
.autoSlider .swiper-wrapper {
  transition-timing-function: linear;
}


/* === 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 === */
.menu-item.current-menu-item a,
.active-mega-menu{
  color: currentColor;                             /* TODO kolor projektu (akcent aktywnej pozycji) */
}


/* === 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 === */
/* 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;
}
*/


/* === 8. STRONA PRAWNA (regulamin/polityka) - typografia treści InnerContent === */
/* Klient wkleja treść zwykłymi blokami (nagłówki, akapity, listy) w strefie
   .legalContent bloku legal-section. Tu nadajemy im czytelną typografię w tokenach. */
.legalContent {
    font-family: var(--font-Poppins);
    color: var(--color-dark_text);
    font-size: 1rem;
    line-height: 1.7;
}
.legalContent > * + * {
    margin-top: 1rem;
}
.legalContent h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.5rem;
}
.legalContent h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.75rem;
}
.legalContent ul,
.legalContent ol {
    padding-left: 1.5rem;
}
.legalContent ul {
    list-style: disc;
}
.legalContent ol {
    list-style: decimal;
}
.legalContent li + li {
    margin-top: 0.5rem;
}
.legalContent a {
    color: var(--color-secondary-500);
    text-decoration: underline;
}
.legalContent a:hover {
    text-decoration: none;
}
.legalContent strong {
    font-weight: 700;
}