/*
	2018-04-04, tdogan

	v1.0.3

	Dropdownmenu für moderne Browser, vereinfacht mit flex.
	Alle ab IE11 und moderner iOS Safari

	2018-04-04, tdogan: Migration auf Font Awesome 5 PRO Icons

	Hier kommt weitmöglichst flexbox zum Einsatz, um die älteren display:inline-block Tricks abzulösen.
	Flexbox erzeugt, ähnlich float, keinen unnötigen Leerraum und alle Elemente stoßen immer kompress aufeinander.
*/

.c4dropdown, .c4dropdown *{
	box-sizing:border-box;
}
.c4dropdown{
	width:100%;
	position:relative;

	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.c4dropdown ul, .c4dropdown li{
	list-style:none;
	display:block;
	margin:0;
	padding:0;
	position:relative;
}

/*------- Level 0 ------*/
.c4dropdown ul.lvl0{
	width:100%;
	/*flex ohne weitere Angabe - ordnet die Items linksbündig ohne whitespace an, vergl. float:left*/
		/*safari alt*/
		display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}
	/*Level 0 gleich verteilt, vergl. Blocksatz. Die Items sind nur so breit, wie ihr Inhalt. Der verbelibende Raum wird mit Leeraum aufgefüllt*/
	.c4dropdown_justify ul.lvl0{
			/*safari alt*/
			-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
	}
	/*Setzt alle Items auf gleiche ausgeglichene Breite. Dazwischen verbleibt kein Leeraum.*/
	.c4dropdown_evenout li.lvl0{
		-ms-flex:1;
		-webkit-flex:1;
		flex:1;
	}

/*------- Sub ------*/
/*Würde .sub einfach mit position:absolute formatiert (ohne Angabe von top), so würde er sich wie bisher an der Unterkante des
vorangehenden A-Elementes anordnen. Dies stimmt aber nicht zwingend mit der Unterkante des übergeordneten LI-Elementes
überein, welches der Parent der beiden ist.
Gewünscht ist aber, dass .sub sich an der Unterkante des a.lvl0 Elemetes anordnet.
Um dies zu erreichen wird li.lvl0 auch ein flex container und a.lvl0 und ggf. folgender sub werden zu flex children.
Für li.lvl0 wird aber die Richtung auf column gesetzt, was zu einer vertikalen Anordnung führt.
So weit, so gut.
Leider führt das aber immer noch nicht dazu, dass das .sub sich an a.lvl0 wie gewüscht unten anordnet.
Auch wenn sich alle a.lvl0 optisch gleich hoch strecken, rutsch jeder zugehörige .sub so weit nach oben, bis er die Textgrundlinie von seinem a.lvl0 erreicht.
Es muss also für die a.lvl0 eine maximale Höhe von 100% erzwungen werden.
Ein Setzen von min-height:100% führt in allen Browser zum gewünschten Ergebnis.
Ausnahme - alle iOS Browser (nicht nur  Safari, sondern auch Firefox, Chrome, etc.).
Für iOS kann die gewüschte Höhe aber mit flex:1 erreicht werden, was die anderen Browser nicht stören würde - außer IE11.
Deshalb wird hier nur nur das prefixte -webkit-flex:1 gesetzt, nicht flex:1.
Genaugenommen wäre aber a.lvl0 mit flex:1 schematisch korrekt, da .sub.flex:none den Untercontainer vom flexlayout ausschließen sollte
und mit einer Höhe von 0px verbelibt, da sein Inhalt wiederum durch .sub_helper.position:absolute keine eigene Layouthöhe erzeugt.
Irgendwie komisch, aber das jetzige Konstrukt funktioniert in allen getesteten aktuellen Browsern einschl. IE11 und iOS.*/

/*LI, flex child UND flex container*/
.c4dropdown li.lvl0{
		/*safari alt*/
		display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	/*flex vertikal*/
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
}
	/*flex child*/
	.c4dropdown a.lvl0{
		/*Nur alle iOS Browser*/
		-webkit-flex:1;
		/*Alle Browser außer iOS*/
		min-height:100%;
		position:relative;
		/*outline:none verhindert bei einigen touch Browsern, dass der Hyperlink mit einer border hervorgehoben wird.*/
		outline:none;

	}
	/*flex child*/
	.c4dropdown .sub{
		/*Dieser Container hat nur den Zweck das dropdown in sub2 an der aktuellen Position festzunageln.
		Hat immer eine Höhe von 0px, da sub2 position:absolute ist.
		Es scheint etwas performanter zu sein, sub2 für die Steuerung der Sichtbarkeit zu verwenden, da sub2 nicht Teil eines flex Mechanismus ist.*/
		min-width:100%;
		position:relative;
		/*Aus Kompatibilitätsgründen ist das sub flex:none. D.h. der a.lvl0 im gleichen Parent sollte eigentlich den kompletten Raum einnehmen, wenn er flex:1 sein dürfte.*/
		-webkit-box-flex:0;
		-ms-flex:none;
		flex:none;
	}
		/*Hilfscontainer z.B. für Aufwärtspfeil. Ist so breit wie der übergeordnete Level 0 Menüpunkt*/
		.c4dropdown .sub_helper{
			width:100%;
			/*ACHTUNG: da der übergeordnete .sub ein flex child ist, dürfen die direkt untergeordneten
			children nur absolut positioniert werden (sub_helper, sub).
			Andernfalls trägt ihr Inhalt zur Gesamthöhe von .sub bei, was sich auch auf das
			übergeordnete flex layout auswirkt.
			Der typische Aufwärtspfeil im sub_helper ragt also nach unten aus dem 0px hohen
			.sub_helper heraus, wird aber zunächst vom folgenden .sub2 verdeckt.
			Also muss .sub2_helper den Raum frei machen und den sichtbaren .sub3 optisch nach unten drücken.
			Leider mus .sub_helper außerhalb von .sub2 liegen, damit er sich in der Breite
			an dem übergeordneten Menüpunkt orientiert und nicht am untergeordneten Dropdowncontainer.
			*/
			position:absolute;
			/*Zunächst ausgeblendet. Wird zusammen mit sub2 über die Zusatzklasse auf dem Item eingeblendet. s.u.*/
			display:none;
			/*Der Helper liegt im Stapel vor .sub2, damit der Aufwärtspfeil die Outline des Dropdown überlagern kann.*/
			z-index:20;
		}
		/*Container Ein- und Ausblenden*/
		.c4dropdown .sub2{
			/*Ist position:absolute, so dass die innenliegenden Submenüpunkte im äußeren Layout keine Platz einnehmen*/
			position:absolute;
			/*ACHTUNG: alle fixen Breitenagaben für das sichtbare dropdown dürfen ab hier unterhalb erfolgen, da sonst die Breite
			von den übergeordneten flex containern hochgereicht wird.*/
			min-width:100%;
			/*Zunächst immer ausgeblendet*/
			display:none;
			z-index:10;
		}
			/*Hilfscontainer ggf. für Zusatzformate/Icons. Ist so Breit wie das sichtbare Dropdown in sub2 und sub3*/
			.c4dropdown .sub2_helper{
				width:100%;
				position:relative;
			}
				/*Hilfscontainer, sichert die relative Position zum davorliegenden sub2_helper.
				Wird, wie beim letzten Dropdown üblich sub3 absolut rechtsbündig zu seinem
				Menüounkt festgenagelt, so sichert sub3_pos, dass die innenliegenden
				absoluten Element nicht nach oben rutschen.*/
				.c4dropdown .sub3_pos{
					min-width:100%;
					position:relative;
				}
					/*Das eigentlich sichtbare und gestylte Dropdown.
					Hier liegt die UL.lvl1 mit den Untermenüpunkten drin.*/
					.c4dropdown .sub3{
						min-width:100%;
						float:left;
						clear:both;
						/*Typischerweise ist das letzte Dropdown rechtsbündig und dann position:absolute. s.u. Standardformate*/
						position:relative;
					}
/*================ Steuerung Ein- Ausblenden =============*/
/*Die Sichtbarkeit wird über eine Laufzeitklasse auf dem LI.lvl0 per JS gesteuert.
Diese Klasse wird nur für das aktive Item gesetzt.
Hierüber wird sowohl die Sichtbarkeit des sub2, als auch des darin nicht enhaltenen sub_helper (Aufwärtspfeil) gesteuert.*/
.c4dropdown_open .sub_helper{
	display:block;
}
.c4dropdown_open .sub2{
	display:block;
}


/*-------- Items -------*/
.c4dropdown a{
	display:block;
	text-decoration:none;
	color:inherit;
}
.c4dropdown a.lvl0{
	min-height:100%;
		/*safari alt*/
		display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}
	.c4dropdown a:hover{
		text-decoration:none;
	}
	/*Hilfs DIV zur Steuerung der Ausrichtung der Beschriftung/Icon*/
	.c4dropdown .lbl.lvl0{
		width:100%;
			/*safari alt*/
			display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;

		/*vertikal zentriert
		In den meisten Fällen am besten. Text und ggf. vorhandenes Icon immer vertikal mittig anordnen. Sobald ein Menüpunkt ausnahmsweise umbrechen
		und höher werden würde, würden alle anderen Menüpunkt folgen, so dass alle gleich hoch bleiben und weiterhin
		alle Texte vertikal mittig. Und noch cooler - die Beschriftung kann sogar in ihrem eigenen SPAN umbrechen
		und das voran- oder nachgestellte Icon bleibt trotzdem auch mittig zum mehrzeiligen Text.*/
			/*safari alt*/
			-webkit-box-align:center;
		-webkit-align-items:center;
		align-items:center;

		position:relative;
	}
	/*Variante horizontal zentrierte Beschriftung. z.B. für tabs mit justify und zentrierter Beschriftung*/
	.c4dropdown_center_lbl .lbl.lvl0{
		/*Hier gibt es einen unschönen Effekt. Solange eine Textzeile nicht wegen zu kleinem Container zwangsweise umgebrochen wird,
		werden alle Elemente dieser Menübeschriftung korrekt horizontal zentriert. Dies gilt ebenfalls, wenn ein Textumbruch
		explizit z.B. mit einem BR vorgegeben wird.
		Findet jedoch ein erzwungener Zeilenumbruch statt, so wird der Textcontainer SPAN son breit, wie es der Innenraum des
		parent flex containers zulässt. Dies hat dann zur Folge, dass alle Elemente (Bullet + Text) linksbündig gerückt werden,
		da sich der umbrechende Textcontainer allen verfügbaren Raum vereinnahmt.
		Bisher noch keine komplett befriedigende Lösung. Allerdings ist dies auch eher ein Ausnahmefall.
		Eine mögliche Lösung wäre, innerhalb von lbl.lvl0 ohne flex zu arbeiten und die Elemente (icon, text)
		mittels des alten inline-block Tricks und text-align:center zu zentrieren. Hat allerdings immer den Nachteil,
		dass inline-block unnötigen Whitespace erzeugt.*/
			/*safari alt*/
			-webkit-box-pack:center;
		-ms-flex-pack:center;
		justify-content:center;
	}

	/*Icon, Beschriftung in allen Leveln*/
	/*Die sichtbare Beschriftung liegt in einem SPAN. Für ein Icon ist ein leeres I-Element davor verfügbar.
	So lange es nicht gestyled wird, nimmt es keinen Platz in der Reihe ein.
	Auch diese Hilfscontainer haben jeweils eine lvl Klasse.
	Beide Elemente sin vertikal top zueinander ausgerichtet, so dass bei Zeilenumruch im Text
	das Icon immer mit der ersten Zeile steht Für ein abweichendes Verhalten könne aber auch
	einfach beide Element vertical-align:middle gestezt werden, so dass das Icon auch bei Textumbruch
	immer mittig zum Textblock zentriert wird.*/
	.c4dropdown i.lvl0,
	.c4dropdown i.lvl1{
		display:inline-block;
		font-style:normal;
		vertical-align:top;
	}
	.c4dropdown span.lvl0,
	.c4dropdown span.lvl1{
		display:inline-block;
		vertical-align:top;
	}


/*================== Standardformate ===================*/

/*------- Letztes Dropdown rechtsbündig -------
Meist ist das Dropdown breiter als der Menüpunkt. Damit das letzte rechts nicht über den Satzspiegel
hinausschießt wird sein sub3 absolute position und rechts angenagelt.*/
.c4dropdown li.lvl0:last-child .sub3{
	position:absolute;
	right:0;
}




/*-------- Dropdown mit weißem Hintergrund, Aufwärtspfeil, runden Ecken und Schatten -------*/
/*Aufwärtspfeil*/
.c4dropdown_sub1 .sub_helper:before{
	/*pfeil outline*/
	content:'';
	display:block;
	width:0px;
	height:0px;
	border:10px solid transparent;
	border-top-style:none;
	border-bottom-color:rgb(153,153,153);
	position:absolute;
	left:50%;
	margin-left:-10px;
	top:0;
}
.c4dropdown_sub1 .sub_helper:after{
	/*pfeil fläche*/
	content:'';
	display:block;
	width:0px;
	height:0px;
	border:10px solid transparent;
	border-top-style:none;
	border-bottom-color:white;
	position:absolute;
	left:50%;
	margin-left:-10px;
	top:1px;
}
/*vertkal Raum freiräumen, damit der sub_helper sichtbar wird.*/
.c4dropdown_sub1 .sub2_helper{
	height:10px;
}

/*typische Breite des Dropdown für die meisten Projekte ausreichend*/
.c4dropdown_sub1 .sub3{
	width:300px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.5);
}
.c4dropdown_sub1 .sub3{
	background-color:white;
	border:1px solid rgb(153,153,153);
	border-radius:8px;
	/*Der overflow (background-color) an den runden Ecken durch eingefärbte lvl1 Menüpunkte wir mittlerweile bei allen Browsern (ab IE11) zuverlässig abgeschnitten.
	Der erste und letzte Menüpunkt muss also nicht mehr einzeln behandelt werden.*/
	overflow:hidden;
}
/*Beschriftung und Icon
Für das Icon wird ein I-Element genutzt, welches zusammen mit dem A-Element im LI.lvl1 liegt.
Solange es nicht gestyled ist, nimmt es keinen Platz in der Reihe ein.*/
/*Labelcontainer*/
.c4dropdown_sub1 .sub .lbl{
	padding:0.5em 0.5em 0.6em 2em;
	border-top:1px solid rgb(230,230,230);
}
	.c4dropdown_sub1 .sub li:first-child .lbl{
		border-top-style:hidden;
	}
/*Icon*/
.c4dropdown_sub1 i.lvl1{
	width:1.35em;
	margin-left:-1.35em;
}
	.c4dropdown_sub1 i.lvl1:before{
		/*fas fa-arrow-circle-right*/
		content:'\f0a9';
		font-family:'Font Awesome 5 Pro';
		display:inline-block;
		font-weight:900;
	}