/*--------------------------------------------------------------
# Navigace

Hlavní menu v hlavičce a menu v patičce.
.main-navigation ul je dvakrát: základní varianta a varianta v @media
pro rozbalovací menu na úzkých displejích. Není to duplicita.
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}


/*--------------------------------------------------------------
# Převzetí z Astry

Astra: položky 16px, odsazení 0 16px, barva textu, bez podtržení.
Bez odsazení se v _s slévají do jednoho slova.
--------------------------------------------------------------*/

.main-navigation {
	clear: none;
	margin: 0;
	flex: 0 1 auto;
}

/*
 * Položky menu k pravému okraji.
 *
 * .main-navigation zabírá celý zbytek řádku (2070 px), ale bez tohohle se
 * položky nakupí vlevo hned za logem a vpravo zůstane prázdno - Astra je má
 * u pravého okraje.
 */
/*
 * flex-wrap: wrap je tu POVINNĚ.
 *
 * _s dává menu `display: flex` bez určení zalamování, takže platí výchozí
 * nowrap - položky se nevejdou a přetečou VEN Z OKNA. Naměřeno při 1000 px:
 * stránka přetékala o 181 px a šla posouvat do strany.
 *
 * Se zalomením se menu při 921-1399 px rozloží na dva řádky a hlavička
 * naroste z 93 na 106 px. Není to hezké, ale je to lepší než vodorovné
 * posouvání celé stránky.
 */
.main-navigation ul {
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.main-navigation a,
.main-navigation a:visited {
	color: var(--barva-textu);
	font-size: 16px;
	padding: 0 16px;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--barva-akcent);
}

/*
 * Menu v patičce.
 *
 * Astra ho má POD SEBOU a zarovnané doprava (třída astra-footer-vertical,
 * display: grid) - vlevo vedle něj sedí sociální odkazy. Původně jsem ho
 * udělal vodorovně, což bylo špatně.
 */
.footer-navigation {
	display: flex;
	justify-content: flex-end;
	/* Umístění v řádku řeší .site-footer-top v socialni-odkazy.css. */
	margin-left: auto;
}

.footer-navigation ul {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.footer-navigation a,
.footer-navigation a:visited {
	color: var(--barva-textu);
	font-size: 14px;
	text-decoration: none;
}

.footer-navigation a:hover,
.footer-navigation a:focus {
	color: var(--barva-akcent);
}

/*--------------------------------------------------------------
# Hlavní menu na mobilu

Na úzkých oknech se z menu nechává jen odkaz Cena - jediná položka, která
se vejde vedle loga. Zbytek se skrývá včetně telefonu a Rezervace, protože
oba už na mobilu plavou jako samostatná tlačítka (plovouci-prvky.css) a
v menu by byly podruhé.

Hamburger se schválně nezobrazuje: Tomáš ho nechce, lidi na něj podle jeho
zkušenosti stejně neklikají. Proto se přebíjí i výchozí chování _s, které
pod 37.5em (600 px) menu schová a místo něj ukáže tlačítko.

Cena se adresuje třídou menu-item-347, kterou dává WordPress podle ID
položky menu. Kdyby se položka smazala a založila znovu, dostane jiné ID
a je potřeba ho tu srovnat. Cílit na adresu přes [href] by bylo odolnější,
ale hůř by se to hledalo - proto radši tenhle komentář.
--------------------------------------------------------------*/

@media (max-width: 921px) {

	/* Žádný hamburger. */
	.menu-toggle {
		display: none;
	}

	/* Přebíjí výchozí schovávání menu v _s pod 600 px. */
	.main-navigation ul,
	.main-navigation.toggled ul {
		display: flex;
		flex-wrap: nowrap;
	}

	#primary-menu > li {
		display: none;
	}

	#primary-menu > li.menu-item-347 {   /* Cena */
		display: block;
		margin-left: 0;
	}
}