/* Deklaracje fontow -------------------------------------------------- */
/* Baloo 2 i Roboto to kroje zmiennokrojowe (variable fonts) - Google
   serwuje jeden plik na podzbior, uzywany przez kilka wag jednoczesnie.
   Stad na dysku sa tylko 4 fizyczne pliki (po jednym na rodzine/podzbior),
   a ponizsze 8 blokow wskazuje po dwa na kazdy plik - rozni je wylacznie
   deklarowana waga, przegladarka sama dobiera odpowiedni wariant z osi
   "wght" zapisanej w pliku. Dzieki temu przegladarka, ktora juz pobrala
   plik dla wagi 400, nie sciaga go ponownie pod inna nazwa dla wagi 700.
   Podzbior latin-ext jest wymagany, bo tam zyja polskie znaki diakrytyczne
   (l, a, z z ogonkami/kreskami). */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Zmienne ------------------------------------------------------------ */
:root {
  --kolor-akcent: #da251d;
  --kolor-akcent-ciemny: #b81e17;
  --kolor-link: #b81e17;
  --kolor-tekst: #1a1a1a;
  --kolor-tekst-pomocniczy: #595959;
  --kolor-tlo: #ffffff;
  --kolor-tlo-alt: #f5f5f5;
  --kolor-obramowanie: #e2e2e2;
  /* Zielen potwierdzenia. Poza paleta marki celowo: komunikat "wyslano" musi
     odrozniac sie od komunikatu bledu, a ten jest w kolorze akcentu (czerwien).
     Uzywana wylacznie jako obramowanie, nigdy pod tekst - nie podlega 4,5:1. */
  --kolor-sukces: #2d7a2d;

  --font-naglowek: "Baloo 2", system-ui, sans-serif;
  --font-tekst: "Roboto", system-ui, sans-serif;

  --odstep-1: 0.5rem;
  --odstep-2: 1rem;
  --odstep-3: 1.5rem;
  --odstep-4: 2.5rem;
  --odstep-5: 4rem;
  --odstep-6: 6rem;

  --szerokosc-tresci: 1200px;
  --szerokosc-tekstu: 720px;
  --promien: 6px;
}

/* Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
/* Swiadomie BEZ zbiorczego `ul[class], ol[class] { list-style: none }`.
   Gutenberg kazdej liscie w tresci nadaje klase .wp-block-list, wiec taki
   reset zdejmuje punktory, numery i wciecia calej tresci serwisu (m.in.
   listy numerowanej w polityce prywatnosci). Listy wlasne motywu - menu
   glowne, podmenu, menu mobilne, listy stopki - zeruja sie same we
   wlasnych regulach (layout.css). */
img, svg, iframe { max-width: 100%; height: auto; display: block; }

/* Typografia --------------------------------------------------------- */
body {
  font-family: var(--font-tekst);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--kolor-tekst);
  background: var(--kolor-tlo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-naglowek);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  margin-block-end: var(--odstep-2);
}

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.875rem); }
h4 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }

p { margin-block-end: var(--odstep-2); max-width: var(--szerokosc-tekstu); }
p:last-child { margin-block-end: 0; }

a { color: var(--kolor-link); text-underline-offset: 0.15em; }
a:hover { text-decoration: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.tekst-pomocniczy { color: var(--kolor-tekst-pomocniczy); }

/* Dostepnosc --------------------------------------------------------- */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}