/**
 * skp — rozbalovací podmenu v mobilní navigaci
 *
 * Divi v mobilním menu zobrazuje podmenu vždy rozbalené, takže se položky
 * druhé úrovně mísí s první a menu je zbytečně dlouhé. Tohle je skládá pod
 * přepínač, který k položce dopisuje js/menu-mobile.js.
 *
 * Platí jen do 980px, tedy pro tablet a telefon. Na desktopu má menu vlastní
 * rozbalovací panel a tahle pravidla se ho nesmí dotknout.
 */

@media ( max-width: 980px ) {

	.et-l--header .et_mobile_menu li.menu-item-has-children {
		position: relative;
	}

	/*
		Cílíme na Divi třídu menu-item-has-children, ne na vlastní třídu
		z JS. Divi vyrábí mobilní menu až skriptem, takže s vlastní třídou
		by podmenu na okamžik problikla rozbalená, než se JS dostane ke slovu.

		Divi drží podmenu viditelné vlastním pravidlem, proto !important.
		Skládá se přes max-height, aby šlo animovat; samotné display: none
		by přechod znemožnilo.
	*/
	.et-l--header .et_mobile_menu li.menu-item-has-children > .sub-menu {
		display: block !important;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-height 300ms ease, visibility 0s linear 300ms;
	}

	.et-l--header .et_mobile_menu li.skp-podmenu-otevreno > .sub-menu {
		visibility: visible;
		transition: max-height 300ms ease, visibility 0s;
	}

	/*
		Přepínač sedí na řádku své položky. Šířka i výška 48px drží
		dotykový cíl na minimu, které vyžaduje design kontrakt.
	*/
	.et-l--header .et_mobile_menu .skp-prepinac {
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		padding: 0;
		margin: 0;
		border: 0;
		background: none;
		color: #F5C400;
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 300ms ease;
	}

	.et-l--header .et_mobile_menu .skp-prepinac::before {
		content: "+";
		font-weight: 400;
	}

	.et-l--header .et_mobile_menu li.skp-podmenu-otevreno > .skp-prepinac {
		transform: rotate( 45deg );
	}

	.et-l--header .et_mobile_menu .skp-prepinac:focus-visible {
		outline: 2px solid #F5C400;
		outline-offset: -6px;
		border-radius: 8px;
	}

	/* Text položky nesmí zajet pod přepínač. */
	.et-l--header .et_mobile_menu li.menu-item-has-children > a {
		padding-right: 52px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.et-l--header .et_mobile_menu li.menu-item-has-children > .sub-menu,
	.et-l--header .et_mobile_menu .skp-prepinac {
		transition: none;
	}
}