/* rev: light-mode QA kontrastu — 2026-07-14b */

/* ═══════════ TRYB JASNY — poprawki kontrastu (WCAG AA) ═══════════
   Light mode nie byl QA'owany: elementy zakladajace ciemne tlo albo uzywajace
   brandowego rozu (#ff005c/#e8004f) jako TEKST na jasnym tle nie spelnialy 4.5:1.
   Roz-tekst -> #b3003a (>=4.9:1 na kazdym odcieniu jasnego tla). lightmode.css juz
   pokrywa reguly tam zdefiniowane; tu domykamy LITERALNY #ff005c z inline'ow HTML
   oraz komponenty, ktore zakladaly ciemne tlo.                                   */

/* 1) Rozowy TEKST na jasnym tle (literalny #ff005c z inline styli / id) */
body.light-mode .kalc-step-num,
body.light-mode .kalc-svc-price,
body.light-mode .kalc-prog-step.active,
body.light-mode .kcta-label,
body.light-mode .kcta-prop-icon,
body.light-mode .cmp-tab.is-active,
body.light-mode .cc-btn-accept,
body.light-mode .sub_text,
body.light-mode .link-7,
body.light-mode .kcta-calc-banner-cta,
body.light-mode #avail-status-text,
body.light-mode #hire-availability a,
body.light-mode a[href*="polityka-prywatnosci"]{ color:#b3003a !important }
body.light-mode .kcta-prop-icon{ border-color:#b3003a !important }

/* 1a) Karty na /blog: inline <style> w blog.html ustawia .sub_text na rgba(255,0,92,.75)
   selektorem `.main_category_wrapp:has(a.product_link) .sub_text` — BARDZIEJ specyficznym niż
   `body.light-mode .sub_text` wyzej (oba z !important), wiec tamten override nigdy nie wygrywal
   i tytuly wpisow mialy 2.97:1. Bijemy go specyficznoscia (dokladamy body.light-mode). */
body.light-mode .main_category_wrapp:has(a.product_link) .sub_text{ color:#b3003a !important }

/* 1c) .uui-button-link ("Wroc" na /cennik) NIE jest linkiem tekstowym — ma WLASNE tlo:
   `background-color:var(--grey-light-1); color:var(--white)`, czyli w dark mode bialy tekst
   na szarym przycisku. Hurtowa zamiana "98 regul color -> #b3003a" w lightmode.css trafila
   tez jego, robiac ROZOWY tekst na szarosci #c8c4be = 4.06:1. To regresja tamtej zmiany,
   nie decyzja projektowa — przywracamy kolor tekstu motywu (var(--white) = #0a0909 w light),
   czyli ciemny na jasnoszarym przycisku: 11.45:1. Rozowa zostaje sama strzalka (path). */
body.light-mode .uui-button-link{ color:#0a0909 !important }

/* 1b) .pricing-aside jest CIEMNA karta w dark mode (#080808). W LIGHT mode ma byc
   JASNA karta z CIEMNYM tekstem (spojnie z reszta motywu), nie ciemna z jasnym.
   !important, bo home.css ustawia jej tlo/tekst na sztywno. Przycisk "kopiuj" i jego
   ciemny tekst z lm-fixes/enhancements sa teraz POPRAWNE (jasne tlo) — nie ruszamy. */
body.light-mode .pricing-aside{ background:#ffffff !important; border-color:#dcd8d1 !important }
body.light-mode .pricing-aside,
body.light-mode .pricing-aside-list,
body.light-mode .pricing-aside-foot{ color:#2a2828 !important }
body.light-mode .pricing-aside-foot b{ color:#0a0909 !important }
body.light-mode .pricing-aside-h,
body.light-mode .pricing-aside-list li span,
body.light-mode .pricing-aside a{ color:#b3003a !important }

/* 2) Komponenty zakladajace CIEMNE tlo — w light mode dostaja ciemny tekst */
body.light-mode .tmpl-more-btn{ color:#3a3838 !important; border-color:rgba(0,0,0,.22) !important }
body.light-mode .tnl.is-active{ color:#0a0909 !important }

/* 3) Zbyt jasne szarosci / zielen na jasnym tle */
body.light-mode .filter-btn{ color:#5a5757 }
body.light-mode .kcta-stack-lbl,
body.light-mode .kcta-stat-lbl{ color:#5a5757 !important }
body.light-mode .kalc-addon-cost.discount{ color:#1a7431 !important }

/* 4) Przyciski z ROZOWYM TLEM -> bialy tekst (w light mode mialy ciemny, 4.3:1).
   UWAGA: tylko .primary — zwykly .hire-contact-link ma JASNE tlo i ciemny tekst
   (blanket #fff psul np. "LinkedIn": bialy na jasnym). */
body.light-mode .ww-skip,
body.light-mode .ww-skip-link,
body.light-mode .vtest-submit-btn,
body.light-mode .hire-contact-link.primary,
body.light-mode .hire-calc-cta,
body.light-mode .skip-nav{ color:#fff !important }

/* rev: kontrast podstron (realizacje-stat, jotform, chip) — 2026-07-14 */
/* ── DOSTEPNY ROZ POD BIALYM TEKSTEM (WCAG 1.4.3) ──────────────
   Brandowy #ff005c pod bialym tekstem daje tylko 3.88:1 (min. 4.5). #e60052 daje
   4.68:1 i jest wizualnie prawie nieodroznialny. Uwaga: dotyczy WYLACZNIE TLA —
   roz jako TEKST zostaje #ff005c (na ciemnym tle ma 5.34:1; #e60052 spadlby do 4.43).
   Ten plik jest na wszystkich stronach, wiec zmienna dziala globalnie.
   Light mode: #e8004f (kolor juz wczesniej uzywany w lightmode.css).            */
:root{--highlight-btn:#e60052}
body.light-mode{--highlight-btn:#e8004f}

/* Chip numeru sekcji ("1_ Warianty zakupu") ma w DARK mode jasne tlo (background:
   var(--white) = #e3e1e1), a rozowy tekst #ff005c dawal na nim 2.98:1. #c2003f = 4.79:1.
   Tylko dark — light mode ma wlasny override w lightmode.css.                    */
body:not(.light-mode) ._0_informacje-2{color:#c2003f !important}

/* Link "Formularz kontaktowy" wstrzykiwany przez widget JotForm — ma wlasne, brandowe
   tlo #ff005c pod bialym tekstem (3.88:1). Nie kontrolujemy jego CSS, wiec !important. */
a.jotform-feedback-link{background:var(--highlight-btn, #e60052) !important}

/* Statystyki "realizacje" — BUG, nie kosmetyka: markup (.realizacje-stat-val/-label)
   jest m.in. na /kalkulator.html, ale reguly istnialy WYLACZNIE w home.css, ladowanym
   tylko na stronie glownej. Efekt: liczby ("100 PLN", "Stawka / godzina") renderowaly
   sie bez stylu — ciemnoszare na czerni, kontrast 1.64:1, praktycznie niewidoczne.
   Definiujemy je tutaj, bo ten plik jest na wszystkich stronach.                  */
.realizacje-stat{display:flex;flex-direction:column;gap:.3rem}
.realizacje-stat-val{
  font-family:var(--font-family-1,'JetBrains Mono',monospace);
  font-size:1.3rem;font-weight:700;line-height:1;color:#ff005c;   /* 5.34:1 na czerni */
}
.realizacje-stat-label{
  font-family:var(--font-family-1,'JetBrains Mono',monospace);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:#b9b6bd;                                                   /* 10.36:1 na czerni */
}
/* w jasnym motywie te same elementy leza na jasnym tle — roz i szarosc musza sciemniec */
body.light-mode .realizacje-stat-val{color:#c2003f}
body.light-mode .realizacje-stat-label{color:#5a5757}

/* ============================================================
   ww-interactions.css — spojne interakcje + dostepnosc (webweb)

   Jeden jezyk ruchu dla calego serwisu i paneli:
     --ww-ease / --ww-dur  (zgodne z istniejacym .benefit-reveal)

   Dostepnosc (WCAG 2.1 AA):
     2.4.1 Bypass Blocks     -> skip link "Przejdz do tresci"
     2.4.7 Focus Visible     -> widoczny pierscien focusa dla klawiatury
     2.3.3 Animation         -> wszystko gasnie przy prefers-reduced-motion
     2.5.5 Target Size       -> min. 44px dla malych ikon-linkow

   Klasa html.ww-motion jest dodawana przez js/ww-interactions.js.
   Bez JS wszystko jest widoczne i statyczne (progressive enhancement).
   ============================================================ */

:root {
  --ww-ease: cubic-bezier(.16, 1, .3, 1);
  --ww-dur: .45s;
  --ww-dur-slow: .6s;
  --ww-ring: var(--highlight, #ff005c);
}

/* ---------- 1. Focus widoczny tylko dla klawiatury ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--ww-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* mysz/dotyk — bez obwodki (klawiatura nadal ja dostaje) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* cel focusa po skoku ze skip-linku nie ma dostawac obwodki */
[tabindex="-1"]:focus { outline: none; }

/* ---------- 2. Skip link (WCAG 2.4.1) ---------- */
.ww-skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10000;
  padding: .75rem 1.15rem;
  /* dostepny roz pod bialym tekstem (WCAG AA) — var z home.css, fallback #e60052 */
  background: var(--highlight-btn, #e60052);
  color: #fff;
  font-family: var(--font-family-1, 'JetBrains Mono', monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .25s var(--ww-ease);
}
.ww-skip:focus { top: 1rem; }

/* ---------- 3. Mikro-interakcje przyciskow ---------- */
.w-button,
.border-button {
  transition:
    transform var(--ww-dur) var(--ww-ease),
    box-shadow var(--ww-dur) var(--ww-ease),
    background-color var(--ww-dur) var(--ww-ease),
    color var(--ww-dur) var(--ww-ease);
}
.w-button:active,
.border-button:active { transform: translateY(1px); }

/* ---------- 4. Karty — delikatne uniesienie ---------- */
.ww-lift {
  transition:
    transform var(--ww-dur) var(--ww-ease),
    box-shadow var(--ww-dur) var(--ww-ease),
    border-color var(--ww-dur) var(--ww-ease);
}
.ww-lift:hover,
.ww-lift:focus-within {
  transform: translateY(-4px);
  border-color: var(--ww-ring);
}

/* ---------- 5. Reveal przy scrollu (ten sam jezyk co .benefit-reveal) ---------- */
html.ww-motion .ww-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--ww-dur-slow) ease,
    transform var(--ww-dur-slow) ease;
  transition-delay: var(--ww-reveal-delay, 0s);
}
html.ww-motion .ww-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 6. Powiekszony obszar klikalny malych ikon (WCAG 2.5.5) ---------- */
.ww-skip { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 7. Mniej ruchu = zero ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ww-motion .ww-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ww-lift:hover,
  .ww-lift:focus-within { transform: none; }
  .w-button:active,
  .border-button:active { transform: none; }
  html:focus-within { scroll-behavior: auto; }
}

/* ── Hover przeniesiony z atrybutów onmouseover/onmouseout ──────────────────
   CSP nie dopuszcza już inline handlerów (script-src-attr 'none'), a te trzy
   linki zmieniały wygląd wyłącznie przez JS w atrybucie. To czysty CSS.
   !important tylko tam, gdzie element ma te same właściwości w style="" —
   styl inline wygrywa z klasą i bez tego hover nic by nie zrobił. */
.ww-hov-tlo { transition: background .18s; }
.ww-hov-tlo:hover { background: rgba(255, 0, 92, 0.1); }

.ww-hov-ramka:hover {
  border-color: rgba(255, 0, 92, .6) !important;
  color: #ff005c !important;
}