/*
	Theme Name:		Invidis 2023
	Theme Part:		j4b-navigation.css
	Description:	CSS-Formatierungen für die Haupt-Navigation
	Author:			Stefan Kuhn
	Author URI:		https://just4business.de/
	Template:		Generatepress Child-Theme Invidis 2023
	Version:		0.1
*/



/******************************************************************************
 * Fixierung und Positionierung der Haupt-Navigation
 ******************************************************************************/

/* Fixierung der Navigation Admin-Bar für die Backend-Ansicht */
#wpadminbar {
	position: fixed;
}

/* Bei aktiver Admin-Bar die  Navigation-Bar entsprechend tiefer platzieren */
.admin-bar .main-navigation {
	top: 46px;
}
@media (min-width: 783px) {
	.admin-bar .main-navigation {
		top: 32px;
	}
}

/* Fixierung (sticky) der Navigation */
.main-navigation {
	position: fixed;
	top: 0;
	z-index: 99998;
	width: 100%;
}

/* Bugfix für scrollbare Navigation in der Mobilansicht */
#primary-menu {
	max-height: calc(100vh - 56px);
	overflow-y: auto;
}
@media (min-width:1025px) {
	#primary-menu {
		max-height: none;
		overflow-y: inherit;
	}
}
@media (max-width: 768px) {
	.admin-bar #primary-menu {
		max-height: calc(100vh - 56px - 46px);
	}
}
@media (not (max-width: 768px)) {
	.admin-bar #primary-menu {
		max-height: calc(100vh - 56px - 32px);
	}
}

/* Content um die Höhe der Navigation nach unten versetzen */
html {
	scroll-padding-top: 56px;
}
body {
	margin-top: 56px;
}

@media (min-width:1025px) {
	html {
		scroll-padding-top: 64px;
	}
	body {
		margin-top: 64px;
	}
}


/******************************************************************************
 * Farben der Haupt-Navigation
 ******************************************************************************/

/* Hauptmenü: Textfarbe */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--wp-j4b-theme-color-on-menu);
}

/* Hauptmenü: Hintergrundfarbe */
.main-navigation, .main-navigation .main-nav > ul {
	background-color: var(--wp-j4b-theme-color-background);
	background-image: linear-gradient(var(--wp-j4b-theme-color-menu), var(--wp-j4b-theme-color-menu));
}
.main-navigation .sub-menu {
	background-color: var(--wp-j4b-theme-color-background);
	background-image: linear-gradient(var(--wp-j4b-theme-color-menu), var(--wp-j4b-theme-color-menu)),linear-gradient(var(--wp-j4b-theme-color-menu), var(--wp-j4b-theme-color-menu));
}
.main-navigation .sub-menu .sub-menu {
	background-color: var(--wp-j4b-theme-color-background);
	background-image: linear-gradient(var(--wp-j4b-theme-color-menu), var(--wp-j4b-theme-color-menu)),linear-gradient(var(--wp-j4b-theme-color-menu), var(--wp-j4b-theme-color-menu)),linear-gradient(var(--wp-j4b-theme-color-menu), var(--wp-j4b-theme-color-menu));
}
/*
.main-navigation, .main-navigation ul {
	background-color: var(--wp-j4b-theme-color-menu);
}
*/

/* Hauptmenü: Textfarbe Submenüs */
.main-navigation .main-nav ul ul li a {
	color: var(--wp-j4b-theme-color-on-submenu);
}
.main-navigation .main-nav ul ul ul li a {
	color: var(--wp-j4b-theme-color-on-subsubmenu);
}

/* Hauptmenü: Hintergrundfarbe Submenüs */
.main-navigation ul ul li {
	background-color: var(--wp-j4b-theme-color-submenu);
}
.main-navigation ul ul ul li {
	background-color: var(--wp-j4b-theme-color-subsubmenu);
}

/* Hauptmenü: Hover-Effekte */
@media (hover: hover) and (pointer: fine) {
	/* Hauptmenü */
	.main-navigation ul li a:hover,
	button.menu-toggle:hover,
	.search-item:hover,
	.share-item:hover {
		color: var(--wp-j4b-theme-color-on-menu-hover);
	}
	/* Submenü */
	.main-navigation ul ul li a:hover,
	.main-navigation ul ul ul li a:hover {
		color: var(--wp-j4b-theme-color-on-accent-hover);
		background-color: var(--wp-j4b-theme-color-accent);
	}
	/* Hauptmenüeintrag bei Hover über Submenü */
	.main-navigation .main-nav > ul > li:hover > a:any-link {
		color: var(--wp-j4b-theme-color-accent);
	}
}

/******************************************************************************
 * Schatteneffekte der Haupt-Navigation
 ******************************************************************************/

/* Schatteneffekt gesamte Haupt-Navigation */
.main-navigation {
	box-shadow: 0 .5em 1em var(--wp-j4b-theme-color-darker-8);
}

@media (min-width:1025px) {
	/* Schatteneffekt bei den Untermenüs der Haupt-Navigation */
	.main-navigation .main-nav ul ul {
		box-shadow: 0 .5em 1em var(--wp-j4b-theme-color-darker-8);
	}
}

/******************************************************************************
 * Schriften der Haupt-Navigation
 ******************************************************************************/

/* Schrift im Hauptmenü und Submenü 1. Ebene der Navigation */
.main-navigation .main-nav ul li a {
	font-size: 18px;
	font-weight: bold;
}

/* Schrift im Submenü 2. Ebene der Navigation */
.main-navigation .main-nav ul ul li a,
.main-navigation .main-nav ul ul ul li a {
	font-size: 16px;
}

/******************************************************************************
 * Ausrichtung, Reihenfolge und Größe aller Elemente der Haupt-Navigation
 ******************************************************************************/

/* Navigation auf voller Breite des Contents */
.nav-below-header .main-navigation .inside-navigation.grid-container,
.nav-above-header .main-navigation .inside-navigation.grid-container {
	padding: 0;
}

/* Navigation rechts ausrichten */
.main-navigation .inside-navigation {
	justify-content: flex-end;
}

/* Reihenfolge der Navigations-Elemente */
.main-navigation .site-logo {
	order: 1;
}
@media (max-width: 320px) {
	/* Site-Logo füllt auf  kleinen Display den Freiraum auf */
	.main-navigation .site-logo {
		flex-grow: 1;
	}
}
.main-navigation .menu-bar-items {
	/* Füllen bei Bedarf den Freiraum auf */
	order: 2;
	flex-grow: 1;
	justify-content: flex-end;
}
.main-navigation button.menu-toggle {
	order: 3;
}
.main-navigation .navigation-search {
	order: 4;
}
.main-navigation .main-nav {
	order: 5;
}

/* Desktop-Ansicht der Navigation */
@media (min-width:1025px) {
	/* Navigation in der Desktop-Ansicht links ausrichten */
	.main-navigation .inside-navigation {
		justify-content: flex-start;
	}
	/* Navigationsmenü in der Desktop-Ansicht rechts ausrichten */
	.main-navigation .main-nav > ul {
		justify-content: flex-end;
	}
	/* Reihenfolge der Navigations-Elemente; Site-Logo in der Desktop-Ansicht nicht mehr Platz einräumen */
	.main-navigation .site-logo {
		flex-grow: 0;
	}
	/* Menü-Einträge füllen bei Bedarf den Freiraum auf */
	.main-navigation .main-nav {
		order: 2;
		flex-grow: 1;
	}
	.main-navigation .menu-bar-items {
		order: 3;
		flex-grow: 0;
	}
}

/******************************************************************************
 * Dimensionierung, Schatten & Hover-Effekt des Site-Logos der Haupt-Navigation
 ******************************************************************************/

/* Klickbare Fläche des Site-Logo-Links auf volle Höhe der Navigation-Bar erweitern */
.main-navigation .site-logo a {
	line-height: 0;
	padding: 12px 0 2px 16px;
}
/* Site-Logo skalieren und mit Schatten versehen */
.main-navigation .site-logo svg {
	width: auto;
	height: 42px;
}

/* Site-Logo färben und mit Hover-Effekt versehen */
.main-navigation .site-logo a:any-link .j4b-logo-vierer,
.main-navigation .site-logo a:any-link .j4b-logo-schrift {
	fill: rgb(89, 87, 87); /* #595757 */
}
.main-navigation .site-logo a:any-link .j4b-logo-kringel {
	fill: rgb(156, 153, 153); /* #9c9999 */
}
@media (hover: hover) and (pointer: fine) {
	.main-navigation .site-logo a:hover .j4b-logo-schrift {
		fill: var(--wp-j4b-theme-color-accent);
	}
}



@media (min-width:1025px) {
	.main-navigation .site-logo a {
		line-height: 0;
		padding: 14px 16px 2px 24px;
	}
	/* Site-Logo skalieren und mit Schatten versehen */
	.main-navigation .site-logo svg {
		width: auto;
		max-width: unset;
		height: 48px;
	}
}


/******************************************************************************
 * Größe und Gestaltung der Icons in der Haupt-Navigation
 ******************************************************************************/

.main-navigation .gp-icon {
	width: 48px;
	height: 48px;
	padding: 0px;
	line-height: 48px;
	border-radius: 50%;
	overflow: hidden;
}
.main-navigation .gp-icon svg {
	width: 48px;
	height: 48px;
	padding: 12px;
	line-height: 24px;
	position: inherit;
}

/******************************************************************************
 * Positionierung und Dimensionierung der Menü-Einträge der Haupt-Navigation
 ******************************************************************************/

/* Search-Icon auf Kleinst-Displays ausblenden */
@media (max-width:349px) {
	.main-navigation .menu-bar-item.search-item {
		display: none;
	}
}

/* Höhe und Breite der Menüeinträge und Dropdown-Menu-Toggles */
.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul ul li a {
	margin: 0;
	padding: 0 0 0 16px;
	line-height: 48px;
}

.main-navigation.toggled .main-nav li {
	width: 100%;
	text-align: left;
}

.menu-item-has-children .dropdown-menu-toggle,
.toggled .menu-item-has-children .dropdown-menu-toggle {
	margin: 0 4px 0 0;
	padding: 0;
	height: 48px;
	float: right;
	line-height: 0;
}

/* Höhe und Breite der Menüeinträge und Dropdown-Menu-Toggles ind der Desktop-Ansicht */
@media (min-width:1025px) {
	.main-navigation .main-nav ul li a {
		line-height: 64px;
	}
	.main-navigation .main-nav ul ul li a {
		line-height: 48px;
		margin: 0;
		padding: 0 16px;
	}
	.main-navigation .main-nav ul li a,
	.main-navigation .main-nav ul ul li a {
		padding: 0 24px;
	}
	.main-navigation .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle {
		display: none;
	}

	.main-navigation .main-nav ul .menu-item-has-children .dropdown-menu-toggle {
		height: 64px;
		padding: 8px 0;
		line-height: 0;
		margin: 0;
	}
	.main-navigation .main-nav ul ul .menu-item-has-children .dropdown-menu-toggle {
		height: auto;
		padding: 0;
	}
/* Sub-Menüs dimensionieren und positionieren ohne die unteres Linie der Navigation zu verdecken */
	.main-navigation .main-nav ul ul {
		top: 64px;
		width: 225px;
	}
	.main-navigation .main-nav ul ul ul {
		top: 64px;
		width: 300px;
		border-top: none;
	}
	/* Zweizeilige Einträge in Submenüs 2. Ebene erlauben und ausrichten */
	.main-navigation .main-nav ul ul ul li a {
		line-height: 1.125em;
		height: 48px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/******************************************************************************
 * Beschriftung von Symbolen in der Haupt-Navigation
 ******************************************************************************/

/* Beschriftung des Burger-Symbols auf sehr kleinen Display ausblenden */
.main-navigation .menu-toggle .mobile-menu{
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}
/* Beschriftung des Burger- % Such-Symbols auf größeren Display links vom Symbol anzeigen (ab 320px Breite) */
@media (min-width: 600px) {
	.main-navigation .menu-toggle .mobile-menu {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		line-height: 48px;
		display: block;
		padding-left: 12px;
		padding-right: 2px;
	}
	.main-navigation .menu-toggle .mobile-menu {
		float: left;
		width: inherit;
		height: 48px;
	}
}
@media (min-width: 1025px) {
	.main-navigation .menu-toggle .mobile-menu {
		display: none;
	}
}

@media (min-width: 600px) {
	.menu-bar-item.search-item:not(.active.close-search) a {
		display: flex;
	}
	.menu-bar-item.search-item:not(.active.close-search) a::before {
		content: "Suche";
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		line-height: 48px;
		display: block;
		padding-left: 12px;
		padding-right: 2px;
	}
}
@media (min-width: 1025px) {
	.menu-bar-item.search-item:not(.active.close-search) a::before {
		display: none;
	}
}


/******************************************************************************
 * Positionierung und Dimensionierung des Suchfeldes in der Haupt-Navigation
 ******************************************************************************/

/* Breite und Position des Eingabefeldes */
.main-navigation .navigation-search {
	width: calc(100% - 56px);
	position:absolute;
	left: 0;
	top: 0;
	transition: all 100ms ease-in-out;
}

/* Höhe und Schriftgröße des Eingabefeldes */
.main-navigation .navigation-search input[type="search"] {
	height: 56px;
	font-size: 1.25em;
}

/* Position des Toogles zum Schließen der Suche */
.menu-bar-item.search-item.active.close-search {
	position:absolute;
	right: 0;
	top: 0;
}

/* Positionierung und Dimensionierung für die Desktop-Ansicht */
@media (min-width:1025px) {
	/* Breite und Position des Eingabefeldes */
	.main-navigation .navigation-search {
		width: calc(100% - 64px);
	}
	/* Höhe des Eingabefeldes */
	.main-navigation .navigation-search input[type="search"] {
		height: 64px;
	}
}

/******************************************************************************
 * Positionierung und Dimensionierung des Menu-Toggle in der Mobil-Ansicht
 ******************************************************************************/

.main-navigation .menu-toggle {
	height: 56px;
	padding: 4px 4px 4px 0;
	margin: 0;
}

/******************************************************************************
 * Animation des Menu-Toggle in der Mobil-Ansicht
 ******************************************************************************/

/* Übergängseffekt der Animation */
.menu-toggle svg {
	transition: transform .2s ease-in-out;
}
/* SVG-Anzeige erzwingen (Generatepress arbeitet normalerweise mit 2 SVG-Grafiken, von denen dann immer eine ausgeblendet wird) */
.toggled .menu-toggle .icon-menu-bars svg:nth-child(1) {
	display: block;
}
/* Grundanimation: Die ganze SVG-Grafik 225 Grad im Uhrzeigersinn drehen */
.toggled .menu-toggle svg {
	transform: rotate(225deg);
}
/* Morphing-Animation: Aus dem Menu-Button wird ein Close-Button */

/* The two outside paths move toward the centre and fade out, while the cross fades in. */
.menu-toggle path {
	backface-visibility: hidden;
	transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

/* Fade in/out some lines */
.menu-toggle .x,
.toggled .menu-toggle .h {
	opacity: 0;
}
.toggled .menu-toggle .x {
	opacity: 1;
}

/* Move top and bottom line */
.toggled .menu-toggle .t {
	transform: translate(0, 8px);
	transform: translateY(8px);
}
.toggled .menu-toggle .b {
	transform: translate(0, -8px);
	transform: translateY(-8px);
}

/******************************************************************************
 * Positionierung und Dimensionierung des Such-Symbols in der Mobil-Ansicht
 ******************************************************************************/

/* Such-Symbol auf sehr kleinen Displays ausblenden */
.main-navigation .menu-bar-items {
	display: none;
}
@media (min-width: 320px) {
	.main-navigation .menu-bar-items {
		display: flex;
	}
}

/* Such-Symbol dimensionieren und gestalten */
.main-navigation .menu-bar-item.search-item a {
	height: 56px;
	padding: 4px 0;
	margin: 0;
}

/* Schließen-Symbol der Suche dimensionieren und gestalten */
.main-navigation .menu-bar-item.search-item.active.close-search  a {
	width: 56px;
	height: 56px;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 4px;
}

@media (min-width:1025px) {
	/* Suche-Symbol dimensionieren und gestalten */
	.main-navigation .menu-bar-item.search-item a {
		height: 64px;
		margin: 0;
		padding: 8px;
	}

	/* Schließen-Symbol der Suche dimensionieren und gestalten */
	.main-navigation .menu-bar-item.search-item.active.close-search a {
		width: 64px;
		height: 64px;
		padding: 8px;
	}
}



/******************************************************************************
 * Farbe der Suchleiste
 ******************************************************************************/
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus,
.main-navigation .main-nav ul li.search-item.active > a,
.main-navigation .menu-bar-items .search-item.active > a {
	color: rgba(255,255,255,0.87);
	background-color: rgba(0,0,0,0.87);
}
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
	font-weight: bold;
	opacity: 1;
	color: var(--wp-j4b-theme-color-on-searchbar);
	background-color: var(--wp-j4b-theme-color-searchbar);
}
.main-navigation .menu-bar-items .search-item.active.close-search > a {
	background-color: var(--wp-j4b-theme-color-accent);
	transition: background-color .1s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
	.main-navigation .menu-bar-items .search-item.active.close-search > a:hover {
		background-color: var(--wp-j4b-theme-color-signal);
		transition: background-color .1s ease-in-out;
	}
}
.close-search .gp-icon svg {
	fill: white;
}

/******************************************************************************
 * Suche verbergen
 ******************************************************************************/
/*
.main-navigation .menu-bar-item.search-item {
	display:none;
}
*/


/******************************************************************************
 * Diverses
 ******************************************************************************/

/* Mobile-only Menüpunkte ausblenden */
@media (min-width:1025px) {
	.mobileonly {
		display:none;
	}
}

/* Site-Header ausblenden */
.site-header {
	display:none;
}



/* Browser-Feedback für Links & Buttons unterbinden */
.main-navigation a,
.main-navigation button {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}