/* Baza: reset, typografia, domyślny nagłówek/stopka. Wszystko na tokenach. */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--gf-color-bg);
	color: var(--gf-color-text);
	font-family: var(--gf-font-body);
	font-size: var(--gf-fs-body);
	line-height: var(--gf-lh-body);
	-webkit-font-smoothing: antialiased;
}

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

/* Znacznik (h1–h6) i wygląd (.gf-h1–.gf-h6) są rozdzielone:
   <h2 class="gf-h3"> wygląda jak H3, a w SEO zostaje H2. */
h1, h2, h3, h4, h5, h6,
.gf-h1, .gf-h2, .gf-h3, .gf-h4, .gf-h5, .gf-h6, .gf-display {
	font-family: var(--gf-font-heading);
	font-weight: var(--gf-fw-heading);
	line-height: var(--gf-lh-heading);
	letter-spacing: var(--gf-ls-heading);
	color: var(--gf-color-heading);
	margin: 0 0 var(--gf-space-4);
}
h1, .gf-h1 { font-size: var(--gf-fs-h1); }
h2, .gf-h2 { font-size: var(--gf-fs-h2); }
h3, .gf-h3 { font-size: var(--gf-fs-h3); }
h4, .gf-h4 { font-size: var(--gf-fs-h4); }
h5, .gf-h5 { font-size: var(--gf-fs-h5); }
h6, .gf-h6 { font-size: var(--gf-fs-h6); }
.gf-display { font-size: var(--gf-fs-display); line-height: 1.05; }

p { margin: 0 0 var(--gf-space-4); }
.gf-lead { font-size: var(--gf-fs-lead); }
.gf-muted { color: var(--gf-color-muted); }
.gf-small { font-size: var(--gf-fs-small); }

a { color: var(--gf-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover, a:focus-visible { color: var(--gf-color-accent); }

.screen-reader-text, .gf-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.gf-skip-link:focus {
	position: fixed; top: var(--gf-space-3); left: var(--gf-space-3);
	z-index: 100000; width: auto; height: auto; margin: 0; clip: auto;
	padding: var(--gf-space-3) var(--gf-space-4);
	background: var(--gf-color-bg); color: var(--gf-color-text);
}

/* Domyślny nagłówek i stopka (gdy nie wybrano wersji z Elementora) */
.gf-header-default {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--gf-gap); padding-block: var(--gf-space-5);
}
.gf-header-default__title { font-family: var(--gf-font-heading); font-size: var(--gf-fs-h4); }
.gf-header-default__brand { text-decoration: none; }
.gf-nav__list { display: flex; flex-wrap: wrap; gap: var(--gf-space-5); list-style: none; margin: 0; padding: 0; }
.gf-nav__list a { text-decoration: none; }
.gf-nav__list .sub-menu { display: none; }

.gf-footer-default {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--gf-gap); padding-block: var(--gf-space-6);
	border-top: 1px solid var(--gf-color-line);
}
.gf-footer-default__copy { margin: 0; color: var(--gf-color-muted); font-size: var(--gf-fs-small); }

/* Podgląd nagłówka/stopki w edytorze Elementora */
.gf-builder-canvas { background: var(--gf-color-bg); }
.gf-page__title { margin-bottom: var(--gf-space-6); }