/* ============================================================================
   PAI-THEME — fundament site-wide redesignu pomocneai.pl (makieta C „Hybryda")
   ----------------------------------------------------------------------------
   Warstwa ujednolicająca WSZYSTKIE strony (Kadence) ZANIM przebudujemy główną.
   Źródło designu: hero-demo/mockupy/opcja-c.html (zaakceptowana przez Rafała).

   WDROŻENIE: enqueue w child theme ALBO Additional CSS — jeśli Additional CSS,
   to zapis WYŁĄCZNIE przez `wp eval-file --user=1` (KSES wycina selektory!).

   CZEGO TEN PLIK CELOWO NIE ROBI:
   - NIE dotyka .pai-viz-* ani sekcji hero z #paiVizCard (style w Additional CSS,
     zaakceptowane 2026-07-13 — „jest pięknie, tak zostaje").
   - NIE zmienia layoutu kolumn/gridów Gutenberga (tylko kolory/cienie/promienie).
   - NIE styluje #wpadminbar, .cmplz-* (Complianz) ani popupów Fluent Forms.
   - NIE zmienia font-family (zostaje Inter + Lora z Kadence).
   ============================================================================ */

/* ================= 1. ZMIENNE DESIGNU ================= */
:root{
  --pai-navy:#0e2f58;        /* granat podstawowy (header, karty) */
  --pai-navy-d:#0a2442;      /* granat ciemny (stopka, tekst na pomarańczu) */
  --pai-navy-x:#071a31;      /* granat najgłębszy (gradienty) */
  --pai-orange:#f8a000;      /* pomarańcz akcentowy */
  --pai-orange-d:#d98c00;    /* pomarańcz hover (ciemniejszy) */
  --pai-orange-l:#ffb84d;    /* pomarańcz jasny (linki na granacie) */
  --pai-paper:#e7eef7;       /* jasny „papier" tła sekcji */
  --pai-ink:#152c4e;         /* tekst podstawowy na jasnym */
  --pai-ink-soft:#3d5578;    /* tekst przygaszony na jasnym (AA na paper) */
  --pai-line:rgba(14,47,88,.12);
  --pai-line-strong:#cdd9ea;
  --pai-num:#c3d3e9;         /* wyblakły błękit wielkich numerów */
  --pai-radius:14px;
  --pai-radius-lg:22px;
  --pai-radius-btn:10px;
  --pai-shadow-sharp:8px 8px 0 rgba(14,47,88,.08);      /* ostry cień kart z makiety */
  --pai-shadow-sharp-sm:6px 6px 0 rgba(14,47,88,.06);
  --pai-shadow-soft:0 10px 34px rgba(14,47,88,.10);
  --pai-shadow-big:0 24px 60px rgba(7,26,49,.35);
  --pai-header-h:80px;       /* min-height headera z customizera Kadence */
}

/* ================= 2. BAZA / BEZPIECZEŃSTWO ================= */
/* 360px bez poziomego scrolla */
body{overflow-x:clip}
.entry-content img{max-width:100%;height:auto}
.entry-content :is(h1,h2,h3,h4,p,li,figcaption){overflow-wrap:break-word}

/* kotwice (#o-nas, #faq, #zapis…) nie chowają się pod sticky headerem */
.entry-content [id]{scroll-margin-top:calc(var(--pai-header-h) + 16px)}

/* czytelny focus dla 45+ (klawiatura) */
:focus-visible{outline:3px solid var(--pai-orange);outline-offset:2px}

/* ================= 3. TYPOGRAFIA GLOBALNA ================= */
body.wp-theme-kadence{
  font-size:1.08rem;
  line-height:1.65;
  color:var(--pai-ink);
}
body.wp-theme-kadence h1,
body.wp-theme-kadence h2,
body.wp-theme-kadence h3,
body.wp-theme-kadence h4{
  color:var(--pai-navy-d);
  font-weight:700; /* Lora nie ma 800 — nie wymuszamy syntetycznego */
}
body.wp-theme-kadence h1{
  font-size:clamp(2.05rem,4.6vw,3.15rem);
  line-height:1.15;
  letter-spacing:-.015em;
}
body.wp-theme-kadence h2{
  font-size:clamp(1.7rem,3.4vw,2.6rem); /* stonowany clamp z makiety */
  line-height:1.16;
  letter-spacing:-.015em;
}
body.wp-theme-kadence h3{
  font-size:clamp(1.16rem,1.9vw,1.35rem);
  line-height:1.3;
}
body.wp-theme-kadence h4{font-size:1.08rem;line-height:1.4}
h1,h2{text-wrap:balance}

/* linki w treści: granat, gruby podkreślnik, hover pomarańcz-ciemny (AA) */
.entry-content p a:not(.wp-block-button__link),
.entry-content li a{
  color:var(--pai-navy);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.entry-content p a:not(.wp-block-button__link):hover,
.entry-content li a:hover{color:var(--pai-orange-d)}
/* w granatowym boksie linki zostają pomarańczowe (jak dotąd) */
.entry-content .pai-boks a{color:var(--pai-orange)}
.entry-content .pai-boks a:hover{color:var(--pai-orange-l)}

/* ================= 4. HEADER — granat, sticky, biały logotyp ================= */
/* tło granatowe zawsze (logo jest BIAŁE — biały header = niewidoczne logo) */
#masthead .site-main-header-wrap .site-header-row-container-inner{
  background:var(--pai-navy);
}
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner{
  background:var(--pai-navy);
}
/* płynne przejście + cień po „przyklejeniu" */
#masthead .site-header-row-container-inner,
#masthead .kadence-sticky-header{
  transition:box-shadow .25s ease,background-color .25s ease;
}
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck{
  box-shadow:0 6px 24px rgba(7,26,49,.35);
}

/* menu: białe linki, hover pomarańcz + delikatna poduszka */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a{
  color:#fff;
  border-radius:8px;
  transition:background-color .15s ease,color .15s ease;
}
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a:hover{
  color:var(--pai-orange);
  background:rgba(255,255,255,.08);
}
#masthead .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a{
  color:var(--pai-orange);
}

/* CTA w headerze: pomarańczowa pigułka, GRANATOWY tekst (biały na #f8a000 nie ma AA) */
#masthead .header-button.button{
  background:var(--pai-orange);
  color:var(--pai-navy-d);
  font-weight:700;
  border-radius:999px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  box-shadow:0 6px 18px rgba(248,160,0,.28);
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#masthead .header-button.button:hover,
#masthead .header-button.button:focus-visible{
  background:#ffb01e;
  color:var(--pai-navy-d);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(248,160,0,.38);
}

/* hamburger — biały, hover pomarańcz (zostaje jak było, tylko dociągnięcie) */
#masthead .mobile-toggle-open-container .menu-toggle-open{color:#fff}
#masthead .mobile-toggle-open-container .menu-toggle-open:hover,
#masthead .mobile-toggle-open-container .menu-toggle-open:focus-visible{color:var(--pai-orange)}

/* ================= 5. MOBILE DRAWER — granat, pomarańczowe akcenty =================
   Drawer DZIAŁA (naprawiony) — tu tylko spójność kolorystyczna, zero zmian mechaniki. */
#mobile-drawer.popup-drawer .drawer-inner{background:var(--pai-navy-d)}
#mobile-drawer .drawer-header .drawer-toggle{color:#fff}
#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .drawer-header .drawer-toggle:focus-visible{color:var(--pai-orange)}

/* ================= 6. STOPKA — głęboki granat ================= */
#colophon .site-footer-row-container-inner{background:var(--pai-navy-d)}
#colophon .site-footer-wrap{color:rgba(223,233,245,.82)}
#colophon .footer-html{color:rgba(223,233,245,.82);line-height:1.7}
#colophon .footer-html a{
  color:#fff;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .15s ease;
}
#colophon .footer-html a:hover,
#colophon .footer-html a:focus-visible{color:var(--pai-orange)}

/* ================= 7. PRZYCISKI — pigułki 10px, pomarańcz, min 44px ================= */
/* Gutenberg: wp-block-button (bez nadpisywania bloków z własnymi kolorami) */
body.wp-theme-kadence .wp-block-button__link{
  border-radius:var(--pai-radius-btn);
  min-height:44px;
  padding:.7em 1.7em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:700;
  line-height:1.25;
  transition:background-color .18s ease,color .18s ease,transform .15s ease,box-shadow .15s ease;
}
body.wp-theme-kadence .wp-block-button__link:not(.has-background){
  background:var(--pai-orange);
  box-shadow:4px 4px 0 rgba(14,47,88,.16);
}
body.wp-theme-kadence .wp-block-button__link:not(.has-text-color){color:var(--pai-navy-d)}
body.wp-theme-kadence .wp-block-button__link:not(.has-background):hover,
body.wp-theme-kadence .wp-block-button__link:not(.has-background):focus-visible{
  background:var(--pai-orange-d);
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 rgba(14,47,88,.2);
}
body.wp-theme-kadence .wp-block-button__link:not(.has-text-color):hover{color:var(--pai-navy-d)}
/* wariant konturowy (is-style-outline): granatowa ramka, hover wypełnienie */
body.wp-theme-kadence .is-style-outline .wp-block-button__link:not(.has-background){
  background:transparent;
  border:2px solid var(--pai-navy);
  color:var(--pai-navy);
  box-shadow:none;
}
body.wp-theme-kadence .is-style-outline .wp-block-button__link:not(.has-background):hover{
  background:var(--pai-navy);
  color:#fff;
  transform:none;
}

/* Fluent Forms: submit jak przycisk główny (bije inline'owy styl formularza) */
body.wp-theme-kadence form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style){
  background-color:var(--pai-orange);
  color:var(--pai-navy-d);
  font-weight:700;
  font-size:1.05rem;
  border:0;
  border-radius:var(--pai-radius-btn);
  min-height:48px;
  padding:.7em 2em;
  cursor:pointer;
  box-shadow:4px 4px 0 rgba(14,47,88,.16);
  transition:background-color .18s ease,transform .15s ease,box-shadow .15s ease;
}
body.wp-theme-kadence form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
body.wp-theme-kadence form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):focus-visible{
  background-color:var(--pai-orange-d);
  color:var(--pai-navy-d);
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 rgba(14,47,88,.2);
}

/* Fluent Forms: pola — duże, czytelne (45+) */
body.wp-theme-kadence .frm-fluent-form .ff-el-form-control{
  min-height:48px;
  padding:.65em 1em;
  font-size:1.02rem;
  color:var(--pai-ink);
  background:#fff;
  border:1.5px solid rgba(14,47,88,.28);
  border-radius:var(--pai-radius-btn);
}
body.wp-theme-kadence .frm-fluent-form .ff-el-form-control:focus{
  outline:3px solid var(--pai-orange);
  outline-offset:1px;
  border-color:var(--pai-orange);
}
body.wp-theme-kadence .frm-fluent-form .ff-el-input--label label{
  font-weight:600;
  color:var(--pai-ink);
}
body.wp-theme-kadence .frm-fluent-form .ff-el-form-check-input{
  accent-color:var(--pai-orange);
  width:1.3em;
  height:1.3em;
}

/* ================= 8. KARTY PODSTRON — ostry cień z makiety ================= */
/* kolumny-karty z tłem (użyte na wszystkich stronach pai-*) */
.entry-content .wp-block-column.has-background{
  box-shadow:var(--pai-shadow-sharp);
  transition:transform .18s ease,box-shadow .18s ease;
}
/* neutralizacja starego hovera (translateY + miękki cień z Additional CSS) */
.entry-content .wp-block-column.has-background:hover{
  transform:none;
  box-shadow:var(--pai-shadow-sharp);
}
@media (hover:hover){
  .entry-content .wp-block-column.has-background:hover{
    transform:translate(-3px,-3px);
    box-shadow:11px 11px 0 rgba(14,47,88,.13);
  }
}
/* granatowy boks (np. „Co warto wiedzieć") — cień mocniejszy */
.entry-content .pai-boks{box-shadow:8px 8px 0 rgba(10,36,66,.18)}

/* akordeony FAQ (wp-block-details) — karta z ostrym cieniem, duży cel dotyku */
.entry-content .wp-block-details{
  background:#fff;
  border:1.5px solid var(--pai-line-strong);
  border-radius:12px;
  box-shadow:var(--pai-shadow-sharp-sm);
  padding:.9rem 1.2rem;
  margin-bottom:.8rem;
}
.entry-content .wp-block-details summary{
  min-height:44px;
  align-items:center;
  font-weight:600;
  color:var(--pai-navy);
  font-size:1.05rem;
}
.entry-content .wp-block-details summary::after{
  content:"+";
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:var(--pai-orange);
  color:var(--pai-navy-d);
  font-size:1.4rem;
  font-weight:700;
  line-height:1;
  transition:transform .25s ease;
  transform:none;
}
.entry-content .wp-block-details[open] summary::after{transform:rotate(45deg)}

/* zajawki artykułów (latest posts) — miękkie dociągnięcie */
.entry-content .wp-block-latest-posts__featured-image img{border-radius:12px}

/* ================= 9. KLASY POMOCNICZE (dla przebudowy głównej) ================= */

/* --- .pai-mark: grube pomarańczowe podkreślenie słowa (marker z makiety) --- */
.pai-mark{
  background-image:linear-gradient(180deg,transparent 58%,rgba(248,160,0,.62) 58%,rgba(248,160,0,.62) 94%,transparent 94%);
  padding-inline:.06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* --- .pai-num: wielki numer kroku (kontur, jak 01–07 w makiecie) --- */
.pai-num{
  display:block;
  font-size:clamp(3rem,7vw,5rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--pai-num);
  font-variant-numeric:tabular-nums;
}
@supports ((-webkit-text-stroke:2px #000)){
  .pai-num{color:transparent;-webkit-text-stroke:3px var(--pai-orange)}
}

/* --- .pai-tape: taśma marquee (pasek zaufania z makiety) ---
   Markup: .pai-tape > .pai-tape__inner > 2× .pai-tape__group (druga aria-hidden="true")
           > .pai-tape__item (b = liczba, span = opis, .pai-tape__star = ✦) */
.pai-tape{
  background:#fff;
  border-block:3px solid var(--pai-navy);
  overflow:hidden;
  padding-block:1rem;
}
.pai-tape__inner{
  display:flex;
  width:max-content;
  animation:pai-tape 36s linear infinite;
}
.pai-tape:hover .pai-tape__inner,
.pai-tape:focus-within .pai-tape__inner{animation-play-state:paused}
.pai-tape__group{display:flex;align-items:center;white-space:nowrap}
.pai-tape__item{
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  padding-inline:1.6rem;
  font-size:clamp(1rem,2.2vw,1.28rem);
  color:var(--pai-ink-soft);
}
.pai-tape__item b{
  color:var(--pai-navy);
  font-weight:700;
  font-size:1.15em;
  letter-spacing:-.02em;
}
.pai-tape__star{color:var(--pai-orange);font-size:1.2em}
@keyframes pai-tape{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* --- .pai-sec-dark: granatowa sekcja z pomarańczową poświatą (sekcja zapisów) --- */
.pai-sec-dark{
  background:
    radial-gradient(ellipse 80% 60% at 85% 8%,rgba(248,160,0,.08),transparent 55%),
    linear-gradient(165deg,var(--pai-navy-d) 0%,var(--pai-navy) 55%,var(--pai-navy-d) 100%);
  color:#e9f0f9;
}
body.wp-theme-kadence .pai-sec-dark :is(h1,h2,h3,h4){color:#fff}
body.wp-theme-kadence .pai-sec-dark p{color:rgba(231,238,247,.88)}
.entry-content .pai-sec-dark p a:not(.wp-block-button__link),
.entry-content .pai-sec-dark li a{color:#fff}
.entry-content .pai-sec-dark p a:not(.wp-block-button__link):hover,
.entry-content .pai-sec-dark li a:hover{color:var(--pai-orange-l)}
/* formularz w ciemnej sekcji: białe etykiety, jasne pola */
body.wp-theme-kadence .pai-sec-dark .frm-fluent-form .ff-el-input--label label{color:rgba(255,255,255,.92)}
body.wp-theme-kadence .pai-sec-dark .frm-fluent-form .ff-el-form-control{
  background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.3);
}
body.wp-theme-kadence .pai-sec-dark .frm-fluent-form .ff-el-form-check-label span{color:rgba(231,238,247,.85)}

/* --- .pai-glass: szklana karta (backdrop-blur) na ciemnym tle --- */
.pai-glass{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:calc(var(--pai-radius-lg) + 2px);
  padding:clamp(24px,4vw,40px);
  box-shadow:var(--pai-shadow-big);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pai-glass{background:rgba(13,41,77,.92)}
}

/* ================= 10. DOSTĘPNOŚĆ RUCHU + DROBNE MOBILE ================= */
@media (prefers-reduced-motion: reduce){
  .pai-tape__inner{animation:none;width:100%;justify-content:center}
  .pai-tape__group{flex-wrap:wrap;justify-content:center;white-space:normal;row-gap:.4rem}
  .pai-tape__group[aria-hidden="true"]{display:none}
  .entry-content .wp-block-column.has-background,
  .entry-content .wp-block-column.has-background:hover{transform:none;transition:none;box-shadow:var(--pai-shadow-sharp)}
  body.wp-theme-kadence .wp-block-button__link,
  body.wp-theme-kadence .wp-block-button__link:hover,
  body.wp-theme-kadence form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
  #masthead .header-button.button:hover{transform:none;transition:none}
  .entry-content .wp-block-details summary::after{transition:none}
}

@media (max-width:480px){
  /* 360px: nic nie wystaje, przyciski nieco węższe w padding */
  body.wp-theme-kadence .wp-block-button__link{padding:.7em 1.3em}
  .pai-num{font-size:clamp(2.6rem,12vw,3.4rem)}
  .pai-tape__item{padding-inline:1.1rem}
}
/* ============================================================================
   PAI-HOME-EXTRA — CSS TYLKO dla przebudowanej strony głównej (makieta C).
   Uzupełnia pai-theme.css (fundament site-wide) — ZERO dublowania jego reguł:
   .pai-mark, .pai-num, .pai-tape*, .pai-sec-dark, .pai-glass są JUŻ w fundamencie.
   Tu: hero2 full-bleed (warstwy tła + canvas #paiVizHero), kickery, pull,
   wiersze programu, drobiazgi ciemnej sekcji zapisów, responsywność 360px.
   WDROŻENIE jak fundament: enqueue w child theme ALBO Additional CSS zapisywane
   WYŁĄCZNIE przez `wp eval-file --user=1` (KSES wycina selektory!).
   ============================================================================ */

/* ================= 1. HERO2 — pełnoekranowy granat z konstelacją ================= */
.pai-hero2{
  position:relative;
  isolation:isolate;
  overflow:clip;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:88vh;
  min-height:88svh;
  background:var(--pai-navy-d);
}

/* warstwy tła — dzieci layoutu constrained dostają max-width: zdejmujemy go */
.pai-hero2 .pai-hero2-foto,
.pai-hero2 .pai-hero2-mgla,
.pai-hero2 #paiVizHero{
  position:absolute;
  inset:0;
  max-width:none;
  margin:0;
}
.pai-hero2 .pai-hero2-foto{
  z-index:0;
  background:url("https://pomocneai.pl/wp-content/uploads/2026/06/hero.jpg") center 32%/cover no-repeat;
}
.pai-hero2 .pai-hero2-mgla{
  z-index:1;
  background:linear-gradient(160deg,rgba(7,26,49,.94) 0%,rgba(10,36,66,.86) 42%,rgba(14,47,88,.78) 72%,rgba(10,36,66,.94) 100%);
}
.pai-hero2 .pai-hero2-mgla::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 90% 60% at 78% 30%,rgba(248,160,0,.10),transparent 60%);
}
.pai-hero2 #paiVizHero{
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y; /* dotyk: przewijanie strony działa, gesty poziome dla canvasa */
}

/* treść hero NAD warstwami tła */
.pai-hero2 > *{position:relative;z-index:3}
.pai-hero2 > .pai-hero2-foto{position:absolute;z-index:0}
.pai-hero2 > .pai-hero2-mgla{position:absolute;z-index:1}
.pai-hero2 > #paiVizHero{position:absolute;z-index:2}

/* typografia hero — biel na granacie */
body.wp-theme-kadence .pai-hero2 h1{
  color:#fff;
  text-shadow:0 3px 26px rgba(7,26,49,.55);
  max-width:16em;
}
body.wp-theme-kadence .pai-hero2 p{color:rgba(236,243,251,.93)}
.pai-hero2 .pai-hero2-lead{
  margin-top:1.1rem;
  font-size:clamp(1.08rem,2vw,1.32rem);
  line-height:1.55;
  max-width:36em;
  text-shadow:0 2px 14px rgba(7,26,49,.5);
}
.pai-hero2 .pai-hero2-actions{margin-top:1.6rem}
.pai-hero2 .pai-hero2-trustline{
  margin-top:1.2rem;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.85);
}

/* przycisk widmo (ghost) na granacie — nadpisuje pomarańcz z fundamentu */
body.wp-theme-kadence .pai-hero2 .pai-btn-ghost-dark .wp-block-button__link{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
  box-shadow:none;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
body.wp-theme-kadence .pai-hero2 .pai-btn-ghost-dark .wp-block-button__link:hover,
body.wp-theme-kadence .pai-hero2 .pai-btn-ghost-dark .wp-block-button__link:focus-visible{
  background:rgba(255,255,255,.14);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:none;
}

/* szklane karty zaufania w hero (15+ lat / 6–8 osób / 0 zł) */
.pai-hero2 .pai-hero2-trust{margin-top:clamp(1.8rem,4vw,2.8rem)}
.pai-hero2 .pai-hero2-trust .pai-glass{padding:1.1rem 1.3rem}
.pai-hero2 .pai-hero2-trust .pai-glass::before{
  content:"";
  display:block;
  width:44px;
  height:4px;
  border-radius:3px;
  background:var(--pai-orange);
  margin-bottom:.7rem;
}
.pai-hero2 .pai-trust-num{
  font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.15;
  color:#fff;
  margin:0 0 .15rem;
}
.pai-hero2 .pai-trust-desc{
  margin:0;
  font-size:.95rem;
  line-height:1.45;
  color:rgba(231,238,247,.85);
}

/* podpowiedź interakcji — na dole hero, znika po pierwszym ruchu (JS: .pai-hide) */
.pai-hero2 .pai-viz-hint{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:3;
  max-width:none;
  margin:0;
  padding:.35rem .95rem;
  border-radius:999px;
  background:rgba(7,26,49,.55);
  color:rgba(255,255,255,.85);
  font-size:.9rem;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .5s ease;
}
.pai-hero2 .pai-viz-hint.pai-hide{opacity:0}

/* ================= 2. JASNY ŚRODEK — drobiazgi szaty makiety ================= */

/* kicker — edytorialny numer sekcji (01–10) z kreską */
.pai-kick{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 .9rem;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.16em;
  color:var(--pai-orange-d); /* ciemniejszy pomarańcz — czytelny na bieli (AA) */
}
.pai-kick::after{content:"";height:2px;width:52px;background:var(--pai-orange)}

/* podtytuł sekcji */
.pai-sub{
  color:var(--pai-ink-soft);
  font-size:clamp(1.02rem,1.8vw,1.2rem);
  max-width:46em;
}

/* cytat edytorialny (sekcja 03) */
.pai-pull{
  border-left:8px solid var(--pai-orange);
  padding-left:clamp(1.2rem,3vw,2.2rem);
}

/* program 01–07: wiersz = wielki numer (.pai-num z fundamentu) + tytuł/opis */
.pai-prog{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  border-top:2px solid var(--pai-line-strong);
}
.pai-prog-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1rem,3.5vw,2.2rem);
  align-items:center;
  padding-block:clamp(.9rem,2.2vw,1.4rem);
  border-bottom:2px solid var(--pai-line-strong);
}
.pai-prog-row .pai-num{min-width:2.1em;margin:0}
body.wp-theme-kadence .pai-prog-t{
  margin:0;
  font-size:clamp(1.18rem,2.4vw,1.55rem);
  color:var(--pai-navy);
}
.pai-prog-d{margin:.15rem 0 0;color:var(--pai-ink-soft)}

/* ================= 3. CIEMNA SEKCJA ZAPISÓW — dociągnięcia ================= */
.pai-sec-dark li{color:rgba(231,238,247,.88)}
.pai-sec-dark .pai-dark-lista{margin-bottom:1.2rem}
.pai-sec-dark .pai-phone-box{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:1.1rem;
  margin-top:1.1rem;
}
.pai-sec-dark .pai-location-h{margin-top:clamp(2rem,4vw,3rem)}
/* formularz Fluent Forms w szkle nie rozpycha karty */
.pai-sec-dark .pai-glass .frm-fluent-form{max-width:100%}

/* ================= 4. RESPONSYWNOŚĆ 360px (bez poziomego scrolla) ================= */
@media (max-width:480px){
  body.wp-theme-kadence .pai-hero2 h1{font-size:1.72rem}
  .pai-hero2 .pai-hero2-lead{font-size:1.02rem}
  .pai-hero2 .pai-hero2-foto{background-position:70% 30%}
  .pai-hero2 .pai-hero2-actions .wp-block-button,
  .pai-hero2 .pai-hero2-actions .wp-block-button__link{width:100%}
  /* karty zaufania w pion, wyrównane do lewej — kolumny Gutenberga i tak
     stackują się <782px; tu tylko ciaśniejszy oddech */
  .pai-hero2 .pai-hero2-trust .pai-glass{padding:.9rem 1.1rem}
  .pai-hero2 .pai-viz-hint{font-size:.82rem}
  .pai-prog-row{gap:.9rem}
  .pai-pull{border-left-width:6px;padding-left:1rem}
}

/* ================= 5. RUCH — dostępność ================= */
@media (prefers-reduced-motion: reduce){
  body.wp-theme-kadence .pai-hero2 .pai-btn-ghost-dark .wp-block-button__link:hover{transform:none;transition:none}
  .pai-hero2 .pai-viz-hint{transition:none}
}

/* ==========================================================================
   POPRAWKI 2026-07-18 (po testach na produkcji): hero, styk ze stopka, fonty
   ========================================================================== */

/* Hero - tresc nad warstwami tla (canvas przykrywal napisy) */
.pai-hero2 .wp-block-group__inner-container > h1,
.pai-hero2 .wp-block-group__inner-container > p,
.pai-hero2 .wp-block-group__inner-container > .wp-block-buttons,
.pai-hero2 .wp-block-group__inner-container > .pai-hero2-trustline { position: relative; z-index: 3; }

/* Hero - warstwy tla (foto + mgla + canvas) wypelniaja CALA sekcje */
.pai-hero2 { position: relative; overflow: clip; }
.pai-hero2 .pai-hero2-foto,
.pai-hero2 .pai-hero2-mgla,
.pai-hero2 #paiVizHero { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Styk sekcji zapisow ze stopka - kontener tresci i stopka granatowe, artykul
   przezroczysty (Kadence malowal bialy pas miedzy ciemna sekcja a stopka) */
.home #inner-wrap, .home .site-content, .home .content-area { background-color: #0a2442; }
.home article#post-6 { background-color: transparent !important; }
#colophon, .site-footer, .site-footer-wrap { background-color: #0a2442; }

/* Fonty jak w makiecie C - caly serwis na system-ui sans-serif (zamiast Lora
   serif w naglowkach); naglowki ciezsze (800) z ciasniejszym trackingiem */
:root {
  --global-body-font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --global-heading-font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --headings-font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body, button, input, select, textarea, .site-title,
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.pai-hero2 h1, .pai-tape, .pai-num, .pai-kick, .pai-trust-num,
.fluentform input, .fluentform textarea, .fluentform button, .fluentform label {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}
h1, .pai-hero2 h1 { font-weight: 800 !important; letter-spacing: -.02em; }
h2, .entry-content h2 { font-weight: 800 !important; letter-spacing: -.015em; }
h3, .entry-content h3 { font-weight: 700 !important; }

/* Hero - napisy jako jedna lewa kolumna (jak .hero-copy w makiecie); position:static
   KONIECZNE, by warstwy tla (absolute) wypelnialy cale .pai-hero2, a nie ten kontener */
.pai-hero2 .wp-block-group__inner-container { position: static; max-width: min(1180px,92vw); margin-inline: auto; text-align: left; }
.pai-hero2 .wp-block-group__inner-container > h1,
.pai-hero2 .wp-block-group__inner-container > p,
.pai-hero2 .wp-block-group__inner-container > .wp-block-buttons,
.pai-hero2 .wp-block-group__inner-container > .pai-hero2-trustline {
  margin-left: 0 !important; margin-right: 0 !important; max-width: 46rem; text-align: left;
}
.pai-hero2 .wp-block-group__inner-container > .wp-block-buttons { justify-content: flex-start; }

/* Hero na telefonie/wąskim ekranie — wysokość sterowana treścią (było 88svh =
   za wysoko, wielki pas samego zdjęcia nad H1 przy pionowym wyśrodkowaniu);
   linia zaufania mniejsza, by mieściła się w jednej linii (nie zawijała) */
@media (max-width:781px){
  .pai-hero2{ min-height:auto; padding-top:2.4rem; padding-bottom:2.8rem; }
  .pai-hero2 .pai-hero2-trustline{ font-size:clamp(.7rem,3vw,1rem); letter-spacing:0; text-wrap:balance; }
}