/**
 * Nect Language Switcher
 *
 * Design tokens (from the Elementor Global Kit):
 *   Navy  #070A19  primary / all text
 *   Green #50FFBA  ACCENT ONLY - never used as text color (fails contrast on white).
 *                  Used exclusively as fill / border / indicator, always with navy text on top.
 *   Text  #343641
 *
 * Shape scale (Shape Consistency Lock):
 *   trigger + rows + buttons: 10px
 *   panel + banner:           14px
 * One accent, one radius family, navy focus rings.
 */

.nect-ls {
	--nl-navy: #070A19;
	--nl-green: #50FFBA;
	--nl-text: #343641;
	--nl-muted: #6b7280;
	--nl-border: rgba(7, 10, 25, 0.12);
	--nl-border-strong: rgba(7, 10, 25, 0.24);
	--nl-hover: rgba(7, 10, 25, 0.05);
	--nl-surface: #ffffff;
	--nl-radius-item: 10px;
	--nl-radius-panel: 14px;
	--nl-shadow: 0 12px 32px rgba(7, 10, 25, 0.14), 0 2px 8px rgba(7, 10, 25, 0.08);

	position: relative;
	display: inline-block;
	font-family: inherit;
	line-height: 1.2;
}

/* --- Trigger --- */
.nect-ls__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	min-height: 44px; /* comfortable touch target */
	box-sizing: border-box;
	border: 1px solid var(--nl-border);
	border-radius: var(--nl-radius-item);
	background: var(--nl-surface);
	color: var(--nl-navy);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
.nect-ls__trigger:hover {
	border-color: var(--nl-border-strong);
	background: var(--nl-hover);
}
.nect-ls__globe {
	color: var(--nl-navy);
	flex: none;
}

/* Optional flags (setting). Served locally; decorative.
   Real border (not inset shadow): inset shadows on <img> render behind the
   bitmap in several browsers, so a white flag on white had no visible edge. */
.nect-ls__flag {
	flex: none;
	width: 20px;
	height: 15px;
	box-sizing: border-box;
	border: 1px solid rgba(7, 10, 25, 0.12); /* delicate hairline; bounds white flag areas (PL, NL, FI) on white */
	border-radius: 3px;
	object-fit: cover;
	display: block;
}
.nect-ls__current {
	white-space: nowrap;
}
.nect-ls__caret {
	color: var(--nl-muted);
	transition: transform 0.2s ease;
}
.nect-ls.is-open .nect-ls__caret {
	transform: rotate(180deg);
}

/* --- Panel --- */
.nect-ls__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	min-width: 240px;
	/* wide enough for flag + longest native name + suggested pill + check, but never past the viewport */
	max-width: min(340px, calc(100vw - 24px));
	padding: 6px;
	border: 1px solid var(--nl-border);
	border-radius: var(--nl-radius-panel);
	background: var(--nl-surface);
	box-shadow: var(--nl-shadow);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.nect-ls__panel[hidden] {
	display: none;
}
.nect-ls.is-open .nect-ls__panel {
	opacity: 1;
	transform: translateY(0);
}
.nect-ls__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* --- Language row --- */
.nect-ls__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	min-height: 38px; /* tighter on desktop; bumped to 44px on touch below */
	box-sizing: border-box;
	border-radius: var(--nl-radius-item);
	color: #565b6b; /* non-current languages sit back a little */
	text-decoration: none;
	font-weight: 450;
	touch-action: manipulation;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.nect-ls__item:hover,
.nect-ls__item:focus-visible {
	background: var(--nl-hover);
	color: var(--nl-navy);
}
.nect-ls__name {
	flex: 1 1 auto;
}
/* Current language reads as active: full navy + weight + check. */
.nect-ls__item.is-current {
	color: var(--nl-navy);
	font-weight: 650;
}

/* Current-language check: navy glyph, shown only on the active row. */
.nect-ls__check {
	flex: none;
	color: var(--nl-navy);
	opacity: 0;
}
.nect-ls__item.is-current .nect-ls__check {
	opacity: 1;
}

/* Suggested pill: accent FILL, navy text (passes AA). Hidden until JS flags a row.
   No row outline - the pill alone signals the suggestion (keeps the row compact). */
.nect-ls__suggested-pill {
	display: none;
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--nl-green);
	color: var(--nl-navy);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.nect-ls__item.is-suggested .nect-ls__suggested-pill {
	display: inline-block;
}
/* Never suggest the row the user is already on. */
.nect-ls__item.is-current .nect-ls__suggested-pill {
	display: none;
}

/* --- Show more --- */
.nect-ls__more-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 4px;
	padding: 7px 12px;
	min-height: 38px; /* tighter on desktop; bumped to 44px on touch below */
	box-sizing: border-box;
	border: 0;
	border-top: 1px solid var(--nl-border);
	border-radius: 0 0 var(--nl-radius-item) var(--nl-radius-item);
	background: transparent;
	color: var(--nl-navy);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.15s ease;
}
.nect-ls__more-toggle:hover {
	background: var(--nl-hover);
}
.nect-ls__more-caret {
	color: var(--nl-muted);
	transition: transform 0.2s ease;
}
.nect-ls__more-toggle[aria-expanded="true"] .nect-ls__more-caret {
	transform: rotate(180deg);
}
.nect-ls__more[hidden] {
	display: none;
}
.nect-ls__more {
	margin-top: 2px;
}

/* --- Focus (navy ring, clearly visible; green would be too light) --- */
.nect-ls__trigger:focus-visible,
.nect-ls__item:focus-visible,
.nect-ls__more-toggle:focus-visible,
.nect-ls-banner__confirm:focus-visible,
.nect-ls-banner__dismiss:focus-visible {
	outline: 2px solid var(--nl-navy);
	outline-offset: 2px;
}

/* ============================================================= */
/* Suggestion banner                                             */
/* ============================================================= */
/* In-flow bar at the very top of <body>: pushes content down, never overlays.
   Inner content follows the site's 1200px boxed layout. Kept compact. */
.nect-ls-banner {
	--nl-navy: #070A19;
	--nl-green: #50FFBA;
	--nl-border: rgba(7, 10, 25, 0.12);
	--nl-hover: rgba(7, 10, 25, 0.05);
	--nl-muted: #6b7280;

	position: relative;
	width: 100%;
	z-index: 1200;
	border-bottom: 1px solid var(--nl-border);
	background: #ffffff;
	font-family: inherit;
	color: #343641;
}
.nect-ls-banner[hidden] {
	display: none;
}
.nect-ls-banner__inner {
	max-width: 1200px; /* matches the site's boxed content width */
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 24px; /* compact */
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.24s ease, transform 0.24s ease;
}
.nect-ls-banner.is-visible .nect-ls-banner__inner {
	opacity: 1;
	transform: translateY(0);
}
.nect-ls-banner__icon {
	color: var(--nl-navy);
	flex: none;
	display: inline-flex;
}
.nect-ls-banner__text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--nl-navy);
}
.nect-ls-banner__actions {
	flex: none;
	display: flex;
	gap: 14px;
	align-items: center;
}
/* Text buttons, not filled boxes: keeps the hint bar quiet and avoids visual
   competition with the "Deutsch" switcher and "Nutzersupport" button in the nav.
   Primary = navy + weight; secondary = muted. */
.nect-ls-banner__confirm {
	display: inline-flex;
	align-items: center;
	padding: 6px 2px;
	min-height: 32px;
	background: transparent;
	color: var(--nl-navy);         /* primary action */
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
	touch-action: manipulation;
	transition: color 0.15s ease;
}
.nect-ls-banner__confirm:hover {
	color: var(--nl-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nect-ls-banner__dismiss {
	display: inline-flex;
	align-items: center;
	padding: 6px 2px;
	min-height: 32px;
	border: 0;
	background: transparent;
	color: var(--nl-muted);        /* secondary, sits back */
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 6px;
	touch-action: manipulation;
	transition: color 0.15s ease;
}
.nect-ls-banner__dismiss:hover {
	color: var(--nl-navy);
}
.nect-ls-banner__dismiss:hover {
	background: var(--nl-hover);
}

/* --- Reduced motion: collapse all transitions to instant --- */
@media (prefers-reduced-motion: reduce) {
	.nect-ls__trigger,
	.nect-ls__caret,
	.nect-ls__panel,
	.nect-ls__item,
	.nect-ls__more-toggle,
	.nect-ls__more-caret,
	.nect-ls-banner__inner,
	.nect-ls-banner__confirm {
		transition: none !important;
	}
}

/* --- Small screens: banner wraps its actions, panel stays reachable --- */
@media (max-width: 600px) {
	.nect-ls-banner__inner {
		flex-wrap: wrap;
		padding: 10px 16px;
		gap: 10px;
	}
	.nect-ls-banner__text {
		flex: 1 1 100%;
	}
	.nect-ls__panel {
		min-width: 200px;
	}
}

/* Touch devices: restore comfortable 44px targets in the dropdown. */
@media (max-width: 600px), (pointer: coarse) {
	.nect-ls__item,
	.nect-ls__more-toggle {
		min-height: 44px;
		padding-top: 9px;
		padding-bottom: 9px;
	}
}

/* =================================================================
 * THEME HARDENING
 * The switcher renders inside the Elementor header, whose theme sets
 * its own display font (Fester), link colours (red/green), button
 * backgrounds and focus rings. These rules — source-order last,
 * scoped, with !important only on the contested properties — keep the
 * component matching its approved design. No extra shadows/glows.
 * ================================================================= */

/* 1. Inter everywhere in the component (never the heading font). */
.nect-ls,
.nect-ls *,
.nect-ls-banner,
.nect-ls-banner * {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* 2. Trigger: white pill, navy text, subtle border, inline — in every state. */
.nect-ls .nect-ls__trigger,
.nect-ls .nect-ls__trigger:hover,
.nect-ls .nect-ls__trigger:focus,
.nect-ls .nect-ls__trigger:active,
.nect-ls.is-open .nect-ls__trigger {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	max-width: none !important;
	background: var(--nl-surface) !important;
	color: var(--nl-navy) !important;
	border: 1px solid var(--nl-border) !important;
	border-radius: var(--nl-radius-item) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
}
.nect-ls .nect-ls__trigger:hover {
	border-color: var(--nl-border-strong) !important;
	background: var(--nl-hover) !important;
}
.nect-ls .nect-ls__trigger .nect-ls__current {
	/* Trigger label uses the nav's display font (Fester); the dropdown stays Inter. */
	font-family: "Fester", var(--e-global-typography-primary-font-family), sans-serif !important;
	color: var(--nl-navy) !important;
	font-weight: 600 !important;
}
.nect-ls .nect-ls__globe { color: var(--nl-navy) !important; }
.nect-ls .nect-ls__caret { color: var(--nl-muted) !important; }

/* 3. Rows: non-current de-emphasised (regular), current active (semibold navy). */
.nect-ls .nect-ls__item {
	display: flex !important;
	align-items: center !important;
	color: #565b6b !important;
	font-weight: 400 !important;
	font-size: 14.5px !important;
	text-decoration: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.nect-ls .nect-ls__item:hover,
.nect-ls .nect-ls__item:focus,
.nect-ls .nect-ls__item:focus-visible {
	color: var(--nl-navy) !important;
	background: var(--nl-hover) !important;
}
.nect-ls .nect-ls__item .nect-ls__name { color: inherit !important; font-weight: inherit !important; }
.nect-ls .nect-ls__item.is-current { color: var(--nl-navy) !important; }
.nect-ls .nect-ls__item.is-current .nect-ls__name { font-weight: 600 !important; }
.nect-ls .nect-ls__check { color: var(--nl-navy) !important; }

/* 4. Suggested pill keeps accent fill + navy text. */
.nect-ls .nect-ls__suggested-pill {
	background: var(--nl-green) !important;
	color: var(--nl-navy) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
}

/* 5. "Show more" toggle: navy, regular weight, transparent. */
.nect-ls .nect-ls__more-toggle,
.nect-ls .nect-ls__more-toggle:hover,
.nect-ls .nect-ls__more-toggle:focus {
	color: var(--nl-navy) !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 600 !important; /* semibold, matches the trigger label */
	text-decoration: none !important;
	box-shadow: none !important;
}
.nect-ls .nect-ls__more-toggle:hover { background: var(--nl-hover) !important; }
.nect-ls .nect-ls__more-toggle .nect-ls__more-label { color: var(--nl-navy) !important; }
.nect-ls .nect-ls__more-caret { color: var(--nl-muted) !important; }

/* 6. Flags: fixed size, softly rounded, delicate border — not the theme's img styling. */
.nect-ls .nect-ls__flag {
	width: 20px !important;
	height: 15px !important;
	min-width: 20px !important;
	border: 1px solid rgba(7, 10, 25, 0.12) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	object-fit: cover !important;
	max-width: none !important;
}

/* 7. Focus: subtle and non-jumping. The trigger keeps its persistent border and
 *    gets an inset ring on focus (no size jump). List rows and the toggle use a
 *    full-width highlight instead of an offset outline box overlapping the text. */
.nect-ls .nect-ls__trigger:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 2px var(--nl-navy) !important;
}
.nect-ls .nect-ls__item:focus-visible,
.nect-ls .nect-ls__more-toggle:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: var(--nl-hover) !important;
}

/* 8. Banner text buttons keep their colours over theme link styles. */
.nect-ls-banner .nect-ls-banner__confirm { color: var(--nl-navy) !important; background: transparent !important; text-decoration: none !important; }
.nect-ls-banner .nect-ls-banner__dismiss { color: var(--nl-muted) !important; background: transparent !important; }
.nect-ls-banner .nect-ls-banner__text { color: var(--nl-navy) !important; }

/* 9. Mobile / off-canvas menu: the switcher fills the menu width and stacks
 *    full-width with the neighbouring button; the trigger gets a midnight (navy)
 *    border like that button; the dropdown is a rounded card with rounded rows
 *    and a rounded "show more" — full width, but not square edges. */
@media (max-width: 1024px) {
	.elementor-widget-shortcode:has(.nect-ls),
	.elementor-widget-shortcode:has(.nect-ls) > .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Make the switcher's cell (and its neighbour) take the full menu width.
	 * The parent gets the `nect-ls-stack` class from JS (stable, unlike a live
	 * :has() on the parent which some browsers re-evaluate on DOM changes and
	 * caused the trigger to resize when "show more" was toggled). */
	.nect-ls-stack {
		flex-wrap: wrap !important;
		row-gap: 12px !important;
	}
	.nect-ls-stack > * {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.nect-ls {
		display: block !important;
		width: 100% !important;
	}
	/* All states incl. :focus/:active/.is-open — otherwise the hardening's
	 * width:auto for those states wins by specificity and the trigger shrinks
	 * the moment the dropdown opens. */
	.nect-ls .nect-ls__trigger,
	.nect-ls .nect-ls__trigger:hover,
	.nect-ls .nect-ls__trigger:focus,
	.nect-ls .nect-ls__trigger:active,
	.nect-ls.is-open .nect-ls__trigger {
		width: 100% !important;
		min-height: 52px !important;
		justify-content: space-between !important;
		background: var(--nl-surface) !important; /* no jumpy tap-hover fill */
		border: 1px solid var(--nl-navy) !important; /* midnight contour, like the neighbouring button */
		border-radius: 12px !important;
	}
	.nect-ls .nect-ls__panel {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-top: 8px !important;
		border: 1px solid var(--nl-border) !important;
		border-radius: 14px !important;
		box-shadow: 0 8px 24px rgba(7, 10, 25, 0.10) !important;
		padding: 6px !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.nect-ls .nect-ls__more { width: 100% !important; }
	.nect-ls .nect-ls__list { gap: 2px !important; }
	/* Rows and toggle: rounded, consistent, full inner width. */
	.nect-ls .nect-ls__item,
	.nect-ls .nect-ls__more-toggle {
		width: 100% !important;
		box-sizing: border-box !important;
		border-radius: 10px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.nect-ls .nect-ls__more-toggle { margin: 6px 0 0 0 !important; }
}

/* 11. Desktop: the "show more" toggle spans the FULL panel width as a footer band.
 *     The panel has 6px inner padding, so negative side/bottom margins cancel it;
 *     panel overflow:hidden clips the band's bottom corners to the panel radius.
 *     (Mobile already renders full-width bands with zero panel padding.) */
@media (min-width: 1025px) {
	.nect-ls .nect-ls__panel {
		overflow: hidden !important;
	}
	.nect-ls .nect-ls__more-toggle {
		margin: 6px -6px -6px -6px !important;
		width: calc(100% + 12px) !important;
		padding-left: 18px !important;  /* line text up with the inset rows (6 panel + 12 row) */
		padding-right: 18px !important;
		border-radius: 0 !important;
		background: transparent !important;
	}
	.nect-ls .nect-ls__more-toggle:hover {
		background: var(--nl-hover) !important;
	}
}

/* 12. Multi-column "mega" dropdown (desktop only). All languages in a grid,
 *     no "show more". Order stays DE, EN, priority, then the rest.
 *     At <=1024px the grid collapses to the normal single-column mobile list. */
@media (min-width: 1201px) {
	.nect-ls--mega .nect-ls__panel {
		min-width: 480px !important;
		max-width: min(660px, calc(100vw - 32px)) !important;
		padding: 8px !important;
	}
	.nect-ls--mega .nect-ls__list {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
		gap: 2px 6px !important;
	}
}
/* Narrower desktop / small laptop: two columns. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.nect-ls--mega .nect-ls__panel {
		min-width: 340px !important;
		max-width: min(480px, calc(100vw - 32px)) !important;
		padding: 8px !important;
	}
	.nect-ls--mega .nect-ls__list {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
		gap: 2px 6px !important;
	}
}