/*
 * Rama dokumentu: pasek kursow, naglowek, naglowek podstrony, stopka i 404.
 */

/* ========================================================== pasek kursow */

.pasek {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--zielen-gleboka);
	color: var(--papier);
	/* Wysokosc zarezerwowana, zeby pasek nie przesuwal strony po zaladowaniu. */
	min-height: 40px;
	overflow: hidden;
	font-size: var(--krok-drobny);
}

.pasek__stale {
	display: flex;
	flex: none;
	gap: var(--o4);
	padding: 0 var(--o4);
	align-items: center;
	background: color-mix(in srgb, #000 16%, var(--zielen-gleboka));
	border-right: 1px solid color-mix(in srgb, var(--papier) 22%, transparent);
}

.pasek__okno { flex: 1; overflow: hidden; display: flex; align-items: center; }

.pasek__tasma {
	display: flex;
	gap: var(--o4);
	padding-left: var(--o4);
	white-space: nowrap;
	/* 40 px na sekunde: na tyle wolno, zeby dalo sie odczytac kurs w przelocie. */
	animation: pasek-biegnie 120s linear infinite;
	will-change: transform;
}

@keyframes pasek-biegnie {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.pasek--stoi .pasek__tasma { animation-play-state: paused; }
.pasek:hover .pasek__tasma,
.pasek:focus-within .pasek__tasma { animation-play-state: paused; }

.pasek__poz {
	display: inline-flex;
	align-items: center;
	gap: var(--o2);
}

.pasek__kod { font-weight: 700; font-stretch: 92%; letter-spacing: 0.04em; }
.pasek__kurs { font-stretch: 88%; opacity: 0.94; }
.pasek__kurs + .pasek__kurs { opacity: 0.72; }

.pasek__flaga { width: 18px; height: 13.5px; }

.pasek__pauza {
	flex: none;
	/* Wlasne tlo: bez niego ostatnia waluta podjezdza pod przycisk. */
	background: color-mix(in srgb, #000 16%, var(--zielen-gleboka));
	color: inherit;
	border: 0;
	border-left: 1px solid color-mix(in srgb, var(--papier) 22%, transparent);
	padding: 0 var(--o3);
	min-width: 44px;
	cursor: pointer;
	font-size: 12px;
	font-stretch: 88%;
}

.pasek__pauza:hover { background: color-mix(in srgb, #000 22%, var(--zielen-gleboka)); }

.flaga {
	width: 22px;
	height: 16.5px;
	flex: none;
	border: 1px solid color-mix(in srgb, var(--tusz) 18%, transparent);
	border-radius: 1px;
}

/* ============================================================ naglowek */

.naglowek {
	background: var(--papier);
	border-bottom: 1px solid color-mix(in srgb, var(--zielen-rewersu) 30%, transparent);
}

.naglowek__wnetrze {
	max-width: var(--szerokosc-max);
	margin-inline: auto;
	padding: var(--o3) var(--o4);
	display: flex;
	align-items: center;
	gap: var(--o4);
	flex-wrap: wrap;
}

.marka { flex: none; display: block; text-decoration: none; }

/*
 * Logo jest rastrem 277x79 px; nie powiekszamy go ponad rozmiar natywny.
 * Wymiary podane wprost, a nie przez `auto`: miejsce jest zarezerwowane
 * zanim plik sie wczyta, wiec naglowek nie przeskakuje.
 */
.marka__logo { width: 168px; height: 48px; }

@media (max-width: 480px) {
	.marka__logo { width: 140px; height: 40px; }
}

.marka__nazwa {
	font-weight: 800;
	font-stretch: 124%;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: var(--tusz);
}

.nawigacja { flex: 1 1 auto; }

.menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--o1) var(--o4);
	margin: 0;
	padding: 0;
}

.menu a {
	color: var(--tusz);
	text-decoration: none;
	font-size: 0.95rem;
	font-stretch: 100%;
	font-weight: 550;
	padding: var(--o2) 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
}

.menu a:hover { border-bottom-color: var(--zielen-rewersu); }
.menu__poz--biezaca a,
.menu .current-menu-item a { border-bottom-color: var(--zielen-gleboka); font-weight: 700; }

.naglowek__kontakt {
	flex: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--o1);
}

.telefon {
	color: var(--tusz);
	text-decoration: none;
	font-weight: 700;
	font-stretch: 104%;
	font-variant-numeric: tabular-nums;
}

.telefon--naglowek { font-size: 1.05rem; }
.telefon--duzy { font-size: 1.4rem; }

.przelacznik {
	display: none;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 45%, transparent);
	border-radius: var(--rog-papier);
	padding: var(--o2) var(--o3);
	min-height: 44px;
	min-width: 44px;
	align-items: center;
	gap: var(--o2);
	cursor: pointer;
}

.przelacznik__kreski,
.przelacznik__kreski::before,
.przelacznik__kreski::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--tusz);
	content: "";
}

.przelacznik__kreski { position: relative; }
.przelacznik__kreski::before { position: absolute; top: -6px; }
.przelacznik__kreski::after { position: absolute; top: 6px; }

/* Nawigacja zwija sie tam, gdzie siedem pozycji przestaje sie miescic. */
@media (max-width: 1080px) {
	.przelacznik { display: inline-flex; order: 3; }
	.naglowek__kontakt { order: 2; margin-left: auto; }
	.nawigacja { order: 4; flex-basis: 100%; }
	/* Bez JavaScriptu menu zostaje rozwiniete: kazdy link jest osiagalny. */
	.nawigacja[hidden] { display: none; }
	.menu { flex-direction: column; gap: 0; padding-top: var(--o3); }
	.menu a { padding: var(--o3) 0; border-bottom: 1px solid color-mix(in srgb, var(--zielen-rewersu) 20%, transparent); width: 100%; }
}

/* ===================================================== naglowek podstrony */

.naglowek-strony {
	position: relative;
	overflow: hidden;
	background: var(--papier-jasny);
	border-bottom: 1px solid color-mix(in srgb, var(--zielen-rewersu) 24%, transparent);
}

.naglowek-strony__wnetrze {
	position: relative;
	padding-block: var(--o6) var(--o5);
}

.naglowek-strony__tytul { margin-bottom: var(--o3); }
.naglowek-strony__data { margin: 0; }

.okruszki {
	font-size: var(--krok-drobny);
	color: var(--zielen-rewersu);
	margin-bottom: var(--o3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--o2);
}

.okruszki a { color: inherit; }

.okruszki > * + *::before {
	content: "/";
	margin-right: var(--o2);
	opacity: 0.55;
}

/*
 * Komunikat globalny jako nota na odwrocie dokumentu: podwojna linia
 * u gory i pojedyncza u dolu, bez pudelka i bez kolorowego paska z lewej.
 * Wersja z gruba kreska po lewej wygladala jak gotowy element z frameworka.
 */
.komunikat {
	margin: var(--o4) 0 0;
	padding: var(--o3) 0;
	border-top: 3px double color-mix(in srgb, var(--zielen-rewersu) 60%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--zielen-rewersu) 34%, transparent);
	font-size: 1rem;
	font-stretch: 96%;
	max-width: 62ch;
	background: none;
}

/* Romb zamiast ikony: ten sam ksztalt co znaczniki na marginesie banknotu. */
.komunikat::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: var(--o3);
	border: 1px solid var(--zielen-rewersu);
	transform: rotate(45deg);
	vertical-align: 1px;
}