/* Globe menu (English / 中文), CN English mode only. See globe-menu.php.
 *
 * WHY THIS FILE AND NOT THE ACCOUNT STYLESHEETS. The look is the Account Design System
 * (DS v2): its dropdown panel (white card, 1px #e0e0e0 border, 10px radius, soft
 * two-layer shadow, 6px inner padding), its option rows with a check on the selected
 * one, its fade-and-rise on open, its tokens. But neither account file can be loaded
 * on a marketing page as-is:
 *   - enttec-account-ui.css declares its tokens on :root, hides `.enttec-mm-topbar`
 *     with !important, and styles body.woocommerce-account and the footer copyright
 *     blocks, all unscoped. Loading it sitewide on CN restyles things outside this menu.
 *   - enttec-account-ds2.css is scoped to `#enttec-account.acct-ds2`. Using that id
 *     here would duplicate it on the dealer page (enttec-dealers-ui/new-dealer.php
 *     renders #enttec-account on a page that also has this header).
 * So the needed pieces are restated here under `.enttec-globe`, reading the same
 * --acct-* token names with the account values as fallbacks. Where the account CSS is
 * also loaded, its tokens win, so the two stay one system.
 *
 * Two deliberate departures from the account dropdown, both for contrast: hover and
 * selected keep charcoal text (the DS turns them ENTTEC blue, which is 2.8:1 on white,
 * and DESIGN.md section 2 says blue on white is an accent, not text), and the
 * selected row is marked by weight plus the blue check instead of blue text.
 */

.enttec-globe {
	position: relative;
	display: flex;
	align-items: center;
}

/* ---- Trigger: the globe plus the current language code ---------------------- */

.enttec-globe .enttec-globe__trigger {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px 0 0;
	border: 0;
	border-radius: var(--acct-radius, 8px);
	background: transparent;
	/* Same variable the header text uses, so it flips on white-banner pages. */
	color: var(--navbar-header-color, #fff);
	font: 600 14px/1 var(--acct-font-body, "Source Sans 3", sans-serif);
	cursor: pointer;
	transition: background-color var(--acct-dur, 170ms) var(--acct-ease, cubic-bezier(.4, 0, .2, 1));
}
/* The theme gives every header icon a 12px margin (#navbar .header-icons svg), which
   with the 20px icon is what makes the 44px target. Only the gap to the code shrinks. */
#navbar .header-icons .enttec-globe__trigger .enttec-globe__icon {
	margin-right: 4px;
}
/* Tablet: the English nav already overflows the header between about 800 and 900px
   (prod US does it too, without this menu), so the code label must not add more than
   it has to. Trim the icon's outer margin and the end padding; the 44px height stays. */
@media screen and (max-width: 991px) {
	#navbar .header-icons .enttec-globe__trigger {
		padding-right: 6px;
	}
	#navbar .header-icons .enttec-globe__trigger .enttec-globe__icon {
		margin-left: 6px;
		margin-right: 3px;
	}
}
/* The scrolled (fixed) header is always dark, whatever the page set. */
#navbar.layout-fixed .enttec-globe .enttec-globe__trigger {
	color: #fff;
}
/* Same hover as the old globe and the header's other icons. */
.enttec-globe .enttec-globe__trigger:hover,
.enttec-globe.is-open .enttec-globe__trigger {
	background-color: hsla(0, 0%, 100%, .2);
}
/* Solid blue rather than --acct-ring: the trigger sits on the dark header, where the
   account ring's 35% blue barely shows. Outline, so the theme's button:focus reset
   (outline: none) is overridden only for keyboard focus. */
.enttec-globe .enttec-globe__trigger:focus-visible {
	outline: 3px solid var(--acct-blue, #0EA5DF);
	outline-offset: 2px;
}

/* ---- Panel ------------------------------------------------------------------- */

.enttec-globe .enttec-globe__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	/* Sized to the two short options: 44px rows, 16px side padding, 12px gap, check. */
	width: max-content;
	min-width: 150px;
	max-width: calc(100vw - 32px);
	padding: 6px 0;
	box-sizing: border-box;
	background: var(--acct-surface, #fff);
	/* #e0e0e0 and #f0f8fb below are literals in the account DS itself (its dropdown
	   panel and row hover), not new colors. guard-ok-hex */
	border: 1px solid var(--acct-table-border, #e0e0e0);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);
	color: var(--acct-text-2, #2b2b2b);
	font-family: var(--acct-font-body, "Source Sans 3", sans-serif);
	text-align: left;
	/* Closed = invisible AND unfocusable. visibility flips at the END of the close
	   transition (the delay) so the fade still plays, and at the START of opening. */
	opacity: 0;
	transform: translateY(-6px);
	visibility: hidden;
	transition:
		opacity var(--acct-dur, 170ms) var(--acct-ease, cubic-bezier(.4, 0, .2, 1)),
		transform var(--acct-dur, 170ms) var(--acct-ease, cubic-bezier(.4, 0, .2, 1)),
		visibility 0s linear var(--acct-dur, 170ms);
}
.enttec-globe.is-open .enttec-globe__panel {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

/* ---- Rows: the two language buttons -------------------------------------------
   The :is(#navbar, #enttec-mm-mobile) prefix is for specificity, not scoping: the
   theme styles every link in the header (#navbar a: white, uppercase), and an id
   is the only thing that outranks it without !important. */

:is(#navbar, #enttec-mm-mobile, #enttec-mm-topbar) .enttec-globe .enttec-globe__option {
	/* Direction and justification are restated because the phone bar's own link rule
	   (.mmm-actions a: a centered column) would otherwise reach these rows. */
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--acct-text-2, #2b2b2b);
	font: 400 15px/1.3 var(--acct-font-body, "Source Sans 3", sans-serif);
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .12s ease;
}
:is(#navbar, #enttec-mm-mobile, #enttec-mm-topbar) .enttec-globe .enttec-globe__option:hover {
	background-color: #f0f8fb;
	color: var(--acct-text-2, #2b2b2b);
	text-decoration: none;
}
/* Inset ring: rows run edge to edge, so an outer ring would be cut by the card edge. */
:is(#navbar, #enttec-mm-mobile, #enttec-mm-topbar) .enttec-globe .enttec-globe__option:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px rgba(14, 165, 223, .35);
	background-color: #f0f8fb;
}

/* Selected: weight plus the account DS check, never color alone. */
:is(#navbar, #enttec-mm-mobile, #enttec-mm-topbar) .enttec-globe .enttec-globe__option[aria-pressed="true"] {
	font-weight: 600;
}
:is(#navbar, #enttec-mm-mobile, #enttec-mm-topbar) .enttec-globe .enttec-globe__option[aria-pressed="true"]::after {
	content: "\2713";
	margin-left: auto;
	color: var(--acct-blue, #0EA5DF);
	font-weight: 600;
}

/* ---- Phone: inside the hamburger menu's bottom action bar ----------------------
   The bar (#enttec-mm-mobile .mmm-actions, enttec-megamenu-preview.php) is a
   three-column grid of icon-over-label links. The trigger matches those links; the
   panel opens upward as a sheet across the bar, since there is no room below it. */

#enttec-mm-mobile .mmm-actions:has(.enttec-globe) {
	position: relative;
}
#enttec-mm-mobile .mmm-actions .enttec-globe {
	position: static;
	display: block;
}
#enttec-mm-mobile .mmm-actions .enttec-globe .enttec-globe__trigger {
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	min-height: 60px;
	padding: 10px 8px;
	border-radius: 0;
	color: rgba(0, 0, 0, .7);
	/* 12px, not the bar's 11px: DESIGN.md's floor. */
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08rem;
	text-transform: uppercase;
}
#enttec-mm-mobile .mmm-actions .enttec-globe .enttec-globe__trigger:hover,
#enttec-mm-mobile .mmm-actions .enttec-globe.is-open .enttec-globe__trigger {
	background-color: rgba(14, 165, 223, .06);
}
#enttec-mm-mobile .mmm-actions .enttec-globe .enttec-globe__trigger:focus-visible {
	outline-offset: -3px;
}
#enttec-mm-mobile .mmm-actions .enttec-globe .enttec-globe__panel {
	top: auto;
	right: 12px;
	bottom: calc(100% + 8px);
	left: 12px;
	width: auto;
	max-width: none;
	/* Short phones (landscape): scroll inside the sheet rather than run off the top.
	   The panel carries data-lenis-prevent so that scroll is not swallowed. */
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(6px);
	/* The bar's labels are uppercase; the panel's content keeps its own case. */
	letter-spacing: normal;
	text-transform: none;
}
#enttec-mm-mobile .mmm-actions .enttec-globe.is-open .enttec-globe__panel {
	transform: none;
}

/* ---- Phone top bar: always-visible globe before the cart -------------------------
   Shown only below 768px (the bar itself is display:none above). The bar is a fixed
   box, so the panel anchors to it and opens under the bar, inside the viewport. */

#enttec-mm-topbar .enttec-globe {
	position: static;
}
#enttec-mm-topbar .enttec-globe .enttec-globe__trigger {
	gap: 4px;
	min-width: 44px;
	justify-content: center;
	padding: 0 6px;
	color: #fff;
}
#enttec-mm-topbar .enttec-globe .enttec-globe__trigger:active {
	background-color: rgba(255, 255, 255, .08);
}
#enttec-mm-topbar .enttec-globe .enttec-globe__panel {
	top: calc(100% + 4px);
	right: 8px;
	left: auto;
	max-width: calc(100vw - 16px);
}
#enttec-mm-topbar:has(.enttec-globe) .enttec-mm-tb-brand {
	margin-right: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.enttec-globe .enttec-globe__trigger,
	.enttec-globe .enttec-globe__panel,
	.enttec-globe .enttec-globe__option {
		transition: none;
	}
	.enttec-globe .enttec-globe__panel,
	#enttec-mm-mobile .mmm-actions .enttec-globe .enttec-globe__panel {
		transform: none;
	}
}