/*
 * Language switcher (desktop header): two separate buttons, EN / VI.
 * Selectors use `.nav > li.tipa-lang-switch` to override Flatsome's menu item styles.
 * The <li> keeps Flatsome's nav spacing, so it lines up with the menu items.
 */

.nav > li.tipa-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.nav > li.tipa-lang-switch > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--tipa-green-100);
	border-radius: 6px;
	background: transparent;
	color: var(--tipa-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .03em;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

/* Remove the menu's hover underline */
.nav > li.tipa-lang-switch > a::before,
.nav > li.tipa-lang-switch > a::after {
	display: none;
}

.nav > li.tipa-lang-switch > a:hover {
	border-color: var(--fs-color-primary);
	color: var(--fs-color-primary);
}

.nav > li.tipa-lang-switch > a.is-active {
	background: var(--fs-color-primary);
	border-color: var(--fs-color-primary);
	color: #fff;
	pointer-events: none;
}

.nav > li.tipa-lang-switch > a:focus-visible {
	outline: 2px solid var(--fs-color-primary);
	outline-offset: 2px;
}

/*
 * Main navigation: brand colours and a thinner, rounded underline
 * (Flatsome "line-bottom" style). Sticky header gets a soft shadow.
 */
.header-main .header-nav-main > li > a {
	color: var(--tipa-ink);
	letter-spacing: .04em;
	transition: color .2s ease;
}

.header-main .header-nav-main > li > a:hover,
.header-main .header-nav-main > li.active > a,
.header-main .header-nav-main > li.current-menu-item > a {
	color: var(--tipa-green);
}

.header-main .nav-line-bottom > li > a::before {
	width: 50%; /* centred by Flatsome (left: 50%; translateX(-50%)) */
	height: 1px;
	border-radius: 1px;
	background-color: var(--tipa-green);
}

.header-wrapper.stuck {
	box-shadow: 0 6px 24px rgba(15, 43, 12, .08);
}

.header-wrapper.stuck .header-main {
	border-bottom-color: transparent;
}

/*
 * Mobile menu (Flatsome off-canvas sidebar): brand colours, clear levels.
 */
.mobile-sidebar .nav-sidebar > li {
	border-top: 1px solid var(--tipa-green-100);
}

.mobile-sidebar .nav-sidebar > li:first-child {
	border-top: 0;
}

.mobile-sidebar .nav-sidebar > li > a {
	padding: 16px 20px;
	color: var(--tipa-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}

.mobile-sidebar .nav-sidebar li.active > a,
.mobile-sidebar .nav-sidebar li.current-menu-item > a,
.mobile-sidebar .nav-sidebar li a:hover {
	color: var(--tipa-green);
}

.mobile-sidebar .nav-sidebar .children,
.mobile-sidebar .nav-sidebar .sub-menu {
	padding-bottom: 8px;
	background: var(--tipa-green-50);
}

.mobile-sidebar .nav-sidebar .children a,
.mobile-sidebar .nav-sidebar .sub-menu a {
	padding: 10px 20px 10px 32px;
	color: var(--tipa-text);
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
}

.mobile-sidebar .nav-sidebar .children .children a,
.mobile-sidebar .nav-sidebar .sub-menu .sub-menu a {
	padding-left: 48px;
	font-size: 13px;
}

.mobile-sidebar .nav-sidebar .toggle {
	color: var(--tipa-green);
	opacity: 1;
}