/**
 * MTM English / Arabic Language Toggle
 *
 * Styles:
 * - Header language switch.
 * - Active and hover states.
 * - Keyboard accessibility.
 * - Arabic RTL presentation.
 * - Hidden Google Translate initialization element.
 *
 * @package MTM_Premium
 */

/* =========================================
   LANGUAGE SWITCH
========================================= */

.mtm-language-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	direction: ltr;
	flex-shrink: 0;

	white-space: nowrap;
	z-index: 20;
}

/* =========================================
   LANGUAGE BUTTONS
========================================= */

.mtm-language-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 7px 9px;

	border: 1px solid transparent;
	border-radius: 6px;

	background: transparent;

	color: inherit;

	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.2s ease;
}

/* Hover state */

.mtm-language-button:hover {
	background: rgba(255, 255, 255, 0.08);
	opacity: 0.9;
}

/* Active language */

.mtm-language-button.is-active {
	border-color: currentColor;
	background: rgba(255, 255, 255, 0.08);
	font-weight: 700;
}

/* Keyboard focus */

.mtm-language-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Language divider */

.mtm-language-divider {
	opacity: 0.5;
	font-size: 13px;
	user-select: none;
}

/* Arabic button typography */

.mtm-language-button[data-mtm-language="ar"] {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 14px;
}

/* =========================================
   GOOGLE TRANSLATE TARGET
========================================= */

/*
 * Keep the Google Translate element available
 * to its JavaScript while visually hiding it.
 *
 * Do not use display:none because the widget
 * needs to initialize its language selector.
 */

.mtm-google-translate {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;
	border: 0 !important;
}

/* Hide Google Translate banner */

.goog-te-banner-frame,
iframe.skiptranslate,
body > .skiptranslate {
	display: none !important;
}

/* Prevent Google's top offset */

html,
body {
	top: 0 !important;
}

/* Hide Google branding within the hidden widget */

.mtm-google-translate .goog-logo-link,
.mtm-google-translate .goog-te-gadget {
	font-size: 0 !important;
}

/* =========================================
   RTL DOCUMENT SUPPORT
========================================= */

html[dir="rtl"] {
	direction: rtl;
}

html[dir="rtl"] body {
	direction: rtl;
}

/* Header language switch remains left-to-right */

html[dir="rtl"] .mtm-language-switch {
	direction: ltr;
}

/* Primary navigation */

html[dir="rtl"] .primary-navigation {
	direction: rtl;
}

html[dir="rtl"] .main-menu {
	direction: rtl;
}

/* Header text alignment */

html[dir="rtl"] .site-header {
	text-align: right;
}

/* Common content alignment */

html[dir="rtl"] .entry-content,
html[dir="rtl"] .page-content,
html[dir="rtl"] .site-main {
	text-align: right;
}

/* Form controls */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
	direction: rtl;
	text-align: right;
}

/* =========================================
   RESPONSIVE HEADER SUPPORT
========================================= */

@media (max-width: 1024px) {

	.mtm-language-switch {
		gap: 6px;
	}

	.mtm-language-button {
		padding: 6px 7px;
		font-size: 12px;
	}

}

@media (max-width: 767px) {

	.mtm-language-switch {
		gap: 5px;
	}

	.mtm-language-button {
		padding: 6px;
		font-size: 12px;
	}

	.mtm-language-button[data-mtm-language="ar"] {
		font-size: 13px;
	}

}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

	.mtm-language-button {
		transition: none;
	}

}