/* NAVIGATION - MOBILE MENU */



/* MOBILE MENU Z-INDEX */
.gb-menu-container--mobile {
	z-index: 3000;  /* Make the mobile menu go on top of the sticky-footer-menu */
}


/* MOBILE MENU - main navigation style adjustments */
body[data-gb-menu-open="full-overlay"] .gb-navigation .gb-menu {
  display: block;
	max-height: calc(100vh - 275px); /* the max-height of the mobile menu is determined by the  */
  overflow-y: auto;
  box-sizing: border-box;
  padding-right: 15px; /* space for scrollbar */
  width: 100%;
}
body[data-gb-menu-open="full-overlay"] .gb-menu ul, 
body[data-gb-menu-open="full-overlay"] .gb-menu li {
  box-sizing: border-box;
  width: 100%;       /* full width inside scroll container */
  margin: 0;
  padding: 0 10px;   /* optional padding to avoid flush edges */
}
body[data-gb-menu-open="full-overlay"] .gb-navigation a.gb-menu-link {
	padding: .6em 14px;
}
body[data-gb-menu-open="full-overlay"] .gb-navigation ul.gb-menu > li:first-child {
	margin-top: 30px;
}
body[data-gb-menu-open="full-overlay"] .gb-navigation ul.gb-menu li.menu-item ul.sub-menu {
	border: none;
}
body[data-gb-menu-open="full-overlay"] .gb-navigation ul.gb-menu ul.sub-menu li {
	padding: 0em 1.6em;
}
body[data-gb-menu-open="full-overlay"] .gb-navigation ul.gb-menu ul.sub-menu li ul.sub-menu li {
	color: var(--neutral-400);
}


body[data-gb-menu-open="full-overlay"] .gb-navigation ul.gb-menu li.menu-item ul.sub-menu li.menu-item {
	background: var(--mobile-navigation-bg);
	color: var(--text-on-mobile-menu-color);
}

body[data-gb-menu-open="full-overlay"] .gb-menu-link:hover {
  	background: none;
	color: inherit !important;
}

body[data-gb-menu-open="full-overlay"] .gb-sub-menu {
	width: 100% !important;
}

/* MOBILE MENU - MAIN NAVIGATION - Text effect (turned off) */
	/* Target only first-level menu items */
/*	.gb-navigation ul.gb-menu > li.menu-item-type-post_type {
	  transform: translateX(-100vw);
	  visibility: hidden;
	  will-change: transform, visibility;
	  animation-name: slideInOvershoot;
	  animation-duration: 0.8s;
	  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	  animation-fill-mode: forwards;
	}*/

	/* Staggered animation delays for first-level menu items */
/*	.gb-navigation ul.gb-menu > li.menu-item-type-post_type:nth-child(1) {
	  animation-delay: 0.1s;
	}
	.gb-navigation ul.gb-menu > li.menu-item-type-post_type:nth-child(2) {
	  animation-delay: 0.2s;
	}
	.gb-navigation ul.gb-menu > li.menu-item-type-post_type:nth-child(3) {
	  animation-delay: 0.3s;
	}*/
	/* Add more nth-child as needed */

	/* Activate animation on body class */
/*	body.mobile-menu-open .gb-navigation ul.gb-menu > li.menu-item-type-post_type {
	  visibility: visible;
	  animation-play-state: running;
	}*/

	/* Keyframes remain the same */
/*	@keyframes slideInOvershoot {
	  0% {
		transform: translateX(-100vw);
		visibility: hidden;
	  }
	  60% {
		transform: translateX(20px); /* overshoot */
/*		visibility: visible;
	  }
	  80% {
		transform: translateX(-5px); /* recoil */
/*	  }
	  100% {
		transform: translateX(0);
	  }
	}*/




/* MOBILE THEME SWITCH - STYLE ADJUSTMENTS - BUTTON SIZES */
.mobile-theme-switch fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 5px;
	margin: 0 12px;
}
	/* Optional: for precise breakpoints */
	@media (max-width: 700px) {
	  .mobile-theme-switch fieldset {
		grid-template-columns: repeat(2, 1fr);
	  }
	}
	@media (max-width: 400px) {
	  .mobile-theme-switch fieldset {
		grid-template-columns: 1fr;
	  }
	}
.mobile-theme-switch fieldset .mobile-theme-switch-label {
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* MOBILE THEME-SWITCH - STYLE THE NAVIGATION BUTTONS HERE */
.mobile-nav-theme-switcher-button {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin-bottom: 34px;
}
.mobile-theme-switch-label {
	padding: 8px 12px;
	display: flex;
	padding: 10px 18px;
  border-radius: var(--border-radius-m);
  text-align: left;
  justify-content: start;
  display: flex;
  background-color: var(--neutral-850);
  color: var(--neutral-100);
  /*margin: 1px 12px;*/
}
html.develop .mobile-theme-switch-label:hover, /* Needed for this to work with the devolop theme */
.mobile-theme-switch-label:hover {
  background: hsl(from white h s calc(l - 30) / 80%);
  color: black;
}
	/* highlight the selected theme in mobile menu */
	svg.mobile-theme-switch-label-svg-system { /* standard turn on the system selection (this is the state when no other theme is selected) */
		color: rgb(255, 240, 0); /* Standard Yellow color when hovering the icon */
	}
	html.light svg.mobile-theme-switch-label-svg-light, /* turn on the theme that is currently active (based on the html class added by JS). This works for all except system, for which the lines above are needed */
	html.dim svg.mobile-theme-switch-label-svg-dim,
	html.dark svg.mobile-theme-switch-label-svg-dark,
	html.develop svg.mobile-theme-switch-label-svg-develop {
		color: rgb(255, 240, 0); /* Standard Yellow color when hovering the icon */
	}
	html.light svg.mobile-theme-switch-label-svg-system,  /* Turn off the system selection when there is a currently active theme */
	html.dim svg.mobile-theme-switch-label-svg-system, 
	html.dark svg.mobile-theme-switch-label-svg-system, 
	html.develop svg.mobile-theme-switch-label-svg-system {
		color: var(--neutral-100); /* Normal mobile menu text color */
	}