/**
 * Language switcher inside a WordPress nav menu.
 *
 * The switcher is a normal menu item, so it inherits the theme's menu styling
 * by default and disappears into the list. These rules give it just enough
 * identity to read as a control rather than a sixth page link: a globe glyph,
 * a divider separating it from the navigation, and a tidy dropdown panel.
 *
 * Deliberately conservative — colours are inherited (`currentColor`) so the
 * switcher keeps working on light and dark headers without theme-specific
 * overrides, and layout properties are scoped to `.cml-language-switcher` so
 * nothing leaks into the rest of the menu.
 */

.cml-language-switcher {
	position: relative;
	/* Breathing room on both sides of the divider, so the switcher reads as a
	   separate control rather than a sixth page link crowding the last one. */
	margin-left: .75em !important;
	padding-left: 1em !important;
}

/* Divider, so the switcher reads as separate from the page links. */
.cml-language-switcher::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1.1em;
	transform: translateY(-50%);
	background: currentColor;
	opacity: .25;
	pointer-events: none;
}

.cml-language-switcher > a {
	display: inline-flex !important;
	align-items: center;
	gap: .45em;
	white-space: nowrap;
	text-transform: none !important;
}

/* Globe. `mask` lets the icon inherit the menu's text colour, so it works on
   any header background; the background-image line is the fallback. */
.cml-language-switcher > a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	vertical-align: -.15em;
	background-color: currentColor;
	-webkit-mask-image: var(--cml-globe);
	mask-image: var(--cml-globe);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: .85;
}

:root {
	--cml-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Browsers without mask support still get a visible globe. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
	.cml-language-switcher > a::before {
		background-color: transparent;
		background-image: var(--cml-globe);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		opacity: .7;
	}
}

/* Dropdown indicator.
 *
 * Themes put their own indicator on `.menu-item-has-children > a::after` and
 * position it absolutely; Divi additionally renders it from an icon font. When
 * that glyph does not resolve it paints as a small ring floating below the
 * header. Rather than add a second pseudo-element (there is only one `::after`
 * to go around), this takes ownership of the theme's: the icon font is
 * neutralised, absolute positioning is undone, and a caret is drawn from
 * borders so it needs no font at all and inherits the menu's colour.
 */
.cml-language-switcher.cml-language-switcher.cml-style-dropdown > a::after,
.et_pb_menu .nav li.cml-language-switcher.menu-item-has-children > a::after {
	content: "" !important;
	position: static !important;
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 0 0 3px !important;
	padding: 0 !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	/* px, not em: `font-size:0` above (needed to suppress the theme's icon
	   glyph) would collapse any em-based border to nothing. */
	border-left: 5px solid transparent !important;
	border-right: 5px solid transparent !important;
	border-top: 5px solid currentColor !important;
	border-bottom: 0 !important;
	opacity: .55;
	transition: opacity .15s ease;
}

.cml-language-switcher.cml-style-dropdown:hover > a::after,
.cml-language-switcher.cml-style-dropdown:focus-within > a::after {
	opacity: .9;
}

/* Dropdown panel.
 *
 * The theme's own sub-menu styling cannot be relied on: on a site where no
 * other menu item has children, those rules have never been exercised and are
 * often left at defaults meant for a dark panel — white links on a
 * transparent background, i.e. invisible. The panel therefore paints itself.
 * Positioning and show/hide are left entirely to the theme.
 */
/* The doubled class is a specificity device, not a typo. Divi's Theme Builder
   ships `.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a { color:#fff
   !important }` at specificity (0,4,3); a single-class selector loses to it
   even with !important. Repeating the class lifts this rule above it without
   resorting to an id or `html body` prefix. */
.cml-language-switcher.cml-language-switcher .sub-menu.sub-menu {
	min-width: 12em;
	padding: .4em;
	/* `!important` is confined to the two properties the theme gets wrong.
	   Divi's Theme Builder menu CSS wins on specificity and leaves the panel
	   transparent with white links, which renders the switcher invisible. */
	background: #fff !important;
	border: 1px solid rgba(16, 32, 56, .08);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16, 32, 56, .14);
}

.cml-language-switcher.cml-language-switcher .sub-menu.sub-menu .cml-language-item > a {
	display: block;
	padding: .6em .85em;
	border-radius: 7px;
	/* Menu themes commonly uppercase nav links. Language names are proper
	   nouns and read as shouting in caps, so the panel opts out. */
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: .95rem !important;
	line-height: 1.3 !important;
	color: #1f2937 !important;
	font-weight: 500 !important;
	white-space: nowrap;
	text-decoration: none;
	opacity: 1 !important;
	transition: background-color .15s ease, color .15s ease;
}

.cml-language-switcher.cml-language-switcher .sub-menu.sub-menu .cml-language-item > a:hover,
.cml-language-switcher.cml-language-switcher .sub-menu.sub-menu .cml-language-item > a:focus {
	background: #f1f4f9 !important;
	color: #111827 !important;
}

.cml-language-switcher.cml-language-switcher .sub-menu.sub-menu .cml-language-item.cml-current > a {
	font-weight: 700 !important;
	color: #111827 !important;
}

/* The current language is the button label, not a choice. Offering it again in
   the panel is redundant, so the dropdown lists only the languages you can
   switch TO. The inline variant keeps it, where it reads as a selected state. */
.cml-language-switcher.cml-style-dropdown .sub-menu .cml-language-item.cml-current {
	display: none !important;
}

/* Inline variant: pills rather than a list. */
.cml-language-switcher.cml-style-inline .sub-menu,
.cml-language-switcher.cml-style-inline .cml-language-item {
	display: inline-block;
}

.cml-language-switcher.cml-style-inline .cml-language-item > a {
	padding: .2em .5em;
}

@media (max-width: 980px) {
	/* Stacked mobile menus have no room for a vertical rule. */
	.cml-language-switcher::before {
		display: none;
	}
	.cml-language-switcher .sub-menu {
		box-shadow: none;
	}
}

/* ------------------------------------------------------------------ *
 * Theme compatibility: Divi
 *
 * Divi's Theme Builder emits
 *   .et_pb_menu_N_tb_header.et_pb_menu .nav li ul.sub-menu a { color:#fff !important }
 * for every menu module on the page. Those colours are chosen for Divi's own
 * dark dropdown; against the switcher's light panel they render as white on
 * white. Matching Divi's selector shape and appending our own class clears it
 * by one step of specificity, without an id or an `html body` prefix.
 * ------------------------------------------------------------------ */

.et_pb_menu .nav li ul.sub-menu li.cml-language-item > a,
.et_pb_menu .et_mobile_menu li.cml-language-item > a {
	color: #1f2937 !important;
	opacity: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: .95rem !important;
}

.et_pb_menu .nav li ul.sub-menu li.cml-language-item.cml-current,
.et_pb_menu .et_mobile_menu li.cml-language-item.cml-current {
	display: none !important;
}

.et_pb_menu .nav li ul.sub-menu li.cml-language-item > a:hover,
.et_pb_menu .nav li ul.sub-menu li.cml-language-item > a:focus,
.et_pb_menu .et_mobile_menu li.cml-language-item > a:hover {
	color: #111827 !important;
	background: #f1f4f9 !important;
}

.et_pb_menu .nav li ul.sub-menu li.cml-language-item.cml-current > a,
.et_pb_menu .et_mobile_menu li.cml-language-item.cml-current > a {
	color: #111827 !important;
	font-weight: 700 !important;
}

.et_pb_menu .nav li ul.sub-menu {
	background: #fff !important;
}