/* ag-narzedzia.css — typografia kalkulatorow.
   Kalkulatory nie maja klasy .page, wiec arkusz poradnikow (ag-poradnik.css) ich nie obejmuje.

   Stan przed zmiana (canvas measureText, 1280 px): dlugie bloki tekstu 100-175 znakow
   w linii przy foncie 12,3-14,4 px (norma 60-80), do tego Arial w polach formularzy,
   bo input/select/table nie dziedzicza fontu po body.

   Zasada: zwezamy i powiekszamy WYLACZNIE proze. Samo narzedzie (tabele skladnikow,
   siatki pol, kafelki wynikow) zostaje na pelnej szerokosci kontenera, bo tam szerokosc
   jest funkcjonalna, nie czytelnicza.

   UWAGA na unclassowane <div>: w tych plikach raz sa akapitem, a raz kontenerem na
   siatke wynikow. Dlatego zwezamy tylko te, ktore nie maja w srodku zadnego elementu
   blokowego (selektor :not(:has(...))) — czyli realne liscie tekstowe.

   UWAGA 2: selektory tresci NIE moga zaczynac sie od `main`, bo czesc kalkulatorow nie ma
   w ogole elementu <main> (np. wycena-uslug). Zakresem jest .container.
   Ale `.wrap` MUSI byc zakotwiczone na `main`, bo standardowa stopka to `footer > .wrap`
   i bez tego reguly prozy przestawialy rozmiar pozycji listy w stopce (14 -> 16 px).
*/

/* --- 0. Rama strony: pasek i stopka na krawedziach, tresc 1180 px ---
   Kalkulatory mialy `body{padding:24px 16px}` (audyt nawet 48px), przez co pasek
   nawigacji nie dotykal gory ani bokow okna i nad nim swiecila biala luka.
   Zwykle strony serwisu maja `body{padding:0}`. Odstep przenosimy z body do tresci.
   Przy okazji .container bylo 980 px, a pasek i stopka maja 1180, wiec logo wisialo
   110 px na lewo od tresci. Proza jest osobno ograniczona do 72ch, wiec szersza
   kolumna nie psuje czytelnosci. */
body {
  padding: 0;
}

.container,
main > .wrap {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* oddech pod paskiem, ktory wczesniej dawal padding body */
main {
  padding-top: 26px;
}

/* --- 1. Arial znika z formularzy i tabel --- */
.container input, .container select, .container textarea,
.container button, .container table, .container th, .container td,
.wrap input, .wrap select, .wrap textarea,
.wrap button, .wrap table, .wrap th, .wrap td {
  font-family: inherit;
}

/* --- 2. Akapity i listy: jedna szerokosc kolumny i jeden stopien ---
   72ch przy Interze to okolo 690 px, czyli 70-78 znakow. */
.container p,
.container li,
main .wrap p,
main .wrap li {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.68;
}

.container li,
main .wrap li {
  margin-bottom: 6px;
}

/* --- 3. Nazwane bloki prozy ---
   Kazdy z nich byl wczesniej mniejszy od tekstu w stopce. */
.lead {
  max-width: 72ch;
  font-size: 16.5px;
  line-height: 1.6;
}

.insight {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.6;
}

.card-sub,
.s-desc,
.onote,
.svc {
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.6;
}

/* zastrzezenie metodologiczne pod wynikiem: moze byc najmniejsze, ale nie najszersze */
.disc {
  max-width: 72ch;
  font-size: 13.5px;
  line-height: 1.65;
}

/* --- 4. Liscie tekstowe bez klasy (podpowiedzi w kartach) ---
   Tylko szerokosc. Stopnia nie ruszamy, bo te divy maja rozne role i rozne rozmiary. */
.container div:not([class]):not(:has(div, table, ul, ol, form, section, input, select, button, img, h1, h2, h3)),
.wrap div:not([class]):not(:has(div, table, ul, ol, form, section, input, select, button, img, h1, h2, h3)) {
  max-width: 72ch;
}

/* --- 5. Naglowki: jeden rytm zamiast 24,8 / 27,2 / 46 px na trzech kalkulatorach --- */
.container h1,
.wrap h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
}

.container h2,
.wrap h2 {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.22;
  letter-spacing: -.015em;
}

/* --- 6. Telefon: kolumna i tak jest waska, liczy sie tylko stopien --- */
@media (max-width: 760px) {
  .container p,
  .container li,
  main .wrap p,
  main .wrap li {
    font-size: 15.5px;
  }

  .lead {
    font-size: 16px;
  }
}

/* --- 7. Telefon: pola formularzy musza umiec sie skurczyc ---
   Domyslne min-width:auto na elemencie flex sprawia, ze <input> rozpycha wiersz.
   Na food-cost pole "Nazwa dania" wystawalo 38 px poza ekran przy 360 px. */
@media (max-width: 760px) {
  .container input,
  .container select,
  .container textarea,
  main .wrap input,
  main .wrap select,
  main .wrap textarea {
    max-width: 100%;
    min-width: 0;
  }
}