/* ==========================================================================
   seo-fixes.css - poprawki SEO/dostępności (etap 1)
   Klasy .as-h4 / .as-h5 odtwarzają dokładnie wygląd nagłówków h4/h5
   ze styles1.css i mobile-fixes.css, dzięki czemu można było zamienić
   akapity udające nagłówki na <p>, a nagłówki na właściwy poziom,
   bez żadnej zmiany wyglądu strony.
   ========================================================================== */

.as-h4 {
  margin: 0;
  letter-spacing: normal;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}

.as-h5 {
  margin: 0;
  letter-spacing: normal;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: inherit;
}

/* klasy z oryginalnego szablonu musza wygrac z .as-* (wyzsza specyficznosc) */
.as-h4.black-text-weight { font-weight: 900; }
.as-h5.bold-text { font-weight: 700; }

/* cytaty z opinii: <blockquote> dziedziczy padding/ramke z Webflow - zerujemy,
   zeby wygladaly identycznie jak wczesniejsze <h5> */
blockquote.as-h5 {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font-style: normal;
}

@media screen and (max-width: 991px) {
  .as-h4 { font-size: 18px; }
}

@media screen and (max-width: 767px) {
  .as-h4 { font-size: clamp(1rem, 4.5vw, 1.25rem); line-height: 1.4; }
  .as-h5 { font-size: clamp(0.95rem, 4vw, 1.1rem); line-height: 1.5; }
}

/* === Zgoda RODO przy formularzu === */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.form-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #f68c22;
  cursor: pointer;
}

.form-consent label { cursor: pointer; font-weight: 400; }
.form-consent a {
  font-size: inherit;
  line-height: inherit;
  color: #f68c22;
  text-decoration: underline;
}

/* === Linki prawne w stopce === */
.footer-legal-links {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: underline;
  opacity: .8;
}

.footer-legal-links a:hover { opacity: 1; }

/* .as-h2 - pełne odtworzenie kaskady h2 (styles1.css + mobile-fixes.css),
   użyte tam, gdzie h2 zamieniono na h3 dla poprawnej hierarchii. */
.as-h2 {
  letter-spacing: -2px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.11;
  color: inherit;
}

@media screen and (max-width: 991px) {
  .as-h2 { letter-spacing: -1px; font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
}

@media screen and (max-width: 767px) {
  .as-h2 { font-size: clamp(1.35rem, 6vw, 1.85rem); line-height: 1.2; }
}

@media screen and (max-width: 479px) {
  .as-h2 { font-size: clamp(1.2rem, 7vw, 1.6rem); }
}

@media screen and (max-width: 360px) {
  .as-h2 { font-size: clamp(1.1rem, 8vw, 1.4rem); }
}

/* === Przeciaganie opinii myszka na desktopie ===
   Slider opinii to komponent Webflow i ma wlasna obsluge przeciagania - takze
   myszka. Problem byl inny: gdy gest zaczynal sie na tekscie opinii, przegladarka
   zaznaczala tekst zamiast oddac ruch sliderowi, wiec ciagnac dalo sie tylko
   w pustych miejscach karty. Wylaczenie zaznaczania w obrebie slidera sprawia,
   ze gest lapie sie wszedzie. Zadnego dodatkowego JS to nie wymaga. */
.testimonial-slider {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.testimonial-slider .w-slider-mask { cursor: grab; }
.testimonial-slider .w-slider-mask:active { cursor: grabbing; }

/* strzalki i kropki maja zostac zwyklymi przyciskami */
.testimonial-slider .w-slider-arrow-left,
.testimonial-slider .w-slider-arrow-right,
.testimonial-slider .w-slider-nav { cursor: pointer; }

/* natywne przeciaganie obrazka przerywa gest */
.testimonial-slider img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* === Pozycje menu ===
   .nav-menu to flex z justify-content: space-between, wiec przy ciasnocie
   pozycje sie sciskaja i etykiety lamia na dwie linie ("O mnie", "Darmowa
   wycena"). Blokujemy zawijanie i sciskanie wszystkich pozycji, nie tylko
   przycisku. */
.nav-menu .navigation-link {
  white-space: nowrap;
  flex-shrink: 0;
}

/* === Podwojny pasek przewijania ===
   mobile-fixes.css ustawia `html, body { overflow-x: hidden }` oraz
   `body { overflow-y: auto !important }`. Wedlug specyfikacji, gdy jedna os
   ma `hidden`, druga nie moze zostac `visible` - w efekcie BODY staje sie
   wlasnym kontenerem przewijania i obok paska okna pojawia sie drugi.

   `overflow-x: clip` przycina tak samo jak `hidden`, ale NIE tworzy kontenera
   przewijania, wiec os pionowa moze wrocic do `visible` i zostaje jeden pasek.
   Starsze przegladarki zignoruja `clip` i zachowaja dotychczasowe zachowanie. */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible !important;
}