/* LH 1.11 – mobilná hlavička (do 767 px)
 * Prázdny tmavý horný pás je skrytý; žltý pás s logom je na celú šírku
 * a tlačidlo menu je v ňom vpravo. Rozbalené menu sa otvára pod pásom.
 * Desktop a tablet sa nemenia.
 */
@media (max-width: 767px) {
	/* Hlavička vždy nad obsahom – prvý riadok stránky má z desktopu margin-top: -30px
	   a fotka hera by inak prekrývala spodok žltého pásu. */
	html .header {
		position: relative;
		z-index: 100;
	}
	html .header .top-header {
		display: none;
	}

	/* Žltý pás na celú šírku */
	html .header .header-main > .container,
	html .header .header-main .row,
	html .header .header-main .col-xs-12 {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
	}
	html .header .header-main__inner {
		display: flex;
		align-items: center;
		min-height: 72px;
		margin: 0;
		padding: 12px 76px 12px 16px; /* vpravo miesto pre tlačidlo menu */
		box-sizing: border-box;
		background-image: none; /* šikmý svetlý pruh z desktopu na mobile pôsobí ako presahujúci obrázok */
	}
	html .header .header__logo {
		display: block;
		float: none;
		line-height: 0;
	}
	html .header .header__logo img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 48px;
	}

	/* Riadok s menu nezaberá miesto, kým je menu zatvorené */
	html .header .yamm-wrap .col-xs-12,
	html .header .yamm-wrap .top-nav,
	html .header .yamm-wrap .navbar.yamm {
		display: block;
		position: static;
		min-height: 0;
		margin: 0;
		padding: 0;
		box-shadow: none;
	}
	html .header .yamm-wrap .navbar-header {
		height: 0;
	}

	/* Tlačidlo menu v žltom páse, zvislo na stred */
	html .header .yamm .navbar-toggle {
		position: absolute;
		top: 14px;
		right: 16px;
		z-index: 10;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0 11px;
		border: 0;
		border-radius: 4px;
		background-color: #222;
	}
	html .header .yamm .navbar-toggle .icon-bar {
		width: 22px;
		height: 2px;
		background-color: #fff;
	}
	html .header .yamm .navbar-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}