/*-----------------------------------------------------------------------------------

	Klient:			Klempířství Kozaňák
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.2 (koncept, hero s fotkou a světlé karty)
	Dodáno:			Listopad 2026

	Menu na telefonu (pod 60rem). Bez JS jsou odkazy v řádku pod hlavičkou,
	s JS (třída .js-menu na <html>) je schová tlačítko Menu.

-----------------------------------------------------------------------------------*/

.nav__tlacitko { display: none; }

@media (max-width: 60rem) {
	/* wordmark na dva řádky jako na počítači, ať se vedle vejde Menu i Zavolat */
	.header__logo { flex-direction: column; justify-content: center; gap: 0.1rem; padding-top: 0; line-height: 1.05; }
	.header__radek { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); }
	.nav { order: 2; flex-basis: 100%; }
	.nav ul { flex-wrap: wrap; gap: 0 var(--space-m); }
	.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

	.js-menu .header__radek { flex-wrap: nowrap; }
	.js-menu .header__radek > .btn { flex-shrink: 0; flex-wrap: nowrap; white-space: nowrap; }
	.js-menu .nav__tlacitko { display: inline-flex; background: transparent; font-family: inherit; cursor: pointer; }
	.js-menu .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--c-steel-hero); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
	.js-menu .nav.je-otevrene { display: block; }
	.js-menu .nav ul { flex-direction: column; width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; padding-block: var(--space-xs) var(--space-s); }
	.js-menu .nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
	.js-menu .nav a { display: flex; min-height: 3rem; font-size: var(--step-0); }
}

/* nejužší telefony (320 px): menší vnitřní okraje, ať se tlačítka vejdou vedle loga */
@media (max-width: 22rem) {
	.header__inner { gap: var(--space-xs); }
	.js-menu .header__radek > .btn { padding-inline: 0.6rem; }
}