/* NAVIGATION BAR */

#navigation-bar,
button.nav-theme-switcher-button {
  background-color: var(--bg-color);
  background-image: linear-gradient(var(--04dp), var(--04dp)); /* adds a semi-transparant overlay layer on top of the background color */
}
/* -- HEADER IMAGE ADJUSTMENTS FOR MOBILE-- */
@media (max-width: 768px) {
    /* CSS in here for mobile only */
	#navigation-bar {
		background-color: transparent; /* To make the nav-bar transpararent on mobile */
  		background-image: linear-gradient(transparent); /* To make the nav-bar transpararent on mobile */
	}
	 #navigation-bar.gb-is-sticky {
		color: black;
		background-color: var(--bg-color);
		background-image: linear-gradient(var(--04dp), var(--04dp));
  	}
	#navigation-bar.gb-is-sticky .logo-nav svg {
		fill: var(--logo-color-on-bg);
	}
}

/* Search Module in Navigation bar */
.search-modal-form .search-field, .search-modal-form .search-field:focus {
	background-color: white !important;
}

/* -- DROPDOWN MENU NAVIGATION BAR -- */
.gb-menu--hover {
	text-align: left;
}
#menu-primary.gb-sub-menu-smc35f25 .menu-item {
	background-color; var(--neutral-600) !important;
}
@media screen and (min-width: 1025px) {
.gb-navigation ul ul li:hover>ul, .gb-navigation ul ul li.focus>ul {  /* Change the direction of the submenu to come to the right instead of left of the menu level parent */
    right: auto;
    left: 100%;
}

.gb-navigation ul ul .menu-item-has-children>a:after {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
}
.gb-navigation ul.gb-menu li.menu-item ul.sub-menu li.menu-item {
	background: var(--navigation-bg);
	background-image: var(--navigation-bg-image);
	color: var(--text-on-menu-color);
}
.gb-navigation ul.gb-menu li.menu-item ul.sub-menu {
	border-top: 1px solid var(--navigation-menu-border-color);
	border-right: 1px solid var(--navigation-menu-border-color);
	border-bottom: 1px solid var(--navigation-menu-border-color);
	border-left: 1px solid var(--navigation-menu-border-color);
}


.gb-navigation .gb-menu-link {
	padding: .7em 14px !important;
}
.gb-menu-link:hover {
  	background: hsl(from white h s calc(l - 30) / 80%);
	color: black !important;
}
.gb-navigation > .gb-menu-container > ul > li > a.gb-menu-link:hover {
  	background: transparent !important;
	color: inherit !important;
}
.gb-sub-menu {
	width: 270px !important;
}

/*ADD THESE STYLES BELOW IN THE BLOCK EDITOR DIRECTLY */


/* Adjustment to menu bar on mobile after scroll-up: set background instead of transparent */
/*.gb-is-sticky {  
	background-color: white !important;
}*/
/*.gb-is-sticky div .wp-block-search__input {
  background-color: var(--neutral-50) !important;
}*/

/* Adjustment to search in navigation bar */
.wp-block-search__inside-wrapper {
	border: none !important;
}
.wp-block-search__button-inside {
	margin-left: 0.7em !important;
}
div .wp-block-search__input {
	width: 180px !important;
	border-radius: 7px !important;
	height: 40px !important;
	padding-left: 20px !important;
	border: none !important;
	/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
	/*background-color: white !important;*/
	background-color: var(--bg-color) !important;
	background-image: var(--form-bg-color);
	margin-right: -45px !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
}
div .wp-block-search__input:focus {
	/*background-color: white !important;*/
	background-color: var(--bg-color);
	background-image: var(--form-bg-focus-color);
	box-shadow: 0 0 0 .25rem var(--search-form-border-color) !important;
	color: var(--heading-color) !important;
}
.wp-block-search__button {
	/*color: #888 !important;*/
	color: var(--text-color);
	background-color: transparent !important;
	padding-left: 5px !important;
	margin-left: 0px !important;
}
.wp-block-search__inside-wrapper  button:hover, 
.wp-block-search__inside-wrapper button:focus {
	/*color: #888 !important;*/
	color: var(--heading-color);
	background-color: transparent !important;
}
.navigation-section-grid {
	align-content: center;
}
body :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
	background-color: transparent;
}



/* STYLE THE THEME-SWITCH NAVIGATION BUTTONS HERE */
button.nav-theme-switcher-button {
	background-color: var(--bg-color);
	color: var(--text-color);
	transition: none; /* This prevents a delay in update of the button background when changing color theme */
	height: 59px; /* Fallback for older browsers */
	height: calc(var(--navigation-height) - 1px); /* This is needed to perfectly align the overlay pannel to switch color themes to the button */
}
button.nav-theme-switcher-button:is(:hover, :focus) {
	background-color: var(--bg-color);
	color: var(--text-color);
}
html.develop button.nav-theme-switcher-button,
html.develop button.nav-theme-switcher-button:is(:hover, :focus),
html.develop .theme-switch-label {
	background-color: purple; /* To keep the Develop NAV button visible */
	background-image: linear-gradient(purple, purple); /* To keep the Develop NAV button visible */
	color: yellow; /* To keep the Develop NAV button visible */
}
/* Show SVG ONLY of the selected theme (first hide all, then selectively reveal): This excludes the system SVG! */
button.nav-theme-switcher-button svg.nav-theme-switch-svg-light,
button.nav-theme-switcher-button svg.nav-theme-switch-svg-dim,
button.nav-theme-switcher-button svg.nav-theme-switch-svg-dark,
button.nav-theme-switcher-button svg.nav-theme-switch-svg-develop {
	display: none;
}
.light button.nav-theme-switcher-button svg.nav-theme-switch-svg-light,
.dim button.nav-theme-switcher-button svg.nav-theme-switch-svg-dim,
.dark button.nav-theme-switcher-button svg.nav-theme-switch-svg-dark,
.develop button.nav-theme-switcher-button svg.nav-theme-switch-svg-develop {
	display: inline-flex;
}
/* The system SVG is hidden when ANY of the themes is selected (if none are selected, system SVG is shown)  */
.light button.nav-theme-switcher-button svg.nav-theme-switch-svg-system,
.dark button.nav-theme-switcher-button svg.nav-theme-switch-svg-system,
.dim button.nav-theme-switcher-button svg.nav-theme-switch-svg-system,
.develop button.nav-theme-switcher-button svg.nav-theme-switch-svg-system {
	display: none !important; /* TURNS THE SYSTEM SVG OFF WHEN ANY OTHER MODE THAN SYSTEM IS SELECTED */
}

/* STYLE THE THEME SWITCH  */
.theme-switch fieldset {
	display: flex;
  	flex-direction: column;
}
.theme-switch-input {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip-path: inset(100%);
}
.theme-switch-label {
	/*background: var(--24dp);*/
	background: var(--navigation-bg);
	background-image: var(--navigation-bg-image);
	padding: 8px 12px;
	color: var(--text-on-menu-color);
	display: flex;
}
html.develop .theme-switch-label:hover, /* Needed for this to work with the devolop theme */
.theme-switch-label:hover {
  background: hsl(from white h s calc(l - 30) / 80%);
  color: black;
}
.theme-switch-label:hover svg.theme-switch-label-svg-light,
.theme-switch-label:hover svg.theme-switch-label-svg-dim,
.theme-switch-label:hover svg.theme-switch-label-svg-dark {
  color: rgb(255, 240, 0); /* Yellow color when hovering the icon */
}
.theme-switch-label svg,
.mobile-theme-switch-label svg {
	font-size: 1em;
  	width: 1em;
  	height: 1em;
  	justify-self: center;
  	align-self: center;
}
.theme-switch-label svg.theme-switch-label-svg-system,
.mobile-theme-switch-label svg.mobile-theme-switch-label-svg-system, {
	width: .8em; /* This svg is a little bigger than the others and needs to be reduced a little */
  	height: .8em;
}
.theme-switch-label-text, 
.mobile-theme-switch-label-text {
	padding-left: .5em;
}