/**
 * WEDOS Shortcode Translations - frontend language switcher.
 * Scoped under .wedos-sct-switcher so theme styles cannot easily leak in.
 */

.wedos-sct-switcher {
	--wsct-fg: #1d2327;
	--wsct-bg: #ffffff;
	--wsct-border: #d1d5db;
	--wsct-accent: #1e3a5f;
	--wsct-hover: #f3f4f6;
	--wsct-current: #eef3f9;

	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	color: var(--wsct-fg);
}
.wedos-sct-switcher *,
.wedos-sct-switcher *::before,
.wedos-sct-switcher *::after {
	box-sizing: border-box;
}

/* ---- Floating variant: fixed on the right edge ---- */

.wedos-sct-switcher.is-floating {
	position: fixed;
	z-index: 99990;
	/* top/right/bottom/left are set inline per user filter; defaults from PHP */
}
.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle {
	/* Rounded pill floating in the corner. Full border on all sides. */
	border-radius: 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	/* Collapsed default: tight pill showing only the language code.
	   The full language name is revealed when the toggle expands. */
	min-width: 0;
	padding: 10px 14px;
	gap: 6px;
}
.wedos-sct-switcher.is-floating .wedos-sct-switcher-current-name {
	/* Start hidden via 0 width rather than display:none, so expansion
	   animates smoothly instead of jumping. */
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	margin: 0;
	transition: max-width 180ms ease, opacity 120ms ease, margin 180ms ease;
}
.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle:hover .wedos-sct-switcher-current-name,
.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle[aria-expanded="true"] .wedos-sct-switcher-current-name {
	max-width: 180px;
	opacity: 1;
	margin-right: 2px;
}
/* Dropdown opens UPWARD because the pill lives at the bottom of the
   viewport. Without this the menu would fall off the screen. */
.wedos-sct-switcher.is-floating .wedos-sct-switcher-menu {
	top: auto;
	bottom: calc(100% + 6px);
	right: 0;
	border-radius: 8px;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.12);
}
/* Flip the caret so it points up when collapsed (menu appears above). */
.wedos-sct-switcher.is-floating .wedos-sct-switcher-caret {
	transform: rotate(180deg);
}
.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle[aria-expanded="true"] .wedos-sct-switcher-caret {
	transform: rotate(0deg);
}

/* ---- Inline variant ---- */

.wedos-sct-switcher.is-inline {
	display: inline-block;
	position: relative;
}
.wedos-sct-switcher.is-inline .wedos-sct-switcher-toggle {
	border-radius: 6px;
}
.wedos-sct-switcher.is-inline .wedos-sct-switcher-menu {
	right: auto;
	left: 0;
	border-radius: 6px;
	margin-top: 4px;
}

/* ---- Toggle button ---- */

.wedos-sct-switcher-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	margin: 0;
	background: var(--wsct-bg);
	border: 1px solid var(--wsct-border);
	font: inherit;
	color: var(--wsct-fg);
	cursor: pointer;
	min-width: 140px;
	transition: background 120ms, border-color 120ms;
}
.wedos-sct-switcher-toggle:hover {
	background: var(--wsct-hover);
}
.wedos-sct-switcher-toggle:focus-visible {
	outline: 2px solid var(--wsct-accent);
	outline-offset: 2px;
}
.wedos-sct-switcher-toggle[aria-expanded="true"] {
	background: var(--wsct-hover);
	border-color: var(--wsct-accent);
}

.wedos-sct-switcher-current-name {
	flex: 1;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}
.wedos-sct-switcher-current-code {
	padding: 2px 6px;
	background: var(--wsct-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 3px;
	white-space: nowrap;
}
.wedos-sct-switcher-caret {
	font-size: 10px;
	opacity: 0.6;
	transition: transform 150ms;
}
.wedos-sct-switcher-toggle[aria-expanded="true"] .wedos-sct-switcher-caret {
	transform: rotate(180deg);
}

/* ---- Menu ---- */

.wedos-sct-switcher-menu {
	position: absolute;
	top: 100%;
	margin: 0;
	padding: 4px 0;
	min-width: 100%;
	background: var(--wsct-bg);
	border: 1px solid var(--wsct-border);
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
}
.wedos-sct-switcher-menu[hidden] {
	display: none;
}

.wedos-sct-switcher-item {
	margin: 0;
	padding: 0;
}
.wedos-sct-switcher-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	color: var(--wsct-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: background 100ms;
}
.wedos-sct-switcher-item a:hover,
.wedos-sct-switcher-item a:focus-visible {
	background: var(--wsct-hover);
	outline: none;
}
.wedos-sct-switcher-item.is-current a {
	background: var(--wsct-current);
	font-weight: 600;
}
.wedos-sct-switcher-item-name {
	flex: 1;
}
.wedos-sct-switcher-item-code {
	font-size: 11px;
	font-weight: 700;
	color: #6b7280;
	letter-spacing: 0.5px;
}
.wedos-sct-switcher-item.is-current .wedos-sct-switcher-item-code {
	color: var(--wsct-accent);
}
.wedos-sct-switcher-item-check {
	color: var(--wsct-accent);
	font-weight: 700;
}

/* ---- Small screens: slightly tighter padding, disable name reveal on hover
   (touch devices don't have hover and tap should open the menu, not the name). */

@media (max-width: 600px) {
	.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle {
		padding: 9px 12px;
	}
	.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle:hover .wedos-sct-switcher-current-name {
		max-width: 0;
		opacity: 0;
		margin: 0;
	}
	.wedos-sct-switcher.is-floating .wedos-sct-switcher-toggle[aria-expanded="true"] .wedos-sct-switcher-current-name {
		max-width: 180px;
		opacity: 1;
		margin-right: 2px;
	}
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.wedos-sct-switcher-toggle,
	.wedos-sct-switcher-caret,
	.wedos-sct-switcher-item a {
		transition: none;
	}
}