/* ============================================================
   Skoczylas Rodzinne — Mobilna warstwa utwardzająca (hardening)
   ------------------------------------------------------------
   Ładowana JAKO OSTATNIA (enqueue: priorytet 20, po CSS stron),
   więc jej reguły wygrywają remisy specyficzności z plikami stron.
   Zawiera wyłącznie poprawki mobilne (max-width) oraz neutralne
   globalne zabezpieczenia (img, rezerwacja ikon). NIE zmienia
   layoutu desktopu.

   Kanon breakpointów: 960 / 860 / 600 / 400 (patrz BREAKPOINTS.md).
   ============================================================ */

/* ---- 1. Globalne zabezpieczenie obrazów (każda szerokość) ----
   Wcześniej reguła obejmowała tylko ≤600px — przez co na tabletach
   (601–960) surowe <img> w szablonach mogły wyciekać poza kolumnę.
   Komponenty z własnym wymiarem (np. .hdr-logo img, .hero__bg)
   mają wyższą specyficzność i nie są tym dotknięte. */
img {
  max-width: 100%;
  height: auto;
}

/* ---- 2. Domyślny rozmiar ikon (anty-CLS) ----
   Ikony Lucide renderuje JS, podmieniając <i data-lucide> → <svg>.
   Pusty placeholder ma 0×0 — po wstawieniu SVG layout skacze (CLS).
   Rezerwujemy domyślny rozmiar liniowy. Komponenty z własnym
   rozmiarem ikon (np. .btn i, .hdr-* svg) nadpisują to wyższą
   specyficznością, więc reguła działa tylko dla ikon „gołych".

   [data-icon] to ikony Iconify wstawiane inline przez sr_iconify() —
   nie mają problemu CLS (są w HTML od razu), ale MUSZĄ dzielić tę regułę,
   żeby zachować dotychczasową kaskadę: gdyby domyślny rozmiar siedział
   w main.css, arkusze stron (ładowane później) zaczęłyby wygrywać
   z regułami jednoklasowymi typu .faq-icon i zmieniłyby rozmiary. */
[data-lucide],
[data-icon] {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ============================================================
   ≤600px — TELEFON
   ============================================================ */
@media (max-width: 600px) {

  /* ---- 3. Koniec z auto-zoomem iOS na polach formularzy ----
     iOS Safari powiększa całą stronę, gdy dotknięte pole ma
     font-size < 16px. Ujednolicamy pola wejściowe do 16px.
     (Pomijamy checkbox/radio/range — nie wywołują zoomu.) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px;
  }

  /* Widżet React „majątek-wizard" ma font-size pola w stylu inline
     (14px) — żeby go nadpisać, potrzebny !important. Kalkulator
     alimentów ma już 16px, więc go nie ruszamy. */
  [data-widget="majatek-wizard"] input,
  [data-widget="majatek-wizard"] textarea {
    font-size: 16px !important;
  }

  /* ---- 4. Touch targety ≥ 44×44 px (WCAG 2.5.5 / Apple HIG) ---- */

  /* a) Każdy link „kliknij, aby zadzwonić" w treści strony —
        niezależnie od klasy (.cd-sidebar__phone, .defendants-phone-cta,
        .faq-sidebar__phone, .fside__call a, …). Wykluczamy nagłówek
        i stopkę (mają własny, zwarty layout). */
  .site-content a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* b) Współdzielone chipsy i linki tekstowe CTA (wiele stron). */
  .svc-tag,
  .post-tags a,
  .svc-tier__link {
    min-height: 44px;
    box-sizing: border-box;
  }
  .svc-link,
  .svc-tier__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* c) Paginacja: 40px → 44px (dotyczy obu wariantów markup). */
  .pagination .nav-links a,
  .pagination .nav-links span,
  .pagination .page-numbers {
    min-height: 44px;
    min-width: 44px;
  }

  /* ---- 5. FAQ — nie ucinaj długich odpowiedzi na wąskim ekranie ----
     Stałe max-height:400/600px klipują dłuższe odpowiedzi, bo wąska
     kolumna = więcej linii. Podnosimy sufit; animacja rozwijania
     nadal działa (max-height pozostaje skończone). */
  .faq-item.open .faq-a {
    max-height: 1600px;
  }

  /* ---- 6. Przyciski .btn-sm — touch target ≥ 44px ----
     Bazowy .btn ma ~45px (OK), ale .btn-sm (padding 9/16) ~36px.
     Na ekranie dotykowym podnosimy do 44px (WCAG 2.5.5). */
  .btn-sm {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* ---- 6b. Tekstowe wezwania w sekcjach — touch target ≥ 44px ----
     .btn i .btn-sm były już podniesione, ale wezwania renderowane jako zwykły
     link (.sh-cta w nagłówku sekcji, odnośniki kart routingu i „powiązanych
     usług", kotwice zakładek, link do opinii Google) mierzyły 20–22 px
     wysokości. To poniżej progu WCAG 2.5.8 (24 px) i daleko od 44 px, których
     oczekuje audyt „tap targets". Sam padding wystarczy — układ zostaje,
     bo to elementy inline-flex w osobnych wierszach. */
  .sh-cta,
  .routing-card__link,
  .related-card__link,
  /* Odnośniki w akordeonie „Co rozstrzyga sąd" (pięć sztuk na /rozwody/,
     m.in. jedyne przejścia do /alimenty/, /kontakty/ i /podzial-majatku/)
     zostały poza tą listą i dalej mierzyły 22 px. */
  .cd-item__link,
  .tab-panel__anchor,
  .google-strip__link,
  .footer__totop {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ============================================================
   7. MOBILNY STICKY CTA — pasek „Zadzwoń / Napisz"
   ------------------------------------------------------------
   Markup w footer.php (renderowany globalnie). Domyślnie ukryty;
   widoczny tylko na telefonie. z-index 40 — nad treścią, ale POD
   drawerem menu (z-index 60), więc otwarte menu go zasłania.
   Rezerwujemy padding-bottom na <body>, by pasek nie zakrywał
   stopki — z uwzględnieniem safe-area (notch / gesty iOS).
   ============================================================ */
.m-cta { display: none; }

@media (max-width: 600px) {
  .m-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 1px;
    background: var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.14);
  }

  .m-cta__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
  }

  .m-cta__btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .m-cta__btn--call {
    background: var(--accent);
    color: #fff;
  }

  .m-cta__btn--write {
    background: var(--paper);
    color: var(--ink);
  }

  /* Pasek jest position:fixed — rezerwujemy miejsce u dołu, by nie
     zakrywał stopki. 54px wysokości + safe-area. */
  body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   8. BANER ZGÓD (Complianz) — nie może zająć pół ekranu
   ------------------------------------------------------------
   Pomiar 26.08.2026 na 375×812: baner miał 375×404 px (50% ekranu),
   position:fixed, z-index 99999, górna krawędź na 408 px. Oba
   wezwania hero („Zadzwoń" na 656 px, „Umów konsultację" na 713 px)
   oraz pasek .m-cta leżały pod nim. Na landingu z Google Ads
   oznaczało to pierwszy ekran bez ani jednego klikalnego wezwania.

   Nie ukrywamy banera i nie zmieniamy jego przycisków — zgoda musi
   pozostać w pełni dostępna. Ograniczamy tylko wysokość i podnosimy
   go nad pasek szybkiego kontaktu, żeby przestał być oknem modalnym.
   Reguły są wąsko wycelowane w kontener Complianz; aktualizacja
   wtyczki, która zmieni te klasy, po prostu je zignoruje.
   ============================================================ */
@media (max-width: 600px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    max-height: 40vh;
    overflow-y: auto;
    bottom: calc(54px + env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
    font-size: 13px;
    line-height: 1.45;
  }

  /* Przyciski zgody zostają pełnowymiarowe — to one mają być łatwe
     do trafienia, gdy reszta banera się skróciła. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    min-height: 44px;
  }
}