*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;        /* płynne przewijanie do kotwic (#…) */
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Strona: min. wysokość ekranu. Miejsce na sticky widget kontaktu (mobile)
   robi dolny padding footera, żeby zielone tło sięgało pod widget. */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Tło boczne — kolumny kół w wycentrowanym kontenerze (max 1600px), nie na body.
   Kropki mają stały rozmiar (background-size px), z szerokością okna skaluje się
   tylko przezroczysty środek. Stagger prawej kolumny jest wbudowany w bg_r.svg.
   Powyżej 1600px kolumny trzymają się brzegów pola, po bokach zostaje biel. */
body.page--bg-contained {
  position: relative;          /* containing block dla .bg-layer (tło żyje w .bg-layer) */
}

.page--bg-contained .bg-layer {
  position: absolute;
  inset: 0;                    /* pełna wysokość dokumentu */
  z-index: -1;                 /* za całą treścią, nad białym tłem body */
  max-width: 2000px;
  margin-inline: auto;         /* wycentrowanie pola */
  pointer-events: none;
  background-image: url("../assets/img/bg_l.svg"), url("../assets/img/bg_r.svg");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 500px, 500px;
  /* attachment: scroll (domyślne) — zachowujemy brak paralaksy */
}
@media (min-width: 1024px) {
  .page--bg-contained .bg-layer {
    background-size: 1000px, 1000px;
  }
}

/* treść wypełnia wolną przestrzeń → stopka dolega do dołu na krótkich stronach */
#content {
  flex: 1 0 auto;
}

/* Media domyślnie blokowe i responsywne */
img,
svg,
iframe {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

/* Listy i przyciski — neutralne domyślne */
button {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
}

/* Linki — domyślnie bez podkreślenia, dziedziczą kolor (jak w oryginale) */
a {
  color: inherit;
  text-decoration: none;
}

/* Nagłówki — bez narzuconej wagi/rozmiaru (sterują nimi komponenty) */
h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Spójny focus dla nawigacji klawiaturą */
:focus-visible {
  outline: 2px solid var(--color-morski);
  outline-offset: 2px;
}

/* Dostępność: treść tylko dla czytników ekranu (dawne .sr-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}