/*
	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
*/

:root:has(#wpadminbar) { --wp-j4b-wpadminbar-height: 46px; }
@media screen and (min-width: 783px) {
	:root:has(#wpadminbar) { --wp-j4b-wpadminbar-height: 32px; }
}

:root { --wp-j4b-navbar-height: 56px; }
@media screen and not (max-width: 1023px) {
	:root { --wp-j4b-navbar-height: 64px; }
}

:root {
	--wp-j4b-navbar-icon-height: 24px;
	--wp-j4b-navbar-icon-padding: calc( var(--wp-j4b-navbar-height) / 2 - var(--wp-j4b-navbar-icon-height) );
}



/*
#wpadminbar {
	overflow: hidden;
}
*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body:not(.wp-admin) #wpadminbar #wp-admin-bar-customize,
	body:not(.wp-admin) #wpadminbar #wp-admin-bar-updates,
	body:not(.wp-admin) #wpadminbar #wp-admin-bar-aioseo-main,
	body:not(.wp-admin) #wpadminbar #wp-admin-bar-wp-piwik_stats,
	body:not(.wp-admin) #wpadminbar #wp-admin-bar-schema-test-item,
	body:not(.wp-admin) #wpadminbar #wp-admin-bar-advanced_ads_ad_health	{
		display: none;
	}
}


/******************************************************************************
 * 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 screen and (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 screen and not (max-width: 1023px) {
	/* 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;
	}
}

/******************************************************************************
 * 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: var(--wp-j4b-wpadminbar-height,0);
}

/* Fixierung (sticky) der Navigation */
.main-navigation {
	position: fixed;
	top: 0;
	z-index: 99997;
	width: 100%;
	height: var(--wp-j4b-navbar-height);
}

/* Bugfix für scrollbare Navigation in der Mobilansicht */
/*
#primary-menu {
	max-height: calc(100vh - var(--wp-j4b-navbar-height));
	overflow-y: auto;
}
@media (min-width:1024px) {
	#primary-menu {
		max-height: none;
		overflow-y: inherit;
	}
}
*/

.admin-bar #primary-menu {
	max-height: calc(100vh - var(--wp-j4b-navbar-height) - var(--wp-j4b-wpadminbar-height,0));
}

/* Content um die Höhe der Navigation nach unten versetzen */
html {
	scroll-padding-top: var(--wp-j4b-navbar-height);
}
body {
	margin-top: var(--wp-j4b-navbar-height);
}



/******************************************************************************
 * 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 screen and (hover: hover) and (pointer: fine) {
	/* Hauptmenü */
	.main-navigation ul li a:hover,
	button.menu-toggle:hover,
	.search-item:hover,
	.share-item:hover,
	.menu-bar-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 screen and not (max-width: 1023px) {
	/* 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;
}


/******************************************************************************
 * 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: 16px 0 16px 16px;
}
/* Site-Logo skalieren und mit Schatten versehen */
.main-navigation .site-logo svg {
	width: auto;
	height: 24px;
}

.main-navigation .site-logo a:any-link {
	color: var(--wp-j4b-theme-color-on-menu);
}
@media screen and (hover: hover) and (pointer: fine) {
	.main-navigation .site-logo a:hover {
		color: var(--wp-j4b-theme-color-accent);
	}
}

@media screen and not (max-width: 1023px) {
	.main-navigation .site-logo a {
		line-height: 0;
		padding: 12px 16px 12px 24px;
	}
	/* Site-Logo skalieren und mit Schatten versehen */
	.main-navigation .site-logo svg {
		width: auto;
		max-width: unset;
		height: 40px;
	}
}


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

.main-navigation .gp-icon {
	width: calc(var(--wp-j4b-navbar-icon-height) * 2);
	height: calc(var(--wp-j4b-navbar-icon-height) * 2);
	padding: 0px;
	line-height: calc(var(--wp-j4b-navbar-icon-height) * 2);
	border-radius: 50%;
	overflow: hidden;
}
.main-navigation .gp-icon svg {
	width: calc(var(--wp-j4b-navbar-icon-height) * 2);
	height: calc(var(--wp-j4b-navbar-icon-height) * 2);
	padding: calc(var(--wp-j4b-navbar-icon-height) / 2);
	line-height: var(--wp-j4b-navbar-icon-height);
	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;
}

.main-navigation.toggled .main-nav :not(.sub-menu) > li:not(:last-of-type) {
	border-bottom: 1px solid var(--wp-j4b-theme-color-darker-9);
}

.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 screen and not (max-width: 1023px) {
	.main-navigation .main-nav ul li a {
		line-height: var(--wp-j4b-navbar-height);
	}
	.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 li.menu-item-has-children > 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: var(--wp-j4b-navbar-height);
		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: var(--wp-j4b-navbar-height);
		width: 225px;
	}
	.main-navigation .main-nav ul ul ul {
		top: var(--wp-j4b-navbar-height);
		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,
	.main-navigation .menu-bar-item button::before,
	.main-navigation .menu-bar-item a[role="button"]::before {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		line-height: calc(var(--wp-j4b-navbar-icon-height) * 2);
		display: block;
		padding-left: 12px;
		padding-right: 2px;
	}
	.main-navigation .menu-toggle .mobile-menu {
		float: left;
		width: inherit;
		height: calc(var(--wp-j4b-navbar-icon-height) * 2);
	}
}
@media screen and not (max-width: 1023px) {
	.main-navigation .menu-toggle .mobile-menu {
		display: none;
	}
}



/******************************************************************************
 * Positionierung und Dimensionierung des Menu-Toggles und der Menu-Bar-Items
 ******************************************************************************/

.main-navigation .menu-toggle,
.main-navigation .menu-bar-item button,
.main-navigation .menu-bar-item a[role="button"] {
	width: calc(var(--wp-j4b-navbar-icon-height) * 2);
	height: var(--wp-j4b-navbar-height);
	padding: var(--wp-j4b-navbar-icon-padding) 0;
	margin: 0;
	overflow: hidden;
	
	color: inherit;
	background-color: unset;
}

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

@media screen and (min-width: 600px) and (max-width: 1023px) {
	.main-navigation .menu-toggle,
	.main-navigation .menu-bar-item button,
	.main-navigation .menu-bar-item a[role="button"] {
		width: auto;
	}
	.main-navigation .menu-bar-item button,
	.main-navigation .menu-bar-item a[role="button"] {
		display: flex;
	}
	[lang^="de"] .main-navigation .menu-bar-item a[data-gpmodal-trigger="gp-search"]::before {
		content: "Suche";
	}
	[lang^="en"] .main-navigation .menu-bar-item a[data-gpmodal-trigger="gp-search"]::before {
		content: "Search";
	}
}

@media screen and not (max-width: 1023px) {
	.main-navigation .menu-bar-item button,
	.main-navigation .menu-bar-item a[role="button"] {
		width: var(--wp-j4b-navbar-height);
		padding: var(--wp-j4b-navbar-icon-padding);
		margin: 0;
		display: flex;
	}
}

/******************************************************************************
 * 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);
}



/******************************************************************************
 * Menu-Bar-Items auf Kleinstdisplays in der Mobil-Ansicht ausblenden
 ******************************************************************************/

@media (max-width: 319px) {
	.main-navigation .menu-bar-items {
		display: none;
	}
}



/******************************************************************************
 * Anpassungen für neues Generatepress Search-Modal
 ******************************************************************************/

.gp-search-modal .gp-modal__overlay {
	background: linear-gradient(var(--wp-j4b-theme-color-darker-9)),linear-gradient(var(--wp-j4b-theme-color-darker-9)),linear-gradient(var(--wp-j4b-theme-color-darker-9)),linear-gradient(var(--wp-j4b-theme-color-darker-9));
	z-index: 99999;
	transition: opacity .2s ease-in-out;
}

.gp-modal__container {
  transition: transform .2s ease-in-out;
}

.search-modal-form {
	width: 640px;
	max-width: calc(100% - 10px);
	margin: 0 auto;
}

.search-modal-fields {
	height: 58px;
	color: var(--wp-j4b-theme-color-on-background);
	background-color: var(--wp-j4b-theme-color-background);
	border: solid 5px var(--wp-j4b-theme-color-accent);
	border-radius: 9999px;
	overflow: hidden;
}

.search-modal-form .search-field, .search-modal-form .search-field:focus {
	width: 100%;
	height: 100%;
	color: var(--wp-j4b-theme-color-on-background);
	background-color: var(--wp-j4b-theme-color-background);
	font-size: 1em;
	font-weight: 500;
	appearance: none;
	outline: none;
}

.search-modal-fields button {
	padding: 0;
	color: var(--wp-j4b-theme-color-on-background);
}

@media screen and (hover: hover) and (pointer: fine) {
	.search-modal-fields button:hover {
		color: var(--wp-j4b-theme-color-background);
		background-color: var(--wp-j4b-theme-color-brand-1);
	}
}

.search-modal-fields button .gp-icon svg {
	width: calc(var(--wp-j4b-navbar-icon-height) * 2);
	height: calc(var(--wp-j4b-navbar-icon-height) * 2);
	padding: 12px;
	line-height: 24px;
	position: inherit;
}




/******************************************************************************
 * Mobil-Ansicht: Seiteninhalt abdunkeln etc., wenn Menü geöffnet
 ******************************************************************************/

/* Seiteninhalt abgedunkelt, wenn Mobile-Menu geöffnet */
body #page::before {
	opacity: 0;
	transition: opacity .2s ease-in-out;
}
body:has(.menu-toggle[aria-expanded="true"]) #page::before {
	opacity: 1;
	content: "";
	z-index: +1;
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--wp-j4b-theme-color-darker-9)),linear-gradient(var(--wp-j4b-theme-color-darker-9)),linear-gradient(var(--wp-j4b-theme-color-darker-9)),linear-gradient(var(--wp-j4b-theme-color-darker-9));
	backdrop-filter: blur(3px);
}
/* Seiteninhalt nicht scrollbar, wenn Mobile-Menu geöffnet */
body:has(.menu-toggle[aria-expanded="true"]) {
	overflow: hidden;
}
/* Mobile-Menu positionieren und gestalten */
body:has(.menu-toggle[aria-expanded="true"]) .main-navigation.toggled .main-nav {
	position: absolute;
	top: calc(var(--wp-j4b-navbar-height));
	left: 0;
	width: 100vw;
	border-top: 3px solid var(--wp-j4b-theme-color-accent);
}

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

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

/* Desktop-only Menüpunkte ausblenden */
@media (max-width:1023px) {
	.desktoponly {
		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;
}