/**
 * **********************************************************************
 * Language Toggle
 *
 * Dropdown appended to the primary nav (desktop header + mobile drawer)
 * on all six home-page variants (English/Mandarin/Hebrew × root/hub):
 * the trigger shows the current language as a flag emoji, the panel lists
 * the other two (flag + name). Styling mirrors the account-menu dropdown
 * in style.css (.mah-account-item / .mah-account-sub).
 * See inc/language-toggle.php.
 *
 * @package  KadenceChild
 * @version  2.2.0
 * @updated  2026-09-17
 * **********************************************************************
 */

/* ── Trigger ──────────────────────────────────────────────────────────────── */

/* Higher specificity needed to beat .header-navigation li.menu-item > a { display:block },
   same reasoning as .header-navigation li.mah-account-item > a.mah-account-link. */
.header-navigation li.mah-lang-toggle-item > a.mah-lang-toggle-link,
.mobile-navigation li.mah-lang-toggle-item > a.mah-lang-toggle-link {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	text-decoration: none;
	color: inherit;
}

.mah-lang-toggle-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	line-height: 1;
	width: 1.6em;
	height: 1.6em;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */

.mah-lang-toggle-item {
	position: relative;
}

.mah-lang-toggle-sub {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	min-width: 120px;
	background: var(--global-palette3);
	box-shadow: 0 2px 13px rgba(0, 0, 0, .1);
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 1000;
}

.mah-lang-toggle-item.mah-open .mah-lang-toggle-sub {
	display: block;
}

/* Same specificity fight as .mobile-navigation .mah-account-item.mah-open ul.mah-account-sub */
.mobile-navigation .mah-lang-toggle-item.mah-open ul.mah-lang-toggle-sub {
	display: block;
}

/* Expand in normal flow inside the mobile drawer's scrollable, height-constrained
   nav list, same reasoning as .mobile-navigation .mah-account-sub. */
.mobile-navigation .mah-lang-toggle-sub {
	position: static;
	box-shadow: none;
	background: transparent;
	min-width: 0;
}

.mobile-navigation .mah-lang-toggle-sub li {
	border-bottom-color: rgba(0, 0, 0, .08);
}

.mah-lang-toggle-sub li {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mah-lang-toggle-sub li a {
	display: block;
	padding: 1em;
	color: var(--global-palette8);
	font-size: var(--mah-font-2xs);
	text-decoration: none;
	white-space: nowrap;
	transition: all .2s ease-in-out;
}

.mah-lang-toggle-sub li a:hover {
	color: var(--global-palette9);
	background: var(--global-palette4);
}