/*
 * Global bilingual cascade: Arabic font scoping and the language-switcher
 * component. Deliberately small — RTL fixes specific to each plugin's own
 * UI live in that plugin's own -rtl.css, enqueued conditionally by that
 * plugin. This file only covers concerns that genuinely span the whole
 * site (font, the switcher itself).
 */

body.ccb-lang-ar {
	font-family: 'Cairo', 'Tajawal', -apple-system, 'Segoe UI', sans-serif;
}

/*
 * The theme hides dropdown submenus off-canvas via `left: -9999px` (or
 * similar) rather than display:none. In an LTR document that negative
 * offset sits outside the browser's scrollable range and is never
 * reachable. In RTL, the scroll origin flips: that same far-left position
 * becomes part of the page's horizontal scroll extent, producing a blank
 * scrollable strip the full height of the page. Clipping on html (not just
 * body — overflow set only on body can propagate to the viewport and stop
 * being enforced on body itself) closes that gap without touching the
 * submenu's own hide/show behavior.
 */
html[dir="rtl"] {
	overflow-x: hidden;
}

/*
 * The theme's own dropdown-submenu CSS computes that off-canvas hide
 * position with a value (observed: left: -15984px) that only makes sense
 * in LTR — in RTL it inflates the document's scrollable width by roughly
 * that many pixels, which shifts what `overflow-x: hidden` above ends up
 * clipping to and can crop real header content instead of the intended
 * off-canvas menu. Pinning the submenu to the parent item's own edge
 * removes the oversized box at the source rather than only hiding its
 * effects.
 */
html[dir="rtl"] .sub-menu {
	left: auto !important;
	right: 0 !important;
}

.ccb-language-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.875rem;
	line-height: 1;
}

.ccb-language-switcher__link {
	text-decoration: none;
	color: inherit;
	opacity: 0.65;
}

.ccb-language-switcher__link:hover,
.ccb-language-switcher__link:focus-visible {
	opacity: 1;
}

.ccb-language-switcher__link.is-active {
	opacity: 1;
	font-weight: 600;
}

.ccb-language-switcher__sep {
	opacity: 0.4;
}