/*
 * Language switcher (Kudezign Studio Translate).
 *
 * Colours, size, offsets and position come from CSS custom properties that the
 * plugin prints from Kudezign Studio > Translate > Language switcher. Change the
 * settings there rather than editing this file.
 */

.kz-lang {
	position: fixed;
	z-index: var(--kz-lang-z, 9999);
	font-family: inherit;
	font-size: var(--kz-lang-size, 14px);
	line-height: 1.2;
	box-sizing: border-box;
}

.kz-lang *,
.kz-lang *::before,
.kz-lang *::after {
	box-sizing: border-box;
}

.kz-lang[data-pos$="left"] {
	left: var(--kz-lang-offset-x, 16px);
}

.kz-lang[data-pos$="right"] {
	right: var(--kz-lang-offset-x, 16px);
}

.kz-lang[data-pos^="top"] {
	top: var(--kz-lang-offset-y, 16px);
}

.kz-lang[data-pos^="bottom"] {
	bottom: var(--kz-lang-offset-y, 16px);
}

/* Align with the page content instead of the screen edge.
   --kz-lang-content-* is measured by lang-switcher.js from the first row. */
.kz-lang[data-align="content"][data-pos$="left"] {
	left: var(--kz-lang-content-left, var(--kz-lang-offset-x, 16px));
}

.kz-lang[data-align="content"][data-pos$="right"] {
	right: var(--kz-lang-content-right, var(--kz-lang-offset-x, 16px));
}

.kz-lang[data-align="content"][data-pos^="top"] {
	top: var(--kz-lang-content-top, var(--kz-lang-offset-y, 16px));
}

/* Stay clear of the WordPress admin bar when logged in (screen-corner mode). */
body.admin-bar .kz-lang[data-align="viewport"][data-pos^="top"] {
	top: calc(var(--kz-lang-offset-y, 16px) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .kz-lang[data-align="viewport"][data-pos^="top"] {
		top: calc(var(--kz-lang-offset-y, 16px) + 46px);
	}
}

/* Fade while the visitor scrolls; fully visible on hover, focus or open menu. */
.kz-lang {
	transition: opacity 0.25s ease;
}

.kz-lang.is-scrolled {
	opacity: 0.45;
}

.kz-lang.is-scrolled:hover,
.kz-lang.is-scrolled:focus-within,
.kz-lang.is-open {
	opacity: 1;
}

.kz-lang__menu {
	position: relative;
}

.kz-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.85em;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	color: var(--kz-lang-fg, #fff);
	background: var(--kz-lang-bg, #1f1d2b);
	border-radius: var(--kz-lang-radius, 12px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	user-select: none;
	white-space: nowrap;
}

.kz-lang__current::-webkit-details-marker {
	display: none;
}

.kz-lang__menu[open] > .kz-lang__current {
	color: var(--kz-lang-accent, #c7ccea);
}

.kz-lang__list {
	position: absolute;
	margin: 0;
	padding: 0.35em;
	list-style: none;
	min-width: max-content;
	color: var(--kz-lang-fg, #fff);
	background: var(--kz-lang-bg, #1f1d2b);
	border-radius: var(--kz-lang-radius, 12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.kz-lang[data-pos^="bottom"] .kz-lang__list {
	bottom: calc(100% + 0.4em);
}

.kz-lang[data-pos^="top"] .kz-lang__list {
	top: calc(100% + 0.4em);
}

.kz-lang[data-pos$="left"] .kz-lang__list {
	left: 0;
}

.kz-lang[data-pos$="right"] .kz-lang__list {
	right: 0;
}

.kz-lang__list a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.5em 0.75em;
	color: inherit;
	text-decoration: none;
	border-radius: calc(var(--kz-lang-radius, 12px) - 4px);
	white-space: nowrap;
}

.kz-lang__list a:hover {
	background: rgba(255, 255, 255, 0.12);
}

.kz-lang__list a[aria-current="true"] {
	color: var(--kz-lang-accent, #c7ccea);
	font-weight: 600;
}

.kz-lang a:focus-visible,
.kz-lang summary:focus-visible {
	outline: 2px solid var(--kz-lang-accent, #c7ccea);
	outline-offset: 2px;
}

.kz-lang__flag {
	display: block;
	width: auto;
	height: var(--kz-lang-flag-size, 24px);
	flex: 0 0 auto;
	object-fit: contain;
}

/* Responsive: smaller text and tighter offsets on phones. */
@media (max-width: 600px) {
	.kz-lang {
		font-size: var(--kz-lang-size-mobile, 12px);
	}

	.kz-lang__flag {
		height: var(--kz-lang-flag-size-mobile, 20px);
	}

	.kz-lang[data-pos$="left"] {
		left: calc(var(--kz-lang-offset-x, 16px) * 0.6);
	}

	.kz-lang[data-pos$="right"] {
		right: calc(var(--kz-lang-offset-x, 16px) * 0.6);
	}

	.kz-lang[data-pos^="top"] {
		top: calc(var(--kz-lang-offset-y, 16px) * 0.6);
	}

	.kz-lang[data-pos^="bottom"] {
		bottom: calc(var(--kz-lang-offset-y, 16px) * 0.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kz-lang,
	.kz-lang * {
		transition: none !important;
	}
}