/* Wspólny nagłówek Taroscope.
 *
 * Jedna belka na wszystkie podstrony: ta sama wysokość, te same odstępy,
 * ten sam krój. Siedzi przyklejona do góry, więc nie przeskakuje przy
 * przejściu między zakładkami. Belki, które rysowały aplikacja i strona
 * „Niebo”, chowamy niżej — inaczej byłyby dwie.
 */

:root {
	--tsk-belka-h: 66px;
}

.tsk-belka {
	position: sticky;
	top: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	height: var(--tsk-belka-h);
	padding: 0 40px;
	background: rgba(6, 5, 22, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(230, 196, 138, .14);
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	box-sizing: border-box;
}

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

.tsk-belka__marka {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: 0 0 auto;
}

/* Logo jest kolem, wiec pole tez musi byc kwadratowe — przy 34x30
   drzewo bylo splaszczone. */
.tsk-belka__marka img { width: 38px; height: 38px; display: block; }

.tsk-belka__marka span {
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: 25px;
	letter-spacing: .30em;
	color: #fde291;
	text-transform: uppercase;
	line-height: 1;
}

.tsk-belka__nav {
	display: flex;
	align-items: center;
	gap: 34px;
	flex: 1 1 auto;
	justify-content: center;
}

.tsk-belka__nav a {
	font-size: 13.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #9ea0ad;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.tsk-belka__nav a { position: relative; }
.tsk-belka__nav a:hover { color: #fde291; }

/* Zakladka, w ktorej stoisz. Zloto i cienka nitka zaru pod spodem —
   ten sam gest, ktory w Runach i Ksiedze oznacza rzecz wybrana.
   Samo rozjasnienie tekstu bylo za slabe, zeby cokolwiek powiedziec. */
.tsk-belka__nav a[aria-current="page"] {
	color: #f0ce7e;
}

.tsk-belka__nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -9px;
	height: 1px;
	background: linear-gradient( 90deg,
		transparent, #e8752f 16%, #f0ce7e 50%, #e8752f 84%, transparent );
	box-shadow: 0 0 9px rgba( 232, 117, 47, .5 );
}

/* Grupy zakładek: Wyrocznie / Niebo / Wiedza — rozwijane na klik i najechanie. */
.tsk-grupa { position: relative; }
.tsk-grupa__tytul {
	height: 40px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: #9ea0ad;
	font: 400 13.5px 'Jost', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s, border-color .2s;
}
.tsk-grupa__tytul i { font-style: normal; margin-left: 6px; font-size: 10px; color: #cda474; }
.tsk-grupa:hover .tsk-grupa__tytul, .tsk-grupa__tytul[aria-expanded="true"] { color: #fde291; border-color: rgba(230, 196, 138, .3); }
.tsk-grupa.jest-tu .tsk-grupa__tytul { color: #e8e5ec; }
.tsk-grupa__lista {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	padding: 8px;
	display: none;
	flex-direction: column;
	gap: 2px;
	border: 1px solid rgba(230, 196, 138, .22);
	border-radius: 12px;
	background: #0b0820;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.tsk-grupa__lista::before { content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 10px; }
.tsk-grupa:hover .tsk-grupa__lista, .tsk-grupa__tytul[aria-expanded="true"] + .tsk-grupa__lista, .tsk-grupa:focus-within .tsk-grupa__lista { display: flex; }
.tsk-belka__nav .tsk-grupa__lista a { padding: 9px 14px; border-radius: 8px; font-size: 13px; letter-spacing: .08em; text-transform: none; color: #e0dbde; }
.tsk-belka__nav .tsk-grupa__lista a:hover { background: rgba(160, 111, 251, .14); color: #fde291; }
.tsk-belka__nav .tsk-grupa__lista a[aria-current="page"] { color: #fde291; background: rgba(253, 226, 145, .06); }

.tsk-belka__prawa { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.tsk-belka__konto {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #e6c48a;
	border: 1px solid rgba(230, 196, 138, .55);
	border-radius: 4px;
	padding: 11px 22px;
	text-decoration: none;
	background: transparent;
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.tsk-belka__konto:hover { background: rgba(230, 196, 138, .10); color: #fde291; }

.tsk-belka__motyw {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(230, 196, 138, .22);
	border-radius: 6px;
	background: transparent;
	color: #ad97d3;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: grid;
	place-items: center;
	font-family: inherit;
}

.tsk-belka__motyw:hover { border-color: rgba(230, 196, 138, .5); color: #fde291; }

.tsk-belka :focus-visible { outline: 2px solid #fde291; outline-offset: 3px; }

/* Stare belki znikają — od teraz jest jedna. */
.tq-topbar,
.sky .dome > .top,
#tsk-horoskop > .tsk-head { display: none !important; }

/* Strona „Niebo” ma panoramę pod belką, więc belka na niej jest przezroczysta
   i wisi nad niebem — tak jak wcześniej wyglądał jej własny nagłówek. */
body:has(#sky) .tsk-belka {
	background: linear-gradient(to bottom, rgba(4, 3, 16, .78), rgba(4, 3, 16, 0));
	border-bottom-color: transparent;
	position: fixed;
	left: 0;
	right: 0;
}

/* Osiem pozycji nie mieści się w belce poniżej ~1200 px i to ONA rozpychała
   całą stronę w poziomie. Rozwiązanie w dwóch krokach: najpierw zwężamy
   odstępy i krój, a gdy to już nie wystarcza — pasek nawigacji przewija się
   SAM, wewnątrz belki, zamiast rozpychać dokument. */

.tsk-belka { overflow-x: clip; }
.tsk-belka__nav { min-width: 0; }

@media (max-width: 1180px) {
	.tsk-belka__nav { gap: 20px; }
	.tsk-belka__nav a { font-size: 12.5px; letter-spacing: .09em; }
}

@media (max-width: 1000px) {
	.tsk-belka { padding: 0 18px; gap: 14px; }
	.tsk-belka__marka span { font-size: 20px; letter-spacing: .2em; }
	.tsk-belka__konto { padding: 9px 14px; letter-spacing: .1em; }
	.tsk-belka__nav {
		gap: 16px;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		justify-content: flex-start;
		/* Podświetlenie aktywnej zakładki rysuje się pod tekstem, więc
		   pasek musi mieć na nie miejsce, inaczej znika przy przycięciu. */
		padding-bottom: 11px;
		margin-bottom: -11px;
	}
	.tsk-belka__nav::-webkit-scrollbar { display: none; }
	.tsk-belka__nav a { font-size: 12px; letter-spacing: .07em; }
}

@media (max-width: 680px) {
	.tsk-belka__nav { display: none; }
}

/* ══ wspólna stopka ══════════════════════════════════════════════════════
 *
 * Jeden cichy znak zamykający każdą podstronę. Dotąd Księga kończyła się
 * swoim taiji, Księżyc swoją notą, a Runy niczym — strona po prostu się
 * urywała. Tutaj jest wspólne domknięcie: logo, nazwa i jedno zdanie.
 */

.tsk-stopka {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 46px 20px 40px;
	text-align: center;
	border-top: 1px solid rgba( 240, 206, 126, .14 );
	background: linear-gradient( 180deg, transparent, rgba( 11, 10, 24, .55 ) );
}

.tsk-stopka__logo {
	width: 56px;
	height: 56px;
	display: block;
	margin: 0 auto 14px;
	opacity: .9;
}

.tsk-stopka__marka {
	margin: 0;
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: 20px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: #f0ce7e;
}

.tsk-stopka__nota {
	margin: 8px 0 0;
	font-size: 12.5px;
	letter-spacing: .06em;
	color: #9a93c4;
}

@media ( max-width: 700px ) {
	.tsk-stopka { padding: 34px 18px 30px; }
	.tsk-stopka__logo { width: 46px; height: 46px; }
}