/* START LAYOUT STYLES HERE */
.site-header {
	position: relative;
	z-index: 500;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
}
.header-container {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	box-sizing: border-box;
	border-radius: 6px;
	border: none;
}
.header-item {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 1;
	margin: 0 auto;
	width: 100%;
	max-width: 1120px;
}
a.site-title {
	color: #000;
	font-size: 1.5rem !important;
}
a.site-title:hover {
	color: var(--color-link-hover);
}
/* ===== Root Level (Light Theme) ===== */
ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.nav-list {
	width: 100%;
	max-width: 1120px;
	display: flex;
	flex-direction: row;
	border: none;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	background: var(--nav-item-bg);
	box-shadow: 0 2px 5px var(--color-shadow);
	border-radius: 5px;
}
.nav-list > li.has-submenu {
	position: relative;
}
/* ===== Global Theme Classes ===== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	display: none;
}
#menu-toggle {
	background: none;
	border: none;
	display: none;
	width: 30px;
	height: 24px;
	position: relative;
	color: #000;
}
.hamburger,
.hamburger::before,
.hamburger::after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: var(--color-text);
	border-radius: 2px;
	position: absolute;
	transition: all 0.3s ease;
}
.hamburger {
	top: 50%;
	transform: translateY(-50%);
}
.hamburger::before {
	top: -10px;
}
.hamburger::after {
	top: 10px;
}
#menu-toggle.open .hamburger {
	background: transparent;
}
#menu-toggle.open .hamburger::before {
	transform: rotate(45deg);
	top: 0;
}
#menu-toggle.open .hamburger::after {
	transform: rotate(-45deg);
	top: 0;
}
.toggle-icon {
	margin-top: 4px;
	margin-left: 1px;
	float: right;
}
.has-submenu button[aria-expanded="true"] + .submenu {
	display: block;
}
/* Mobile CSS */
@media screen and (max-width: 1180px) {
	.header-container {
		flex-direction: column;
		align-items: flex-start;
	}
	#menu-toggle {
		display: block;
		margin: 1rem 0;
	}
	.nav-list {
		position: absolute;
		top: 100%;
		left: 0;
		width: 360px;
		min-width: 360px;
		flex-direction: column;
		display: none;
	}
	#menu-toggle[aria-expanded="true"] + .nav-list {
		display: flex;
	}
	.submenu {
		position: static;
		box-shadow: none;
	}
}
/* Desktop CSS */
@media screen and (min-width: 1176px) {
	.header-container {
		flex-direction: row;
	}
}
@media screen and (max-width: 1175px) {
	/* Fix submenu stacking in mobile */
	.submenu-level-1,
	.submenu-level-2 {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		display: none;
		width: 100%;
	}
	.submenu-level-1.open,
	.submenu-level-2.open {
		display: block;
	}
	.nav-list li {
		width: 100%;
	}
	.nav-list li a,
	.nav-list li button {
		width: 100%;
		display: block;
	}
}
/* START THEME STYLES HERE */
body.light-theme ul.submenu-level-1,
body.dark-theme ul.submenu-level-1 {
	margin: 0;
	padding: 0;
	border: none;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 280px;
	max-width: 280px;
	background: #c0d8db;
	border-radius: 5px;
}
#submenu-6 {
	margin: 0;
	padding: 0;
	border: none;
	display: none;
	position: absolute;
	top: 100%;
	left: -170px !important;
	z-index: 1000;
	min-width: 280px;
	max-width: 280px;
	background: #c0d8db;
	border-radius: 5px;
}
body.light-theme .nav-list.root-level-1 > li,
body.dark-theme .nav-list.root-level-1 > li {
	padding: 5px 0px 5px 5px;
}
body.light-theme .nav-list.root-level-1 > li > a,
body.dark-theme .nav-list.root-level-1 > li > a,
body.light-theme .nav-list.root-level-1 > li > button,
body.dark-theme .nav-list.root-level-1 > li > button {
	color: var(--menu-text-color);
	background: transparent;
	display: block;
	border: none;
	font-size: 20px !important;
	text-decoration: none;
	text-align: left;
	padding: 5px;
}
body.light-theme .nav-list.root-level-1 > li > a:hover,
body.dark-theme .nav-list.root-level-1 > li > a:hover,
body.light-theme .nav-list.root-level-1 > li > button:hover,
body.dark-theme .nav-list.root-level-1 > li > button:hover,
body.light-theme .nav-list.root-level-1 > li > button:focus,
body.dark-theme .nav-list.root-level-1 > li > button:focus {
	color: var(--menu-text-color-hover);
	background-color: var(--menu-background-hover);
	background: linear-gradient(90deg, var(--color-link), var(--color-link-hover));
	padding: 5px;
	border-radius: 5px;
}
/* Join Link */
#join-today {
	display: block;
	border: none;
	font-size: 20px !important;
	text-decoration: none;
	text-align: left;
	padding: 0px;
	color: var(--menu-text-color-hover);
	background-color: var(--menu-background-hover);
	background: linear-gradient(90deg, var(--color-link), var(--color-link-hover));
	border-radius: 5px;
}
#join-today:hover {
	display: block;
	border: none;
	font-size: 20px !important;
	text-decoration: none;
	text-align: left;
	color: var(--menu-text-color-hover);
	background-color: var(--menu-text-color-hover);
	background: linear-gradient(90deg, var(--color-link-hover), var(--color-link));
	padding: 5px;
	border-radius: 5px;
}
/* End Join Link */
#nav-list > li:first-child > a {
	margin-left: 20px;
}
#nav-list > li:last-child > a {
	margin-right: 20px;
}
/* ===== Second Level : 1st subnav ===== */
body.light-theme ul.submenu-level-1,
body.dark-theme ul.submenu-level-1 {
	background: #c0d8db;
	margin: 0px 0px 0px 0px;
	/* min-width: 360px; */
	padding: 5px;
}
body.light-theme ul.submenu-level-1 li,
body.dark-theme ul.submenu-level-1 li {
	padding: 5px 0px 5px 10px;
	max-width: calc(360px - 34px);
}
body.light-theme ul.submenu-level-1 li a,
body.dark-theme ul.submenu-level-1 li a,
body.light-theme ul.submenu-level-1 li button,
body.dark-theme ul.submenu-level-1 li button {
	padding: 2px 0px 2px 2px;
	max-width: calc(360px - 14px);
	color: var(--menu-text-color);
	background: transparent;
	display: block;
	width: 100%;
	border: none;
	font-size: 20px !important;
	text-decoration: none;
	text-align: left;
	padding: 5px;
}
body.light-theme .submenu-level-1 a:hover,
body.light-theme .submenu-level-1 button:hover,
body.light-theme .submenu-level-1 a:focus,
body.light-theme .submenu-level-1 button:focus,
body.dark-theme .submenu-level-1 a:hover,
body.dark-theme .submenu-level-1 button:hover,
body.dark-theme .submenu-level-1 a:focus,
body.dark-theme .submenu-level-1 button:focus,
body.dark-theme .submenu-level-1 {
	color: var(--menu-text-color-hover);
	background-color: var(--menu-background-hover);
	background: linear-gradient(90deg, var(--color-link), var(--color-link-hover));
	padding: 5px;
	border-radius: 5px;
}
/* ===== Third Level : 2nd subnav ===== */
body.light-theme ul.submenu-level-2,
body.dark-theme ul.submenu-level-2 {
	background: #e1e9eb;
	padding: 5px 0px 10px 10px;
	max-width: calc(360px - 20px);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	display: none;
}
body.light-theme ul.submenu-level-2 li,
body.dark-theme ul.submenu-level-2 li {
	padding: 15px 0px 0px 10px;
}
body.light-theme .submenu-level-2 a,
body.dark-theme .submenu-level-2 a,
body.light-theme .submenu-level-2 button,
body.dark-theme .submenu-level-2 button {
	padding: 0px 5px 0px 5px;
	max-width: calc(360px - 10px);
	color: var(--menu-text-color);
	background: transparent;
	display: block;
	width: 100%;
	border: none;
	font-size: 20px !important;
	text-decoration: none;
	text-align: left;
}
body.light-theme .submenu-level-2 a:hover,
body.light-theme .submenu-level-2 button:hover,
body.light-theme .submenu-level-2 a:focus,
body.light-theme .submenu-level-2 button:focus,
body.dark-theme .submenu-level-2 a:hover,
body.dark-theme .submenu-level-2 button:hover,
body.dark-theme .submenu-level-2 a:focus,
body.dark-theme .submenu-level-2 button:focus {
	color: var(--menu-text-color-hover);
	background-color: var(--menu-background-hover);
	background: linear-gradient(90deg, var(--color-link), var(--color-link-hover));
}
.flex-container-content-lang-outter > .flex-items-content-lang-outter:last-child {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
}
/* Mobile CSS */
@media screen and (max-width: 1175px) {
	body.light-theme ul.submenu-level-1,
	body.dark-theme ul.submenu-level-1 {
		background: #c0d8db;
		margin: 0px 0px 0px -10px;
		min-width: 280px;
	}
	body.light-theme .nav-list.root-level-1 > li,
	body.dark-theme .nav-list.root-level-1 > li {
		padding: 5px 0px 5px 5px;
		width: 360px;
	}
	#submenu-6 {
		margin: 0;
		padding: 0;
		border: none;
		display: none;
		position: absolute;
		top: 100%;
		left: 0 !important;
		z-index: 1000;
		min-width: 280px;
		max-width: 280px;
		background: #c0d8db;
		border-radius: 5px;
	}
}
/* Desktop CSS */
@media screen and (min-width: 1176px) {
	/* =========================================================
   v6 update: changing orde of elements when in mobile
   ========================================================= */
	.nav-list.root-level-1 > li:nth-child(1) {
		order: 1;
	}
	.nav-list.root-level-1 > li:nth-child(2) {
		order: 2;
	}
	.nav-list.root-level-1 > li:nth-child(3) {
		order: 3;
	}
	.nav-list.root-level-1 > li:nth-child(4) {
		order: 4;
	}
	.nav-list.root-level-1 > li:nth-child(5) {
		order: 5;
	}
	.nav-list.root-level-1 > li:nth-child(6) {
		order: 6;
	}
}
@media screen and (max-width: 1175px) {
	body.light-theme ul.submenu-level-1,
	body.dark-theme ul.submenu-level-1 {
		background: #c0d8db;
		margin: 0px 0px 0px 15px;
		max-width: 280px;
	}
	body.light-theme ul.submenu-level-2,
	body.dark-theme ul.submenu-level-2 {
		background: #e1e9eb;
		max-width: calc(360px - 45px);
	}
	/* =========================================================
   v6 update: changing orde of elements when in mobile
   ========================================================= */
	.nav-list.root-level-1 > li:nth-child(1) {
		order: 2;
	}
	.nav-list.root-level-1 > li:nth-child(2) {
		order: 3;
	}
	.nav-list.root-level-1 > li:nth-child(3) {
		order: 4;
	}
	.nav-list.root-level-1 > li:nth-child(4) {
		order: 5;
	}
	.nav-list.root-level-1 > li:nth-child(5) {
		order: 6;
	}
	.nav-list.root-level-1 > li:nth-child(6) {
		order: 1;
	}
}
/* NEW RIGHT ALIGNMENT */
/* 1 */
@media screen and (max-width: 1180px) {
	.nav-list {
		left: auto; /* override */
		right: 0px; /* anchor to right edge */
		margin-top: 15px;
	}
	/* Optional: push the hamburger button itself to the right */
	#menu-toggle {
		margin-left: auto;
		align-self: flex-end;
	}
}
/* 2 */
/* Desktop: keep right-side dropdowns from overflowing off-screen */
@media screen and (min-width: 1176px) {
	/* If your rightmost nav items have submenus, anchor those submenus to the right */
	.nav-list.root-level-1 > li.has-submenu:last-child > .submenu-level-1,
	.nav-list.root-level-1 > li.has-submenu:nth-last-child(2) > .submenu-level-1 {
		/* left: auto; */
		right: 0px;
	}
	/* If you ever enable 3rd-level flyouts (submenu-level-2), open them right-to-left as well */
	.nav-list.root-level-1 > li.has-submenu:last-child .submenu-level-2,
	.nav-list.root-level-1 > li.has-submenu:nth-last-child(2) .submenu-level-2 {
		left: auto;
		right: 100%;
	}
}
/* 3 */
.knowledge-link {
	display: inline-flex;
	align-items: center; /* Aligns icon and text perfectly */
	text-decoration: none;
	color: #007bff; /* Example link color */
}
.icon-smart {
	margin-right: 8px; /* Space between icon and text */
	font-size: 1.2em; /* Makes the icon slightly larger than the text */
	line-height: 1; /* Prevents the icon from adding extra height to the line */
	vertical-align: top;
}
/* Optional: Add a subtle hover effect */
.knowledge-link:hover .icon-smart {
	filter: saturate(1.5); /* Makes the emoji "pop" on hover */
	transform: translateY(-1px);
}
/* =========================================================
   Menu Relocation (mobile in header row, desktop below header)
   Requires: #mobile-menu-anchor and #desktop-menu-anchor in markup
   ========================================================= */
#mobile-menu-anchor {
	width: auto;
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
/* When the menu header is moved into the header row, remove the "stacked" mobile header-container */
@media screen and (max-width: 1180px) {
	#mobile-menu-anchor .site-header {
		max-width: none;
		margin: 0;
	}
	#mobile-menu-anchor .header-container {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		max-width: none;
	}
	/* Keep the hamburger snug to the right */
	#mobile-menu-anchor #menu-toggle {
		margin: 0;
		align-self: center;
	}
	/* Ensure the dropdown anchors to the right edge of the header row */
	#mobile-menu-anchor .nav-list {
		right: 0px;
		left: auto;
		margin-top: 15px;
	}
}
/* -------------------------------------------------
   MENU RELOCATION STYLES (v4)
   - Keeps logo/title + hamburger on the same row (mobile header row)
   - Avoids forcing the mobile anchor to full-width (which pushed it onto a new line)
------------------------------------------------- */
/* When the menu is relocated into #mobile-menu-anchor (<= 1180px),
   keep it right-aligned and sized to its content. */
#mobile-menu-anchor {
	width: auto;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 15px;
}
/* Make the header row behave as a single line until the breakpoint */
@media screen and (max-width: 1180px) {
	/* .flex-container-content-lang-outter {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
    max-width: 1120px;
    height: auto;
    margin-bottom: 15px;
    margin-right: 0px;
} */
	/* .flex-items-content-lang-outter:nth-child(1) {
    display: flex;
    align-self: flex-end;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    order: 1;
}
.flex-items-content-lang-outter:nth-child(2) {
    display: flex;
    align-self: center;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    order: 2;
}
 */
	/* branding takes remaining space */
	.flex-container-content-lang-outter > .flex-items-content-lang-outter:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}
	/* mobile menu anchor stays compact on the right */
	.flex-container-content-lang-outter > .flex-items-content-lang-outter:last-child {
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-end;
		/* align-items: center; */
	}
	/* force the relocated header container to a row (override earlier mobile stack rule) */
	#mobile-menu-anchor .header-container {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 10px;
		padding: 0;
		margin: 0;
		width: auto;
	}
	/* keep the hamburger tight to the right */
	#mobile-menu-anchor #menu-toggle {
		margin: 0;
	}
}
@media screen and (max-width: 600px) {
	.flex-container-content-lang-outter {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: flex-start;
		width: 100%;
		max-width: 1120px;
		height: auto;
		margin-bottom: 15px;
		margin-right: 0px;
	}
	.flex-items-content-lang-outter:nth-child(1) {
		display: flex;
		width: 100%;
		align-self: flex-start;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		order: 2;
	}
	.flex-items-content-lang-outter:nth-child(2) {
		display: flex;
		width: 100%;
		align-self: flex-end;
		margin-top: 20px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		order: 1;
	}
	/* branding takes remaining space */
	/* .flex-container-content-lang-outter > .flex-items-content-lang-outter:first-child{
    flex: 1 1 auto;
    min-width: 0;
  } */
	/* mobile menu anchor stays compact on the right */
	/* .flex-container-content-lang-outter > .flex-items-content-lang-outter:last-child{
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  } */
}
@media screen and (max-width: 600px) {
	.nav-list {
		position: absolute;
		top: 100%;
		left: 0;
		max-width: 360px;
		flex-direction: column;
		display: none;
	}
	.nav-list.root-level-1 > li {
		padding: 5px 0px 5px 5px;
		max-width: 360px;
	}
	/*  */
	body.light-theme ul.submenu-level-1,
	body.dark-theme ul.submenu-level-1 {
		background: #c0d8db;
		margin: 0px 0px 0px -10px;
		max-width: 230px;
	}
	body.light-theme .nav-list.root-level-1 > li,
	body.dark-theme .nav-list.root-level-1 > li {
		padding: 5px 0px 5px 5px;
		max-width: 230px;
	}
	#submenu-6 {
		max-width: 230px;
	}
	.nav-list {
		position: absolute;
		top: 100%;
		left: 0;
		width: 320px;
		max-width: 320px;
		flex-direction: column;
		display: none;
	}
	body.light-theme .nav-list.root-level-1 > li,
	body.dark-theme .nav-list.root-level-1 > li {
		padding: 5px 0px 5px 5px;
		width: 230px;
		overflow: hidden;
	}
	#nav-list {
		position: absolute;
		top: 100%;
		right: 0px;
		width: 230px;
		min-width: 230px;
		max-width: 230px;
		flex-direction: column;
		margin-top: 15px;
	}
	body.light-theme ul.submenu-level-1 li,
	body.dark-theme ul.submenu-level-1 li {
		padding: 5px 0px 5px 10px;
		max-width: calc(230px - 34px);
	}
	body.light-theme ul.submenu-level-1 li a,
	body.dark-theme ul.submenu-level-1 li a,
	body.light-theme ul.submenu-level-1 li button,
	body.dark-theme ul.submenu-level-1 li button {
		padding: 2px 0px 2px 2px;
		max-width: calc(230px - 14px);
		color: var(--menu-text-color);
		background: transparent;
		display: block;
		width: 100%;
		border: none;
		font-size: 20px !important;
		text-decoration: none;
		text-align: left;
		padding: 5px;
	}
	/*  */
}
/* =========================================================
   v5 safety: ensure submenus are hidden by default even if
   theme classes are not yet present (prevents "expanded" desktop)
   ========================================================= */
.submenu {
	display: none;
}