/**
 * Site-specific presentation for the exact-equivalent language control.
 *
 * Elementor renders the standalone reciprocal link as a separate child of the
 * reviewed header root, between the nav and CTA containers. The :has() guard
 * proves that child actually rendered before hiding the original menu fallback.
 * Browsers without :has() support keep the standalone node hidden and retain
 * the original language link.
 */

.wpr-nav-menu > .vlm-menu-language-switcher > a.wpr-menu-item {
	padding-right: 2px !important;
	padding-left: 2px !important;
	white-space: nowrap;
}

/*
 * Restore comfortable English navigation spacing only after the standalone
 * sibling exists. The compact 0.4.19 fallback therefore remains safe if the
 * header hook or :has() support is unavailable.
 */
body.vlm-ltr .elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
	> .elementor-element.elementor-element-cb0b8a1
	> .elementor-element.elementor-element-2a0e0ed
	.wpr-nav-menu > .menu-item.menu-item-has-children > a.wpr-menu-item {
	padding-right: 28px !important;
	padding-left: 14px !important;
	white-space: nowrap;
}

body.vlm-ltr .elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
	> .elementor-element.elementor-element-cb0b8a1
	> .elementor-element.elementor-element-2a0e0ed
	.wpr-nav-menu > .menu-item:not(.vlm-menu-language-switcher):not(.menu-item-has-children) > a.wpr-menu-item {
	padding-right: 14px !important;
	padding-left: 14px !important;
	white-space: nowrap;
}

body.vlm-ltr .elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
	> .elementor-element.elementor-element-cb0b8a1
	> .elementor-element.elementor-element-2a0e0ed
	.wpr-nav-menu > .menu-item.menu-item-has-children > a.wpr-menu-item > .wpr-sub-icon {
	left: auto !important;
	right: 8px !important;
	margin-left: 0 !important;
}

.vlm-header-language-switcher {
	display: none;
}

/*
 * Keep the integer Elementor breakpoint as the compatibility path, and add
 * its strict greater-than equivalent for fractional CSS viewports. Elementor
 * emits max-width: 767px and min-width: 768px, so values between them would
 * otherwise expose neither the phone fallback nor the separate control.
 */
@media (min-width: 768px), (width > 767px) {
	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .elementor-element.elementor-element-cb0b8a1
		> .elementor-element.elementor-element-2a0e0ed
		.vlm-menu-language-switcher {
		display: none !important;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 44px;
		width: 44px;
		min-width: 44px;
		max-width: 44px;
		align-self: center;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher > a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		box-sizing: border-box;
		padding: 0;
		border: 2px solid #1e2f22;
		border-radius: 50%;
		background: #eac486;
		color: #1e2f22;
		font-family: "Montserrat", sans-serif;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		box-shadow: none;
		transition: background-color 160ms ease, color 160ms ease;
	}

	body.vlm-ltr
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher > a > span[lang="ar"] {
		font-family: Arial, Tahoma, sans-serif;
		font-size: 12px;
		letter-spacing: 0;
		line-height: 1;
		white-space: nowrap;
		unicode-bidi: isolate;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher > a:hover {
		background: #1e2f22;
		color: #eac486;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher > a:focus-visible {
		outline: 3px solid #1e2f22;
		outline-offset: 3px;
	}
}

/*
 * Bridge only Elementor's uncovered fractional interval. These are the exact
 * three effective tablet declarations needed at 768px: the reviewed logo and
 * nav container widths plus the existing tablet-hidden CTA. Everything else
 * continues to come from Elementor's max-width: 1024px rules.
 */
@media (767px < width < 768px) {
	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .elementor-element.elementor-element-acd898e {
		--width: 25% !important;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .elementor-element.elementor-element-cb0b8a1 {
		--width: 60% !important;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .elementor-element.elementor-element-e8851a7 {
		display: none !important;
	}
}

/*
 * A fourth root child needs 48px more room at the tight desktop breakpoint.
 * Reduce only the reviewed nav container; logo and CTA geometry stay untouched.
 */
@media (min-width: 1025px) and (max-width: 1366px) {
	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .elementor-element.elementor-element-cb0b8a1 {
		--width: calc(44.43% - 48px) !important;
		width: calc(44.43% - 48px) !important;
		max-width: calc(44.43% - 48px) !important;
		flex: 0 0 calc(44.43% - 48px) !important;
	}
}

/*
 * The reviewed English menu needs 330px to keep both dropdowns and Blog on
 * one line. Resize only its inline width; the inherited column-axis flex value
 * must remain untouched so nav, CTA and root height do not expand.
 */
@media (min-width: 1025px) {
	body.vlm-ltr
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .elementor-element.elementor-element-cb0b8a1
		> .elementor-element.elementor-element-2a0e0ed {
		--width: 330px !important;
		width: 330px !important;
		max-width: 330px !important;
	}
}

@media (min-width: 1367px) {
	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher {
		flex-basis: 52px;
		width: 52px;
		min-width: 52px;
		max-width: 52px;
	}

	body:is(.vlm-ltr, .vlm-rtl)
		.elementor-element.elementor-element-ccbf363:has(> .vlm-header-language-switcher)
		> .vlm-header-language-switcher > a {
		width: 52px;
		height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlm-header-language-switcher > a {
		transition: none !important;
	}
}