/**
 * rtvplaneta — pasek „NA GORĄCO", nagłówek, nawigacja, szuflada mobilna.
 *
 * Punkt załamania to 900 px. Powyżej: nawigacja w jednym wierszu z logo,
 * pole szukania i przycisk „Rankingi". Poniżej: hamburger, logo, lupka,
 * a nawigacja przechodzi do własnego wiersza i przewija się poziomo.
 *
 * Menu w nagłówku jest jedno — obie szerokości obsługuje sam CSS,
 * przez zmianę kolejności i podstawy flex. Szuflada ma własną kopię,
 * bo leży poza nagłówkiem.
 */

/* =========================================================================
 * Pasek „NA GORĄCO"
 * ====================================================================== */

.rtv-ticker {
	background: var(--rtv-ink);
	color: var(--rtv-on-dark);
}

.rtv-ticker__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 38px;
	overflow: hidden;
}

.rtv-ticker__label {
	font-family: var(--rtv-font-meta);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	background: var(--rtv-accent);
	color: var(--rtv-on-dark);
	padding: 4px 8px;
	white-space: nowrap;
	flex: 0 0 auto;
}

.rtv-ticker__link {
	color: var(--rtv-on-dark);
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.rtv-ticker__link:hover,
.rtv-ticker__link:focus {
	color: var(--rtv-accent);
}

.rtv-ticker__meta {
	font-family: var(--rtv-font-meta);
	font-size: 11px;
	color: var(--rtv-ticker-meta);
	margin-left: auto;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* =========================================================================
 * Nagłówek
 * ====================================================================== */

.rtv-header {
	background: var(--rtv-bg);
	border-bottom: 1px solid var(--rtv-border);
	position: sticky;
	top: 0;
	z-index: var(--rtv-z-header);
}

.rtv-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	min-height: 72px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.rtv-header__brand {
	flex: 0 0 auto;
	min-width: 0;
}

.rtv-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	min-width: 0;
}

/* =========================================================================
 * Logo
 * ====================================================================== */

.rtv-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.rtv-logo__img {
	height: var(--rtv-logo-height, 32px);
	width: auto;
	display: block;
}

/*
 * Awaryjne odwrócenie barw, gdy nie wgrano logo w wariancie jasnym.
 * Działa dobrze dla logo jednobarwnego. Przy kolorowym da dziwne barwy —
 * wtedy trzeba po prostu wgrać wariant jasny w Customizerze.
 */
.rtv-logo--inverted .rtv-logo__img {
	filter: invert(1);
}

/* Brak jakiegokolwiek logo — zostaje nazwa serwisu. */
.rtv-logo--text {
	font-family: var(--rtv-font-display);
	font-weight: 800;
	font-size: calc(var(--rtv-logo-height, 32px) * .72);
	letter-spacing: -.02em;
	line-height: 1;
	white-space: nowrap;
}

.rtv-logo--light.rtv-logo--text {
	color: var(--rtv-on-dark);
}

.rtv-logo--light.rtv-logo--text:hover {
	color: var(--rtv-accent);
}

/* =========================================================================
 * Nawigacja główna
 * ====================================================================== */

.rtv-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.rtv-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	row-gap: 6px;
	flex-wrap: wrap;
}

.rtv-nav__list a {
	display: block;
	font-family: var(--rtv-font-display);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: border-color var(--rtv-speed-fast) var(--rtv-ease),
	            color var(--rtv-speed-fast) var(--rtv-ease);
}

.rtv-nav__list a:hover,
.rtv-nav__list a:focus,
.rtv-nav__list .current-menu-item > a,
.rtv-nav__list .current-menu-parent > a,
.rtv-nav__list .current_page_item > a {
	border-bottom-color: var(--rtv-accent);
}

/* Podpowiedź dla administratora, gdy menu jeszcze nie ustawiono. */
.rtv-nav--empty {
	flex: 1 1 auto;
}

.rtv-nav__hint {
	font-family: var(--rtv-font-meta);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rtv-faint);
	border: 1px dashed var(--rtv-ad-border);
	padding: 6px 10px;
	display: inline-block;
}

.rtv-nav__hint:hover {
	color: var(--rtv-accent);
	border-color: var(--rtv-accent);
}

/* =========================================================================
 * Pole szukania
 * ====================================================================== */

.rtv-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--rtv-border);
	padding: 8px 12px;
	/*
	 * 180 px zamiast 210. Przy logo podniesionym do 40 px cały pasek
	 * potrzebował 1212 px, a miał 1199 — brakowało 13 px i menu łamało się
	 * na dwa wiersze. Pole wyszukiwania jest tu jedynym elementem, który może
	 * oddać miejsce bez straty: ma placeholder, ikonę i i tak rozszerza się
	 * po kliknięciu, a nawigacja i logo nie mają z czego ustąpić.
	 */
	flex: 0 1 180px;
	min-width: 38px;
	overflow: hidden;
	transition: border-color var(--rtv-speed-fast) var(--rtv-ease);
}

.rtv-search:focus-within {
	border-color: var(--rtv-ink);
}

/*
 * Kółko lupki. Jedyne zaokrąglenie w nagłówku i jedyny odstępstwo
 * od zasady ostrych krawędzi — bo to ikona, nie kontener.
 */
.rtv-search__icon {
	width: 12px;
	height: 12px;
	border: 1.6px solid var(--rtv-faint);
	border-radius: 50%;
	flex: 0 0 auto;
	display: block;
}

.rtv-search__field {
	border: 0;
	background: transparent;
	font-family: var(--rtv-font-body);
	font-size: 13.5px;
	color: var(--rtv-ink);
	width: 100%;
	min-width: 0;
	padding: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.rtv-search__field::placeholder {
	color: var(--rtv-faint);
	opacity: 1;
}

/* Przycisk lupki — tylko na wąskich ekranach. */
.rtv-search-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.rtv-search-toggle .rtv-search__icon {
	width: 15px;
	height: 15px;
	border-width: 2px;
	border-color: var(--rtv-ink);
}

/* =========================================================================
 * Przyciski
 * ====================================================================== */

.rtv-btn {
	display: inline-block;
	font-family: var(--rtv-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 11px 16px;
	white-space: nowrap;
	text-align: center;
	border: 0;
	cursor: pointer;
	transition: background-color var(--rtv-speed-fast) var(--rtv-ease),
	            color var(--rtv-speed-fast) var(--rtv-ease);
}

.rtv-btn--dark {
	background: var(--rtv-ink);
	color: var(--rtv-on-dark);
}

.rtv-btn--dark:hover,
.rtv-btn--dark:focus {
	background: var(--rtv-accent);
	color: var(--rtv-on-dark);
}

.rtv-btn--accent {
	background: var(--rtv-accent);
	color: var(--rtv-on-dark);
}

.rtv-btn--accent:hover,
.rtv-btn--accent:focus {
	background: var(--rtv-on-dark);
	color: var(--rtv-ink);
}

.rtv-header__cta {
	flex: 0 0 auto;
}

/* =========================================================================
 * Hamburger
 * ====================================================================== */

.rtv-burger {
	display: none;
	width: 44px;   /* 44 px to minimalny wygodny cel dotykowy */
	height: 44px;
	margin-left: -10px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	align-items: center;
	flex: 0 0 auto;
}

.rtv-burger__box {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.rtv-burger__line {
	display: block;
	height: 2px;
	background: var(--rtv-ink);
	transition: transform var(--rtv-speed) var(--rtv-ease),
	            opacity var(--rtv-speed-fast) var(--rtv-ease);
}

/* Otwarte menu — hamburger zamienia się w krzyżyk. */
.rtv-burger[aria-expanded="true"] .rtv-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.rtv-burger[aria-expanded="true"] .rtv-burger__line:nth-child(2) {
	opacity: 0;
}

.rtv-burger[aria-expanded="true"] .rtv-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================================
 * Szuflada mobilna
 * ====================================================================== */

.rtv-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(16, 16, 16, .45);
	z-index: var(--rtv-z-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--rtv-speed) var(--rtv-ease),
	            visibility 0s linear var(--rtv-speed);
}

.rtv-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100dvh;
	width: min(296px, 85vw);
	z-index: var(--rtv-z-drawer);
	background: var(--rtv-ink);
	color: var(--rtv-on-dark);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--rtv-speed) var(--rtv-ease),
	            visibility 0s linear var(--rtv-speed);
}

/* Stan otwarty. Klasę zakłada navigation.js na znaczniku body. */
.rtv-menu-open .rtv-drawer-overlay {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.rtv-menu-open .rtv-drawer {
	transform: translateX(0);
	visibility: visible;
	transition-delay: 0s;
}

.rtv-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex: 0 0 auto;
}

.rtv-drawer__close {
	width: 44px;
	height: 44px;
	margin-right: -10px;
	border: 0;
	background: transparent;
	color: var(--rtv-on-dark);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.rtv-drawer__close:hover {
	color: var(--rtv-accent);
}

.rtv-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rtv-drawer__list a {
	display: block;
	font-family: var(--rtv-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--rtv-on-dark);
	padding: 13px 0;
	border-bottom: 1px solid var(--rtv-rule-dark);
}

.rtv-drawer__list a:hover,
.rtv-drawer__list a:focus {
	color: var(--rtv-accent);
}

.rtv-drawer__cta {
	margin-top: 18px;
	flex: 0 0 auto;
	padding: 14px;
}

/* =========================================================================
 * Wąskie ekrany
 * ====================================================================== */

@media (max-width: 900px) {

	.rtv-ticker__inner {
		height: 34px;
		gap: 10px;
	}

	.rtv-ticker__label {
		font-size: 9.5px;
		padding: 3px 6px;
	}

	.rtv-ticker__link {
		font-size: 13px;
	}

	/* Godzina i data nie mieszczą się obok tytułu — tytuł jest ważniejszy. */
	.rtv-ticker__meta {
		display: none;
	}

	.rtv-header__bar {
		gap: 12px;
		min-height: 0;
		padding-top: 12px;
		padding-bottom: 10px;
	}

	.rtv-burger {
		display: flex;
		order: 1;
	}

	.rtv-header__brand {
		order: 2;
		flex: 1 1 auto;
	}

	/*
	 * Na telefonie logo wraca do 28 px, jak w makiecie mobilnej. Nadpisujemy
	 * WYSOKOŚĆ obrazka, a nie zmienną --rtv-logo-height: tę ustawia atrybut
	 * style na kotwicy, a styl wpisany w element wygrywa z arkuszem.
	 */
	.rtv-header__brand .rtv-logo__img {
		height: 28px;
	}

	.rtv-header__actions {
		order: 3;
		margin-left: 0;
	}

	/*
	 * Nawigacja schodzi do własnego wiersza pod logo i przewija się
	 * poziomo. flex-basis:100% wymusza łamanie, bo pasek ma flex-wrap.
	 */
	.rtv-nav {
		order: 4;
		flex: 0 0 100%;
		margin: 0 calc(var(--rtv-gutter-mobile) * -1);
		padding: 0 var(--rtv-gutter-mobile) 2px;
	}

	.rtv-nav__list {
		flex-wrap: nowrap;
		gap: 18px;
	}

	.rtv-nav__list a {
		font-size: 12.5px;
		padding: 4px 0;
	}

	/* Na wąskim ekranie zostaje lupka; pełne pole rozwija się po kliknięciu. */
	.rtv-search-toggle {
		display: flex;
	}

	.rtv-search {
		display: none;
	}

	.rtv-header--search-open .rtv-search {
		display: flex;
		order: 5;
		flex: 0 0 100%;
	}

	/* Na mobile rankingi są w szufladzie, jako duże CTA. */
	.rtv-header__cta {
		display: none;
	}

	.rtv-logo__img {
		height: calc(var(--rtv-logo-height, 32px) * .82);
	}
}

/*
 * Szuflada jest wyłącznie mobilna. Powyżej punktu załamania chowamy ją
 * na stałe — gdyby ktoś powiększył okno przy otwartym menu, zostałaby
 * widoczna nad układem desktopowym.
 */
@media (min-width: 901px) {

	.rtv-drawer,
	.rtv-drawer-overlay {
		display: none;
	}

	/*
	 * Na desktopie pasek NIE ZAWIJA. Zawijanie jest potrzebne wyłącznie na
	 * wąskich ekranach, gdzie nawigacja schodzi do własnego wiersza przez
	 * flex-basis 100% — i tam zostaje.
	 *
	 * Tutaj przeszkadza, bo flexbox przy flex-wrap: wrap najpierw ŁAMIE
	 * wiersz, a dopiero potem ściska elementy w obrębie linii. Wystarczyło
	 * podnieść logo o 8 px, żeby suma szerokości bazowych przekroczyła
	 * kontener i przycisk „Rankingi" spadł do drugiego wiersza, a pasek urósł
	 * z 72 do 134 px. Przy nowrap nawigacja po prostu się zwęża, a że jest
	 * kontenerem .rtv-scroll-x — nadmiar pozycji przewija się w poziomie,
	 * dokładnie tak, jak przewidywał układ.
	 */
	.rtv-header__bar {
		flex-wrap: nowrap;
	}

	/*
	 * Nawigacja też nie zawija — z tego samego powodu, tylko o piętro niżej.
	 * Pasek jest przyklejony do góry ekranu, więc jego wysokość nie może
	 * zależeć od tego, ile pozycji ma menu: dołożenie siódmej rozciągałoby
	 * go z 72 na 103 px na każdej podstronie serwisu.
	 *
	 * Gdy pozycje przestaną się mieścić, przewiną się w poziomie — .rtv-nav
	 * jest kontenerem .rtv-scroll-x i tak samo zachowuje się na telefonie.
	 * Menu na granicy szerokości to sygnał, żeby skrócić etykiety, a nie
	 * żeby nagłówek rósł.
	 */
	.rtv-nav__list {
		flex-wrap: nowrap;
	}

	/*
	 * Optyczne wyrównanie logo do linii pisma menu.
	 *
	 * Pudełka są wyśrodkowane idealnie i mimo to napis „rtvplaneta.pl" siedzi
	 * wyraźnie niżej niż pozycje menu. Składają się na to dwie rzeczy, obie
	 * zmierzone na pikselach:
	 *
	 *   1. W samym pliku logo napis leży 31,5 px poniżej środka płótna
	 *      (7,9% wysokości), bo lockup centruje IKONA — jej orbita sięga
	 *      wysoko ponad tekst. Przy logo 40 px daje to 3,2 px w dół.
	 *   2. Menu jest wersalikami, więc jego tusz kończy się na linii pisma
	 *      i optycznie leży ~2 px nad środkiem swojego pudełka, podczas gdy
	 *      logo ma jeszcze ogonki „p" schodzące pod linię.
	 *
	 * Razem linia pisma logo wypadała 6 px niżej niż linia pisma menu.
	 * translateY, a NIE margines: przesunięcie ma być czysto optyczne i nie
	 * może ruszyć układu paska ani jego wysokości.
	 *
	 * Tylko desktop. Na telefonie logo stoi obok hamburgera i lupy, a nie
	 * obok tekstu menu — tam punktem odniesienia są ikony i przesunięcie
	 * rozjechałoby je względem logo.
	 */
	.rtv-header__brand .rtv-logo__img {
		transform: translateY(-6px);
	}
}