/* ================================================================
   NABORY 2026 — SEKCJA KARATE RAION FC — style.css
   nabory2026.raionfc.pl
   Autor: Ola (UX/UI Designer) — v2, 2026-07-19

   CZYM JEST TEN PLIK (ważne dla Tomka i dla przyszłej Oli):
   Ta strona używa Tailwind CSS (CDN, standard dla nowych projektów
   od 2026-07-19) dla ~95% stylowania — layout, spacing, typografia,
   flex/grid. Ten plik CSS jest CELOWO małym, uzupełniającym
   dodatkiem, nie osobnym systemem stylów. Używam go wyłącznie tam,
   gdzie poleganie na Tailwind CDN niesie udokumentowane ryzyko
   (patrz notatka "DLACZEGO HYBRYDA" niżej) albo gdzie Tailwind nie
   ma dobrego odpowiednika (dekoracyjny wzór halftone, watermark
   kanji, natywny checkbox).

   DLACZEGO HYBRYDA, NIE CZYSTY TAILWIND:
   Poprzedni audyt Oli (team_inbox/obozy_lp_audyt_ola.md, P0-2)
   udokumentował ryzyko: Tailwind Play CDN nie zawsze wiarygodnie
   generuje klasy dla customowych kolorów zdefiniowanych w
   `tailwind.config` w tagu <script>. Zamiast ryzykować, że
   przycisk CTA (najważniejszy element strony — jedyny cel 1:1
   CCD) wyjdzie bez koloru marki, elementy KRYTYCZNE dla konwersji
   i marki (przycisk CTA, eyebrow, plakietki, karty z czarną
   obwódką, sekcja inverted Dojo Kun) mają tu proste, gwarantowane
   klasy CSS oparte na custom properties — niezależne od tego, czy
   CDN poprawnie sparsuje tailwind.config. Zbyszku/Tomku: to jest
   świadoma decyzja, nie "po cichu wrócona" rezygnacja z Tailwinda —
   reszta strony (>90% klas w HTML) to standardowe klasy Tailwind.
   Tomek: po deployu zrób jeden zrzut ekranu i sprawdź, czy czerwień
   przycisków = #fe3a28 (nie szary/domyślny) — to jest dokładnie ten
   test, który poprzedni audyt rekomendował.

   Tokeny poniżej to kopia 1:1 z database/design_tokens.css (plik
   ma być samodzielny — Tomek wdraża go na osobną subdomenę, bez
   zależności od reszty repo). Jeśli tokeny się zmienią w źródle
   kanonicznym, zaktualizuj oba miejsca.
   ================================================================ */

:root {
  --color-primary:        #fe3a28;
  --color-primary-hover:  #e02e1d;
  --color-primary-text:   #c9291a; /* 5.5:1 na bieli — AA. #fe3a28 jako tekst daje tylko 3.59:1 (FAIL) */
  --color-primary-text-on-ink: #fe3a28; /* wariant TYLKO dla tekstu na czarnym tle (.section-ink):
     5.51:1 na #0a0a0a — AA. --color-primary-text (#c9291a) daje tylko ~3.6:1 na czarnym, bo był
     przeliczony wyłącznie pod biel — patrz Rewident GUI, audyt 2026-07-20, Finding #4. Wartość
     równa --color-primary nieprzypadkowo: ten sam odcień, który już świeci na czarnym tle
     przycisku CTA, po prostu użyty tu jako kolor TEKSTU zamiast tła. */
  --color-black:          #0a0a0a;
  --color-white:          #ffffff;

  --color-bg:             #ffffff;
  --color-surface:        #f5f5f4;
  --color-card:           #ffffff;
  --color-border:         rgba(10, 10, 10, 0.10);
  --color-border-strong:  rgba(10, 10, 10, 0.20);

  --color-text:           #111827; /* ~16.1:1 na #fff — AAA */
  --color-text-muted:     #4b5563; /* ~7.0:1 na #fff — AAA */
  --color-text-dim:       #6b7280; /* ~4.83:1 na #fff — AA */
  --color-on-primary:     #0a0a0a; /* 5.51:1 na #fe3a28 — AA */

  --font-heading: 'Antonio', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px;
  --transition: 200ms ease;
  --nav-height: 64px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Kotwice sekcji (np. #formularz) nie mogą chować się pod stałym paskiem górnym */
[id] {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

/* ----------------------------------------------------------------
   PRZYCISK GŁÓWNY (CTA) — jedyny akcentowy kolor na stronie,
   celowo POZA Tailwindem (patrz "DLACZEGO HYBRYDA" powyżej).

   ⚠️ ŚWIADOME ODEJŚCIE OD WCAG AA — decyzja Wacka, 2026-08-06.
   Poprzednia tura (2026-07-19, patrz database/design_tokens.css) celowo
   ustawiła tekst CZARNY, bo biały nie spełniał AA. Wacek po przejrzeniu
   strony explicite poprosił o biały tekst na przycisku — to jego decyzja
   jako właściciela, wykonana tutaj świadomie, nie przez przeoczenie.

   Realny kontrast (przeliczony od nowa, dokładniej niż poprzednia notatka
   „~3.2:1” — wychodzi ~3.59:1, wniosek ten sam): biały na #fe3a28 = 3.59:1.
   - Dla ZWYKŁEGO tekstu próg AA to 4.5:1 → NIE SPEŁNIA.
   - Dla DUŻEGO tekstu (≥18.66px pogrubiony) próg to tylko 3:1 → SPEŁNIA.
   Rzeczywiste rozmiary przycisków na stronie (patrz index.html, klasy
   Tailwind przy .btn-primary): text-sm (14px) i text-base (16px) — żaden
   nie osiąga progu 18.66px, więc formalnie żaden wariant nie kwalifikuje
   się jako "duży tekst". Świadomie NIE podbijam tu font-size, żeby to
   naprawić: (1) to zadanie miało zakres "tylko CSS/kolory", zmiana
   rozmiaru wymagałaby edycji 9 różnych miejsc w index.html (różne klasy
   text-sm/text-base) i ryzykowałaby konflikt specyficzności z Tailwind CDN
   — dokładnie to ryzyko, przed którym ostrzega notatka "DLACZEGO HYBRYDA"
   na górze pliku; (2) nie było to jeszcze testowane wizualnie.
   Kolor tła (--color-primary) NIE zmienił się — pozostaje #fe3a28 wszędzie,
   zgodnie z prośbą Wacka ("to nie dotyczy --color-primary jako takiego").
   To nie pierwszy taki przypadek na tej stronie: por. decyzja Wacka o
   wariancie H1 "A" wbrew rekomendacji Haliny/Korektora (changelog Oli,
   2026-08-05, czwarta tura) — świadome odejście od rekomendacji
   specjalisty, udokumentowane, nie ukryte.
   Rekomendacja na przyszłość (nie wykonana teraz, poza zakresem): jeśli
   font-size przycisków kiedyś wzrośnie do ≥19px, ten kompromis zniknie
   sam — warto to sprawdzić przy najbliższej okazji dotykania HTML.
   ---------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-primary:active { transform: scale(0.98); }

/* Wariant "obrysowy" — używany tylko raz (przycisk pomocniczy w top-barze na desktopie, jeśli potrzebny) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background-color: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Etykieta "eyebrow" (np. NABÓR 2026 · SEKCJA KARATE) — czerwień bezpieczna jako tekst */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary-text);
}

/* ----------------------------------------------------------------
   DEKORACJA — wzór halftone (nawiązanie do plakatu Mistrzostw) i
   watermark kanji "空手" (karate). Czysto dekoracyjne, aria-hidden
   w HTML, nie niosą treści — nie wpływają na dostępność.
   ---------------------------------------------------------------- */
.bg-halftone {
  background-image: radial-gradient(rgba(10, 10, 10, 0.16) 1.5px, transparent 1.5px);
  background-size: 11px 11px;
}

.kanji-watermark {
  position: absolute;
  line-height: 1;
  font-size: 260px;
  font-weight: 700;
  color: var(--color-black);
  opacity: 0.04;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .kanji-watermark { font-size: 160px; }
}

/* ----------------------------------------------------------------
   SEKCJA "INVERTED" — Dojo Kun. Jedyne miejsce na stronie z czarnym
   tłem — świadomy, pojedynczy akcent powagi (patrz uzasadnienie w
   database/design_tokens.css przy tokenach --color-ink-surface-*).
   ---------------------------------------------------------------- */
.section-ink {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Eyebrow wewnątrz sekcji inverted (Dojo Kun) — wariant koloru, żeby spełnić WCAG AA
   na czarnym tle (patrz --color-primary-text-on-ink powyżej). Bazowa klasa .eyebrow
   (czerwień #c9291a) zostaje bez zmian dla wszystkich pozostałych, jasnych sekcji. */
.section-ink .eyebrow {
  color: var(--color-primary-text-on-ink);
}

/* ----------------------------------------------------------------
   FORMULARZ — checkbox RODO. Natywny input, stylowany minimalnie,
   accent-color POZA Tailwindem (ten sam powód co .btn-primary).
   Cel dotykowy to cała etykieta (Tailwind: min-h-12 na <label>),
   nie sam kwadracik — zgodnie z WCAG 2.5.5 i zasadą 44px+.
   ---------------------------------------------------------------- */
input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ----------------------------------------------------------------
   FORMULARZ — placeholder-opcja w <select required> (np. "Wiek dziecka").
   Dopóki wybrana jest pusta, wymagana opcja placeholder ("Np. 8 lat"),
   przeglądarka traktuje select jako :invalid — wykorzystujemy to, żeby
   pokazać ją jasnoszarą, tak samo jak placeholdery pól tekstowych obok
   ("Np. Anna", "Np. 500 000 000"), zamiast w pełnym kolorze tekstu,
   który wygląda jak realnie wybrana wartość. Po wyborze realnej opcji
   select staje się :valid i wraca do normalnego koloru tekstu.
   !important — musi wygrać z klasą Tailwind `text-body` w HTML (ten sam
   powód co nota "DLACZEGO HYBRYDA" na górze pliku). Selecty BEZ atrybutu
   `required` (np. "Stopień zaawansowania" z realną domyślną wartością
   "Nie wiem") są zawsze :valid, więc ta reguła ich nie dotyczy.
   ---------------------------------------------------------------- */
select:invalid {
  color: var(--color-text-dim) !important;
}
select:valid {
  color: var(--color-text) !important;
}

/* ----------------------------------------------------------------
   ZDJĘCIA — hero i karty trenerów (dodane przez Olę, 2026-07-21).
   Wszystkie 3 źródłowe pliki od Wacka są PIONOWE (portret z telefonu),
   a sloty na stronie są POZIOME (hero 16:9, karty trenerów h-40).
   object-position świadomie przesunięte w górę kadru, żeby przy
   przycinaniu do cover zostawały twarz/tors, a nie samo niebo, plaża
   czy nogi. Tailwind nie ma gotowej klasy na te konkretne wartości
   procentowe — zgodnie z zasadą hybrydy na górze tego pliku (patrz
   "DLACZEGO HYBRYDA") trzymam to tutaj zamiast łamać zasadę zespołu
   "brak wartości arbitralnych w nawiasach kwadratowych" w HTML.
   ---------------------------------------------------------------- */
.hero-photo {
  display: block;
  object-fit: cover;
  object-position: center 32%; /* twarz + pięść w kadrze, nie samo niebo nad głową */
}

.trainer-photo {
  display: block;
  object-fit: cover;
  object-position: center 30%; /* twarz w kadrze, nie skrzyżowane ręce/pas — wartość dobrana pod zdjęcie Damiana (karta trenera, sekcja "Trenerzy"), zostaje bez zmian po przebudowie z float na flex 2026-08-06 */
}

/* Zdjęcie Bartka podmienione 2026-08-06 (nowy portret 450×800, ręce skrzyżowane,
   głowa/twarz w górnych ~20% kadru — WYŻEJ niż na starym zdjęciu Damiana, dla
   którego dobrano wspólną wartość 30% wyżej). Na mobile (h-48 w-full) przy
   szerokim viewporcie blisko breakpointu sm (~600px) widoczne jest tylko ok.
   18% wysokości zdjęcia — przy 30% ucinałoby oczy/nos, zostawiając brodę i bark.
   0% (kotwiczenie do góry) pokazuje całą twarz na każdej szerokości mobile,
   kosztem odrobiny miejsca nad głową na węższych telefonach — bezpieczniejszy
   kompromis niż ucięta twarz. Na desktopie (sm:h-auto) object-fit:cover nie
   przycina wysokości, więc ta wartość nie ma tam efektu. */
.trainer-photo-founder {
  object-position: center top;
}

/* ----------------------------------------------------------------
   FAQ — strzałka obraca się przy otwartym <details>, bez JS
   ---------------------------------------------------------------- */
.faq-chevron {
  transition: transform var(--transition);
}
details[open] .faq-chevron {
  transform: rotate(180deg);
}
/* Domyślny znacznik trójkąta w Safari/Chrome — ukryty, bo mamy własną strzałkę SVG */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* ----------------------------------------------------------------
   DOSTĘPNOŚĆ — spójny focus-visible w całej witrynie
   ---------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ----------------------------------------------------------------
   PASEK MOBILNY (sticky bottom) — bezpieczny margines na iOS (notch/home indicator)
   ---------------------------------------------------------------- */
.mobile-cta-safe-area {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ----------------------------------------------------------------
   PROMOCJA SIERPNIOWA 2026 — pasek sticky, popup, plakietka.
   Dodane przez Olę, 2026-08-05. Patrz changelog:
   team_inbox/ola_changelog_promo_sierpien_2026-08-05.md

   Kolory CELOWO poza Tailwindem — ta sama zasada co .btn-primary/.eyebrow
   powyżej (patrz "DLACZEGO HYBRYDA" na górze pliku): pasek/plakietka to
   elementy krytyczne dla konwersji, nie mogą zależeć od tego, czy
   Tailwind Play CDN poprawnie sparsuje `brand`/`brand-hover` z
   tailwind.config w <head>.

   AKTUALIZACJA 2026-08-06 (Ola, na wyraźne polecenie Wacka po przeglądzie
   strony): .promo-bar (pasek na samej górze) NIE używa już --color-primary.
   Wacek uznał, że identyczny czerwony co przyciski CTA jest mylący — pasek
   promocyjny i CTA muszą się wizualnie różnić. Nowy, osobny token
   --color-promo-bar (zielony) niżej. --color-primary jako taki NIE zmienił
   się nigdzie indziej (przyciski CTA, eyebrow, akcenty marki — bez zmian).
   .promo-badge (plakietka „-200 zł”/„7 LOKALIZACJI NABORU”/„JAKTORÓW”)
   ŚWIADOMIE zostawiona czerwona — patrz komentarz przy .promo-badge niżej,
   dlaczego to inny przypadek niż pasek. */

:root {
  /* Domyślna/awaryjna wysokość paska promo, zanim script.js zmierzy
     realną wysokość po wyrenderowaniu (patrz sekcja "PROMO STICKY BAR"
     w script.js — tekst paska zawija się do 2 linii na wąskich ekranach,
     więc realna wysokość jest zmienna). 48px ~ jedna linia na większości
     ekranów startowych — bez JS układ nie "rozjedzie się" całkowicie. */
  --promo-bar-height: 48px;

  /* Zielony tła paska promo — NOWY TOKEN, dodany 2026-08-06, osobny od
     --color-primary (czerwień CTA). Dobrany tak, żeby: (a) pasował do
     reszty palety marki (czerń/biel/czerwień) bez gryzienia się z nią —
     to stonowana, "editorial" zieleń (bliższa leśnej niż jaskrawej
     "sklepowej"), nie pastel/eko-zielony; (b) dawał wystarczający
     kontrast z czarnym tekstem paska (--color-on-primary, bez zmian —
     ten sam token co wcześniej, tylko teraz na innym tle). Kontrast
     czarnego tekstu na #2f9e44: 5.75:1 — AA (próg 4.5:1) z zapasem,
     tekst mógł zostać czarny, nie było potrzeby zmieniać go na biały. */
  --color-promo-bar:        #2f9e44;
  /* Wariant hover/focus — o ok. 15% ciemniejszy, ta sama logika co
     --color-primary-hover. Kontrast czarnego tekstu: 4.81:1 — nadal AA. */
  --color-promo-bar-hover:  #2b8f3f;
}

/* Fixed <header> (patrz index.html, id="site-header") odsunięty o wysokość
   paska promo, żeby oba elementy się nie nakładały. */
#site-header {
  top: var(--promo-bar-height);
}

/* <main id="tresc-glowna"> ma już `pt-16` (Tailwind) jako offset pod fixed
   header (64px) — ten margines dokłada dodatkowe miejsce pod fixed pasek
   promo, żeby hero nie chowało się pod header+pasek. */
#tresc-glowna {
  margin-top: var(--promo-bar-height);
}

.promo-bar {
  background-color: var(--color-promo-bar);
  color: var(--color-on-primary);
}
.promo-bar:hover,
.promo-bar:focus-visible {
  background-color: var(--color-promo-bar-hover);
}

/* .promo-badge ZOSTAJE czerwona (--color-primary), świadomie NIE zmieniona
   razem z .promo-bar — mimo podobnej nazwy klasy to inny przypadek użycia.
   Zlecenie Wacka dotyczyło wprost paska na górze strony (mylony z przyciskiem
   CTA, bo oba są jedynym czerwonym elementem widocznym naraz na ekranie).
   Plakietka jest używana w 4 miejscach, z czego 2 nie są nawet o promocji
   sierpniowej — "7 LOKALIZACJI NABORU" i "JAKTORÓW" (patrz Sekcja 7,
   karty cenowe w index.html) to zwykłe etykiety/tagi w kolorze marki, nie
   duplikaty CTA. Zmiana ich na zielono zepsułaby spójność tych kart i
   wykraczałaby poza to, o co poprosił Wacek. Jeśli po przeglądzie strony
   plakietki też mają się różnić od CTA — do osobnej decyzji, flaguję to
   w changelogu jako obserwację, nie zmieniam samodzielnie. */
.promo-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--transition);
}
.promo-badge:hover,
.promo-badge:focus-visible {
  background-color: var(--color-primary-hover);
}

/* ----------------------------------------------------------------
   BIO DAMIANA — akordeon "czytaj więcej" (dodane przez Olę, 2026-08-05,
   patrz team_inbox/ola_changelog.md). Ta sama zasada co FAQ (.faq-chevron
   wyżej): natywny <details>/<summary>, zero JS do samego rozwijania.
   Etykieta (Czytaj więcej / Zwiń) i obrót strzałki przełączają się
   czystym CSS przez selektor details[open] — bez zależności od tego,
   czy Tailwind CDN sparsuje wariant group-open (ta sama zasada co
   "DLACZEGO HYBRYDA" na górze tego pliku: elementy interaktywne
   krytyczne dla UX mają gwarantowane zachowanie, niezależne od CDN).
   list-style/marker już ukryte globalną regułą `summary` powyżej.
   ---------------------------------------------------------------- */
.damian-bio-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
  color: var(--color-primary-text);
  min-height: 44px; /* cel dotykowy 44px+ (WCAG 2.5.5) mimo wizualnie małego tekstu */
}
.damian-bio-toggle-label-open { display: none; }
details[open] .damian-bio-toggle-label-closed { display: none; }
details[open] .damian-bio-toggle-label-open { display: inline; }
details[open] .damian-bio-toggle .faq-chevron { transform: rotate(180deg); }

/* ----------------------------------------------------------------
   KARUZELA ZDJĘĆ TRENERA DAMIANA — USUNIĘTA W CAŁOŚCI 2026-08-06 (Ola),
   na wyraźne polecenie Wacka ("zlikwidujmy tę galerię"), w ramach
   przebudowy struktury LP na 9 sekcji. Patrz team_inbox/ola_changelog.md
   i team_inbox/master_brief_redesign_nowylp_2026-08-06.md.
   Zdjęcia z galerii (damian-01.jpg…damian-14.jpg) WCIĄŻ ISTNIEJĄ w
   images/trener-damian-galeria/ — 6 z 14 wplecionych jako zwykłe <img>
   w treści sekcji 3, 4, 5 i 6 (patrz index.html), pozostałe 8 to rezerwa.
   Klasy .damian-carousel* (kontener, track, slide, strzałki, kropki) i
   odpowiadający im JS w script.js zostały usunięte — nie są już nigdzie
   używane w index.html.
   ---------------------------------------------------------------- */