/* Predict & Prevent – style globalne.
   Większość wyglądu siedzi w atrybutach style="" w index.html (tak jak w projekcie z Claude Design).
   Tutaj: podstawy, stany :hover i wersja mobilna. */

[hidden] { display: none !important; }

body { margin: 0; background: #FFFFFF; }
html, body { overflow-x: clip; }
section[id] { scroll-margin-top: 100px; }
#formularz { scroll-margin-top: 112px; }

/* Płynne przewijanie (wyłączone dla osób, które w systemie ograniczyły animacje) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* FAQ: lewa kolumna z ramką pomocy przykleja się podczas przewijania (tylko desktop) */
@media (min-width: 861px) {
  .pp-faq-side { position: sticky; top: 120px; }
}
/* FAQ w jednej kolumnie: ramka "Nie znalazłeś odpowiedzi?" ląduje pod pytaniami */
@media (max-width: 815px) {
  .pp-faq-side { display: contents !important; }
  .pp-faq-help { order: 1; margin-top: 16px !important; max-width: none !important; }
  #faq { row-gap: 16px !important; }
  #pp-faq { margin-top: 16px; }
}

/* Logo w nagłówku */
.pp-logo { width: 76px; height: 76px; }

/* Menu desktop: podkreślenie po najechaniu i dla aktualnie oglądanej sekcji */
.pp-nav a { position: relative; transition: color 0.15s; }
.pp-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: #006639; transform: scaleX(0); transition: transform 0.2s;
}
.pp-nav a:hover, .pp-nav a.is-active { color: #006639 !important; }
.pp-nav a:hover::after, .pp-nav a.is-active::after { transform: scaleX(1); }

/* Link "Mapa" przy placówkach */
.pp-map:hover { color: #003D22 !important; }

a { color: #006639; }
a:hover { color: #003D22; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Hero: zdjęcie rodziny przyciemnione zieloną nakładką (prawa część zdjęcia jest przezroczysta) */
.pp-hero {
  background-color: #006639;
  background-image:
    linear-gradient(90deg, rgba(0, 102, 57, 0.80) 0%, rgba(0, 102, 57, 0.84) 55%, #006639 80%),
    url('assets/rodzina.webp');
  background-size: cover;
  background-position: left 25%;
  background-repeat: no-repeat;
}

/* Przyciski i elementy interaktywne */
.pp-btn:hover { background: #003D22 !important; color: #FFFFFF !important; }
.pp-ghost:hover { background: #E6F2EC !important; }
.pp-faq:hover { background: #EEF2EF !important; }
.pp-in:focus { outline: 2px solid #006639; outline-offset: 1px; border-color: #006639 !important; }

/* Ikony social media w stopce */
.pp-soc { color: #006639; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; text-decoration: none; }
.pp-soc:hover { color: #003D22; }

/* Menu: desktop vs mobile */
.pp-burger { display: none; }
.pp-mnav { display: none; }
.pp-hero-mob { display: none; }
.pp-lead-short { display: none; }

header .pp-btn { white-space: nowrap; }

/* Poniżej 1200 px menu nie mieści się w jednej linii z przyciskiem – włączamy "hamburger" */
@media (max-width: 1200px) {
  .pp-nav { display: none !important; }
  .pp-burger { display: inline-flex !important; }
  .pp-mnav.is-open { display: flex !important; }
}

@media (max-width: 600px) {
  .pp-head { flex-wrap: nowrap !important; padding: 8px 16px !important; gap: 8px !important; }
  .pp-logo { width: 64px; height: 64px; }
  .pp-hide-sm { display: none; }
  .pp-head > div:last-child { flex-wrap: nowrap !important; }
  section[id] { scroll-margin-top: 84px; }
  #formularz { scroll-margin-top: 92px; }  .pp-tel-txt { display: none; }
  .pp-cols { columns: 1 !important; }
  .pp-hero-extra { display: none !important; }
  /* Hero: całe zdjęcie jako pas u góry, płynnie przechodzący w zieleń */
  .pp-hero {
    background-image:
      linear-gradient(to bottom, rgba(0, 102, 57, 0.70) 0, rgba(0, 102, 57, 0.85) 120px, #006639 200px),
      url('assets/rodzina-mobile.webp');
    background-size: 100% 100%, 100% auto;
    background-position: center top, center top;
  }
  .pp-hero-in { padding: 28px 16px 32px !important; gap: 24px !important; }
  .pp-lead-full { display: none; }
  .pp-lead-short { display: block; }

  /* Odstępy sekcji: sekcje z wewnętrznym kontenerem vs. sekcje bez niego */
  #czym-jest > div, #jak > div, #placowki > div { padding: 56px 16px !important; }
  #dla-kogo, #zakres, #faq { padding: 56px 16px !important; gap: 32px !important; }
  #kontakt { padding: 0 16px 56px !important; }
  #kontakt > div { padding: 36px 20px !important; }

  /* Mniejsze wewnętrzne odstępy w kartach */
  #formularz, .pp-card { padding: 24px 20px !important; }
  .pp-card-list { padding: 4px 20px !important; }

  /* Drobne teksty czytelniejsze na telefonie */
  .pp-small { font-size: 14px !important; }
  h1 { font-size: 32px !important; line-height: 1.1 !important; }
  section h2 { font-size: 27px !important; line-height: 1.15 !important; }
  .pp-hero-mob { display: flex !important; }

  /* Kroki "Jak to działa" jako pionowa oś czasu */
  .pp-steps { grid-template-columns: 1fr !important; gap: 0 !important; }
  .pp-steps > li { display: grid !important; grid-template-columns: 36px 1fr; column-gap: 14px; row-gap: 2px; padding: 0 0 22px 0 !important; background: none !important; color: #0F1E2E !important; border-radius: 0 !important; position: relative; }
  .pp-steps > li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: #CFE3D7; }
  .pp-steps > li > span:first-child { grid-row: 1 / span 2; width: 36px !important; height: 36px !important; border-radius: 50%; background: #006639 !important; color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; font-weight: 700 !important; font-size: 14px !important; }
  .pp-steps > li > strong { font-size: 18px !important; padding-top: 6px; }
  .pp-steps > li > span:last-child { grid-column: 2; color: #33414F !important; }

  .pp-foot a, .pp-tap { display: inline-flex !important; align-items: center; min-height: 44px; }
  .pp-consent { font-size: 14px !important; }
  .pp-consent input { width: 24px !important; height: 24px !important; }
}