/* procentownik – baza: reset, typografia, kontener. */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Kotwice (#sekcja) nie chowają się pod przyklejonym menu. */
	scroll-padding-top: var(--scroll-offset);
}

/* Gdy pod menu wisi pasek z linkiem partnerskim, kotwice zatrzymują się niżej. */
html:has(.promo-bar:not(.is-hidden):not([hidden])) {
	scroll-padding-top: var(--scroll-offset-bar);
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	font-weight: var(--weight-medium);
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

svg {
	flex: none;
}

a {
	color: var(--color-brand);
}

a:hover {
	color: var(--color-accent-text);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-heading);
	color: inherit;
}

p {
	margin: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: var(--border-width-thick) solid var(--color-cta);
	outline-offset: var(--border-width-thick);
}

.screen-reader-text {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: var(--space-px);
	width: var(--space-px);
	margin: calc(var(--space-px) * -1);
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
}

.skip-link {
	display: block;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: var(--space-12) var(--space-16);
	background: var(--color-surface);
	color: var(--color-brand);
	font-weight: var(--weight-extrabold);
	white-space: normal;
}

.container {
	width: 100%;
	max-width: calc(var(--width-container) + var(--space-24) * 2);
	margin-inline: auto;
	padding-inline: var(--space-24);
}

.site-main {
	display: block;
}

.icon {
	width: var(--size-icon);
	height: var(--size-icon);
}

.icon-xs {
	width: var(--size-icon-xs);
	height: var(--size-icon-xs);
}

.icon-sm {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

.icon-md {
	width: var(--size-icon-md);
	height: var(--size-icon-md);
}

.icon-xl {
	width: var(--size-icon-xl);
	height: var(--size-icon-xl);
}

.icon-lg {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

@media (min-width: 601px) and (max-width: 1023px) {
	.container {
		padding-inline: var(--space-32);
	}
}

@media (max-width: 600px) {
	.container {
		padding-inline: var(--space-16);
	}
}