/*
 * Hlavička, spodní navigace, hlavní sloupec.
 *
 * PRAVIDLO O LEPIVOSTI. Spec §14.1 zakazuje cokoli lepivého nad obsahem nebo
 * pod ním -- horní reklamní lištu, plovoucí spodní lištu, anchor banner -- a
 * označuje to za největší jedinou změnu oproti dnešku.
 *
 * Nezakazuje překryv, který si čtenář sám vyvolá a sám zavře. Takový je
 * mobilní zásuvka menu (§12 ji předpokládá: "pod 768 hamburger") a
 * celoobrazovková prohlížečka fotek (§8 ji vyžaduje výslovně). Bez
 * position: fixed je udělat nejde.
 *
 * check-theme-chrome.sh proto nehledá position: fixed/sticky naslepo. Každý
 * takový výskyt musí mít na předchozím řádku značku
 *     /* §14.1 OK: <důvod> *\/
 * a kontrola spadne na každém, který ji nemá. Nové lepivé lišty tak dál
 * neprojdou, ale dvě místa, která spec sama chce, nemusí bydlet jinde,
 * než kam patří.
 */

/* ---------------------------------------------------------------- hlavička */

.rs-header {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--rs-header-h);
	padding: 0 var(--rs-gutter);
	background: var(--rs-ground);
	/*
	 * Červený pruh úplně nahoře. Jeden tah, ale hlavička díky němu má tvář --
	 * a je to jediné místo, kde se značka ohlásí dřív než obsah. Je i na
	 * mobilu: 60 % návštěv chodí odtamtud a web by jinak vypadal jinak než
	 * na desktopu. Stojí to 3 px z 812.
	 */
	border-top: 3px solid var(--rs-red);
	border-bottom: 1px solid var(--rs-line);
}

.rs-header__mark {
	flex-shrink: 0;
	/* Optické doladění: ruka a wordmark k sobě patří těsněji než gap 12. */
	margin-right: -3px;
}

.rs-wordmark {
	flex-grow: 1;
	min-width: 0;
	margin: 0;
	font-family: var(--rs-font-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.5px;
	line-height: 1;
	color: var(--rs-text);
}

/*
 * Odkaz vyplní celou výšku hlavičky. Bez toho byl 136 × 31 -- text sám o sobě
 * má 31 px a spec §14.7 nepřipouští dotykový cíl pod 44, bez výjimky. Změřeno
 * na 375 px, kde to jako jediný prvek tématu propadlo.
 */
.rs-wordmark a {
	display: flex;
	align-items: center;
	min-height: var(--rs-tap);
}

.rs-wordmark__tld {
	color: var(--rs-red);
}

/*
 * Ikonová tlačítka. 44 × 44 bez výjimky (spec §4, §14.7), se zápornou vnější
 * mezerou k okraji -- opticky tak sedí na gutteru, ale zůstanou dost velká
 * na prst.
 */
.rs-iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--rs-tap);
	height: var(--rs-tap);
	padding: 0;
	background: none;
	border: 0;
	color: var(--rs-text);
	cursor: pointer;
}

.rs-iconbtn--start {
	margin-left: -10px;
}

.rs-iconbtn--end {
	margin-right: -10px;
}

/* ------------------------------------------------------------ hlavní obsah */

.rs-main {
	/*
	 * Odsazení zdola, aby poslední řádek neskončil nalepený na spodní navigaci.
	 * Není to kompenzace fixní lišty -- ta lišta fixní není.
	 */
	padding-bottom: 8px;
}

/* -------------------------------------------------------- spodní navigace */

.rs-bottomnav {
	display: flex;
	height: var(--rs-bottomnav-h);
	border-top: 1px solid var(--rs-line);
	background: var(--rs-ground);
}

.rs-bottomnav__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	color: var(--rs-muted);
	font-family: var(--rs-font-display);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

/*
 * --rs-red-light, ne --rs-red -- ze stejného důvodu jako u labelu rubriky
 * v pages.css: §6 říká "aktivní --rs-red", ale §15 žádá 4,5:1 a tenhle popisek
 * má 10 px. Změřeno: --rs-red 3,30:1, --rs-red-light 5,43:1.
 */
.rs-bottomnav__item.is-active {
	color: var(--rs-red-light);
}

.rs-bottomnav__icon {
	flex-shrink: 0;
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 768px) {
	/*
	 * Nad zlomem se naviguje vodorovným menu v hlavičce, spodní lišta mizí
	 * úplně (spec §12). Vodorovné menu přijde v Tasku 9.
	 */
	.rs-bottomnav {
		display: none;
	}

	.rs-wordmark {
		font-size: 26px;
	}

	.rs-iconbtn--start {
		display: none;
	}
}

/* ==========================================================================
   Desktop (spec §11, §12)
   Jeden zlom, 768 px. Nad ním vodorovné menu, mřížka 12 sloupců, rozdělení 8+4.
   ========================================================================== */

/* -------------------------------------------- mobilní zásuvka menu §12 */

/*
 * Celá zásuvka žije jen pod 768 px. Není to kosmetika, ale nutnost:
 * nad 768 je z menu vodorovná navigace v hlavičce a ta má v CSS pravidlo
 * .rs-menu { display: block } o jedné třídě. Kdyby tyhle selektory ležely
 * mimo media query, .rs-has-nav .rs-menu (dvě třídy) by je přebilo a
 * desktopové menu by zmizelo úplně.
 */
/*
 * Lišta zásuvky patří jen do zásuvky. Nad 768 px je z menu vodorovná
 * navigace v hlavičce a "RUBRIKY" se zavíracím křížkem by v ní jen visely --
 * což se taky stalo, než tohle pravidlo přišlo.
 */
.rs-menu__bar {
	display: none;
}

@media (max-width: 767px) {

	/*
	 * Menu je schované, dokud ho hamburger neotevře -- ale schová se teprve
	 * tehdy, když je čím ho otevřít. Třídu rs-has-nav přidává nav.js; dokud
	 * skript neběží, tohle pravidlo neplatí a menu zůstane v toku stránky.
	 *
	 * Bez té podmínky vzniká přesně stav, který vlastník 18. 9. nahlásil:
	 * menu není vidět a tlačítko po kliknutí nic nedělá.
	 */
	.rs-has-nav .rs-menu {
		display: none;
	}

	.rs-has-nav.rs-nav-open .rs-menu {
		position: fixed;  /* §14.1 OK: zásuvka menu, otevírá ji čtenář a zavírá X nebo Esc */
		inset: 0 auto 0 0;
		z-index: 80;
		display: flex;
		flex-direction: column;
		width: min(300px, 86vw);
		padding-bottom: env(safe-area-inset-bottom);
		overflow-y: auto;
		background: var(--rs-surface);
		border-right: 1px solid var(--rs-line);
	}

	.rs-menu__bar {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		height: var(--rs-header-h);
		padding: 0 12px 0 var(--rs-gutter);
		border-bottom: 1px solid var(--rs-line-inset);
	}

	.rs-menu__label {
		flex-grow: 1;
		font-family: var(--rs-font-display);
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--rs-muted);
	}

	.rs-menu__close {
		margin-right: -10px;
	}

	.rs-menu__list {
		margin: 0;
		padding: 4px 0 12px;
		list-style: none;
	}

	.rs-menu__list a {
		display: flex;
		align-items: center;
		min-height: var(--rs-tap);
		padding: 4px var(--rs-gutter);
		font-family: var(--rs-font-display);
		font-weight: 500;
		font-size: 15px;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: var(--rs-text);
		border-bottom: 1px solid var(--rs-line-inset);
	}

	/* Aktivní rubrika světlou červenou: --rs-red nedá na tmavém 4,5:1 (§15). */
	.rs-menu__list .current-menu-item > a,
	.rs-menu__list .current_page_item > a {
		color: var(--rs-red-light);
	}
}

.rs-navbackdrop {
	position: fixed;  /* §14.1 OK: stínítko existuje jen po dobu otevřené zásuvky */
	inset: 0;
	z-index: 79;
	background: rgba(13, 13, 15, 0.66);
}

.rs-navbackdrop[hidden] {
	display: none;
}

/*
 * Pravý sloupec existuje až od 1000 px, kde na něj mřížka 8+4 má místo.
 * Není to jen otázka místa: sidebar-1 nese dvě smluvní zóny Seznamu a §14.5
 * povoluje jeden reklamní slot na obrazovku -- na mobilu ho už článek má
 * uvnitř textu. Zapíná se v @media (min-width: 1000px) níž.
 */
.rs-rail {
	display: none;
}

@media (min-width: 768px) {

	/* ------------------------------------------------ hlavička na desktopu */

	/*
	 * DVA ŘÁDKY, ne jeden.
	 *
	 * Vlastník, 18. 9.: "hlavička s logem a menu je podle mě hodně nevýrazná,
	 * chtěl by to vylepšit nějak, zároveň to obsáhlé menu se hodně špatně vejde
	 * na šířku screenu vedle loga."
	 *
	 * Obojí měl pravdu a obojí má stejnou příčinu: spec §11 počítá s hlavičkou
	 * vysokou 72 px, ve které je vedle sebe ruka, wordmark, menu a lupa --
	 * jenže s menu o ŠESTI položkách. Redakce jich má deset. Změřeno na
	 * 1440 px: na menu zbylo 1 020 px z 1 320 a rozestupy musely spadnout na
	 * 20 px, takže wordmark i položky se mačkaly do jednoho tenkého proužku.
	 * Pod 1200 px se menu začínalo posouvat do strany, což skrývá rubriky.
	 *
	 * Rozdělení na dva řádky řeší obojí najednou: menu dostane celých 1 320 px
	 * místo 1 020 (o 29 % víc) a značka dostane vlastní řádek, kde může být
	 * velká. Je to zároveň to, jak masthead vypadá na papírových i webových
	 * magazínech.
	 *
	 * Mobil se nemění -- tam je hamburger a 56px lišta podle §6.
	 */
	.rs-header {
		flex-wrap: wrap;
		align-items: center;
		gap: 0 20px;
		height: auto;
		padding-top: 14px;
		padding-bottom: 0;
		/* Spodní linku přebírá pruh navigace, který má vlastní. */
		border-bottom: 0;
	}

	.rs-header__mark {
		margin-right: 2px;
	}

	/* Značka na vlastním řádku unese víc než 26 px ze specifikace. */
	.rs-wordmark {
		flex-grow: 1;
		font-size: 34px;
		letter-spacing: 0.5px;
		white-space: nowrap;
	}

	.rs-header__search,
	.rs-header__share {
		flex-shrink: 0;
	}

	/*
	 * Menu jako druhý řádek přes celou šířku.
	 *
	 * order 10 je až za #rs-headersearch (order 9), aby se rozbalené hledání
	 * vešlo mezi značku a navigaci a nerozhodilo pořadí.
	 */
	.rs-menu {
		display: block;
		flex: 0 0 100%;
		order: 10;
		min-width: 0;
		margin-top: 12px;
		border-top: 1px solid var(--rs-line);
		border-bottom: 1px solid var(--rs-line);
	}

	/*
	 * Položky se rozprostřou po celé šířce. space-between místo pevné mezery:
	 * deset rubrik se tak rozloží samo a při jedenácté se jen zmenší rozestup,
	 * místo aby menu začalo přetékat.
	 *
	 * nowrap zůstává -- zalomený druhý řádek navigace vypadal ustřiženě.
	 * Když se to opravdu nevejde (úzké okno, delší názvy), posune se do strany.
	 */
	.rs-menu__list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: clamp(10px, 1.2vw, 26px);
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rs-menu__list::-webkit-scrollbar {
		display: none;
	}

	.rs-menu__list > li {
		flex: 0 0 auto;
	}

	.rs-menu__list a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		/*
		 * min-width, ne jen min-height. Krátká položka menu vyšla 39 × 44
		 * (změřeno na "Videa" při 1440 px) a §14.7 mluví o obou rozměrech.
		 */
		min-width: var(--rs-tap);
		min-height: 46px;
		padding: 0 2px;
		font-family: var(--rs-font-display);
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: var(--rs-text);
	}

	/*
	 * Podtržítko pod položkou. Je to jediné místo, kde se v navigaci objeví
	 * plná --rs-red -- jako výplň, ne jako text, takže pravidlo o kontrastu
	 * textu (§2) se na něj nevztahuje.
	 */
	.rs-menu__list a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		background: var(--rs-red);
		opacity: 0;
	}

	.rs-menu__list a:hover::after {
		opacity: 0.55;
	}

	/*
	 * Aktivní položka světlou červenou, ne --rs-red: 14px půltučně potřebuje
	 * 4,5:1 (§15) a --rs-red má na --rs-ground 3,30:1. Stejné rozhodnutí jako
	 * u rubrikového labelu a u aktivní položky spodní navigace.
	 */
	.rs-menu__list .current-menu-item > a,
	.rs-menu__list .current_page_item > a {
		color: var(--rs-red-light);
	}

	.rs-menu__list .current-menu-item > a::after,
	.rs-menu__list .current_page_item > a::after {
		opacity: 1;
	}

	/*
	 * Pod 1200 px se písmo v navigaci o kousek zmenší a hlavně se stáhne
	 * proklad.
	 *
	 * Proč zrovna proklad: deset rubrik má dohromady kolem 95 znaků a při
	 * 1,4 px prokladu z toho je 133 px čirého vzduchu -- víc než jedna celá
	 * položka. Změřeno na 1024 px: menu potřebovalo 949 px a mělo 904, takže
	 * se posouvalo do strany a poslední rubriky nebyly vidět. Po zmenšení se
	 * vejde celé.
	 *
	 * Dotykový cíl se nemění, min-width a min-height drží 44 px (§14.7).
	 */
	@media (max-width: 1199px) {
		.rs-menu__list a {
			font-size: 13px;
			letter-spacing: 0.9px;
		}
	}

	/*
	 * Na tabletu se navigace smí zalomit na dva řádky.
	 *
	 * Dřív to bylo zakázané ze zcela konkrétního důvodu: menu bylo uvnitř
	 * 72px vysoké hlavičky a druhý řádek z ní vylezl a byl uříznutý. Teď má
	 * navigace vlastní pruh s linkou nad a pod, takže zalomení vypadá jako
	 * zalomení, ne jako chyba.
	 *
	 * Změřeno na 768 px: deset rubrik potřebuje 838 px a má 648, takže by se
	 * jinak posouvaly do strany a poslední čtyři by nebyly vidět. Rubriku,
	 * kterou čtenář nevidí, nenavštíví.
	 */
	@media (max-width: 1023px) {
		.rs-menu__list {
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 0 22px;
			overflow-x: visible;
		}

		.rs-wordmark {
			font-size: 28px;
		}
	}

	/*
	 * Obsah se nad 1440 px dál neroztahuje, jen se vycentruje (spec §12).
	 * 1320 = 1440 − 2 × 60.
	 */
	.rs-main,
	.rs-header {
		max-width: calc(1320px + 2 * var(--rs-gutter));
		margin-left: auto;
		margin-right: auto;
	}

	/*
	 * Mřížka 12 sloupců. Hlavní sloupec span 8, pravý span 4.
	 * Pod 1000 px se pravý sloupec skládá pod hlavní obsah.
	 */
	.rs-main {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 28px;
		padding: 40px var(--rs-gutter) 0;
	}

	.rs-main > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	/* Hero a mřížky zabírají hlavní sloupec, jakmile je na to místo. */
	@media (min-width: 1000px) {
		.rs-widget-a,
		.rs-widget-b {
			grid-column: span 8;
		}

		.rs-widget-d {
			grid-column: span 4;
		}

		/*
		 * Detail: 8 + 4 podle §11 a §12.
		 *
		 * .rs-article a .rs-photo jsou samy tou mřížkou (je to <main>), ne
		 * jejími položkami -- grid-column na nich nedělal nic a všechny děti
		 * padaly na 1 / -1. Text pak měl 624 px a seděl vlevo v 1 320 px
		 * širokém prázdnu. Proto je obsah zabalený v .rs-col.
		 */
		.rs-article > .rs-col,
		.rs-photo > .rs-col {
			grid-column: span 8;
		}

		.rs-rail {
			grid-column: span 4;
			display: flex;
			flex-direction: column;
			gap: 28px;
			min-width: 0;
		}
	}

}