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

/* UWAGA: zadnego scroll-behavior:smooth.
   Plynne przewijanie obsluguje Lenis (assets/js/animations.js). Gdy oba
   dzialaly rownoczesnie, natywny smooth-scroll przegladarki i petla rAF
   Lenisa walczyly o ta sama pozycje scrolla - to byla glowna przyczyna
   zacinania sie strony. Kotwice (#sekcja) obsluguje teraz JS przez
   lenis.scrollTo() z odsunieciem o wysokosc przyklejonego naglowka.
   Przy prefers-reduced-motion Lenis sie nie uruchamia i przewijanie jest
   natychmiastowe - co dla tego ustawienia jest zachowaniem poprawnym. */

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	transition: background-color 0.3s ease, color 0.3s ease;
	padding-top: var(--admin-bar-offset);
}

@media (prefers-reduced-motion: reduce) {
	body {
		transition: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	margin: 0 0 var(--space-4);
	line-height: 1.15;
	font-weight: 700;
}

h1 {
	font-size: clamp(2.25rem, 5vw, 4.5rem);
}

h2 {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 600;
}

h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 600;
}

p {
	margin: 0 0 var(--space-4);
}

.text-muted {
	color: var(--color-text-muted);
}

.stat-number {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: var(--color-accent);
	/* Cyfry o rownej szerokosci - licznik count-up nie skacze w trakcie
	   animacji, bo "1" zajmuje tyle samo miejsca co "8". */
	font-variant-numeric: tabular-nums;
}

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-8);
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-accent);
	/* Bialy dawal na akcencie 2,87:1 - ten sam problem co w przyciskach.
	   Skip-link widac tylko po sfokusowaniu, ale wtedy MUSI byc czytelny,
	   bo korzystaja z niego osoby nawigujace klawiatura. */
	color: var(--color-on-accent);
	font-weight: 600;
	padding: var(--space-2) var(--space-4);
	z-index: var(--z-skip-link);
}

.skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}