/*
 * Deliberately minimal: this is meant to sit inside a theme's own nav
 * menu, so every style here inherits font-family/size/color/line-height
 * from whatever containing element it's placed in rather than declaring
 * its own — only layout (spacing, icon sizing, the dropdown panel itself)
 * is set explicitly. That way it matches the surrounding menu automatically,
 * in any theme.
 *
 * If the shortcode isn't a true DOM child of your theme's actual nav menu
 * (e.g. it's in a separate page-builder widget next to the menu, not
 * inside it), inheritance alone may not reach far enough to match. Under
 * Translations -> Languages you can set explicit font size / color / weight
 * overrides — those come through as the --emt-font-size / --emt-color /
 * --emt-font-weight custom properties below and take priority when set;
 * everything still falls back to inherit otherwise.
 *
 * Hover specifically can never be "inherited" (it's a state, not a
 * property), so by default it's a theme-agnostic opacity dim rather than a
 * guessed color. Set a Hover Color under Translations -> Languages to match
 * your theme's exact hover color instead — any valid CSS color works,
 * including a CSS variable your theme/page-builder already exposes (e.g.
 * Elementor sites commonly use var(--e-global-color-secondary) for their
 * nav's accent/hover color — paste that in directly). Setting it also
 * switches hover to full opacity instead of the dim, via the paired
 * --emt-hover-opacity variable.
 *
 * A thin separator is shown before the whole component by default, to set
 * it apart from adjacent nav items — set a Separator Color under
 * Translations -> Languages to match your theme, or set it to
 * "transparent" to remove it entirely. It's rendered on the OUTER wrapper
 * (.emt-switcher-outer), not on the switcher's own top-level element,
 * because a native <select> can't render its own ::before content in any
 * browser — this keeps the separator working identically across every
 * style, select_text included.
 */

.emt-switcher-outer {
	display: inline-flex;
	align-items: center;
	font-size: var(--emt-font-size, inherit);
	color: var(--emt-color, inherit);
	font-weight: var(--emt-font-weight, inherit);
}
.emt-switcher-outer::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 1.1em;
	margin-right: 12px;
	background: var(--emt-separator-color, rgba(0, 0, 0, 0.18));
	flex-shrink: 0;
}

.emt-language-switcher,
.emt-language-switcher * {
	box-sizing: border-box;
}

.emt-flag-icon {
	display: inline-block;
	width: 16px;
	height: 12px;
	vertical-align: middle;
	object-fit: cover;
	border-radius: 2px;
}

/* ── Native dropdown (select_text only — flags can't live inside a real <select>) ── */
select.emt-language-switcher {
	font-size: var(--emt-font-size, inherit);
	font-family: inherit;
	font-weight: var(--emt-font-weight, inherit);
	color: var(--emt-color, inherit);
	background: transparent;
	border: none;
	cursor: pointer;
	/* Tightened from the browser's usual reserved gutter so the native
	   arrow sits closer to the text — how close is ultimately up to the
	   browser/OS (a native <select>'s arrow isn't fully CSS-controllable),
	   this is the only lever CSS has. */
	padding: 0 14px 0 0;
	margin: 0;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
}
select.emt-language-switcher:hover,
select.emt-language-switcher:focus {
	color: var(--emt-hover-color, inherit);
	opacity: var(--emt-hover-opacity, 0.7);
}
/* :focus-visible shows this only for keyboard navigation, not a mouse
   click — deliberately replacing the browser's own default focus outline
   (which some browsers render as a large, oddly-colored/sized box that
   doesn't match the surrounding design) with something intentional and
   subtle, rather than either leaving the mismatched default in place or
   removing focus indication outright (which would harm keyboard users). */
select.emt-language-switcher:focus-visible {
	outline: 2px solid var(--emt-hover-color, currentColor);
	outline-offset: 2px;
}

/* ── Inline list styles (list_flag / list_text) ── */
ul.emt-style-list {
	display: flex;
	align-items: center;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.emt-style-list li {
	margin: 0;
}
ul.emt-style-list a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--emt-font-size, inherit);
	font-family: inherit;
	font-weight: var(--emt-font-weight, inherit);
	color: var(--emt-color, inherit);
	text-decoration: none;
}
ul.emt-style-list a:hover,
ul.emt-style-list a:focus {
	color: var(--emt-hover-color, inherit);
	opacity: var(--emt-hover-opacity, 0.7);
	text-decoration: underline;
}
ul.emt-style-list li.emt-current a {
	font-weight: 700;
}

/* ── Custom dropdowns (select_flag / select_flag_only / globe_menu) ── */
.emt-dropdown-toggle {
	position: relative;
	display: inline-block;
	font-size: var(--emt-font-size, inherit);
	font-family: inherit;
	font-weight: var(--emt-font-weight, inherit);
	color: var(--emt-color, inherit);
}
.emt-toggle-btn {
	display: inline-flex;
	align-items: center;
	font: inherit;
	/* Many themes apply broad generic styling directly to the <button>
	   element (or classes like .btn, .button.button-primary, etc.) as a
	   catch-all "make every button look like a themed button" reset —
	   independent of whether that button has anything to do with the
	   theme's own buttons. Since we can't predict or control that theme's
	   specificity, !important is used deliberately here to guarantee this
	   control stays a plain, unstyled text control rather than picking up
	   a filled/bordered button look it was never meant to have. */
	color: inherit !important;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
}
.emt-toggle-btn:hover,
.emt-toggle-btn:focus {
	color: var(--emt-hover-color, inherit) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	opacity: var(--emt-hover-opacity, 0.7);
}
/* Deliberate, accessible replacement for the browser's own default focus
   box (see the note on the native <select> rule above — same reasoning). */
.emt-toggle-btn:focus-visible {
	outline: 2px solid var(--emt-hover-color, currentColor) !important;
	outline-offset: 2px;
}
/* Explicit margins rather than a uniform flex gap, so the flag↔label gap
   and the label↔arrow gap can differ — specifically so the dropdown arrow
   sits noticeably closer than the flag/label spacing, keeping the whole
   control visually compact rather than evenly (and loosely) spread out. */
.emt-toggle-btn .emt-flag-icon {
	margin-right: 6px;
}
.emt-toggle-btn .emt-current-label {
	margin-right: 3px;
}
.emt-globe-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	margin-right: 6px;
}
.emt-chevron-icon {
	width: 0.7em;
	height: 0.7em;
	flex-shrink: 0;
	opacity: 0.7;
}

.emt-toggle-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 8px 0 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	color: #1b3559;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	min-width: 160px;
	z-index: 1000;
	font-size: 14px;
	font-weight: 400;
}
.emt-toggle-menu[hidden] {
	display: none;
}
.emt-toggle-menu li {
	margin: 0;
}
.emt-toggle-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.emt-toggle-menu a:hover,
.emt-toggle-menu a:focus {
	background: rgba(0, 0, 0, 0.05);
	color: var(--emt-hover-color, inherit);
}
.emt-toggle-menu li.emt-current a {
	font-weight: 700;
}