.site-header {
	position: relative;
	background-color: var(--color-brand-red);
	color: var(--color-white);
}

/*
 * Pasek nagłówka wg Figmy: mobile 50px (logo od 17px, hamburger 40x40
 * kończy się 13px od prawej krawędzi), desktop 90px (logo od 40px, prawa
 * krawędź "PL / ENG" 56px od brzegu). Klasa .container zostaje w header.php,
 * ale jej max-width i padding są tu nadpisane — pasek jest na pełną
 * szerokość okna. Działa mimo tej samej specyficzności, bo header.css
 * ładuje się po base.css (patrz inc/enqueue.php).
 */
.site-header__inner {
	max-width: none;
	height: calc(50 * var(--u));
	padding-block: 0;
	padding-left: calc(17 * var(--u));
	padding-right: calc(13 * var(--u));
}

@media (min-width: 900px) {
	.site-header__inner {
		height: calc(90 * var(--u));
		padding-left: calc(40 * var(--u));
		padding-right: calc(56 * var(--u));
		color: var(--color-cream);
	}
}

/*
 * Przyklejony header na desktopie. Nadpisuje position: relative z reguły
 * .site-header na górze pliku (ta sama specyficzność, późniejsza reguła).
 */
@media (min-width: 1200px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
	}
}